Introducción a Gatsby

1

¿Por qué Gatsby? Seguridad y Velocidad

2

¿Qué es Gatsby?

3

Diferencias entre SPA, SSR y Gatsby

Preparando el entorno

4

Requisitos previos y herramientas de desarrollo

5

Gatsby y Gatsby CLI y Starters

6

Configuración de ESLint

Fundamentos de Gatsby

7

Presentación y Estructura de Archivos de nuestro proyecto: Platziswag

8

Ecosistema de plugins

9

Usando React para manejar la parte visual e interactiva de nuestra aplicación

Creando la vista con React

10

Router en Gatsby y Componente Link

11

Layout en Gatsby

Graphql en Gatsby

12

¿Cómo funciona GraphQL en Gatsby?

13

Accediendo a nuestros datos en Gatsby desde GraphQL

14

Queries, Edges (conexiones) y Nodos en Gatsby

15

Consultas en GraphQL desde React

Usando plugins en Gatsby

16

Instalación y configuración de plugins

17

Imágenes como fuente de datos

18

Plugins de transformación

19

Estilizando nuestros componentes con styled-components

20

Estilos Globales con styled-components

Stripe checkout

21

Introducción a la API de Stripe Checkout

22

Agregando productos a nuestra tienda en línea

23

Productos en React

Generando páginas programáticamente

24

Creando páginas en función de los datos

25

Manejo de Gatsby Templates

26

Terminando la Vista de Detalle de los Productos

27

StaticQuery vs. useStaticQuery

28

Construyendo el Carrito de Compras: useContext

29

Construyendo el Carrito de Compras: Vista

30

Construyendo el Carrito de Compras: Agregar productos al carrito

31

Comprando productos

Gatsby a producción

32

Gatsby build para compilar nuestro proyecto

33

Deploy a Netlify

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Instalación y configuración de plugins

16/33
Recursos

Vamos a usar el plugin gatsby-plugin-typography para manejar las fuentes de nuestro proyecto. Recuerda que este plugin nos ayuda a integrar la librería Typography.js, por lo que debemos instalar el plugin y la librería base.

Dato curioso: Esta librería fue creada por Kyle Mathews, uno de los creadores y desarrolladores de Gatsby.

Instalación:

npm install gatsby-plugin-typography react-typography typography

Configuración:

// gatsby-config.js
module.exports = {
  siteMetadata: { /* ... */ },
  plugins: [
    /* ... */
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    }
    /* ... */
  ],
};
// src/utils/typography.js
import Typography from 'typography';

const typography = new Typography({
  baseFontSize: "18px",
  baseLineHeight: 1.666,
  headerFontFamily: ["Lato", "Helvetica Neue", "Arial"],
  bodyFontFamily: ["Open Sans", "Roboto", "Georgia"],
});

export default typography;

Con esta configuración asignamos tamaños y fuentes personalizadas diferentes para nuestros elementos. Los estilos cambiarán dependiendo de dónde estén: Todos los elementos dentro del <body> usarán Open Sans, pero los elementos del <header> tendrán estilos diferentes y la fuente será Lato.

Aportes 15

Preguntas 5

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Si hicieron toda la configuracion igual a profresor y ven que no se cambia el estilo de las letras, esto es debido al efecto cascada de css, debido a que el typography se carga primero y el layout.css despues. Para corregirlo tienen que quitar todos los font-family de layout.css

Me parece que las fuentes pintadas no son las que estamos requiriendo. Sobre todo la open Sans, es sans-serif, pero me parece que se está renderizando una serif que se parece más a Times

Si les da error instalando Typography por la versión de Gatsby, pueden forzar la instalación así:

npm install gatsby-plugin-typography react-typography typography --force

Si estás aquí y no te funcionan los estilos, es porque estamos sobreescribiendolos en otro archivo de CSS el cual está en:
src/components/layout.css

Quitarle el font-family a todos los headers y demás

Los plugins son herramientas de ayuda para el desarrollo de Gatsby no permite y facilita el entorno de trabajo… Existen diversos plugins en gatsby… son intalado por default por npm pero tambien son combatible con yarn

Instalación y configuración de plugins

Usaremos el plugin de typography. Nos ayudará a llevar distintas fuentes a nuestro sitio sin necesidad de CSS. Los plugins son módulos de NPM.

Instalamos typography con npm install gatsby-plugin-typography react-typography typography

Luego lo agregamos al archivo ‘gatsby-config.js’:

plugins:[
  {
    resolve: `gatsby-plugin-typography`,
    options: {
      pathToConfigModule: 'src/utils/typography.js', //Creamos este archivo
    }
  }
]

Y el archivo de typography.js:

import Typography from "typography";

const typography = new Typography({
  baseFontSize: "18px",
  baseLineHeight: 1.666,
  headerFontFamily: [
    'Lato',
    'Helvetica Neue',
    'Arial'
  ],
  bodyFontFamily: [
    'Open Sans',
    'Roboto',
    'Georgia'
  ],
});

export default typography;

¿Es obligatorio para todos los strings usar template literals en el archivo gatsby-config.js?

como se puede descargar información de mysql con gatsby e incluirlo en graphql para luego importarlo en la vista?

Creo que este video debío estar en el principio entre 9 y 10

Los comandos de instalacion son iguales, por si te lo preguntabas. (Plugins y Docs). (y)

Todo esto está genial pero… ¿para que salgan las fuentes que le hemos puesto? Porque sí aparece cargado el typography pero las fuentes de la app no cambian… ¿?
Aparte… en mi Footer no hay espacios entre palabras… ¿?
¿A qué se puede deber todo esto?

De donde coge Typography las fuentes que va a usar? Donde estarían almacenadas?

El CSS no está tomando la typografía que elegí, y lo configuré bien!

import Typography from "typography"

const typography = new Typography({
  baseFontSize: "18px",
  baseLineHeight: 1.666,
  headerFontFamily: ["Gotham", "Lato", "Helvetica Neue", "Arial"],
  bodyFontFamily: ["Gotham", "Roboto", "Georgia"],
})

export default typography

{
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography.js`,
      },
    },

Por lo que pude encontrar, cambié las fuentes y creo que no lee “Lato” ni “Roboto”, al final sólo está leyendo Arial, desconozco el porque, pero lo averiguaré, de la manera que me funciona a que se vea Arial es:

import Typography from "typography"

const typography = new Typography({
  baseFontSize: "18px",
  baseLineHeight: 1.666,
  headerFontFamily: ["Lato", "Helvetica Neue", "Arial"],
  bodyFontFamily: ["Lato", "Helvetica Neue", "Arial"],
})

export default typography

Al momento de instalar Typography tuve un error que me tumbo toda la pagina, si les pasa lo mismo les recomiendo ejecutar la siguiente instrucción

npm install --save styled-components

y después levantar el servidor