Crear una base de conocimientos con Gatsby, Contentful y AWS

Así que, hola al Masterclass de construcción de una base de conocimientos utilizando Gatsby, Contentful y AWS. Mi nombre es Abderrahman Aedel. Soy un arquitecto de soluciones en Rangle. Y hoy seré tu guía en este masterclass.

En Rangle, creamos cosas que importan. Creemos en hacer lo correcto, de la manera correcta, y luego mejorarlo. Hemos estado en Toronto y Amsterdam. Desde hace más de nueve años, fundamos en 2013, y tenemos más de 150 miembros en nuestro equipo. Servimos a muchos clientes que están construyendo sus propias capacidades de creación de productos a través de inmersión y sistemas de habilitación.

Hoy vamos a construir una base de conocimientos utilizando Gatsby, Contentful y AWS. Esta es una tabla de contenido de lo que vamos a hacer. Dado que la mayoría de lo que vamos a hacer es codificación en vivo, voy a intentar ir sobre esto muy rápido al principio, y luego podemos pasar directamente al código.

Primero, vamos a entender qué es una base de conocimientos y por qué elegimos una base de conocimientos en lugar de un blog normal o un sitio web de noticias o algo así. Una base de conocimientos es una biblioteca en línea de autoservicio. Es un lugar donde se almacenan todos los datos y el conocimiento, todo lo que tienes, ya sea para ayudar a los miembros del equipo o a los clientes.

Por ejemplo, si eres una empresa y quieres tener un lugar donde los nuevos empleados puedan ingresar cuando se unan y entender cómo funciona el proceso de incorporación, cómo funciona la comunicación, o algo así, puedes tener una base de conocimientos en su lugar. Si eres una empresa que brinda servicios a clientes y quieres documentar todo lo que deseas en un solo lugar, en lugar de que todos tengan preguntas y pidan servicio al cliente, simplemente puedes crear una base de conocimientos o un centro de ayuda o un lugar donde puedas hacer doble clic en una página y puedes poner todas las preguntas frecuentes y artículos y puedes ponerlos en categorías y cosas así o guías de solución de problemas. Y sí, el cliente o los miembros del equipo simplemente se unirían, ingresarían y encontrarían la respuesta correcta a la pregunta en lugar de molestarte con múltiples preguntas.

Hoy vamos a construir una página de inicio, una página de categorías y una página para cada categoría, y para cada categoría tendremos una serie de artículos que también tendrán una página de contenido enriquecido.

Primero, hablemos de cómo se renderizan los sitios web, porque el concepto de los generadores de sitios estáticos es muy nuevo, o no nuevo, pero mucha gente no sabe cómo funcionan los generadores de sitios estáticos. Así que vamos a empezar desde el principio. ¿Cómo se renderizan los sitios web? Al principio, cuando salió Internet, solo había una forma de renderizar los sitios web, así que se llamaba renderización en el lado del servidor. Bueno, no había un nombre porque era la única forma de hacerlo, donde tienes un servidor y el cliente o el usuario escribe la URL en el navegador y luego envía una solicitud HTTP a un servidor, que hace la magia, genera una página HTML completa con todo lo que necesitarías, y luego lo envía de vuelta al navegador donde el navegador pegaría el HTML y lo renderizaría en el navegador.

Y luego, cada vez que quieres cambiar a otra página, como si estás en la página de inicio y quieres ir a la ayuda o algo así, harías clic en un enlace, en una etiqueta a, que enviaría otra solicitud HTTP, obtendría todo el HTML del servidor y luego reemplazaría todo con este nuevo HTML. El servidor utiliza plantillas para generar dinámicamente páginas HTML completas. Por ejemplo, si tienes un sitio web PHP y envías una solicitud GET a esta página, se manejará y luego se colocarán todas las variables o los datos reales en una plantilla HTML y luego se enviará de vuelta al navegador.

Y después de un tiempo, surgió un nuevo concepto llamado renderización en el lado del cliente. Surgió generalmente con aplicaciones de una sola página o con la generación de envío de solicitudes de API. Aún tienes un cliente y un servidor y luego envías la primera llamada de API al servidor y luego obtienes una página HTML vacía con un montón de scripts de JavaScript adjuntos a ella y luego el cliente o el navegador lo tomaría y daría el control de JavaScript para obtener todo lo que necesitas del servidor con solicitudes de API y luego manipular directamente el DOM o el HTML en la página. Así que en lugar de tener todo enviado de vuelta como antes, ahora obtienes una página HTML de marcador de posición muy vacía que no tiene nada significativo, solo un montón de scripts y luego estos scripts se hacen cargo y generan el HTML real.

Como puedes ver aquí, el cliente renderiza la página vacía y JavaScript renderiza el contenido más tarde. Y si lo miras desde algunos aspectos como el tiempo de renderización, el tiempo de renderización aquí es inconsistente porque el cliente es en realidad el que hace el trabajo real, mientras que con múltiples clientes hay múltiples rendimientos, como si tienes una PC de alta gama es diferente a tener un teléfono móvil de gama muy baja. Y para el SEO, la optimización de motores de búsqueda, fue muy mala cuando salió porque los rastreadores antes de esto, como el rastreador de motores de búsqueda y los rastreadores son como un montón de scripts que los motores de búsqueda utilizan para rastrear la web y archivar sus datos para que cuando busques algo lo tengas todo allí. Entonces, el rastreador iría a un enlace y obtendría una página HTML vacía y no encontraría contenido significativo en ella y de esta manera obtendrías una página vacía que no se archivaría o sería muy mala para el ranking de SEO. Después de un tiempo, muchos rastreadores o muchos motores de búsqueda se adaptaron, pero no fue tan rápido y no funcionaba al 100% hasta hace poco, supongo. El tiempo de compilación fue muy rápido y el almacenamiento en caché solo ocurría en el lado del cliente porque sí, como solo obtienes la misma página cada vez, no hay almacenamiento en caché que pueda ocurrir, pero el cliente estaba almacenando en caché las solicitudes de API en el cliente, depende de cómo lo configures, por supuesto, pero normalmente lo almacenaría en caché pero no lo haría. Y para solucionar este problema, principalmente con el SEO, surgió un nuevo concepto que es una mezcla de la primera cosa, que es la renderización en el lado del servidor y la segunda cosa, la renderización en el lado del cliente. Entonces, para aplicaciones de una sola página, cada vez que envías la primera llamada de API, lo siento, la primera solicitud HTTP en lugar de tener una página HTML muy vacía enviada a ti, tendrías como que el servidor haría la primera renderización como si estuviera sucediendo en el cliente y luego te enviaría la página HTML completa donde el cliente la renderizaría y luego sucedería algo llamado rehidratación donde rehidratarías el estado y funcionarías como una aplicación de una sola página normal. Entonces, JavaScript aún se haría cargo, pero de esta manera, si un rastreador de motores de búsqueda entra en una página como esta, obtendrías todo lo que necesita desde el primer momento, algo diferente. Algunos aspectos de esto son que el tiempo de renderización era lento, por supuesto, más lento porque el servidor aún generaría el HTML o como renderizaría la primera renderización en el tiempo de ejecución, pero esto solucionó el problema porque el rastreador obtendría la página HTML completa. El tiempo de compilación fue rápido porque sí, sigue siendo igual que el de la renderización en el lado del cliente y el almacenamiento en caché se podía hacer en esta etapa utilizando un tercero como Cloudflare y algunos frameworks lo agregaron más tarde, pero no está ahí de serie. Y esto estuvo bien hasta que los sitios web impulsados por contenido se hicieron muy famosos.

Entonces, ¿qué es un sitio web impulsado por contenido? Un sitio web impulsado por contenido es cualquier sitio web en el que principalmente el objetivo principal sea proporcionar contenido en lugar de tener muchas tareas en él. No es un panel de control o una aplicación de redes sociales, no es una aplicación web, sino un sitio web que tiene mucho contenido que principalmente es texto enriquecido, como imágenes y cosas así, como un blog, un sitio web de noticias, un sitio web de una empresa, sitios web de marketing o una base de conocimientos.

Cuando los sitios web impulsados por contenido tuvieron los generadores de sitios estáticos, surgieron.

Entonces, ¿qué es un generador de sitios estáticos? Aún tenemos un cliente y un servidor. Pero algo sucede en el servidor, incluso antes de que solicites la llamada. Solicitas la solicitud HTTP. Entonces, lo que sucede es que haces todo como una aplicación de una sola página normal, pero en lugar de obtener los datos y renderizarlos en el tiempo de ejecución, lo haces en el tiempo de compilación. Entonces, el generador del lado del servidor, el generador de sitios estáticos, tomaría todas las consultas que tienes y las obtendría de antemano, generando páginas HTML reales y construyéndolas en el servidor. Entonces, cada vez que quieras hacer una llamada de API, lo siento, una solicitud HTTP, enviarías la solicitud HTTP al servidor y el servidor te daría esa página HTML prerrenderizada lista para usar. Y luego la operación continúa como de costumbre, la renderización en el lado del servidor. Entonces, la aplicación aún se rehidrataría y la aplicación de una sola página se haría cargo. No solo genera esto, sino que también se encarga del enrutamiento, por lo que generarías un montón de archivos JSON que tienen los datos para otras páginas. Entonces, en lugar de enviar múltiples llamadas de API para obtener también el contenido de las otras páginas, simplemente buscarías este JSON, lo colocarías en la plantilla y listo. Tienes la otra página lista, incluso después de que la aplicación de una sola página comienza a funcionar.

En cuanto a los aspectos aquí, el tiempo de renderización es más rápido porque hay más renderización. La mayor parte del trabajo ya se ha realizado en el tiempo de compilación. El SEO es muy bueno porque los rastreadores ahora pueden obtener los datos más rápido que nunca. El tiempo de compilación es menor, por supuesto, porque estás haciendo muchas cosas y también ocupas más espacio. Pero si hablamos de un montón de páginas HTML, realmente no parece mucho espacio. Y el almacenamiento en caché, por supuesto, es compatible porque las páginas HTML están ahí y la mayoría de los frameworks admiten el almacenamiento en caché de serie. Entonces, para resumir esto, la renderización en el lado del cliente, el tiempo de renderización es inconsistente, el SEO es malo, el tiempo de compilación es rápido y el almacenamiento en caché solo ocurre en el lado del cliente, la renderización en el lado del servidor, el tiempo de renderización es lento, el SEO es bueno, el tiempo de compilación es rápido y el almacenamiento en caché se puede hacer a través de un tercero, como parcialmente compatible. El generador de sitios estáticos tendría un tiempo de renderización más rápido, un buen SEO, un tiempo de compilación lento y el almacenamiento en caché compatible de serie.

Pero la limitación aquí para el generador de sitios estáticos sería que tienes que tener un sitio estático para usar un generador de sitios estáticos, ¿sabes? Está literalmente en el nombre. No puedes hacer esto para un panel de control, no puedes hacer esto para una aplicación que tiene muchas cosas que son muy diferentes, por ejemplo, un nombre de usuario o datos de usuario. No puedes usar esto para una página de perfil para todos los usuarios porque no puedes generar páginas para información confidencial, ¿sabes? Pero puedes hacerlo para un sitio de noticias, para un sitio de blogs o, sí, en nuestro caso aquí, una base de conocimientos.

Y eso nos lleva a Gatsby. Gatsby se autodenomina un generador de sitios moderno, no solo un generador de sitios estáticos porque se ha adaptado a la mayoría de los requisitos modernos y puede ofrecerte casi todo lo que necesitas cuando se trata de sitios web normales. Y lo bueno es que admite la mayoría de las cosas, bueno, sí, casi todo de serie. Está construido sobre React. Entonces, si tienes conocimientos de React, incluso si estás familiarizado con React, la curva de aprendizaje es muy baja para ti y puedes, fácilmente, en un par de días, tener algo funcionando con Gatsby. Es muy fácil. No me llevó mucho tiempo trabajar con ello. Así que debería ser súper fácil.

Y permíteme dejar algo claro aquí, lo que estoy tratando de lograr hoy no es solo mostrar Gatsby o este tipo de escalas, sino que quiero mostrarte lo fácil que es construir algo. Y más tarde, cuando usemos Contentful, también quiero mostrar lo fácil y rápido que es migrar de algo estático a algo súper dinámico. Y también con la implementación, debería ser fácil y directo para ti.

Entonces, eso nos lleva al final de la parte teórica. Y ahora deberíamos pasar al código. Antes de eso, tenemos un panel de preguntas y respuestas que puedes encontrar en Zoom, donde puedes hacer preguntas que solo los panelistas verán y luego podemos responderlas más tarde, o simplemente puedes dejar tu pregunta en el chat. También tenemos con nosotros a Matt Van Voorst, estamos muy contentos de tenerlo aquí, es un ingeniero de software de Contentful y estará encantado de compartir con nosotros o responder cualquier pregunta relacionada con Contentful. Así que, sí, eso es todo, vamos directo al grano.

Normalmente, cuando quieres comenzar con Gatsby, pasarías por la CLI de Gatsby, donde instalarías usando npm o la herramienta que desees, y luego usarías la CLI de Gatsby con una plantilla de inicio rápido para comenzar rápidamente. Permíteme mostrarte algunas de las plantillas de inicio rápido de Gatsby. Sí, así que obtienes el inicio rápido. Sí, así que obtienes el inicio rápido, pero creo que podemos encontrarlo aquí, de código abierto, documentación. Tomé un inicio rápido. Entonces, puedes ver que hay muchos inicios populares aquí que puedes usar y que prácticamente ya tienen todo lo que necesitarías. Pero para nosotros, porque queremos revisar todo, queremos encontrar el más simple, que por supuesto es el Hello World. Entonces, si ves aquí, normalmente ejecutarías. Si tienes la CLI instalada, simplemente puedes instalar, ¿verdad?, obtener CNU y luego pegar el enlace allí y se encargaría de todo. Crearía el directorio, clonaría este repositorio en él y luego ejecutaría npm install. Así que lo tendrías listo, pero eso es básicamente lo que hace. Pero hoy, vamos a usar una herramienta que encontré llamada gitbot. No estoy seguro si estás familiarizado con ella, pero es una herramienta bastante buena donde puedes crear un nuevo espacio de trabajo desde cualquier enlace de GitHub que desees. Y luego configurará todo el entorno y podrás tenerlo. La razón por la que quiero hacer esto es que quiero aislarlo de mi entorno local. También quería mostrarte esta herramienta agradable. Entonces, vamos a ir aquí. Lo que hice aquí, voy a esperar. Permíteme compartir contigo este enlace en el chat. Ese es el repositorio en el que he trabajado. Y puedes ver, si encuentras, mira en las ramas, verás como el primer hito, el segundo hito, el tercer hito, el cuarto hito. Básicamente, eso es lo que vamos a construir hoy. Comienza con el maestro, que como puedes ver, es un fork del inicio rápido de Gatsby, así que podemos comenzar desde aquí. Voy a tomar esto, copiarlo y pegarlo aquí. Sí, gracias. Lo siento, lo envié solo a los panelistas. Permíteme cambiar esto para poder hablar contigo. Sí. Entonces, sí, como puedes ver, permíteme cerrar esto y también, sí. La razón por la que lo tengo aquí es porque este es VS Code en línea y GitHub lo admite de serie. Y también puedes ver que incluso clonó el repositorio. Y ahora está ejecutando npm install, npm run build. Por defecto, y luego npm run start. Eso es lo que necesitamos. Así que incluso está configurando el espacio de trabajo para nosotros. Y ahora está instalando, está ejecutando Gatsby develop. Así que vamos a ir al package.json, muy rápido, para ver porque normalmente no tendríamos esto hecho por nosotros. Después de ejecutar npm install, tienes que ejecutar Gatsby develop. Entonces, Gatsby develop sirve todo, toda la aplicación. Ejecuta la aplicación, hace los watchers e incluso el modo de reemplazo en caliente. Así que podemos desarrollar en tiempo real. Y ya no necesitamos esto. Así que vamos a cerrarlo y tampoco necesitas esto más. Pero como puedes ver, el servicio está disponible en el puerto 8000 y podemos hacer clic en abrir en el navegador y aquí estamos. Esa es nuestra aplicación. Esa es nuestra aplicación que se está desarrollando. Permíteme mostrarte primero qué son estos directorios y por qué estamos interesados en ellos. Empecemos desde el código fuente. Por supuesto, tenemos un directorio de código fuente y un directorio llamado páginas en él, que contendrá todas nuestras rutas y luego tendremos la página de inicio, que como puedes ver, es el componente React que se está representando aquí. Así que cambiemos esto rápidamente por algo que lo haga lucir diferente. Cada sitio de una sola página y luego vamos aquí y verás que incluso lo cambia con el reemplazo en caliente. Luego, también hay un directorio estático. Entonces, cualquier archivo que esté aquí se moverá al directorio público. El directorio que tiene todo listo después de la compilación. Y cualquier cosa a la que quieras hacer referencia aquí, simplemente puedes hacer referencia a eso. Veamos. Parecerá una ruta. Verás cómo funciona esto más adelante. Ignorar. Ambos archivos que sí, cómo inicializar y cómo comentar. Entonces, tendríamos tareas y parece que está preconfigurado porque de alguna manera. Era Gatsby. Ignorar bonito, lo que nos lleva a instalar prettier. Parece que ya lo instalé. ¿Lo hice? Sí, ya lo instalé. Si no conoces prettier, es un formateador de JavaScript. No JavaScript, pero sí, es un formateador de front-end. Admite muchas herramientas y solo necesitas instalarlo y pasarle alguna configuración, que es básicamente lo que está aquí, como puedes ver, nuestros padres son evitar y el punto y coma es falso. Y luego, si estás trabajando con vscode, puedes simplemente comentarlo.

Creo que el común shift F, lo siento. Sí, es opción shift. Si presiono shift F, formateará todo el código. Así que si lo hago así, por ejemplo, y presiono shift F, lo moverá y lo formateará correctamente, y también puedes ver otro archivo aquí llamado pretty ignore, donde se ignora este archivo. No quieres cambiar o formatear estos archivos.

Aquí tienes el archivo más importante llamado Gatsby config, que no usaremos ahora, pero lo usaremos más adelante. Tienes el package.json con un montón de scripts, puedes ver que los más importantes aquí son el desarrollado, que básicamente es el inicio y la compilación. Y también hay un formato aquí. Puedes ejecutar npm run format o yarn format, y le dirá al formateador que formatee todos estos archivos con estas extensiones. Hay un montón de dependencias aquí, como gatsby-react y react-dom y el formateador tiene la dependencia de desarrollo. Y luego está este directorio público que tenemos aquí. Y la razón por la que está tan lleno es porque no deberías verlo tan lleno al principio, esto sucedió porque esta herramienta gitbot ejecutó npm run build al principio. Por eso tenemos la aplicación real aquí. Y si te fijas en el index HTML, verás que nuestra página se genera de forma estática y tiene un saludo inicial. ¿Por qué solo tiene el saludo inicial? Porque no ha reflejado nuestros cambios o el desarrollador. Solo se ejecutó una vez cuando se ejecutó npm run build por primera vez. Y luego puedes ver el directorio estático, que contendrá todo lo que está dentro de este directorio. No, lo siento, me equivoqué. El directorio estático moverá aquí todos los archivos, como el Fabricante aquí si publicas una imagen aquí, también se moverá aquí. El directorio estático es para optimizar archivos. Hablaremos de esto más adelante y los datos de la página son un índice aquí y tienen un archivo JSON. Si produces esto... Estoy tratando de formatearlo y me dice que hay dos formateadores. Voy a elegir... Ok, no funciona. Pero como puedes ver, el componente shunt name para el almacenamiento en caché, la ruta y el contenido de la página, porque no hay contenido aquí y los hashes de la consulta estática, de los que hablaremos más adelante, y también tienes la página div 404, de la que hablaremos más adelante. Así que creemos un nuevo archivo llamado categories. js que creé dentro del directorio de páginas y vamos a crear aquí un componente react, primero necesito importar react y luego exportarlo. Para que tu página funcione, debes exportar ese componente como una exportación predeterminada. No puedes usar ningún índice para exportar por defecto aquí. No puedes llamarlo categories page. Así que olvidé la función. Y como tenemos el desarrollo, el trabajo de los hijos. Así es como funciona. Si tienes un enlace aquí llamado categories. Eso significa que si vas a tu sitio web slash. Irías a la página correcta. Pero ¿qué pasa si escribo un nombre incorrecto aquí? Algo como esto, obtendrías una página 404 y aquí puedes ver. Hay un desarrollo para Orbit que solo aparece cuando estás en modo de desarrollo y aquí, si haces clic en la vista previa de la página 404 personalizada, irías a la página real que tenemos. Y si haces clic en ella, verás que no hay una página 404. Así que sigamos adelante y agreguemos una. Así que creemos un nuevo archivo llamado 404.js. Importémoslo también. Volvamos y actualicemos esto y veamos la vista previa de la página 404 personalizada y como puedes ver, la tenemos aquí. Así de fácil es el enrutamiento o la creación de páginas en gatsby. Así que creemos nuestro encabezado. Vamos a crear una carpeta llamada components. Por source, creamos un archivo header. Sí. Y luego también importamos el act y aquí tenemos la libertad de exportar tanto una exportación con nombre como una exportación predeterminada, pero voy a usar la exportación predeterminada por consistencia. Así que export default. Voy a poner el retorno aquí. Sí, eso es todo. Head attack. Me he perdido. Tampoco. Es un contenedor. Y luego también creamos un F container. Y aquí tenemos nuestro H1. También tiene un nombre de clase. ¿Cuál es nuestro local? Y luego agregamos el stay en mi juego hacia arriba. y luego También agregaríamos un elemento nav por cada categoría, que crearía una etiqueta Primero, agregamos tref igual a slash y luego llamamos a esto uno hole. Copiemos y peguemos. Aquí lo ves, sí, es como Alt Shift F para el formateo descendente. Y aquí vamos a crear 0.4 categories page que creamos. Pero aquí, vamos a poner la URL correcta, sí. Así que sí. Y para reutilizar esto, vamos a, cierremos este directorio público. Vamos a la página de índice y creemos un fragmento. Fragmento aquí, ponemos el encabezado net y establecemos eso. Así que eso es todo. Sigamos adelante.

Volviendo a nuestra página de inicio, podemos observar el título, el logotipo y los enlaces de navegación. Si hacemos clic en esto, notaremos dos cosas. Primero, vamos a la página de categorías, que no contiene el encabezado. Así que necesitaríamos agregarlo aquí más tarde. Y también el navegador trata cada llamada de estos enlaces como normal, como un nuevo código HTTP. Por lo tanto, si hacemos clic en inicio, incluso si estamos en inicio, veremos que el favicon aquí se está actualizando y estamos cargando una nueva página. Pero no queremos hacer esto. Así que volvamos al encabezado. Y aquí viene algo muy bueno que proporciona Gatsby llamado Link. Este es un componente personalizado que se encarga de la navegación por nosotros. En lugar de tener href, pondrías to y luego usarías lo mismo. Así que aquí está el to y también puedes usar lo mismo. Así que vamos a quitar esto, simplemente duplica esto. Y usaríamos categories aquí y aquí. Quita esto y míralo de nuevo. Y si haces clic aquí, está bien. Parece que no funcionaba, así que sí. Hagamos clic en categorías, verás la página de categorías, no hay una actualización en la página, así que es JavaScript el que se encarga de esto o Gatsby. Como puedes ver, está funcionando. Bien, hablemos un poco sobre estilos. Cómo funcionan los estilos en Gatsby. Gatsby admite tres formas de agregar CSS a tus componentes. Primero, hay un CSS global, un archivo que simplemente puedes importar y se cargará así. Así que vamos a crearlo. En el directorio source, crearemos una nueva carpeta llamada styles y crearemos un nuevo archivo llamado global.css. Ahora, como no quería profundizar mucho en CSS aquí, ya he creado el CSS y simplemente lo voy a pegar aquí. Y si algo no tiene sentido o si estás interesado en algo, cómo se hace, por favor pregúntame y trataré de responder rápidamente. Y sí, ahora el global está aquí, solo necesitas importarlo. Así que voy a ir a la página de índice. Voy a importarlo y necesitamos retroceder un paso, ingresar a esos estilos y luego importaremos el archivo global.css. Este archivo se utilizará en cualquier lugar bajo este componente. Así que si vas al encabezado, aún se utilizará y se precargará para toda la aplicación. Y si ves aquí, si actualizas, verás que algunos de los estilos ya están implementados. Así que no te preocupes por estas cosas, sí, solo viene y se va, porque es un socket web entre el editor y el navegador web. Voy a encontrar esto. Y verás, por ejemplo, que el contenedor CSS está funcionando. Verás que el contenedor tiene todo lo que necesitas y hay un reset para restablecer con margen cero, color base y sin integración de texto. Así que ahora sabemos que está funcionando, pero queremos agregar algunas cosas para el encabezado que solo funcionarán para el encabezado. Y esto nos lleva a la siguiente forma o la segunda forma en que podemos agregar estilos o CSS modules. Y para hacer esto, vamos a crear un nuevo archivo. Llamémoslo header.module.css. Y sí, también vamos a obtener el contenido de aquí. Así que sí, un montón de CSS contiene el encabezado, el contenedor de navegación, el logotipo después del logotipo, el contenedor de navegación, la navegación, el contenedor de navegación, nav.a y en hover y en active. Exactamente en eso, en esa etiqueta a que está activa. Así que sí, si volvemos aquí y actualizamos, no pasa nada. Pero si lo agregas a la página del encabezado, para hacer esto, debes importar todo o un asterisco como clases desde el archivo correcto que se llama header.module.css. Y luego necesitarías usar el nombre de clase que se exporta desde este archivo que se incluirá o se hará único de alguna manera. Por ejemplo, esto, necesitaríamos usar una variable en su lugar, así que usaremos classes.header. Y haremos lo mismo para todo lo que necesitamos. El contenedor se agrega globalmente, así que no necesitamos cambiar nada aquí, pero para el contenedor de navegación, primero necesitamos cambiar esto. El logotipo es lo mismo. Y creo que eso es todo. Así que si volvemos, voilà, tienes todo lo que necesitas. Los estilos se agregaron y déjame mostrarte. De acuerdo. Sí, déjame mostrarte los estilos. Así que ves que, por ejemplo, la clase del logotipo ya no es logotipo, sino que está en un encabezado.module-unique-string. De esta manera será único y solo se usará aquí. Esta forma te permite usar solo clases en la nube si quieres, pero también será único, lo cual es bastante bueno. También admite la tercera forma de agregar clases, que es JavaScript y CSS en JavaScript. Entonces puedes usar cualquier biblioteca de componentes o simplemente escribir aquí style y pasar algo aquí como font-size o como 5rm. Ve aquí. No estoy seguro si está funcionando o no. Command-C-U-Y, y debería funcionar. Sí, ves que ahora funciona y se agrega como un estilo en línea. Así que vamos a eliminar esto porque no lo necesitamos. Aquí tenemos nuestro encabezado.

También tenemos teléfono y categorías. Como también mencionamos, aquí se necesita agregar la clase activa. Así que solo necesitamos agregarla para el enlace cuando esté activo. Para hacer esto, hay una propiedad que puedes pasar llamada nombre de clase activa y luego puedes pasar clases. Punto, ¿cuál era? Activo. También hay muchas cosas que puedes hacer con esto.

Por ejemplo, hay otra propiedad llamada soporte parcial o algo así, que haría, y en lugar de tener en, así que si ahora el activo solo funcionaría si estás en la página de categorías, pero si estás, por ejemplo, en categoría/alguna-cosa, no funcionaría. Pero si habilitas esto en blanco, funcionará para cualquier cosa que tenga esta categoría. En lugar de tener que ser igual, será una coincidencia, cualquier cosa después de esto.

Verás, cuando agregamos esto, el inicio está resaltado. Si hacemos clic en categorías, sí, debería estar resaltado, pero aquí no hay encabezado. Así que vamos a agregarlo. Fragmento, encabezado, cierre automático, cierre de fragmento. Y luego vas aquí. Sí, ves que estamos en categorías, inicio categorías, y aún está resaltado. Así que vamos a hacer dos cosas. La primera es agregar un enlace al logotipo porque no me gusta cuando simplemente, sí, si haces clic en el logotipo, esperas ir a la página de inicio. Así que vamos a agregarlo. Ni siquiera creo que necesitemos algo aquí. Así que necesitamos agregar Zer2 y agua/. Y ahora, si vas a categorías y haces clic en el logotipo, irás a la página de inicio. Y la otra cosa es que, dado que estamos usando el encabezado en ambas aplicaciones y tienes la intención de hacerlo, usarlo en varios lugares, así que vamos a crear un diseño. Por ejemplo, puedes crear un directorio de diseño y crear un componente en él. O podemos simplemente crear otro componente, pero vamos a seguir con lo que creamos. No hace ninguna diferencia. Depende de tu propia preferencia.

Así que vamos a crear una importación de diseño. También es un componente React, así que tenemos que importar React. Y luego exportar. De acuerdo. Así que también puedes importar, exportar e importar aquí. Pero sí, por consistencia estamos usando. El único lugar donde necesitarás exportar el componente como predeterminado es en nuestras páginas. Y luego llamaremos a este diseño. Sí, regresar. Vamos a usar el fragmento que creamos y luego usar el encabezado. Así que también hagamos esto, así que primero asegurémonos de que funcione. Vamos a la página de índice y luego reemplazamos esto con el diseño. Y luego tenemos algo aquí como, sí, aquí está la página de inicio. Y luego pondrías todo el contenido que necesitarías aquí más tarde. Así que aquí estamos en la página de inicio, pero el contenido no está aquí. Entonces, el diseño funcionó pero no logró agregar el contenido aquí. ¿Cómo lo hacemos? Normalmente, puedo pensar en una idea donde tienes una propiedad de hijos como cualquier componente. Y luego puedes ponerlo aquí y qué, sí, hacer que todos los hijos se agreguen a los hijos aquí. También vamos a crear un pie de página. Así que voy a crear una etiqueta de pie de página. Solo un segundo. Así que solo estoy tratando de encontrar ese texto. Es prácticamente texto ficticio. Solo ponlo aquí. Y como es bastante estático, no quiero crear otro componente. Solo quería mostrarte cómo se puede agregar un pie de página o cómo se puede usar un diseño. Y si vas a categorías, no hay contenido aquí. Sí, en realidad no agregamos la página de categorías aquí. Así que vamos a eliminar esto. También se usa el diseño. Y omitir agregar al contenido. Vamos a eliminar esta importación. También vamos a eliminar estas importaciones. También puedes aprovechar la oportunidad y eliminar esto de aquí y ponerlo en el diseño. Solo necesitas importar o cambiar... Sí, es el mismo espectro. Ahora estamos en categorías. Aquí está la página de inicio y funciona. Vamos a crear un componente Jumptron. Entonces, un componente Jumptron es como el banner principal que verías en la página de inicio que tiene un título y un botón de llamada a la acción o algo así. Así que también vamos a crear esto. Crear un nuevo archivo. También, componentes React. Lo siento por todos estos componentes React.

Entonces, esto contendrá, era para la función get. Básicamente, lo que contendrá el Jumbotron es una sección de esta etiqueta de sección. Oh. La imagen, que será nuestro fondo, eso es osciladores en el nombre, crea un div. Creemos un contenedor para el texto. Y luego agreguemos nuestro contenido. Así que escribamos algún título como, agreguemos 'Necesitas ayuda'. Esto es y para la descripción, agreguemos algo de texto ficticio y mostremos la primera palabra, eso es mucho. Intentemos con 20. Pon esto aquí. Y también necesitaremos agregar un enlace a categorías, mostrar nuestras colecciones de código que mencionamos en la primera barra diagonal. Ahora tenemos nuestro Jumbotron. Vamos a agregarlo a la página de inicio porque solo lo necesitamos en la página de inicio. Así que empezaré aquí. Algo no funciona. El enlace no está definido en el componente Jumbotron. Sí, el enlace no se muestra. Vamos a agregarlo. Y luego tenemos nuestra página de inicio. Aquí está nuestro texto de Jumbotron. Y es el botón que llevará a la página de categorías. Primero necesitamos agregar la imagen. Subamos una imagen aquí. Esa es la imagen que vamos a usar. Volvamos al componente Jumbotron y cambiemos la fuente para que sea. Recuerda lo que dijimos sobre el recurso estático, que simplemente lo usaremos así. Así que lo usaremos así. Será antiguo Jumbotron en. También nos pide un atributo alt, el atributo alt, así que sí, Jumbotron. Ahora lo ves aquí, está cargado, pero esta vez no es correcto. Agreguemos otro módulo CSS para Jumbotron. CSS. Y encontremos un estilo aquí. Peguémoslo aquí. Tenemos Jumbotron. Tenemos el fondo, el contenido y el contenedor de texto. Y tenemos un truco muy útil aquí con la propiedad display, que es grid. Tanto para el fondo como para el contenido, estamos usando grid area uno en uno. Así que estarán uno encima del otro. Y si volvemos y actualizamos, no funcionó porque en realidad podemos agregarlo aquí. Importar todo como S. Clases de jumbotron.module.css. Sí, también refresquemos o eliminemos todo esto para que sean clases. Aquí está el fondo, también necesitamos la clase background, el contenido es lo mismo. Y creo que eso es todo. No tenemos otro estilo, volvamos y actualicemos y veremos que tenemos todo lo que necesitamos. Siento que 'Necesitas ayuda' está un poco abajo, así que primero encontremos el contenedor de texto y ahora el contenedor de texto es el contenido. Tiene un margen de 30, hagámoslo un poco más bajo. Así que cambiemos esto aquí para que sea 100. Todavía lo encontré en 30, y eso debería verse mejor. Si haces clic en las categorías aquí, esto también es lo mismo que hacer clic en las categorías. Es el mismo enlace, así que irías a él. Creo que tenemos todo lo que necesitamos para adentrarnos un poco más en Gatsby.

Hasta ahora, lo que hemos hecho principalmente es React. Cambiemos un poco de contexto y volvamos a las diapositivas donde tenemos algo llamado Gatsby Content Mesh. Entonces, ¿qué es Gatsby Content Mesh? Gatsby está construido sobre React y GraphQL. Y GraphQL es una consulta para tu API. Voy a hablar de eso en un momento, pero esta capa de GraphQL se llama content mesh donde puedes agregar cualquier cosa que desees, cualquier fuente que desees, como una API o un sistema de archivos o una database o lo que desees a esta configurar esta capa para adjuntar estos data en ella. Y luego lo tendrás en un solo lugar desde donde podrás realizar consultas. Es solo un lugar y lo puedes usar en todas partes.

Entonces sí, Gatsby recopila todo lo que configuras para recopilar y lo agrupa en una única interfaz GraphQL llamada content mesh, pero ¿qué es GraphQL? Vamos a ir al sitio web de GraphQL. Básicamente, GraphQL es una consulta para tu API. Si tienes una llamada a la API, se vería como una consulta a una base de datos, pero puedes hacerlo para una API. Por ejemplo, aquí describes los datos que necesitarás: un nombre, un eslogan y un colaborador, y solicitas lo que deseas. Quiero buscar un proyecto, quiero filtrar y encontrar el proyecto con el nombre de GraphQL y obtener el eslogan. Y verás que el proyecto que tiene un nombre con línea es lo que obtienes. Obtienes un objeto, como puedes ver, se ve exactamente igual a lo que pediste. Aquí también hay un ejemplo muy bueno que muestra que cada vez que cambias la consulta, en la parte superior es una consulta y aquí está el resultado que obtienes, obtienes el resultado exacto que deseas. Y también Gatsby nos proporciona una herramienta muy útil llamada, sí, ya no está aquí, pero si la ejecutas, la obtendrás. Se llama GraphQL, que es un nombre bastante bonito. Así que vamos a GraphQL. Esta es una herramienta para jugar con todo el contenido GraphQL que Gatsby ha construido o que se ha configurado aquí. Aún no lo hemos configurado, pero tenemos algunas cosas que podemos encontrar, por ejemplo, hay un sitio o todos los sitios. Así que consultemos todos los sitios. Cualquier cosa que elijas en esta herramienta se reflejará aquí, pero también puedes cambiar cosas aquí. Así que vamos a buscar todos los sitios y queremos encontrar los nodos. Queremos encontrar el ID, el host y el informe. Así que el host aquí debería ser localhost y el puerto debería ser 8000. Si haces clic en ejecutar aquí, se ejecutará la consulta y verás exactamente lo que obtendrás. Verás que los datos son el padre principal de todos los datos que obtendrás. Luego tienes todos los sitios, tienes nodos y luego tienes el ID, el host y el puerto. Incluso puedes filtrar cosas, por ejemplo, si quiero cambiarlo a ID igual a sitio, aún funcionará o no funcionó, pero aquí está el caso de trabajo y sí, puedes ver a qué me refiero con esto. Pero ¿qué pasa si quiero cambiar cosas? Recuerda este archivo llamado Gatsby config. Aquí hay algo llamado metadatos del sitio que puedes poner lo que quieras aquí. Por ejemplo, un título para cada cosa. Por ejemplo, un título. No es necesario. No puedo escuchar el título. Debería ser ordenado. Y descripción. De acuerdo. Obtengamos ese contenido que tenemos. Pero luego coma aquí. Eso es todo. Algo muy importante sobre el archivo de contenido de Gatsby es que este archivo está configurando todo el asunto de Gatsby. Es muy difícil para ti permitir que Gatsby figure esto. A veces necesitarás volver a ejecutar Gatsby develop para que funcione. Pero creo que para esto, deberíamos estar bien. Así que actualicemos y verás que estos metadatos del sitio en realidad están ahí. También puedes tener el nombre del título de descripción. Verás que esto es un filtro, pero no queremos un filtro. Así que eliminemos los filtros, también eliminemos el nodo. Sí. Para el nodo, solo necesitamos título, nombre, título, descripción. Y como solo tenemos un sitio web, verás que si hacemos esto, obtendremos una matriz de nodos, pero no queremos hacer esto. Solo queremos obtener nuestro sitio. Así que creemos el sitio. Metadatos del sitio, así que también es el filtro. Metadatos del sitio, nombre, título, descripción. Entonces, si solicitas un sitio o una cosa, puedes solicitar todas las cosas y filtrar, o simplemente puedes solicitar una cosa. Y si solicitas una cosa sin pasar ningún filtro o coincidencia, obtendrás la primera cosa. Y luego ejecutarás, y aquí tenemos lo que tenemos. Como, ¿cómo podemos usar esto en la aplicación Tides? Así que vamos a volver a la página de inicio. Y la razón por la que tenemos que exportar ciertas cosas desde aquí es que Gatsby funciona con esto. Por ejemplo, para las consultas, solo necesitarías exportar una variable llamada consulta, y luego usas la función GraphQL proporcionada por Gatsby para pegar tu consulta aquí. Vamos a llamar a esta consulta de página de inicio. No es necesario nombrarla, pero sí, es bueno tenerla ahí. ¿Y cómo accedemos a estos datos? Irías a Inicio aquí, y tendrías esto como datos. ¿Recuerdas cuando te mostramos aquí que los datos salen? Sí, se pasa como una propiedad llamada datos. Y luego, por ejemplo, la página uno aquí puede ser datos.sitio. Datos.sitio. Nombre. Y luego vuelves, actualizas. Sí, ves, no se puede consultar el campo nombre, tipo de sitio, medios, sitio, sitio, medios, datos. ¿Por qué es diferente? Sí, porque eso es lo que acabo de decir. Necesitas ejecutar Gatsby develop. Así que IBM start. Ahora puedes ver el enlace GraphQL.

Entonces tenemos que abrir, así que vamos a actualizar. Y aquí tenemos el nombre del foso. Creamos para el nombre, ¿verdad? Sí. Entonces, ¿cómo podemos usar esto? Por ejemplo, en el encabezado aquí, queremos usar esto como texto y para la herramienta de salto queremos cambiar esto también. Así que eliminemos esto porque ya no lo necesitamos. Así es como funciona para las páginas. Cómo funciona para los componentes es un poco diferente. Entonces tenemos, hay una consulta estática un gancho de consulta estática, puedes usar una consulta estática que también viene con Gatsby donde harías lo mismo que hiciste. Así que el GraphQL y luego pegarías la consulta que deseas y aquí. Y aquí solo nos interesa el nombre. Así que movamos esto o eliminémoslo allí porque lo reutilizaremos. Así que vamos a ejecutar la consulta que queremos y luego también tenemos data sitios. Así que veamos el título y la descripción ya que no los necesitamos, algo anda mal aquí. Así que solo podemos usar el nombre aquí y los bits de programación. Es la cosa que no necesitamos y luego volvemos a la actualización. Rol personalizado y propiedades y definiremos los créditos. Creo que lo que tenemos mal aquí es que no hay data. Veamos. Sí, no hay data así que solo obtienes lo que obtienes aquí. Obtén lo que pides. Así que hagamos lo mismo, copiemos esto y abramos en el componente de salto. Necesitamos importar estos dos, consulta estática y caracter. Pero aquí tenemos el título y la descripción. Ya no nos interesa el nombre. Y este componente título y descripción. Así que puedes ver aquí que estoy usando consultas que no tienen nombre, lo cual está bien. Así que usemos el título aquí y usemos la descripción. Y volvamos, sí, creo que está funcionando.

Así que hablemos un poco sobre los complementos. Entonces Gatsby nos proporciona muchos complementos que podemos usar. Así que busquemos, vayamos al sitio web de Gatsby y abramos los complementos de código abierto. Así que comencemos con los temas, sí, complementos de Gatsby. Por ejemplo, uno de los complementos más importantes es el de imagen. Así que busquemos el complemento de imagen de Gatsby. Lo tengo escrito incorrectamente, complemento de imagen de Gatsby. Y sí, ves toda la documentación al respecto. Para usar la imagen, necesitas usar estos dos porque un complemento sharp y un transformador sharp optimizarán las imágenes. En lugar de tener una imagen estática generará múltiples tamaños y hará algunos efectos de desenfoque y cosas así. Así que sigamos adelante y agreguemos esto a nuestra configuración de Gatsby. Así que Gatsby config.js y los complementos reales. Pero sí, también necesitamos instalar esto. Así que cancelemos esto y luego instalemos el complemento de Gatsby. Permitir. Ahora que tenemos el transformador sharp, instalemos esto. Lo bueno, oh, lo siento, algo anda mal aquí. Sí, tengo el nombre incorrecto. Así es, así que obtén esta herramienta de bot que te proporciona un contenedor completo con el que puedes jugar. Obtienes una terminal real en un entorno. Esto es como todas las demás herramientas o como la mayoría de las... También tengo un error tipográfico y no puede ser como una imagen. Lo arreglé, ¿verdad? Creo que ese es el que arreglé, sí. Sí, gracias. Ahora que lo hemos instalado, solo necesitamos ejecutar npm run develop. O start, sí, como mostramos, si es lo mismo o puedes, si tienes la CLI de Gatsby solo puedes probar Gatsby develop. Solo asegúrate de que la biblioteca de Gatsby instalada globalmente sea la misma versión o que funcione con lo que tienes en la aplicación. Así que construyendo el desarrollo y debería estar funcionando. Así que sigamos adelante y úsemoslo. Y si vas aquí, verás que hay dos tipos de imágenes, está la imagen estática que puedes usar como un marcador de posición para la imagen normal, o está la dinámica, solo las imágenes dinámicas que puedes obtener de GraphQL. Así que sigamos adelante y probemos la primera. Teníamos esta imagen de Jumbo-tron aquí, pero para hacer esto, movamos esto de estática aquí para agregar una nueva carpeta llamada imágenes. Y luego voy a mover esto aquí y luego vamos a usar el otro componente llamado imagen estática. Y también tiene una fuente y todo lo que admite puedes pasar aquí y debería funcionar. Ves, ahora no está funcionando. Sí, porque lo cambié. Entonces la fuente aquí es relativa porque Gatsby se encarga de cargar esta y cambiarla automáticamente. Entonces imágenes/barra de dominio. Y ves, cada vez que actualizas, tiene un efecto de desenfoque. Y el fondo aquí, lo mantengo solo para que lo veas. El fondo aquí es un fondo de precarga en el que puedes hacer todo lo que quieras, como cambiar el tamaño, recortar, cambiar la calidad o lo que quieras aquí, lo cual es bastante bueno.

Entonces, imagen estática. Sí, eso es básicamente cómo funciona el complemento de imagen. Entonces, sigamos adelante y agreguemos algo de contenido real. Creemos ese componente de categoría. Muy bien, primero te mostraremos cómo se cargan los archivos y luego podemos hablar sobre la categoría. Así que primero instalemos los complementos necesarios.

Entonces, en la configuración de Gatsby, necesitaremos dos complementos, uno llamado Gatsby transformer, y el otro se llama, que es bastante importante. Se llama Gatsby source file system que te permite agregar el sistema de archivos a la capa de Gatsby. Lo siento, la capa de GraphQL. Y hay dos formas de agregar complementos. Solo este texto, que se resolverá y el otro que está configurado. Así que aquí, vamos a agregar un resultado. Así que vamos a agregar un Gatsby source file system. Y lo usaré más tarde. Y tenemos opciones. Recuerdo las opciones. Así que vamos a verlas. Source file system, sí. Entonces ves que tiene el nombre y la ruta. Y el nombre se utiliza para distinguir múltiples fuentes. Así que el nombre aquí será 'categories'. Y tenemos la ruta, que es una cadena de plantilla. Hay una fuente. Así que sigamos adelante y creemos este directorio. Nuevo, y obtengámoslo en el archivo. Pero sí, primero instalemos esto. Así que comencemos esto, cancela esto. Voy a poder almacenar esto y obtiene el sistema de archivos de origen. Y mientras se ejecuta, creemos un nuevo archivo aquí llamado first. Entonces MD aquí significa Markdown. Asegúrate de tener otro título. Lo siento por eso, sistema de archivos de origen. Y así tenemos la primera categoría, el archivo markdown. Entonces, ¿qué es un archivo markdown? Es un tipo de documento de texto enriquecido. Si no estás familiarizado con él, puedes simplemente buscar markdown y verás muchas guías aquí que te permitirán. Así es como se ve el markdown. Permíteme mostrarte cómo se ve. Entonces, si pones un numeral, por ejemplo, entonces tienes un título y h1. Y si tienes, sí, si pones dos numerales, eso es h2. Creo que tres asteriscos. O cursiva, dos asteriscos, o negrita. Sí, básicamente algo como esto. Pero también tenemos algo muy importante llamado front matter, que son metadatos para tu archivo así que agreguemos un título aquí. Primera categoría, slug de categoría que será nuestro nombre único para la categoría a crear. Y luego quieres agregar algo de contenido así que hay una herramienta muy útil para esto llamada lorem markdown, algo así. Sí, esta herramienta te permite generar markdown y luego obtendrás todo este contenido. Pero no estás interesado en todo esto porque para las categorías solo necesitamos un poco de contenido. Así que aquí hay advanced configuraciones. Con el número de bloques a convertir en uno, generar y aquí tienes mucho contenido. Usemos un H2 porque no queremos tener un H1 que aparezca en nuestro sitio web, o incluso un H3. Así que si ejecutamos ahora npm run develop. Entonces tendremos dos cosas que tener. Primero, el gatsby-source file system importará nuestro directorio de categorías. Primero, son todos los archivos de categoría, como archivos y luego nuestro Gatsby transformer remark. El otro complemento detectará que este archivo, este archivo es un archivo markdown y luego lo tratará de manera diferente y generará algunas cosas útiles a partir de él. Así que sigamos adelante y actualicemos. Y aquí tienes todos los archivos. Así que ejecutemos todos los archivos. Y luego tienes el ID. Eso es bueno para los nodos. Y luego tendrías el ID. Aquí tendrías algo llamado child markdown remarks. Entonces, básicamente, si hay un markdown remark en este archivo, se creará aquí. Así que veamos el front matter. Y aquí tenemos este título del complemento. Así que sigamos adelante y veamos esto. Y tienes la primera categoría. También puedes encontrar algo muy interesante aquí llamado source instance name, que mencionamos anteriormente, que será nuestra forma de filtrar los tipos porque más adelante agregaremos artículos y queremos distinguir estos de aquellos. Así que sí, generalmente lo usamos como filtro. Así es como funciona.

Entonces, dejemos esto como está por ahora. Adelante, vuelve y crea la interfaz de usuario real para ello. A partir de ahora, voy a intentar que la interfaz de usuario tarde menos tiempo, así que voy a pegar más cosas, pero si tienes alguna pregunta, por favor detenme porque siento que estoy perdiendo tiempo aquí.

Entonces aquí tenemos el botón de salto, que ya no necesitamos. Y luego necesitaríamos una sección de categoría. Así que vamos a copiar y pegar algo de CSS, algo de cadena HTML, mueve esto. Y aquí tienes una sección de contenedor con encabezado, título y descripción que dice explorar nuestras categorías. Volvamos y actualicemos. Lo verás así aquí. Solo necesitamos agregar nuestras tarjetas, o las tarjetas de categoría. Así que creemos un componente, construyamos una categoría, a JS, que básicamente es una tarjeta de categoría. Copiemos y peguemos las mismas palabras. Me está dando tiempo. Exportar función predeterminada. Exportar función predeterminada. Así que voy a intentar que esto sea más corto, más el nombre de la categoría, y categoría y luego h3, que contendrá el título, etiqueta de párrafo, que contendrá el extracto. Creo que aquí es donde... Espero haberlo dicho correctamente, y luego el enlace a la categoría real. Que estaría aquí en este caso, categorías barra diagonal slug, que obtendremos más adelante, y luego cerrarlo, escribir leer, y eso es todo. Antes de hacer esto, vamos a retornar, no, se está quejando. Ok, ahora vamos, y también agreguemos los estilos. Así que categoría, módulo.css, sí, lo tengo aquí. Así que voy a crear el archivo, nuevo archivo. Y luego, ambiguo. Y muévelo aquí. Sí. Oh, ¿tengo solo una pregunta de crucigrama? Ups. Sin C mayúscula, cambiemos esto. Y sí, nada aquí porque aún no lo he agregado al índice. Así que aquí está la acción del encabezado, creo que debería agregarlo. Lo siento, solo un segundo. Sí, también voy a agregar otro crucigrama aquí. Otro contenedor aquí llamado categorías. Luego agregar un componente de categoría. Está importado, está funcionando, pero se queja del enlace. Parece que no lo importó. Así que lo estoy importando. ¿Funciona esto, ok? Vuelve, actualiza, y aquí tenemos el título, que agregaré en el leer más. Por supuesto, si hacemos clic en esto, obtendremos un 404 porque aún no hemos creado este archivo, pero sí, es bueno ver la URL real. Y luego voy a volver a las categorías a la página de inicio. Así que usemos la consulta que creamos para generar un montón de categorías, códigos. Para hacer esto, nos aseguraremos de ir a todos los archivos. Pero aquí, la parte importante, recordamos que solo obtenemos las categorías. Así que queremos filtrar con el nombre de origen. Así que vamos a seguir adelante, encontrar el nombre de la instancia de origen igual a categorías. Ahora ya no estamos interesados en el nombre de la instancia de origen, y voy a llamar a esto categorías. Así es como se renombran las variables. Así que ahora era todos los archivos, ahora será categorías. Así que voy a hacer clic en esto y aquí tengo un montón de categorías. Así que tengo los títulos, el slug, y esto nos lleva al extracto. Así que si no sabes qué significa extracto, es como la versión corta de tu contenido. El formato debe ser texto sin formato, no queremos HTML, esto debería ser como 150 letras y truncarlo a verdadero, y luego seguir adelante y hacerlo, y sí, lo ves. Como, está tomando del HTML, porque si miras esta cosa de HTML, es todo el contenido, pero esto está cortando un poco el HTML. Así que estamos interesados en esto, solo en esto para las categorías. Así que vas a tomar esta consulta. Ve a la página de índice donde lo necesitamos, y luego exporta la consulta para lf, lb. Variable que es esto, y podemos llamar a esto consulta. Y sí, como dijimos antes, ahora tenemos nuestros data. Así que en lugar de usarlo así, por supuesto necesitamos mapear algo en él. Así que vamos a recorrer las categorías.nodes de data.categories y ese es el array que tenemos. Y luego vamos a crear un mapa. El mapa contendrá un ID y un hijo, hacia el marco. Y luego voy a ir convertirlo en una etiqueta de categoría. Agreguemos la clave, que es nuestro ID y luego pasemos el objeto de categoría al componente. Aún no lo está esperando, pero sigamos adelante y pásalo. Así que hijo markdown.remark y cierro la etiqueta. Y debería funcionar. Veamos si funciona. Así que sí, como solo tenemos un archivo, se ve así, pero funciona. Ahora que no se quejó.

Pero como puedes ver, los data que estamos pasando aquí aún no se utilizan. Así que vamos a volver a nuestro componente. Espera al niño abajo de la observación aquí, que se llama categoría. Y si volvemos aquí, verás que tiene un front matter, título, slug y texto. Así que este será el front matter. Slug. Y también tenemos serv. Entonces, sí. Convirtamos esto en un título, convirtamos este slug. Lo siento, hagamos que este slug sea ordenado. Y para esto, queremos cambiar esto a una cadena de plantilla. Así que debería ser así. Esto debería funcionar a menos que haya roto algo. Creo que esto debería funcionar. Gracias también. Sí, no tengo un final para la consola. Vuelve y actualiza. Algo no está funcionando. Función swap de to matter. Creo que esto no tiene la M mayúscula en el medio. Si quieres asegurarte puedes simplemente seguir adelante y enviar la consulta. Es más fácil de esta manera. Ahora tenemos el contenido real. La primera categoría que estilo. Pero sí, si haces clic aquí, verás que va a la primera categoría. Aún no funciona, pero tienes el enlace correcto. Así que agreguemos una imagen a nuestra categoría. Para hacer esto, necesitarás agregar una imagen, algo como un ícono, y también te mostraré cómo funcionan las consultas. Primero, subamos los íconos a tu carpeta, íconos, voy a subir un montón de íconos aquí, íconos y luego tienes esto. Vuelve a la primera categoría y aquí el enlace debería ser relativo desde aquí. Entonces imágenes, íconos, barra diagonal, por ejemplo, quejarse. Ve aquí y actualízalo. Verás que para el front matter, así que niño abajo de la observación que es para el front matter, todavía es un ícono. Sí, así que por qué todavía está el ícono aquí, todavía es una cadena. ¿Por qué todavía es una cadena? Porque recuerda cuando estábamos hablando de aquí, así que agregamos el sistema de archivos de origen a este directorio o no lo agregamos al directorio de imágenes. Así que ahora queremos agregarlo al directorio de imágenes, así que llamémoslo imágenes. Así que ahora cada vez que una cadena refleje un enlace que se vea así, se tratará como una imagen y luego no estoy seguro si funcionará, así que vamos a leer sobre eso. Pero ahora, así, el ícono será un objeto de imagen. No solo un texto simple como ves aquí. ¿Me he perdido algo? Te falta un apóstrofe de cierre. Sí, gracias Dev. Así que ahora debería funcionar. No hemos cambiado nada aquí, así que vamos a Icon y verás que el ícono se abrió. Y lo que estamos importando aquí y en lo que estamos interesados aquí es en la imagen de Gatsby image data. Puedes poner muchas cosas aquí, como por ejemplo, puedes poner los anchos para que sean de 64 píxeles. Puedes hacer que el diseño sea restringido o lo que quieras. O luego tienes este ícono que puedes usar. Así que voy a usarlo. Para usar esto, necesitamos ir primero al índice para agregarlo a la consulta. Así que aquí. Y luego también lo voy a usar dentro de la categoría. Así que también sé que tengo un ícono aquí. Así que agreguemos una imagen. Así que aquí vamos a usar nuestro componente de imagen dinámica de Gatsby image. Y vamos a pasarle la imagen. Veamos cómo vamos a pasarla y luego dale una clase de process icon. Hay dos formas de pasar la imagen aquí. Puedes simplemente ir a icon y luego niño imagen afilada y eso da la imagen de Gatsby image data o hay una función auxiliar de Gatsby llamada obtener imagen de Gatsby plugin image para que puedas pasar el contenedor y luego funcionaría. Así que veamos si funciona. Pulsa y aquí lo tienes. También puedes ver que se está cargando y tiene un fondo y todo. Así que ahora tenemos nuestra primera categoría. Sigamos adelante y subamos un montón de categorías. Así que voy a eliminar esta. Eliminar permanentemente, subir y luego vuelve a la masterclass. Tenemos nuestras categorías. Acabo de agregar un montón de categorías que añadí. Todas se ven iguales. Pero aquí, si actualizas, verás que tenemos datos reales que pueden funcionar e incluso con enlaces diferentes.

Entonces sí, básicamente así es como funciona Gatsby y GraphQL de forma predeterminada. Entonces nuestro siguiente paso sería cómo vamos a generar esto. Entonces, el siguiente paso aquí sería crear la página de categoría y luego usar Gatsby para generar múltiples páginas de categoría para cada categoría. Así que primero vamos a crear la página de categoría. Y para hacer esto necesitaríamos una plantilla. Así que primero creémoslo como una página normal y luego lo moveremos a una plantilla.

Entonces, un nuevo archivo aquí. Tutoriales. Sí. Por supuesto, lo hacemos. De acuerdo. Entonces, dado que tenemos una consulta, entonces simplemente vamos a data, y luego vamos a preparar la consulta. Entonces, exportar. Entonces, intentemos escribir nuestra propia consulta. Entonces, así que vamos a nombrar esta consulta vamos a nombrarla, consulta. Y luego primero vamos a consultar la categoría en sí. Entonces, vamos a ir a, dado que conocemos el slug de la consulta, así que no tenemos que ir desde el archivo. Entonces, podemos simplemente ir a todo marcar, marca ficticia. Entonces, o es una marca ficticia, porque sí, sabemos lo que queremos. Entonces, marca ficticia. Y vamos a filtrarlo por front matter. Y el slug debe ser igual, podríamos usar uno de nuestros creadores predefinidos, así que reutilizaremos Agregar Contenido. Y el slug debería ser agregar-contenido, y vamos a abrir esto, volver a Título, y si volvemos un paso atrás, también necesitamos el título y el HTML. Así que básicamente eso es lo que necesitamos, y área-creadora-entrada y enlace porque necesito... Usar funcionar. De acuerdo, veamos por qué no funciona, vamos a llevarlo a Gatsby, intentar desactivar el silencio, aquí está, sí, mira, no está Creo que es porque no tengo igual, sí. Así que tengo que tener igual ahí. Comillas dobles. Debería funcionar. No es igual. Así que ahora debería funcionar. Entonces sí, tomemos esto. Vuelve, ponlo aquí. Y también vamos a nombrar esto, porque vamos a consultar los artículos más adelante.

Entonces, para crear la página en sí, vamos a devolver el diseño normal. ¿Por qué no se está cargando? Me da importaciones. Diseño. De, atrás, sin seleccionar, volver atrás sin seleccionar, barra diagonal, y esto debería ir. Y para esto necesitamos un filtro, así que agreguemos este slug. En nuestro caso es slug, y debería ser una cadena. Y luego para esto, podemos eliminar el agregar-contenido, así que reutilizamos el slug. Entonces, si no hay contexto aquí, creo que volverá al primero de todos modos. No estoy seguro, déjame ver. Creo que si esto está vacío, debería obtener el primero de todos modos. Sí. Así que lo usemos así por ahora, y te mostraré cómo lo modificamos aquí. Entonces diseño, vamos a crear una sección aquí. Obtén el contenedor. Agrega el encabezado de sección. Y h2. Entonces data aquí debería tener categorías. Y aquí categorías, perdón, no categorías, categoría, una categoría. Y luego para el h2 aquí, sería categoría.font, punto front matter. Y luego voy a agregar una etiqueta b aquí. Y para la etiqueta b, necesitamos el HTML. Entonces, y para agregar el HTML real, necesitas hacer algo diferente. Entonces hay una propiedad aquí llamada dinges.list.setHTML. Y luego pasas una propiedad, HTML. Y luego le das una categoría o HTML. Esto debería funcionar. Entonces... Oh sí, en este punto, este funcionaría así. Y ves que tiene HTML y tiene agregar contenido y todo. Hagamos que este sea un salto de línea. Entonces estilo, alineación de texto. Y luego debería funcionar. Muy bien, agreguemos un montón de artículos. Pero primero, agreguemos cómo se vería el artículo y luego creamos el artículo en sí. Entonces, vamos a crear el enlace. Porque como todo el asunto sería un enlace.

Y nombre de clase. Y aquí... Enlace... Pasará por... El slug que también generaremos más adelante. Cerrar esto, y luego agreguemos el nuevo... Tengamos la imagen aquí. No, solo encontremos esto aquí y copiémoslo y peguémoslo. De acuerdo... Solo voy a pegar un montón de HTML aquí. De acuerdo, terminado. Entonces, sí, acabo de agregar una imagen estática con un ícono de partícula más nuevo. Y bien, hagámoslo dos veces, cuando lo elimine, pero solo para ver si realmente funciona o no. Veo que la imagen estática no se importa. ¿Y el enlace, creo? No estoy seguro de por qué el enlace no se importa automáticamente. Veamos si funciona ahora. Título. Sí, porque. Ahora tenemos los dos artículos reales, y si haces clic aquí, tienes artículos/barra diagonal, pero eso no funcionó. Y también necesitamos agregar, primero hagámoslo uno. Y luego te mostraré cómo funciona con este artículo. Entonces, para los artículos vamos a hacer lo mismo, para agregar un montón de artículos, todo lo que necesitamos hacer es ir a gatsby-config, agregar otra fuente aquí para los artículos. Vamos a seguir adelante, de acuerdo. Directorio renovado. Voy a subir un montón de artículos. Creo que es, son los artículos. Tengo un montón de archivos aquí. Y para los artículos es diferente porque tenemos la categoría, que usamos para filtrar los artículos según la categoría. Y luego agregamos esto. Solo necesitamos detener esto y ejecutarlo nuevamente. Ves la consulta de los artículos. Tiene USB. ¿Funciona? Aún no. De acuerdo. Muy bien. Entonces ahora queremos ir al archivo antiguo y encontrar, perdón por el filtro, queremos filtrarlo por artículos. Y luego lo vamos a ejecutar y verás, tenemos un montón de artículos aquí. Sí, pero ya no necesitamos esto, no lo necesitamos en este momento porque sabemos que queremos filtrar por categorías, así que vamos a ir a la marca de markdown antigua. Y luego para filtrar, vamos a formatear la categoría, igual y luego pasar, por ejemplo, agregar contenido aquí. Eso es lo que queríamos hacer. Y luego, sí, el slug todavía está aquí pero lo cambiaremos más adelante. Eliminemos esto. Tenemos un montón de artículos agregados a la categoría de agregar contenido para los artículos que nos interesan. El HTML, no, aquí solo nos interesa el título para no importa que necesitamos el título. Y este slug, eso es todo lo que necesitamos aquí. Entonces vamos a nombrar esto artículos. Y vamos a tomar esto, perdón. Voy a tomar todo esto y ponerlo en la página de categoría. Entonces también necesitamos estos artículos en macro igual y aquí reemplazaremos agregar contenido para tener también el slug de esa categoría. Y para esto, vamos a tener una categoría aquí que también necesitamos cargar. Entonces necesitamos mover nuestros artículos. También necesito el ID. Primero con esto, necesitaríamos el ID y el front matter. Y luego tenemos el título. Entonces el título estaría aquí y el enlace se podría usar como clave aquí. Perdón, el ID se podría usar como clave. Así que tenemos todos los artículos que necesitamos. Esos son todos los artículos porque en realidad no hay Slack. Entonces ahora tenemos nuestra plantilla. Sigamos adelante y creemos un directorio llamado templates. Entonces, templates. Este aquí. La forma de generar archivos realmente es que hay un archivo llamado gatsby-node.js que puedes crear. gatsby-node.js. Entonces, eso podemos crear. Lo que puedes importar o exportar se llama crear páginas. Entonces, estos archivos, estas funciones que escribirías aquí se exportarían y gatsby las generaría en el momento de la compilación. Entonces, vamos a escribir una función asíncrona. Que tomaría acciones. Y una variable GraphQL.

Y luego vamos a ejecutar la consulta para obtener todas las categorías. Entonces, constante data peso neto GraphQL. Entonces, queremos ejecutar una categoría que nos dará todas las categorías. Solo nos interesa el slug aquí. Entonces queremos hacer esto así. Y solo necesitamos agregar esa consulta. Ahora tenemos las categorías y luego obtendremos todos los slugs que necesitamos. Y luego para los data que obtenemos, así que data.nodes. Y categories.nodes.forEach, vamos a crear una página para. Entonces actions.createPage, es una función que se pasa a la función, como ves aquí. createPage y createPage tomará tres cosas. App else, que es básicamente la ruta para ello. Entonces será barra diagonal...... tropas. Entonces crearemos un componente. Lo que significa la ruta absoluta, así que el componente aquí es nuestra plantilla. Entonces vamos a usar la ruta. Sí, necesito adquirirlo. Y luego vamos a pasar el contexto. Y el contexto aquí es el slug, así que vamos a necesitar el slug aquí. Entonces para los nodos, vamos a tener Shile mark, down remark. Shile mark, down remark. Y luego slug. Ahora debería funcionar. Cerramos esto, volvemos a la derecha. Transformar la primera vez. Entonces, lo que hicimos aquí es que create pages es una función que te da acciones graph grl, y luego puedes crear una consulta aquí y luego hacer cosas como generar páginas o hacer lo que quieras aquí. No estoy seguro si funcionó o no. Así que vamos a comprobarlo, volver atrás, elegir uno que no funcione. Así que no funcionó. No estoy seguro por qué. Entonces barra diagonal, categorías más sleight. Y el componente sería, oh sí, porque el componente en realidad no lo pasé. Así que pasa ese trío. Luego podemos mirar source slash templates Creo, quiero decir. Es antiguo, sí, debería hacer plantilla. Lo detendré una vez más. De acuerdo. Entonces volvamos a refrescar y aquí vamos. Tengo los artículos. Sí, ves que este archivo se genera para cada categoría ahora. La integración no tiene nada pero getting started no creo que clouds ever tenga. Y luego puedes, puedes hacer lo mismo. Puedes seguir adelante y hacer lo mismo para los artículos como generar un montón de artículos y luego generar páginas para ellos. Pero no lo voy a hacer aquí porque sí, se nos acaba el tiempo. Así que voy a seguir adelante y saltar esto de crear los artículos. Es lo mismo que las categorías. Sería solo un trabajo redundante. Así que quiero pasar a la siguiente cosa o nuestra próxima gran cosa hoy, que es el contenido. Así que hablemos primero de un sistema de gestión de contenido. Entonces, un sistema de gestión de contenido o CMS es, es una database para tu contenido digital. Es un lugar donde puedes crear modelos para tus data y luego agregar estos data y consultarlos. Entonces un CMS normal tendría su propio frontend. Puedes hacer lo que quieras Pero básicamente es una aplicación de renderizado del lado del servidor que obtendrías un evento y como wordpress. Si has estado aquí por mucho tiempo Jumbla y Wix, Wix es una nueva cosa de la que hablar Jumbla. Y con la evolución de las aplicaciones de una sola página con la mayoría de los CMS que no pueden proporcionarte una API como hay un nuevo concepto llamado Headless CMS que es un CMS normal, pero te dará una API en lugar de vistas reales o una interfaz de usuario real. Entonces es un CMS desacoplado donde el CMS te proporciona solo una API que puedes consumir en cualquier forma de aplicación que desees como una aplicación web, una aplicación móvil o incluso un dispositivo IOT como Contentful. Y también está Headless WordPress. Y esto nos lleva a Contentful. Entonces Contentful es uno de los CMS Headless CMS muy modernos que te proporciona todo lo que necesitas en una interfaz muy fácil de usar. Y también te proporciona GraphQL, Webhooks y mucho soporte de forma predeterminada. Vamos a ir y revisar su sitio web. Entonces, la forma en que vamos a proceder con Contentful es que tengo dos cuentas. Una que voy a crear un espacio de trabajo ahora mismo y también tengo una que pre-creé con un montón de contenido que vamos a usar en nuestra aplicación. Así que voy a iniciar sesión con mi cuenta gratuita. También tienen un plan gratuito que te brinda mucho, como todo lo que necesitarías como una persona normal, no un equipo. Entonces sí, primero necesitas crear el modelo de contenido que deseas en tipo de design mi modelo de contenido. Voy a nombrarlo categoría. Sí.

Y luego voy a crearlo, agregar un campo que comienza con campo de texto, título, crear. También agregaré otro. También en nuestro ticket normal, que es nuestro slug. Y para esto, voy a hacer clic en crear y configurar porque quiero cambiar algo aquí. Entonces para la validación, voy a hacerlo en campo para que no termines con múltiples categorías con el mismo slug. Y también voy a agregar el ícono, que en este caso es un medio. Y luego también vamos a agregar contenido. Entonces, perdón por el contenido. Sí, lo voy a hacer texto, pero aquí es un texto largo, así que el texto largo admite Markdown. Luego voy a ir con contenido markdown... Aquí puedo ir con descripción. No, vamos a tomar contenido para que sea igual que los artículos. Voy a crear, luego voy a hacer clic en guardar, y vas al contenido, y luego agregas la categoría. Entonces, crear una entrada para el título, y luego me quedo con lo que tengo, contenido, vamos a ver, espacios en blanco, solo guiones, agregar medio. Voy a agregar un nuevo medio, porque pensamos así, y voy a subir uno, seleccionar archivos para cargar, y contenido, voy a usar una de las imágenes que tenemos aquí, así que esta. Ves, como, puedes cargar desde diferentes lugares. Ahí, haz clic en el almacenamiento incrustado. Ahí está. Y eso funciona. Puedes volver al proyecto para ver si hay algún contenido en este archivo, así que creo que luego tenemos el enlace al proyecto, todo el contenido y los enlaces. Así que déjame, Ver, si tienes alguna pregunta sobre Contentful, por favor aprovecha la oportunidad, Matt está aquí, y pregunta cómo, como, tantas preguntas como puedas. Esa es una muy buena oportunidad. Y luego voy a publicar la, y la voy a publicar. También puedes hacer lo mismo con los artículos. Entonces puedes agregar un artículo, pero quiero, por qué quiero agregar un artículo aquí es para mostrarte un tipo diferente, que son las relaciones. Entonces artículo, crear, agregar campo, y también agregar título. Como no voy a usar este, así que no voy a, solo quiero repasar y mostrarte cosas que necesitaremos. Entonces ves una referencia aquí, que se llamará. Vamos a elegir una referencia y puedes configurar, que es, excepto solo, sí, excepto solo suscribirse y tipo, voy a elegir una categoría, y eso es todo. Entonces, si quieres agregar, primero guardemos esto. Vuelve al contenido, agrega una entrada. Entonces, artículo número uno. Agregar contenido, aquí ves, puedo agregar un contenido existente, como este o también puedo tener la oportunidad de crear una nueva categoría en el momento. Así que ahora tengo esas categorías y artículos. Quiero mostrarte algo llamado claves de API. Pero primero vayamos a la página de inicio, ves, como ya está ahí. Entonces para el contenido, para presentar contenidos hay tres tipos diferentes de APIs. Hay una API de vista previa, que te permitirá mostrar cosas que son borradores o aún no se han publicado. Hay una API de entrega que solo funcionará con cosas publicadas. Y hay, creo, no estoy seguro, se llama API de edición o algo así. Veamos. Sí, se llama Management. API de gestión, que funcionará. Pero para nuestro caso donde necesitas el ID del espacio y la API de entrega de contenido. Y con Gatsby, hay un complemento llamado, ve a los complementos de Gatsby, se llama Gatsby-Source-Content-Form. Y te proporciona todo lo que necesitarías para comunicarte con Gatsby. Incluso admite GraphQL de forma predeterminada. Gatsby-Content-Form. Este generalmente es compatible y es muy bueno. He trabajado con él, es muy rápido. Entonces aquí, puedes, estoy mirando el píxel. Entonces, ¿hay un complemento similar, tal vez para algunos frameworks relacionados con la vista como Next? Sé que lo hay. Pero como Matt, si quieres responder esta pregunta, por favor adelante. Matt, ¿estás aquí? Sí, lo siento. Tendría que buscarlo para ti, pero estoy seguro de que alguien ha creado un complemento para esto. Pero incluso si no hay un complemento, es increíblemente simple consumir cualquiera de las APIs de Contentful. Y la configuración para eso es bastante fácil. Lo que suele ser más trabajo son los generadores de código para APIs de Open Graph o para APIs de GraphQL. Pero simplemente consumir una de las APIs de Contentful es increíblemente simple, pero estaré encantado de investigar y ver qué hay en el panorama de código abierto para NERST. Gracias, Matt. Entonces volvamos a lo que estábamos haciendo. Entonces ves, solo necesitarías agregar el complemento, como instalar esto ejecutando NPM install y luego agregarlo con un espacio de elementos. Entonces ctuandKclm. Este tipo de es mejor verlo desde una computadora de escritorio. Y dices, está bien, esto tiene mucha información. No sé cuánta información tiene aquí, pero dice Go step, que es un HTTP para plataformas privadas. Y luego dice también los connects, que es un método de consulta que necesitamos ejecutar. Entonces básicamente está escribiendo mensajes y verificamos eso y luego decimos vamos a usar la conexión para ejecutarlo. Voy a copiar esto aquí. Voy a volver a mi aplicación.

Ejecuta npm install para ello. Y luego voy a ir al archivo de configuración de Gatsby. Y también lo agregaré aquí. Entonces resuelve. Y luego tienes, así que voy a copiar y pegar esos datos que tengo, que son bastante diferentes porque agregué mucho contenido en el otro espacio de trabajo. Entonces archivo de configuración de Gatsby. Bien, no lo tengo aquí. Así que voy a verificar, tengo que verificar el repositorio. Bien. Entonces, sí, si verificas la última rama, cuarto hito, archivo de configuración de Gatsby, lo encontrarás. No estoy animando a nadie a hacer lo que estoy haciendo ahora mismo en mi cuenta, pero sí, lo siento por esto. Entonces opciones, luego tienes el ID del espacio y el token X. Ahora que está ahí, todo lo que necesitas hacer es ejecutar npm run develop. Así que voy a cambiar a mi otra cuenta. Entonces veo, como, tengo un montón de categorías aquí. También tengo un montón de artículos que agregué, así se vería bien al trabajar con eso. Entonces ahora, si actualizas aquí, también debería tener todo lo de Contentful, como todo lo que viene de Contentful. Como activos, artículos, categorías, y todo de forma predeterminada. No he hecho nada. Ves, trabajar con sistemas de archivos es incluso más difícil que trabajar con Contentful. Entonces, si hago clic en un artículo de Contentful, voy a los nodos y luego obtengo el título, luego hago esto. Y tienes todos los artículos que quieras. Y para cada nodo, para el nodo tienes la categoría que también puedes verificar cosas como el slug y todo. Incluso puedes acceder a la categoría desde el artículo. Entonces las relaciones aquí ocurren principalmente de forma automática sin que las manejes manualmente en comparación con los archivos Markdown. Entonces, por ejemplo, si quiero ir a la página de inicio. Y luego ves aquí que estoy creando la categoría. Así que quiero hacer lo mismo. Quiero tener el ID, el título, el slug, el ícono y el extracto. Así que voy a intentar hacer lo mismo usando Contentful. Entonces vamos a todas las categorías de Contentful y luego a los nodos. Y vamos a crear un título, el slug, el ID y la imagen de Gatsby. ¿Y qué era? Creo que aquí es el contenido. ¿Dónde está el contenido? Sombra, archivo, imagen de Gatsby. Sí, eso no es nada más que podría. Entonces sí, contenido, contenido aquí, y tengo el niño de marcado de Markdown. Voy a ir al extracto, y hacer el mismo formato, plain, Romlands uno 50, truncar a verdadero. Solo quería mostrarte lo fácil que es en comparación con hacer otras cosas. Como si lo hiciéramos desde cero, sería más fácil tener Contentful desde el principio. Pero solo quería demostrar cómo, cómo puedes tener diferentes opciones además de un CMS o en este caso Contentful. Voy a tomar esto. Voy a volver a mi página de inicio. Y voy a reemplazar esto con eso. Ahora tenemos categorías, nodos, y luego tenemos título, slug, ID. Así que es diferente. Entonces mapeamos los nodos, ahora mismo estoy interesado en todo el conjunto. Así que lo voy a llamar, categoría. Y aquí, esto sería categoría. Pero el ID, y luego voy a poner eso así, así para cada, sí, para cada nodo, hay un título, slug, ID, ícono y contenido. Solo quiero asegurarme de recordar esto cuando vaya a la categoría. Entonces aquí no necesitamos el método de fuente más. Pero para el extracto, porque esto es un contenido, se llama campo de contenido, ahora tienes que ir a, marcado de niño, marcado dominante. Y luego irías por eso. Y para usarlo, sigue siendo lo mismo. Cuando tienes las categorías, títulos, extracto, y todo lo que necesitamos. Y la imagen de Gatsby aquí funcionaría con la imagen que viene de Contentful. Y luego, voy a ir aquí, ir a base de conocimientos. Parece que me he perdido algo aquí. Sí. Entonces, Entonces estoy tratando de darle las palabras para la imagen porque supongo que es la imagen de Gatsby. Creo que ahí es donde me equivoqué. Debería ir por la imagen de Gatsby data, no Gatsby. Entonces sí. Vuelvo a la página de inicio. Cambio esto a Gatsby imagen data. No se está completando. Así que en este punto, quiero volver a ejecutarlo solo para asegurarme de que funcione. Entonces, a veces, si ocurren problemas como este y no sabes qué hacer, normalmente eliminar la caché es lo primero que debes hacer. Así que simplemente ejecuta Gatsby develop nuevamente. Y si el problema persiste, solo necesitarías eliminar tu directorio público, como eliminar todo. Y luego, porque a veces los archivos en caché no funcionan correctamente y terminarías en un bucle de errores si tienes algo que enviar.

Como los errores no tienen sentido. Bueno. Esperemos que esto no haya sido. De acuerdo. Los objetos no son válidos como hijos de React. Sí, entonces encontró las claves de las herramientas de objeto, si no estás ejecutando en producción, ya. Entonces aquí el extracto parece ser un objeto, lo cual no debería ser. Eso no está bien, lo cual es extraño. Tal vez tengo algo mal aquí. No puedo contactar. Vamos a la categoría. Sí, eso es todo. Entonces sí. Entonces crees que ahora sigue funcionando. Tenemos los nuevos artículos que vienen de eso. Y estas son las categorías de Contentful. Así que hagamos lo mismo para la otra consulta que tenemos. Creo que ahora somos capaces de editar nuestra categoría en la página. Así que vamos a intentar hacer esto. Entonces queremos ir a la plantilla de categoría y queremos cambiar esto. Ahora queremos tener, no creo que pueda, volvamos atrás. Entonces queremos obtener una categoría con el slug, el front matter, título y HTML. Entonces queremos encontrar una categoría de Contentful, queremos filtrarla con un slug, hacer clic en ella. Y luego, hagamos clic en nuestra variable. Y luego queremos tener el título y el slug, ¿necesitamos el slug, no creo? Creo que solo necesitamos el contenido. Y en este caso debería, debería encontrar el contenido, intentar marcar el contenido y luego obtener el HTML. Lo que necesitamos, título HTML. Veamos. Sí, título y HTML. Entonces reemplacemos esto con eso. Y creo que puedo hacer lo mismo para esto. Entonces Contentful. Todo. Artículo. Bueno, entonces vamos a tener esto. Así que. Categoría. Así que elegiremos las categorías aquí. Entonces, contenido completo de nuestro artículo, filtrar, categoría, slug, igual. Eso es lo que queremos. Entonces, tenemos esto. O igual. Y luego tendríamos nodos, y luego voy a tener el título del IP. Sí, se ve bien. Ahora necesitamos reflejar esto aquí. Tenemos la categoría, que contiene título, contenido, child, remark. No hay front matter aquí. Y para el ID, tenemos ID y también título en el mismo lugar ahora, en el mismo nivel. Creo que esto debería funcionar. Veamos. Sí, solo necesito regenerar los archivos ahora. Así que tengo que ejecutar npm run develop. No estoy seguro si regenerar los archivos necesitaría esto o no. Como si necesitaras ejecutar npm run develop varias veces o no se encarga de eso. Entonces ves ahora tiene los artículos reales que necesitamos. Por supuesto, no necesitamos los archivos de los artículos. Es por eso que no funciona, pero ves lo fácil que es configurarlo. Ahora pasamos a agregar contenido. Luego tienes todo el contenido que necesitas. Este contenido proviene completamente de Contentful. Sí. Creo que eso es básicamente todo para la cosa de Contentful Gatsby. Creo que lo único que necesitamos hacer ahora es desplegar eso. Tomemos un descanso de cinco minutos aquí. Todavía estaré aquí para responder preguntas, pero si quieres ir... Entonces es una sesión de preguntas y respuestas de cinco minutos si alguien quiere hacer una pregunta. No estoy seguro acerca de estas preguntas en el chat. Creo que Matt respondió a todas ellas, pero sí, Matt, si quieres responder algo o ampliar una de estas preguntas, por favor adelante. Claro, sí, claro.

Sí, dos de las preguntas que recibimos son, ¿Contentful admite versionado o historial de versiones? Y sí. Para cada entrada que ves, y una entrada es una instancia de un modelo de contenido. Entonces, si puedes ver aquí en la pantalla ahora mismo, ves una entrada de contenido a la derecha, ves las versiones de CD. Las versiones se mantienen en el momento en que se guardan. Y son mantenidas por todos los usuarios. Entonces puedes ver todas las diferentes versiones de todos los diferentes usuarios que tienes. Entonces, si hicieras un cambio aquí, verías las diferentes versiones en el lado derecho. Y puedes revertir a una versión anterior o incluso comparar dos versiones entre sí, lo que te mostrará una vista de diferencias por campo. Entonces, si ahora haces clic en comparar con la versión actual, obtendrás una vista de diferencias. Y podrías cambiar qué campos quieres revertir. Así que ninguno de tu contenido se desperdicia. Tu versionado se mantiene igual.

Y otra pregunta que recibimos es, ¿Contentful admite diferentes entornos? Como mencionamos antes, tenemos la API de vista previa, que puede devolverte data que está en borradores. Y tenemos la API de entrega, que te devolverá contenido publicado. En cuanto a los entornos, ofrecemos la función de entorno. Entonces, si vas a configuración, entorno, puedes ver cómo crear un entorno allí. Un entorno aquí es básicamente un entorno para los modelos que has creado. Por defecto, todos tus modelos de contenido se crean en un entorno principal. Pero aquí puedes tomar la decisión de crear un entorno de desarrollo o de preparación. Esto es especialmente útil si todavía estás desarrollando activamente mientras los administradores de contenido ya están llenando contenido en los modelos de contenido. Y quieres evitar conflictos o interfaces de desarrollo rotas. Entonces, un entorno desde el que estás creando contenido ahora será una copia exacta del entorno en el momento de la creación. Esto también lo hace muy poderoso para hacer copias de seguridad, por ejemplo. Entonces, si tienes un entorno principal y quieres crear una copia de seguridad, solo elige un momento en el tiempo. Creas el entorno. Tienes una copia de seguridad de tu entorno en ese momento. Y estos entornos se pueden consumir agregando los puntos finales de la API que estás consumiendo. Entonces, si estuvieras usando la API de entrega, simplemente agregarías en la URL después del ID del espacio una barra diagonal, el nombre de tu entorno. Y luego puedes consumir tanto data del entorno de producción como data del entorno de desarrollo. Y ambos utilizan la misma clave de API. También es posible configurar una clave de API por entorno si así lo deseas. Pero sí. Y otra pregunta que recibimos en el chat, ¿puedo construir una página estática en Contentful y renderizarla en páginas de Next.js, como la política de privacidad, etc.? Sí. Eso es una de las cosas útiles que hace Gatsby. Gatsby es un generador de sitios estáticos. Así que definitivamente puedes hacer eso. Pero también puedes usar Remix o Next.js. Next.js, por ejemplo, tiene la opción de generar páginas de API de forma estática. Y lo que harías es llamar a la API de Contentful en tu getStaticGroups y renderizar tus páginas en función de eso. Así que sí, definitivamente puedes hacer eso. Y hay muchos tutoriales proporcionados tanto por Contentful como por nuestros socios y amigos de Gatsby o, por ejemplo, Netlify. Si los buscas en Google, encontrarás muchos tutoriales e incluso kits de inicio. resp. Muy bien. Gracias, Matt, sí, sí. Me gustan tus respuestas para todas las preguntas, como, vas y lo operas y todo. Y creo que tus respuestas son bastante satisfactorias. Gracias. Así que sigamos adelante con nuestra última parte aquí. En nuestra última parte aquí, queremos desplegar nuestra aplicación en AWS y luego configurar una serie de hooks que se asegurarán de que cada vez que enviemos nuestro contenido a GitHub, la implementación se redeployará, la aplicación se redeployará y también configurar un hook en Contentful que hará lo mismo. Así que cada vez que edites una entrada o hagas lo que quieras o hagas algo, ediciones en la aplicación, también se desencadenará una implementación. De esta manera te aseguras de que tu aplicación siempre esté actualizada. Imagina que tienes un equipo de contenido porque el objetivo principal de tener Contentful o un CMS sin cabeza es tener un equipo de contenido trabajando en la edición de cosas y su contenido se redeployará al instante sin que los desarrolladores desencadenen la implementación o hagan algo. De esta manera, separas el desarrollo del contenido real y puedes entregar un sitio web estático muy eficiente y de alto rendimiento como un blog web o lo que sea. Así que sigamos adelante, así que... Primero tengo, así que lo primero que compartí con ustedes aquí, tengo cuatro ramas y esta rama es un cuarto hito que tiene todo listo. Voy a hacer checkout aquí. Así que voy a revertir todo. Así que tengo 44 archivos y luego voy a cambiar al cuarto hito que tiene todo listo. También quiero mostrarte algo como se vería si termináramos todo. Creo que necesitaríamos reiniciar el desarrollo. También podríamos necesitar desinstalar primero. Sí, esto también te mostrará que puedes tener el archivo markdown como toda la página. No tienes que usarlo en la descripción o algo porque verás aquí en los artículos que tenemos una página para cada artículo que tiene todo. Así que básicamente puedes seguir adelante en Contentful y crear un modelo que tenga un título, slug y contenido y hacer lo que quieras y luego consultarlo donde quieras. Y luego ponerlo en una página, ponerlo en una tarjeta o donde quieras. Así que sigamos adelante y vayamos a nuestra página y actualicémosla. Sigue siendo lo mismo, pero sí, bastante avanzado, así que sigamos adelante y agreguemos contenido y luego haz clic en esto.

Y aquí tienes, este es el título del artículo. Este es todo el contenido. Puedes poner todo el contenido que desees aquí. Incluso puedes usar, navegación, perdón, imaginación o carga infinita o cosas así. Todo está listo fuera de la caja donde obtiene el contenido.

Muy bien, así que vamos a desplegar nuestro sitio web. Entonces voy a ir a AWS y luego verás iniciar sesión en la consola. Por supuesto, puedes crear tu usuario gratuito, tu usuario de nivel gratuito. Y sí, estoy en la consola de AWS. Tengo muchas aplicaciones aquí, pero estamos interesados en AWS Amplify. Y porque lo abrí antes, está aquí, pero puedes buscarlo directamente. Y es bastante sencillo. Así que estás empezando, encontrarás que esto se alojará en Amplify. Solo necesitas conectarte al repositorio Git para implementar continuamente tu frontend y el backend, empezar, subir. Si es la primera vez, tendrás que autorizar cosas, pero como ya he estado aquí antes, es fácil para mí hacerlo, así que sí. Y luego obtengo un montón de repositorios. Ya tengo este repositorio, y luego voy a seleccionar esta rama. Y también puedes ver que hay una forma de admitir Minorep, Minorepos donde puedes seleccionar una carpeta y luego seguir desde ahí. Pero aquí esto debería funcionar, y la compilación predeterminada que se detecta automáticamente seguirá funcionando para nosotros, luego haremos clic en siguiente, y luego guardar y desplegar. Esto tomará un par de minutos, así que se crea todo un entorno para ti y se despliega la aplicación. Y se compila la aplicación y se hace todo lo que quieras. Y para los ganchos, para GitHub no hay nada que debas hacer aquí porque ya está configurado. Así que cada vez que generes algo ahora mismo o envíes algo a esta cuarta rama de hitos, se construirá automáticamente. Así que voy a ver eso, todavía está en la etapa de progreso. Solo espera, debería tomar como máximo cinco minutos. También una de las cosas buenas de Gatsby es que podrías pensar que debido a que estamos generando miles de archivos HTML al cargar una aplicación muy grande. Tomaría mucho tiempo, pero lo bueno es que todo está en caché y cuando Gatsby regenera el archivo que tenía la antigua aplicación, solo va y construye las cosas que necesitan ser redeployadas, como cosas que tuvieron cambios en los archivos, cosas así. Y de esta manera, la siguiente compilación sería más rápida y más rápida y seguiría mejorando. Ahora está clonando el repositorio. Muy bien. Muy bien, así que la mayoría del tiempo aquí, no es la compilación real, la compilación todavía está clonando el repositorio. No puedo ver la pantalla. Todavía está clonando el repositorio y pasando por la provisión y configurando el entorno. Pero ¿ves que la compilación en sí es muy rápida? También hay muchas cosas interesantes aquí que puedes hacer, por ejemplo, ¿recuerdas cuando hablamos de variables de entorno? Aquí tienes variables de entorno que puedes agregar y se agregarán al proceso. Así que ni siquiera tienes que usar el archivo .env allí. Simplemente puedes agregar las variables de entorno aquí en la implementación. Entonces, el backend se pasó porque no tenemos un backend y aquí está el frontend real que está sucediendo. De acuerdo. Veo que aquí te dice que hay seis nuevos activos, hay 23 nuevas entradas y 12 entradas grandes. Eso es lo que estaba tratando de decir. Así que ves que aquí compara la versión anterior con la nueva versión. Y solo agrega cosas modificadas. Por ejemplo, algunas cosas están en caché y otras no, por supuesto, porque es la primera vez que no hay nada en caché todavía. Y aquí ves que para la plantilla de categorías, en realidad generó seis archivos, hay uno y cinco más, y para los artículos generó todos los archivos, la página 404 y luego el mismo HTML. Creo que ya está hecho. Sí, ahora si haces clic en este enlace, funcionará. Entonces una de las cosas interesantes aquí es por qué esta imagen no es visible. También si, sí, ¿por qué esta no es visible? Este es el único, piénsalo, esta y esas imágenes, no están alojadas en Contentful, no provienen de Contentful. Entonces, para solucionar esto, si vas a reescrituras y redirecciones, verás que todas las URL que no terminan con CSS Jeff y todos estos archivos se reescribirán en HTML indexado. Así que necesitamos cambiar esto. Ve a eso, y porque, obtiene la imagen nítida, lo que cambia el gráfico del blog, lo que cambió las imágenes o las mejoró en el formato web B. Así que solo necesitamos agregar el formato web B aquí. Y guardar, volver aquí, actualizar, explorar categorías. Sí, ahora funciona. Y si exploras esto, hay muchas cosas interesantes aquí que puedes hacer, todo. Incluso puedes agregar tu, por supuesto, tu dominio personalizado o mejorarlo o lo que sea, pero hay un nivel gratuito. Y así es la primera parte. La segunda parte que queremos hacer ahora mismo es cada vez que queramos hacer algo en Contentful y que se envíe aquí. Entonces, para hacer esto, necesitamos agregar, crear un webhook desde aquí y agregarlo allí. Y si no sabes qué significa un webhook, es algo que desencadena otra cosa, pero un webhook sería, si creas un webhook desde un sitio web, esto significa que obtendrás la URL que si llamas a esta URL, hará algo en el otro sitio web en el sitio web que necesitas. Entonces, en este caso, queremos que Contentful llame a esta API o golpee esta URL y luego AWS sabrá eso. Sí, algo sucedió aquí, deberíamos ejecutar esto que es un nuevo despliegue. Sí, estamos seguros. Entonces sí, volvamos a Contentful o perdón, primero creemos el webhook. Creo que necesito mucho más. ¿Dónde podemos crear webhooks aquí? Para general, monitoreo, control de acceso, configuración de facturación. Sí, configuración de facturación. Entonces necesitamos crear un webhook aquí y lo llamaremos actualización de contenido, por ejemplo. Y sí, te da lo que se debe construir cuando esto sucede. Estas son las configuraciones predefinidas de lo que sucedió o la ejecución predefinida que sucedió cuando se llama a esta API.

Así que voy a hacer clic en guardar. Tengo este y tengo la URL y también obtengo el comando. Ahora, todo lo que necesito hacer es volver a Contentful. Creo que lo cerré. Así que vamos a ir a Contentful. Entonces, si vas a configuración y ajustes aquí, como todo lo que verías aquí está relacionado con este espacio que tienes, que es nuestra aplicación. Pero puedes crear múltiples aplicaciones y hacer lo que quieras. Para el nivel gratuito, solo puedes obtener una aplicación. Por eso hice el truco y creé dos cuentas gratuitas. Lo siento por esto, Matt. Pero sí. Eso es lo que hice. Así que demuestro cómo crear cosas y mantener otra. Y aquí encontrarás webhooks, agregar un webhook. Y luego para esto, se llama data.ps deployment. Luego pega la URL que tenías aquí. Es una solicitud POST normal. Creo que lo único que necesitas aquí es cambiar el tipo de contenido a application.json. Y también hay muchas cosas interesantes aquí que puedes hacer, como agregar filtro, porque, como recuerdas cuando Matt hablaba de entornos, puedes cambiar cosas para diferentes entornos aquí. Como si tuvieras un entorno diferente, solo activarías este webhook en este entorno. También hay muchos desencadenantes. Ves, desencadenantes para todos los eventos o para eventos de desencadenamiento específicos. Como por ejemplo, si creamos un tipo de contenido, si guardamos una entrada, si guardamos automáticamente un recurso o una versión o lo que quieras, tienes todo bajo control aquí para llamar a esta API solo cuando quieras, pero para nosotros, será para todos los eventos. Voy a hacer clic en guardar, y eso es todo. Así que todo lo que necesitarás hacer es volver al contenido, por ejemplo. Y también quiero mantener esto abierto para saber cuándo suceda. Así que toma esto y ponlo aquí. Vale, no sé por qué está muy pequeño. Vamos a ponerlo de nuevo. Ahora lo tienes aquí. Y luego queremos ir a Contentful para cambiar algo aquí. Cambiar este artículo para desencadenar. Dash employment. Y en el momento en que haga clic en publicar, verás que aquí, ya se ha desencadenado. Y también puedes, creo, monitorearlo desde aquí. Entonces, si vas a webhooks, verás el porcentaje de llamadas exitosas y el registro activo. Verás que se llamó en este punto, cuándo. Así que en este, así que cada vez que edite porque lo hice para todos los eventos, también escucha cuando edito o guardo automáticamente o lo que suceda. Esto no es un buen comportamiento. No estoy seguro de cómo maneja esto AWS. Sí, solo necesitas ir al monitor de monitoreo y ver cuántas veces se implementó. Pero normalmente harías esto, por ejemplo, en un cierto tipo de artículo o al agregar un nuevo artículo, editar un artículo o algo así, o si quieres hacerlo con un intervalo de tiempo donde sucede en una base nocturna o algo así. Tienes todo el control que deseas. Quiero revisar la compilación aquí para ver si está almacenando en caché correctamente o no. Y si es más rápido o no en comparación con la primera vez. Todavía se está construyendo. Todavía están clonando el repositorio. No culpes a esto en Gatsby. De acuerdo, así que el frontend está sucediendo. Entonces sí, aquí acaba de comenzar la construcción. Y ves nuevos artículos, dos entradas actualizadas y seis nuevos activos. Construyendo en producción, paquetes de JavaScript y CSS, renderizador de HTML. Quiero asegurarme de que sepamos qué artículo queríamos mostrar para mostrarte que realmente se implementó. Así que este es el código de ese. Y quiero encontrar el artículo. Esto con eso. Todavía trabajando. Y funcionó. Veamos qué. Entonces este es miembro de agregar categoría de contenido. Vamos a volver. Y luego agregar contenido. Teniendo contenido. Desencadenar despliegue. Entonces, sí, así de fácil es implementar cosas. Y básicamente eso es todo. Eso es todo de lo que quería hablar hoy. Me gustaría agradecerles a todos por venir hoy. Y espero haber sido útil y haber entregado algo útil para ustedes hoy. También gracias, Matt, por responder todas estas preguntas y acompañarme durante todo el taller. Así que gracias a todos. Y sí. Sí, nos vemos.