Creando un blog con GatsbyJS, Material Design y Contentful — Parte 2
Integración con Material Design
Toca una parte interesante y que quizá pueda causar un poco de polémica para los puristas, haremos lo siguiente (para aclarar cualquier punto, porque antes por hacer esto he recibido comentarios negativos).
Lo más importante para el desarrollo de cualquier aplicación (según mi opinión) es el performance y el diseño, y para lograrlo usaremos sass junto con emotion.
No daré muchos argumentos, pero dada la naturaleza de Material Design y la modularidad de la misma, es ampliamente recomendable que se haga por medio de sass, esto maximará el performance, dado que tomaremos solamente los estilos y componentes que necesitemos.
La primera parte se encuentra en el siguiente enlace:
Partes del tutorial
- Instalación de plugins de gatsby, emotion y sass.
- Integración con Material Design y prueba de un componente.
Instalación y configuración de plugins
Vamos acceder a la página de plugins de gatsby e instalaremos el siguiente:
https://www.gatsbyjs.org/plugins/
El nombre del mismo es gatsby-plugin-sass y también necesitaremos instalar autoprefixer , una utilidad que añadirá compatibilidad con versiones antiguas de distintos navegadores, entre otras cosas.
$ npm install --save gatsby-plugin-sass autoprefixer node-sassAhora instalaremos emotion utilizando el plugin gatsby-plugin-emotion .
$ npm install --save gatsby-plugin-emotion @emotion/core @emotion/styledA continuación añadiremos unas cuantas líneas al archivo ./gatsby-config.js
// en la primera línea de código escribremos:
const autoprefixer = require('autoprefixer');
...
...
...// En nuestro array de plugins añadiremos:
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
{
resolve: 'gatsby-plugin-sass',
options: {
postCssPlugins: [autoprefixer()],
precision: 8,
includePaths: ['src/styles', 'node_modules'],
},
},
{
resolve: 'gatsby-plugin-emotion',
options: {
sourceMap: true,
labelFormat: '[local]',
cssPropOptimization: true,
},
},
...
Ahora vamos a agregar un pequeño archivo, que ayudará a autoprefixer a saber qué versiones de los navegadores tendrá que utilizar, puedes checar la documentación en el siguiente enlace:
https://autoprefixer.github.io
Creamos un archivo en la raiz de nuestro proyecto, que llevará por nombre: .browserslistrañadiremos una línea de código.
last 5 versionsListo, hemos instalado, ahora solo tenemos que añadir un componente de react.
Integración con Material Design
Los invito a navegar por la página oficial de material design (nosotros usaremos la librería oficial) a parte de tener una documentación muy buena, es muy modular, y eso nos da muchas ventajas como antes había mencionado.
Vamos a utilizar el wrapper oficial de React, cuyo nombre es: Material Components for React, así como aparece en la siguiente captura.
Para hacer un poco mejor y más efectivo este tutorial, vamos a instalar directamente, utilzaremos el componente layout-grid.
En la documentación aparece como utilizar ese componente, por lo que primero tenemos que instalarlo (una de las ventajas es que solamente tenemos que instalar un componente, dado que hay otros wrappers como rmwc.io en los cuales necesita instalar a parte los estilos).
$ npm install --save @material/react-layout-gridAhora vamos a hacer lo siguiente, añadiremos la siguiente estructura de carpetas:
+ src/
+ styles/
+ sass-components/
+ emotion-components/ Vamos a crear un archivo dentro de sass-components que se llamará layout-grid.scss que contendrá lo siguiente:
@import '@material/react-layout-grid/index';Esto nos permitirá hacerle modificaciones al componente de forma muy modular, y utilizar los mixins que material tiene para nosotros y facilitarnos el trabajo.
Este estilo se volverá parte de todo nuestro blog, por lo que lo pondremos en ./src/components/layout.jsx añadiendo la siguiente importación y eliminando los estilos anteriores, nuestro componente layout quedará de la siguiente forma.
import React from 'react';
import PropTypes from 'prop-types';
import { useStaticQuery, graphql } from 'gatsby';import Header from './header';
import '../styles/sass-components/layoud-grid.scss';
Es importante que eliminemos los archivos que no ocuparemos más, en este caso layout.css .
Modificaremos un poco nuestro componente, quedará como aparece en la siguiente línea.
return (
<>
<Header siteTitle={data.site.siteMetadata.title} />
{children}
</>
);Corremos el servidor para ver el resultado (en estos momentos todo debe de estar un poco desordenado).
Ahora vamos a añadir unas cuantas líneas a ./src/pages/index.jsx
Primero, importaremos el componente de react, añadiendo la siguiente línea:
import { Cell, Grid, Row } from '@material/react-layout-grid';Siguiendo la documentación:
Envolvemos nuestra actual index, en nuestro Grid > Row > Cell, considerando que tomaremos todo el ancho, osea que tenemos que añadir la prop -> columns={12}, quedando de la siguiente forma.
Checamos nuestro servidor.
Ahora necesitamos corregir el error que tienen los márgenes externos.
Antes ya habíamos instalado emotion, ahora inyectaremos un estilo global en nuestra aplicación para corregir el margen.
Importamos las librerías necesarias, agregando al archivo ./src/components/layout.jsx la siguiente línea.
// layout.jsx
...
import { Global, css } from '@emotion/core';Añadimos dentro de nuestro componente, arriba de Header lo siguiente:
<Global
styles={css`body { margin: 0; }`}
/>Nuestro componente debe de quedar de la siguiente forma:
Checamos los cambios realizados.
Vamos a jugar un poco con Material y Emotion para la próxima parte del tutorial. Por el momento es todo, espero te haya gustado, puedes dejar tus comentarios en la caja de comentarios.
Recueda que el repositorio del tutorial está en el siguiente enlace:
