Desarrollo de blogs dinámicos con SvelteKit y Storyblok: Un taller práctico

Hoy vamos a ver cómo crear un sitio de Gemstack o, en general, un sitio web utilizando Svelkit y Storyblock. Storyblock es un CMS, por lo que es una herramienta que puedes usar para crear y gestionar el contenido, pero en el mercado tenemos diferentes tipos de CMS (sistemas de gestión de contenido). Tenemos CMS tradicionales y CMS sin cabeza, ¿verdad? Así que en el pasado teníamos CMS monolíticos o CMS tradicionales y usábamos una aplicación de software que permitía al usuario o al creador de contenido construir y gestionar sitios web sin tener que programar, por lo que era bastante fácil. Pero al final, podías crear el contenido y entregar el contenido o el sitio web solo para el sitio web. ¿De acuerdo? Y podías empezar rápidamente a crear un sitio web con un CMS tradicional, con un CMS monolítico.

Pero al final, si quieres personalizar algo, por ejemplo, en el frontend, tienes que seguir algunas mejores prácticas proporcionadas por el CMS, porque el CMS proporciona el sistema de actualización de plantillas del sitio. Y así tienes que seguir sus reglas. ¿De acuerdo? Algunos ejemplos son, por ejemplo, WordPress, Drupal, Sikore, y así sucesivamente. ¿De acuerdo? Y típicamente, si quieres gestionar el contenido y también quieres entregar el frontend, tienes que implementar todo el sistema. ¿De acuerdo? Incluso si estás cambiando un poco en el CMS, tienes que implementar todo el CMS. Porque el frontend está estrechamente relacionado con el backend. El backend se utiliza para gestionar el contenido.

Tenemos en el mercado un enfoque diferente. Otro enfoque es, por ejemplo, utilizar un CMS sin cabeza. En este caso, tienes divididas dos partes. Una es el backend para gestionar solo el contenido. Y de hecho, el sistema de gestión de contenido sin cabeza es una aplicación de software que permite al usuario y al equipo gestionar el contenido, no crear el sitio web. Así que gestionar el contenido y el proceso. Por ejemplo, crear el contenido, revisar el contenido, previsualizar el contenido y desplegar el contenido. Así que tienes múltiples herramientas para gestionar el contenido. Y luego, por otro lado, puedes crear tu propio frontend. Y obviamente, en este caso, porque el frontend está totalmente acoplado con el contenido, tienes que integrarlo, ¿verdad? Así que típicamente, el CMS sin cabeza te permite crear el contenido y luego exponer este tipo de contenido a través de APIs. Así que tú, como desarrollador de frontend, tienes la libertad de elegir tu propio framework, SvelteKit o Svelte o Next React o Nuxt y Vue. Así que tienes la libertad de elegir tu stack de tecnología de frontend y tienes que integrarlo a través de una API. Entonces, ¿qué proporciona el CMS sin cabeza? Típicamente, es una interfaz de administración para gestionar el contenido, almacenar el contenido y luego proporcionar el contenido a través de la API. En este caso, hoy vamos a crear y estructurar el contenido con Storyblock, así que para la parte de los editores de contenido. Luego, Storyblock expone la API de entrega de contenido. Así que esto viene incluido. Así que hoy, como desarrollador de frontend, podemos centrarnos en la parte que nos gusta y nos apasiona, así que la parte de frontend. Así que podemos elegir nuestro framework de frontend y hoy, obviamente, Svelkit y podemos construir nuestro frontend. Cuando necesitamos el frontend y el contenido, podemos integrar las APIs proporcionadas por Storyblock. Utilizaremos un SDK proporcionado por Storyblock para integrar de manera sencilla las APIs. Así que veremos lo que necesitamos desde la perspectiva del frontend para integrarnos con Storyblock. Y luego podemos crear nuestras aplicaciones de manera SvelteKit, ¿verdad?, y podemos desplegar también las aplicaciones en algún lugar en la cloud. Por ejemplo, si tenemos tiempo, las desplegaremos en Netlify, y luego podemos permitir al usuario final consumir nuestras aplicaciones que vamos a construir. Así que expliqué un poco el pasado de los CMS tradicionales y los CMS monolíticos. Hoy vamos a utilizar un CMS sin cabeza. Pero, ¿por qué es mejor un CMS sin cabeza que un CMS tradicional? Porque tienes más flexibilidad y libertad porque puedes elegir tu stack de frontend. Probablemente, si alguno de ustedes viene de WordPress, probablemente saben que están limitados a un stack de tecnología y tienen que utilizar su sistema de plantillas, ¿verdad? Así que probablemente, como desarrollador de frontend, no estás contento porque no puedes usar tus propias herramientas. Otra razón para utilizar un CMS sin cabeza es por la reutilización de contenido, ¿verdad? Veremos cómo podemos estructurar el contenido y reutilizar los bloques de componentes en las páginas. Mejora el rendimiento porque las APIs son proporcionadas por un sistema, en el caso de Storyblock, por CloudFront, por lo que por un CDN. Y luego puedes centrarte en optimizar el rendimiento del frontend, ¿verdad? Escalabilidad, porque al final, los endpoints son gestionados por el CMS, porque típicamente los CMS son aplicaciones SaaS, ¿verdad? Así que se despliegan en la cloud, por lo que puedes escalarlo fácilmente. Futuro seguro, porque a veces en el pasado, si usabas WordPress, y querías actualizar WordPress, probablemente tenías que reconstruir el sitio web, principalmente cuando tenías que cambiar a una versión principal. En este caso, puedes centrarte principalmente en el frontend. Y seguridad y mantenimiento, porque al final, la interfaz entre el usuario final y el sistema backend está limitada por las APIs, ¿verdad? Así que en este caso, puedes consumir la API. Las APIs son principalmente de solo lectura, por lo que puedes tener más seguridad. Y, típicamente, los CMS empresariales como Storyblock siguen algunas certificaciones, algunas reglas, las reglas OWASP. Son ISO 27001. Así que lo que estoy tratando de decir es que son de nivel empresarial, por lo que se preocupan por la seguridad. Alguien más verifica la seguridad, y así sucesivamente, ¿verdad? Bien.

Así que ahora podemos empezar. Una breve introducción, pero ahora podemos empezar. Y hemos preparado algunos ejercicios. Probablemente, podemos copiar y pegar la URL de este documento que ya hemos preparado, ¿verdad Alba? Sí. De acuerdo, entonces aquí, si haces clic, Alba ha compartido una URL en el chat, si abres el chat, y también abres la URL, accederás a algunos de nuestros ejercicios. Sí. Por favor, avísanos si tienes acceso, para verificar contigo. Pero estoy bastante seguro de que tendrás acceso. De acuerdo. La publicaré por si acaso. Solo para guiarte en este tipo de ejercicio, déjame explicarlo un poco. Así que ahora vamos a empezar a crear un proyecto de SvelteKit. Podemos empezar creando un proyecto de SvelteKit vacío. Porque, según tengo entendido, algunos de ustedes no han utilizado SvelteKit, así que podemos empezar creando una aplicación de Svelte. ¿Estás de acuerdo? Para instalar una aplicación de Svelte, creo que podemos usar npm. Así que ahora voy a crear una aplicación de SvelteKit totalmente vacía. Como puedes ver, puedes usar npm, crear Svelte, y luego puedes usar la última versión. Luego puedes crear MyApp. MyApp es la carpeta donde vamos a crear la aplicación. Si quieres, puedes usar tu terminal y luego seguir estas instrucciones para hacer lo mismo en tu computadora local. Si tienes alguna duda o no sabes, por favor levanta la mano o escribe en el chat. Ahora intentaré ir despacio, solo para asegurarme de que puedas seguirnos. Con este tipo de comando, podemos crear una aplicación vacía para que podamos responder a algunas preguntas si queremos una aplicación de demostración de Svelte, o un proyecto esqueleto, o un proyecto de biblioteca. En este caso, proyecto esqueleto. Luego puedes decidir si usar JavaScript JSDoc, o TypeScript, o normal. Por ahora, queremos ver cómo crear una aplicación vacía de SvelteKit, así que podemos seleccionar JavaScript con comandos JSDoc. Luego podemos agregar algunas herramientas útiles. Por ejemplo, Slink, Prettier, Playwright y VTest. Las primeras dos son para enlazar y formatear. Luego también tenemos la oportunidad de instalar algunas herramientas de testing, por ejemplo, como Playwright y VTest. Pero por ahora, personalmente, típicamente elijo Prettier. Puedes elegir más de uno, pero ahora solo podemos elegir uno. Luego podemos hacer clic en Enter. Luego podemos entrar en el nuevo directorio. El nuevo directorio, como puedes ver, tiene algunos archivos creados por el comando, y luego podemos ir a través de npm install. Estamos instalando los paquetes.

Obviamente, estoy usando npm, puedes usar yarn o pmpm, etc. Luego podemos agregar Git, pero por ahora no es importante. Luego podemos ejecutar npm run dev, el servidor. Ejecutando el servidor, tenemos el servidor web en funcionamiento, así que ahora, déjame mostrarte. Esta es la página vacía de nuestra aplicación SvelteKit. Significa que podemos instalar SvelteKit. ¿Por qué quiero crear una aplicación vacía solo para permitirte entender la estructura de una típica aplicación vacía de SvelteKit. En este caso, no estamos integrando el CMS, solo estamos instalando la aplicación. Probablemente puedas ver, ponerlo, y también el encabezado. Probablemente puedas ver mi editor, es correcto. Luego podemos ver que tenemos el directorio con el código fuente, y luego tenemos dos archivos, app.d.ts y app.html. Luego tenemos el directorio de rutas principalmente donde tenemos la página. Veremos un poco más adelante sobre el sistema de enrutamiento, pero por ahora, la página que podemos ver en el navegador está en la carpeta pluspage.svelte. Si cambiamos algo aquí, y luego podemos cambiar, por ejemplo, al navegador. Demasiadas pantallas. Podemos abrirlo. Como puedes ver, tenemos el Hola. Es muy fácil, pero nos permite entender la estructura de la aplicación vacía.

Ahora, ¿qué pasa si queremos agregar la integración de Storyblock? Desde el lado de Storyblock, permíteme comenzar usando nuestra herramienta llamada Create Demo. Create Demo es una herramienta proporcionada por Storyblock que te permite crear de la misma manera que hicimos antes, una aplicación vacía con la integración ya configurada con Storyblock. Significa que vamos a lanzar un comando. Ahora, podemos ver. Luego veremos más o menos la misma estructura, pero con alguna integración con Storyblock. Storyblock es tu CMS. Exactamente, sí. Es el CMS que vamos a usar. Pero hoy nos centraremos principalmente en la parte de Svelki. En este caso, puedo eliminar, por ejemplo, la aplicación vacía. Porque creamos una aplicación vacía solo como ejemplo, y luego podemos usar nuestra herramienta create demo. Para hacer eso, podemos hacer, podemos lanzar más o menos de la misma manera que antes. Podemos usar MPX y luego podemos crear el demo. Storyblock create demo con la versión más reciente. Luego queremos crear una carpeta, MyDemo. Luego podemos definir qué framework queremos usar, y hoy estamos usando Svelkit, así que vamos a usar Svelkit. Luego podemos definir qué tipo de gestor de paquetes queremos usar, y es opcional, pero solo para permitirte entender, vamos a definir la región, la región de AWS que podemos usar para el CMS, no para el frontend, para el CMS, para la parte que quieres usar y gestionar En este caso, mi expectativa es tener una carpeta MyDemo. Tenemos una aplicación Svelkit con algunos paquetes agregados y algunas instrucciones agregadas para la integración con Storyblock. Más o menos, similar, lo mismo. Podemos ejecutar el sistema, la herramienta nos pregunta el token de acceso porque si quieres integrar tu frontend con Storyblock, necesitas usar un token de acceso. Por ahora, podemos omitir esta parte porque usaremos el espacio completo. Luego para esta pregunta, podemos decir, lo veremos más adelante sobre el HTTPS y la herramienta create demo. Toma un tiempo porque bajo el capó, el comando toma un clon, mejor clonar el repositorio de GitHub, donde ya tenemos una aplicación Svelkit, una aplicación Svelkit vacía con algunos paquetes para integrar Svelkit y Storyblock. Luego podemos ingresar al directorio y luego ejecutar npm install y luego ejecutar el servidor. Ahora el servidor está en funcionamiento. En este caso, tenemos este tipo de mensaje porque tenemos la configuración para servir la página a través de HTTPS incluso si estamos en local, ¿de acuerdo? Será muy importante servir la página a través de HTTPS porque la configuración comienza a usar la red telefónica 3G. Y el porque usamos la red a través de HTTPS. Veremos por qué en unos minutos. Entonces podemos aceptar el certificado porque estamos en local. Así que Vita porque bajo el capó estamos usando un Vita, crea el certificado, el certificado autoasignado para ejecutar localhost. Así que está bien porque la máquina es. Y como puedes ver, tenemos una página muy simple. De acuerdo, una página muy simple con algo de contenido. Por ejemplo, este hola mundo, característica uno, característica dos y característica tres. Y un pequeño spoiler, este tipo de contenido proviene de Storyblock. Así que significa que ya tenemos integración. Ya hemos realizado una integración. Así que permíteme hacer lo mismo que hice antes. Así que abriendo el editor y luego ver algo sobre la estructura, ¿verdad? En este caso, tenemos más o menos la misma estructura que antes. Pero en este caso, en el package.json, tenemos algunas dependencias adicionales. Por ejemplo, este es el SDK que proporcionamos para la integración con Story Block. Tenemos, por ejemplo, este complemento que nos permite iniciar el servidor web local a través de HTTPS. Y algunas otras cosas, por ejemplo, porque estamos usando un Tailwind CSS, pero no es obligatorio. Esto es solo un ejemplo, ¿verdad? Luego, en el directorio de rutas, tenemos más archivos que antes, pero al final, como puedes ver, tenemos page.swelt, donde tenemos el componente Story Block. Ahora, vamos a ver cada pieza y comentar esto. Solo para que sepas que a través de la aplicación Create Daemon, tienes la estructura ya configurada, tienes una instalación mínima y tienes algunos archivos ya configurados, pero ahora entendemos que podemos comenzar desde una aplicación SvelteKit. Podemos agregar la integración con Storyblock. Ahora con Alba, puedes tomar el... vamos a crear un proyecto desde cero y con la configuración con Storyblock porque queremos crear el contenido en Storyblock y queremos crear nuestra aplicación de SvelteKit que usa y recupera datos de Storyblock. Exactamente. ¿Tienes alguna pregunta hasta ahora? No hay preguntas, de acuerdo. En general, si tienes preguntas mientras explicamos un poco, puedes escribir un mensaje. Sí, pero ahora porque hacemos mucha magia usando algunos comandos, ¿verdad? Ahora podemos hacer lo mismo como si estuvieras siguiendo paso a paso. Así que puedes entender todo el proceso, ¿verdad? Exactamente. Entonces, si quieres, podemos, puedes compartir la pantalla Alba, ¿quieres o? Sí, puedo. Sí, hagámoslo. Así que puedo, de acuerdo, compartir la pantalla, el escritorio también, ese es el correcto. De acuerdo, perfecto. ¿Puedes ver correctamente el tamaño de la pantalla, está bien? De acuerdo, genial. Bueno, sí, la idea era que aterricé en la página de Notion que tenemos solo para que sepas que aquí tienes todos los recursos que compartiremos y también el ejercicio que haremos y también las versiones que necesitas tener, por ejemplo, para node, porque nuestro SDK bajo el capó está utilizando la API nativa fetch. Entonces, para admitirlo, debes usar este tipo de versiones o superiores, pero como estamos usando SvelteKit, y es moderno, todos usarán este tipo de versión de node. Así que no creo que sea un problema. Y aquí tienes todos los enlaces a todo lo que explicaremos. Y también los repositorios de plantillas que creamos para cada uno de los ejercicios. Tendrás una rama para cada uno de los ejercicios. Entonces, en caso de que te pierdas, siempre puedes cargar la rama y ponerte al día muy rápido. Y aquí tienes el repositorio que crearemos con todos los ejercicios por ramas, como te dije. Y puedes ir uno por uno y verificar si cambias algo en tu código o lo que sea. Y la versión en vivo del proyecto que crearemos. Que es solo algo básico. Quiero decir, nada extravagante, solo un artículo dentro de un blog y sí, algún tipo de texto.

Pero sí, la idea es que como ya puedes ver Roberto nos explicó cómo funciona el CMS básicamente hoy en día. Y vimos cómo crear el primer ejercicio que básicamente es, como puedes ver aquí, cómo crear la plantilla de Sveltekit desde Storyblock. Como usar solo este comando, que Roberto nos explicó, creamos la plantilla directamente porque ya la tenemos de código abierto. Así que no necesitas hacer nada más que ejecutar el comando. Pero si queremos crear esta plantilla desde cero, tenemos el ejercicio 1 manual. Que es este aquí. Y aquí es donde explicamos paso a paso lo que haremos. Pero básicamente, ahora, vamos al código y veamos qué podemos hacer.

Así que abrimos nuestra terminal. Como puedes ver, Roberto tiene todo en modo claro, y yo soy la mujer del modo oscuro. Así que es divertido, estamos en ambos lados de la habitación. Y lo que haré ahora es simplemente copiar el comando de CreateSvelkit. Lo llamaré Ultimate Tutorial Series, porque es el ejemplo que tenemos. Y luego simplemente proceder con CreateSvelkit y elegir las mismas cosas que elegimos antes. Así que la aplicación de demostración de Svelkit es la que quiero o no. Espera. El proyecto Skeleton. Sí, esto ha cambiado. OK. Sí, en el pasado, recuerdo solo dos opciones. Es como, hay una tercera. OK. Y usaré, no, no TypedScript por ahora, porque estamos usando el SDK directamente. Y luego, bueno, no importa. Así que digamos nada. OK. Ahora que lo tenemos, abrámoslo mejor en el archivo. Así que buscaré en el escritorio, Wordops. Lo tengo aquí. Aquí lo tenemos. Perfecto. Y ahora simplemente instalemos los paquetes nuevamente. Perfecto. Y sí. Podemos ejecutar nuevamente este servidor, pero solo para tenerlo listo para los próximos pasos. Así que sí. Básicamente, al principio, explicamos que strblock usará SSL. Entonces, lo que necesitamos hacer es instalar el paquete. Así que simplemente instalaré el complemento. Permíteme copiar este comando. OK. Y abramos uno nuevo. Perfecto. Y ahora que lo tenemos, necesitamos ir a la configuración de bit. Permíteme primero copiar todos los paquetes que necesito. OK. Así que aquí, agregaré el complemento basic SSL. Que agregaremos a los complementos de Svelt. Y luego necesitaremos configurar el servidor a true, el núcleo HTTP. Eso es la página a true. Ahora podemos tener la versión HTTPS de nuestro localhost porque el iframe del Street Blocker lo requiere para funcionar correctamente. Porque, por supuesto, como es un iframe, puede haber alguna filtración de información y para eso es importante. Pero solo para que lo sepas. Entonces, lo que haremos ahora es crear nuestro espacio en Street Block desde cero. Para que podamos tener algo a lo que conectarnos realmente. Para eso, solo necesitamos ir al sitio web de Street Block, crear una cuenta gratuita si no tienes una. Y una vez que la tengas, puedes iniciar sesión y verás los repositorios de contenido que estarás creando. Por supuesto, tal vez no tengas ninguno en este momento. Así que solo necesitas agregar un nuevo espacio y crear un nuevo espacio desde cero. Así que este, llamémoslo el ejemplo de Svelkit, Varsovia, y seleccionemos Europa en mi caso, pero en tu caso, donde sea que seas. Y ahora que lo tenemos, podemos seleccionar nuestro plan o continuar con la prueba. Continuaré con la prueba, pero puedes seleccionar el plan gratuito que tenemos, el plan de la comunidad. Ya que usaremos todas las funciones gratuitas, así que no necesitas nada de los planes de enterprise o cosas así. Puedes optar por el plan gratuito y hacerlo. Y aquí tienes el comando actual que Roberto acaba de usar, pero lo omitiremos porque queremos crear todo desde cero. Así que ahora lo que haremos es, para ver nuestra aplicación dentro de Street Block antes de conectarnos al contenido en sí. Podemos hacerlo realmente yendo a la configuración en la barra lateral en el lado izquierdo. Aquí tenemos la configuración del editor visual y aquí puedes ver un entorno de vista previa local que estamos usando dentro de Street Block que en nuestro caso queremos tener el de Svelkit. Así que el de Svelkit, lo tenemos aquí, así que puedo copiar este comando e ir aquí y pegarlo. Y ahora que lo tenemos, si vamos a nuestro contenido, el contenido de muestra que tenemos cuando creamos un espacio desde cero en Street Block es solo una página de inicio con algo de contenido. Y por ahora, lo que podemos ver es un enlace roto porque primero necesito, sí, aprobar el SSL sin certificado, siempre me olvido de eso. Y ahora, si recargamos, podemos ver una foto para la página que tiene sentido porque no hay una URL de página de inicio así que podemos agregar la ruta real a la barra diagonal. Esta parte no es obvia para todos. Así que la idea es que solo necesitas tener una barra diagonal para obtener el contenido de ella, pero puedes hacer esto para tener la página de inicio real de cualquier sitio web de URL. Así que solo necesitas el dominio, ¿verdad? Para eso tenemos la barra diagonal pero siempre tenemos una barra diagonal para obtener el contenido de ella en la API. Así que ahora que lo hice, puedo ver la página de bienvenida real de Svelte porque está leyendo la página de barra diagonal de nuestro sitio web. Y ahora es el momento de ir e instalar nuestros paquetes para trabajar con StreetBlock. Así que instalemos... Bueno, primero detendré los módulos de lo contrario estaremos locos porque estoy instalando cosas sin detener el servidor y eso es raro. OK, ahora podemos agregar el SDK de StreetBlock Svelte. Y necesitaremos agregar TypeScript. Eso es algo que Roberto puede explicarnos porque yo no lo sabía y parece útil dentro del kit de Svelte como lo necesitamos, pero no sé por qué necesita instalarse después en lugar de la creación de interacción. Una vez que lo tenemos, necesitamos ir a nuestro diseño en esta búsqueda aquí en rutas, necesitamos crear uno en realidad. Así que creamos un nuevo archivo y este archivo se llamará plus layout.ts. Así que aquí, necesitamos copiar y pegar lo que tenemos en nuestro ejercicio. Básicamente, aquí, si vamos a esta sección después de configurar el espacio, tenemos aquí el código que se necesita en el diseño. Así que copiaré y te explicaré qué estamos haciendo aquí. Básicamente, estamos obteniendo el contenido de este SDK de Svelte. Estamos obteniendo la API useStoryblock que es solo una acción, algo que llamamos hooks en React y composables en Vue que básicamente obtiene la solicitud de API a un story block de una manera diferente. Así que ya te hemos proporcionado la configuración del fetch.

Solo necesitas agregar este lag y las opciones como filtros o algo que quieras cambiar de la solicitud de API. Y luego todo será útil y ya proporcionado por esta acción. En realidad, es de código abierto, por lo que puedes cambiar cómo se hace en caso de que quieras cambiar algo y crear tu propia acción para eso.

Y luego tenemos el storyblock init que es una forma de inicializar el SDK de Storyblock. Entonces aquí puedes proporcionar el token de acceso a tu espacio que haremos ahora y luego usar el complemento de la API que proporcionaremos en este SDK. Ese complemento de la API es básicamente lo que se usa dentro de esto. Eso es todo. Entonces es una forma de inicializar el fetch. Digamos que sí ahora.

Sí. Lo siento. Solo para, está bien, pero probablemente podamos preguntar a las personas si están tratando de ejecutar el comando tratando de seguirte y si están atascados en. Veo que una de las personas tiene un problema de que todavía está en blanco después de recargar. Sí. Probablemente es importante saber que si estás usando Brave o alguna herramienta que está bloqueando las cookies y cosas así, hay una propiedad aquí, por ejemplo, que necesitas desactivar. De lo contrario, no te permite ver nada. Puedo mostrarte eso. Si hago eso, verás una página en blanco. Entonces lo que necesitas hacer siempre es eliminar esto. Ahora mismo no tengo el localhost en ejecución, por eso puedo obtener la verificación SSL para la vista previa. De acuerdo, probablemente porque tienes que abrir la página de vista previa. Sí, primero necesitas abrir la URL. Así que si ejecuto el comando nuevamente, la idea es que cada vez que lo abras, necesitas ir a la pestaña. De acuerdo, intenta abrirlo. Y luego necesitas aprobar el SDBS en el advanced. Bueno, en realidad para mí está bien porque ya está funcionando, pero viste la primera vez, sí. Sí, la primera vez tienes que acceder, sí. Sí. Sí, lo de Brave fue, al principio me enterró. Pero Erik, ¿es tu caso que no lo abriste primero y luego aprobaste el avance? Porque no tenemos un certificado, así que tal vez sea por eso. Puedo obtener esto. ¿No hay respuesta? Erik? De acuerdo, lo hice. Ahora, solo dice que este sitio puede proporcionar una conexión segura. Localhost envió una respuesta no válida. Error, error de protocolo SSL. De acuerdo, ¿instalaste el complemento, verdad? ¿El complemento básico de SSL? Luego intentas ingresar a vt.config. De acuerdo, luego tienes que importar el complemento básico de SSL. Oh, cambiamos la parte de en medio tratando de hacer que funcione. De acuerdo. Sí. De acuerdo, así que ese es el puerto. Sí, porque vt, si ya abriste vt, cuando lo reinicias de nuevo. Una vez, exactamente. Oh. Agrega el siguiente puerto disponible, ¿verdad? Entonces. Sí, eso es cierto. Tal vez estaba usando el comando Create que viste antes, y luego creando de nuevo. Uno se está bloqueando en el siguiente puerto. Y de nuevo, uno está bloqueado. Sí, ese podría ser el problema. Sí, uno de los desarrolladores nos dijo algo interesante. De acuerdo, interesante. Builder IO que conocemos usa un iframe, pero parece que no necesita el personal especial de HTTPS. Así que creo que tenemos que verificar qué están haciendo. Pero esencialmente, porque nuestra interfaz es proporcionada por HTTPS. Y en cierto punto, estamos incluyendo un iframe. Entonces, en los recursos, necesitamos proporcionar este tipo de recursos a través de HTTPS. Entonces, esa es la razón por la que tenemos que servir las aplicaciones locales, las aplicaciones de Valkit a través de HTTPS. Y esta es la razón por la que necesitamos un certificado. Me pregunto si Builder IO o generalmente usan un entorno de vista previa como el iframe con aplicaciones ya alojadas con su propio SSO o no. Porque la idea es que en esta tabla, proporcionamos soluciones de SSO para enterprise. Entonces, por lo general, si quieres tener un entorno que sea realmente seguro y tu implementación de tu aplicación frontend también sea segura porque tal vez los contenedores sean de una agencia o de una parte externa, necesitas tener un HTTPS en el host para no tener este tipo de problema. Pero pueden hacerlo con localhost. Sí, eso es lo que pasa. Solo con localhost. Sí, tenemos que verificar la diferencia entre localhost y los entornos de vista previa porque ahora mismo, estamos tratando los entornos de localhost como los mismos que los que ya están implementados en la cloud. Entonces sí, tal vez eso es una pesadilla trabajar con HTTPS local, diría yo. Sí, una vez que estás acostumbrado a usar HTTPS, ahora es por defecto. Habilito el HTTPS por defecto en todos los proyectos. Sí, eso es cierto. Pero siempre es el caso porque somos devrels y estamos trabajando con el mismo producto. Pero sí, tenemos que verificar cómo hacer- También dentro del proyecto. También dentro del proyecto. Sí. De todos modos.

De acuerdo. Bueno, ahora que para todos está funcionando el HTTPS, siempre es la pesadilla de lo peor de ellos, siempre tener problemas con eso. Es la parte más difícil de lo peor de esto. Sí, para Next es una pesadilla porque no funciona correctamente porque necesitan tener una variable de entorno para eso. No sé, tantas cosas extrañas, pero de acuerdo. Entonces la idea es que ahora que está funcionando, intentemos conectar el SDK de Storyblock con nuestro espacio actual. Así que vayamos a configuración en nuestro espacio. Vamos aquí y en la barra lateral en configuración, nuevamente en tokens de acceso, ahora podemos ver el token de vista previa. Este token es el que se usa en nuestra máquina local o en los entornos de vista previa que empujamos para los editores de contenido. Entonces, para entregar contenido, por ejemplo, para nuestro lado de producción, crearás uno público que solo tenga los derechos de leer contenido y no otros derechos. Entonces, por ejemplo, solo crearé uno para producción más adelante, pero por ahora solo usaremos el de desarrollador. Ese es el de vista previa. Y una vez que lo tengo, puedo copiarlo aquí o tal vez solo puedo hacerlo en mi archivo de entorno y luego poner process M lo que sea aquí pero por ahora, hagámoslo manualmente y listo. Entonces, ahora si vamos a nuestro ejercicio aquí, el siguiente paso, como puedes ver será definir el contenido que ya está en un storyblock porque hasta ahora, solo estábamos obteniendo el contenido inicializando el SDK pero necesitamos obtener realmente algún contenido. Y para eso, crearemos bajo la carpeta raíz nuestra página CIS que recuperará los data de la página de inicio que ya tenemos aquí.

De acuerdo. Sí, la idea es que ahora estamos viendo objeto-objeto, pero la idea es ver los componentes que tenemos en nuestro lado derecho. Básicamente, el componente teaser con hello world y el grid con algunas características diferentes. Entonces, para hacer eso, lo que necesitamos hacer es crear los componentes que queremos tener en nuestro espacio de Storyblock. Aquí, estos componentes están viniendo de la biblioteca de blogs de Storyblock como cualquier otro CMS.

Tendrás la definición de tu estructura. Básicamente, tendrás los componentes que necesitas en tu página. Y aquí, en el lado derecho, verás este esquema. En este caso, un componente de función está utilizando nuestro campo de texto llamado nombre. Y luego tenemos el grid que es un campo llamado columnas que espera que se aniden nuevos componentes. Entonces, en este caso, los bloques, columnas, digamos que solo queremos que la función esté en para que podamos realmente restringir, el contenido que queremos anidar en este caso, y lo mismo con la página. En la página, tendremos bloques de cuerpo que esperan cualquier componente que hayamos creado dentro de este espacio de función de cuadrícula y estos se agregarán en este campo. Y luego, en el teaser, tendremos el titular.

Entonces, para representar este tipo de componentes, necesitamos crear un componente por cada esquema que generamos en un bloque serial. Así que hagámoslo. Vamos a la página de Notion actual, creamos una carpeta de componentes en el directorio de origen y copiamos y pegamos todos los componentes de Svelte que hemos creado. Así que vamos aquí. Creamos la carpeta de componentes y comenzamos a agregar, por ejemplo, el componente picture de Svelte y luego aquí, copiamos el componente. La mayoría de los componentes tendrán la misma estructura. Básicamente, tendrás la acción editable de Storyblock que es parte del puente de Storyblock. Con esto, tendrás una línea discontinua que te mostraré cuando esté funcionando y en la que puedes hacer clic para abrir el lado derecho con el esquema de ese componente específico. Para obtener el contenido de este componente que proviene de esto aquí. Entonces, aquí el componente de Storyblock es solo un componente dentro de este SDK de Svelte que lo que hace es importar los componentes que están en la carpeta de componentes. Como puedes ver aquí, estamos obteniendo el bloque y el bloque es la propiedad que estamos enviando, que es ese símbolo. Entonces, todas las propiedades relacionadas con el componente de función, por ejemplo, el campo de nombre que es un texto se entregarán mediante esta propiedad de bloque. Así que ahora vamos a nuestra página de Notion y copiamos y pegamos el resto. Esto será un acuerdo. Y una vez que también hayamos acordado, podemos simplemente obtener la página. Y luego, en la página, estamos representando múltiples componentes en lugar de solo un texto. Luego, dentro del teaser, también tenemos solo un texto. Así que teaser.spout, y ahora los tenemos todos. Y para tenerlos, necesitaremos importarlos en nuestro diseño porque de lo contrario, el SDK de StreetBlock no los reconocerá. Entonces, si vamos al diseño, podemos importarlos. Depende del marco de trabajo. Diría que puedes tener importación automática o no. Los componentes dependen del caso de tu marco de trabajo, pero en este caso, necesitamos agregarlos aquí. Así que los tenemos, y el SDK de StreetBlock sabe acerca de estos componentes que acabamos de crear. Entonces, ahora que lo tenemos, solo necesitamos, creo que eso es todo, sí, eliminar el historial. Eso es lo que hice. Básicamente, eliminamos el historial como ejemplo y dejamos que este componente de StreetBlock represente los componentes que acabamos de crear. Entonces, vamos a la página de StreetBlock, y ahora podemos ver, sin ningún estilo, por supuesto, porque aún no tenemos TypeWin. Podemos ver el teaser. Si hago clic en él, como te dije, la acción editable de StreetBlock que proviene de este SDK de Svelte se abre, en el lado derecho, el esquema de ese componente. Y si hago lo mismo con la función uno, abriré los diferentes niveles anidados del componente. Y por ejemplo, si solo quiero mover esto sobre esto, podemos ver en tiempo real el cambio. Entonces ahora el grid está arriba, y luego el teaser está abajo. Y lo mismo si creamos un nuevo bloque. Entonces, si creamos un nuevo, digamos, otro grid, y creamos un par de funciones, podemos ver, nueva función, los cambios en tiempo real en el lado izquierdo. Así que eso es algo que otros LCM no están haciendo en este momento porque prefieren tener este tipo de vista de formulario. Si lo hago más pequeño, la vista previa, solo puedes ver el formulario y comenzar a agregar contenido, pero tal vez como editor de contenido, no estás realmente seguro de qué contenido estás cambiando. Si es un artículo, podría ser simple porque solo estás escribiendo algo para un artículo y la página del artículo, ya sabes dónde estás colocando las cosas, ¿verdad? Pero si es una página de destino, como esta que podría tener tantas secciones diferentes, es bueno tener una visión general de lo que estás construyendo. Entonces puedes verificar qué es, cómo se ve en el móvil y tratar de mantener la aplicación frontend como deseas y no solo el contenido como deseas. Por eso JavaScript es realmente genial al respecto. Y luego, lo que haremos ahora, espero, es estilizarlo un poco porque sí, no me gusta así. Así que agreguemos un poco de TypeWin. Ahora, por supuesto, ya está agregado en nuestros componentes como puedes ver. Y lo que necesitamos hacer es agregar TypeWin para que suceda. Entonces, tenemos una forma en Svelte kit, como estoy viendo, de agregar el complemento de TypeWin. Así que simplemente podemos, sí, proceder. Puedes continuar, siempre me pide permisos. Y una vez que lo tengamos, simplemente instalemos nuevamente básicamente. Sí, no sé por qué. Podemos agregarlo más rápido, pero está bien. Ahora que está instalado, agreguemos el preprocesador como hicimos, con él en realidad. Así que agreguemos- Creo que es suficiente con el preprocesador, sí. ¿Eso es- Ah, crees que este ya está- Sí, sí. Oh, ooh. No, pero ya estaba agregado. De acuerdo. De acuerdo, de acuerdo. Necesito hacerlo manualmente, no sé por qué. Pero está aquí, oh, está aquí. De acuerdo, no toques nada, Álvaro. De acuerdo, perfecto. Sí. Pero mi sugerencia es, ahora, eliminar con preprocess. Porque es- Oh, okay, eso es lo que querías decir antes. Y por eso lo tenía funcionando en mi local. Porque tenía el preprocesador de Tailwind. Entonces ya se está conectando con este. Sí, porque es necesario para Tailwind porque Tailwind, por ejemplo, tiene algo de post CSS. Interesante, de acuerdo. Y post CSS requiere un preprocesamiento. Así que están utilizando el preprocesamiento de Svelte. El grande ya. De acuerdo, de acuerdo. Pero, de acuerdo. Luego necesitamos hablar después de las palabras por qué el tipo de TypeScript se quejaba sin el preprocesamiento, pero está bien. No, porque nuestro componente en este momento, el componente de Svelte está hecho a través de TypeScript. ¿De acuerdo? Entonces, cuando estás ejecutando el código en el navegador, así que a través del servidor del cliente, el procesamiento del lado del cliente, ¿verdad?

Entonces, necesitas, déjame decirte, compilar el componente Svelte y Storyblock, ¿verdad? Porque está hecho a través de TypeScript. Sí, probablemente sea una mejora que puedas hacer en el futuro, eliminando la dependencia de TypeScript, ¿verdad? De acuerdo, sí, tiene sentido. Gracias por eso. Sí, muy bien. Entonces, cuando tienes ThaiWin, ya puedes ver que se aplican los estilos. Ahora tienes una cuadrícula adecuada, digamos. Y si cambiamos el orden de las características, podemos ver en vivo cómo cambia y cuál es la posición. Y si guardamos, también tenemos esta vista previa para el sitio antiguo. No estoy obteniendo ningún resaltado de las cosas al pasar el cursor en el editor visual y no se actualiza cuando edito un valor de propiedad.

De acuerdo. Esa parte se configuró en el puente. Permíteme mostrarte. Está en el archivo de diseño, JavaScript, no en Svelte. En este, viste la mitad. No, no este, lo siento. La página. De acuerdo. En la página Svelte, aquí tienes el puente de StoryBlock. Por lo tanto, esto obtendrá los datos del historial que ya proporcionamos en page.js. ¿Ya tienes esta cantidad lista en tu base de código? Eric, ¿sigues ahí? Probablemente esté revisando, pero probablemente podamos trabajar en todos los pasos. Así que comencemos desde el layout.js porque ahora estamos usando layout y page, ¿verdad? Layout, digamos, es un contenedor de la página. Entonces, para este ejemplo, creo que podemos omitir el diseño, pero ahora es un contenedor realmente estructurado. Ahora es realmente estructurado de esta manera. Entonces, tenemos layout.js en la función de carga. Vamos a inicializar el objeto StoryBlock a través de la unidad StoryBlock, ¿verdad? En este caso, tenemos la unidad StoryBlock con el token de acceso, con la lista de componentes que necesitamos, y así sucesivamente, ¿verdad? Y como estamos inicializando la unidad StoryBlock aquí, queremos enviar el objeto, la API de StoryBlock, al hijo. En este caso, es page.js, esa es la razón por la que en page.js, si cambias a page.js, estamos heredando del padre. Entonces, del diseño, el objeto, ¿de acuerdo? De lo contrario, tendríamos que inicializar la unidad StoryBlock dos veces. Otro enfoque, y tiendo a usar este tipo de enfoque, es crear una función, una función común, por ejemplo, en la creación bajo el directorio de origen. Creo un directorio lib. En el directorio lib, creo un archivo JavaScript donde tengo una función para inicializar la unidad StoryBlock. Y en todas las partes de mi código, en el diseño, en la página, porque al final puedes crear un sitio web muy complejo con múltiples page.swelt. Entonces, en este caso, estoy reutilizando este tipo de función donde necesito inicializar el objeto. Sí, pero al final, solo para explicar el padre, luego volvemos a page.js solo para completar el trabajo a través de todas las cosas que hicimos. Y luego intentamos responder a la pregunta. Si pasas a page.js, Alba, de acuerdo, ya estás aquí, de acuerdo. Sí, necesitas todo a través de la API de StoryBlock. Y luego estamos realizando un GET a través de la herramienta cdnStoriesOM para recuperar el contenido de los OMStories. Y una vez que tenemos este tipo de información, la estamos devolviendo. Devolviendo un objeto o un dato de la función de carga para exponer este tipo de información a plus page.SWELT. Entonces, si hay una razón, lo tenemos. Y porque necesitamos el puente de Storyboard, el puente de Storyboard se configura en la función on-mount proporcionada por el kit Svelte, ¿verdad? Y eso es todo, eso es todo. Probablemente necesitemos usar el atributo editable del usuario, ¿verdad? Estás en silencio, creo, Alba, o no puedo escucharte. Sí, claro, lo siento. No, eso es lo que iba a decir porque vi que Eric nos dijo que está utilizando el modelo de Storyboard, el que tiene el comando de creación. De acuerdo. Y para él, el puente no está funcionando. Entonces, tal vez no esté relacionado con la plantilla actual, pero podemos verificarlo con él después de esto. Sí, puede iniciar la pantalla y podemos ver qué parte falta porque estoy bastante seguro de que algo está mal, por supuesto. Pero la idea es que, aparte del puente de Storyboard, que está escuchando los eventos que están sucediendo. Entonces, cuando estás escribiendo, sobrescribirá lo que tienes. La idea es que necesitas el editor de Storyboard para tener este tipo de comportamiento de clic en el que haces clic en algo y se abre el lado derecho. Entonces, necesitas tener el editor de Storyboard en cada uno de los componentes en los que deseas tener ese comportamiento porque puede suceder que tengas un componente en el que no deseas tener la interactividad en absoluto porque es algo estático que no deseas tocar. Pero en el caso de que desees tener esta interacción en el lado del cliente, entonces necesitas agregarlo aquí. Veamos si puedo insertar la pantalla. Tal vez pueda permitir que más personas inicien la pantalla al mismo tiempo aquí, múltiple, de acuerdo. Por si acaso él quiere que verifiquemos con él qué está sucediendo. Y para Nuchaporn, está obteniendo un 401. 401, así que supongo que necesitas verificar Nucha en el diseño si tienes el token de acceso para tu espacio. El que tienes acceso ahora mismo y quieres verificar. Básicamente, en la configuración aquí en los tokens de acceso, debes obtener el de vista previa. Ya puse el token de acceso allí también. ¿Cuál es el color del token? Y estás obteniendo un 401. Espera, espera, espera. ¿Estás utilizando un espacio en Europa u otra región? Como Estados Unidos, por ejemplo. Ah, elegiste Estados Unidos, de acuerdo. Entonces creo que estaba en este nivel o necesito hacer opciones de API. Opciones de API, de acuerdo, opciones de API, lo siento por eso. Sé que algo estaba mal, por supuesto. Entonces, necesitas hacer esto para obtener ese. Sí, lo siento. Sí, porque esto cambia la API de Storyblock. En lugar de ser api.storyblock.com, será api/US lo que sea porque es un punto final específico, digamos. De acuerdo, de acuerdo, lo entiendo. Avísame si funciona después de cambiarlo. Supongo que para Eric. Eric, ¿está compartiendo la pantalla o no? Porque no sé qué veré en la pantalla si él comparte. Si tienes algún error en el registro de la consola. Solo para entender si se carga la región de la historia y si tenemos algún error o si se detiene en esta parte, no lo sé. Sí, avísanos Eric, porque eso es todo lo que sucedió con la configuración. Los pasos iniciales estuvieron bien. Entonces, si no funciona, necesitamos verificar qué está sucediendo. Veamos si están aquí.

Si lo están, podemos continuar con las historias dinámicas en componentes personalizados. Creo que tendremos tiempo para tu sitio, Roberto, para mostrar cómo implementar en un sitio estático. Sí. Porque también quiero verlo.

De acuerdo. De acuerdo, de acuerdo. Puedes usar un proyecto que hayas construido, el de Dasy. Sí, sí, sí, sí, comenzaré desde eso. Sí, sí. Pero en esencia, es bastante similar a este tipo de proyecto. Solo para dar algunas pistas, porque a veces, sí, es bastante confuso generar en modo estático el sitio web. Para mí lo es. Sí, necesitas algunas cosas especiales de Svelte, sí. Y sí, está bien. Así que creo que podemos comenzar lentamente haciendo una especie de resumen de las cosas que hicimos. Porque probablemente, cuando lo ves por primera vez, parece que hay muchas cosas. Pero al final, si lo piensas, al final, es algo bastante fácil, y estás siguiendo, lo mejor es que estás siguiendo la guía que viene del framework. Porque al final, estamos usando el diseño, la página, el .js o .swelt. Estamos implementando la función de carga. Estamos implementando la cantidad, todas las cosas que vienen del framework, ¿verdad? Entonces, si te gusta el framework, probablemente puedas ver que, estás usando el mismo enfoque, incluso si no estás integrando con Storyblock. Tal vez tenga una pregunta, no sé si lo sabes, pero tengo una pregunta sobre esta configuración de Svelte en sí. Entonces, ¿por qué Svelte puede ejecutar, JavaScript en el script, pero los desarrolladores de Svelte siguen usando el archivo JS. ¿Por qué? Sí, buen punto. Pasemos a la página de Svelte, De acuerdo. Esto se ejecuta en el lado del cliente. De acuerdo, si pasas a page.js, esta es la lógica para cargar una fuente externa, ¿verdad? Entonces, en este caso, la función de carga prepara algunos datos para este Svelte y la función de carga de page.js se puede ejecutar en el lado del servidor y/o en el lado del cliente. Y veremos durante la implementación que, por ejemplo, puedes convertir esto de page.js a page.server.js forzando la ejecución de la función de carga en el lado del servidor. De acuerdo, por lo que es similar a usar AsyncData en Nuxt. Sí, porque al principio estaba confundido por eso porque para mí, por ejemplo, esta variable aquí spoiler y luego let. Es como, ah, ¿por qué let está debajo? Allí es como, no lo entiendo. Al principio fue muy confuso para mí. Pero luego entendí, de acuerdo. Todo lo que sucede en la función de carga puedes obtenerlo desde allí. Pero sí, para mí es algo abstracto. De acuerdo. En general, en un storybook en Nuxt, tomas lo que quieres hacer en un entorno diferente como el servidor. Lo mismo en Nuxt, solo obtienes las props estáticas para las cosas que deseas hacer en modo estático, pero defines todo dentro de eso y no lo obtienes y esto podría ser servidor, esto podría ser cliente. Depende del nombre de archivo. Entonces sí, fue confuso al principio, pero está bien saber que es por- Y otra forma de pensar en esto es que en page.js tienes la lógica para cargar los datos y algunas otras cosas. Así que más relacionado con los datos, preparando los datos, preparando el objeto que necesitas para page.weld incluso si a veces la carga se puede ejecutar en el lado del cliente. En page.weld, sí, tienes el script, pero se centra principalmente en la interacción con el usuario. Entonces tienes la parte de actividad, tienes la cantidad, por ejemplo, y algunas otras cosas, principalmente para gestionar específicamente la interacción con el usuario. Tiene sentido. Bien, es bueno saberlo. Muchas gracias. Sí. De acuerdo, genial. Entonces, Nutshapong ya estaba aquí, supongo... Siempre está aquí. Sí, siempre está aquí, y los demás supongo que también. Así que centrémonos ahora en el próximo ejercicio que básicamente ahora mismo, solo tenemos una página que se llama Inicio y estamos obteniendo la página de inicio a través de la URL directamente desde Slack. Entonces, si vamos a nuestra página, esta aquí, de acuerdo, podemos ver que estamos llamando a /inicio, pero queremos algo más dinámico para que una vez que creemos una página, la estemos renderizando en nuestra aplicación y no crear una nueva página desde cero con el enlace actual de esa URL. Entonces, para hacer eso, vayamos a nuestro ejercicio dos. Lo abrimos, y podemos ver que el primer paso será crear un diseño estático solo para tener algún tipo de enlaces en la parte superior, y podemos hacer clic en ellos y ir a una página eso es bastante básico. Así que esto no tiene nada que ver con Sherlock. Esto es algo que tendrías en una aplicación normal. Entonces, vayamos a los componentes. Creemos el componente de encabezado Spall. Y aquí podemos ver que solo tenemos el enlace del blog, el acerca de, y la página de inicio. Eso es el /. Eso es todo. Nada extravagante. Eso es lo que necesitamos. Y ahora agreguemos el encabezado dentro del propio diseño, pero esta vez en lugar de layout.js, donde estamos haciendo todo lo relacionado con los datos de la API, solo necesitamos obtener el componente en este diseño básico. Entonces, vayamos al layout de Svelte e incluyamos el componente de encabezado. Y para tener eso, también tenemos el main. Sí. Y en este caso, el log representa la página al igual que en los otros frameworks. Es genial que estén en la misma convención. Me gusta. Ahora lo que haremos para crear páginas dinámicas, por supuesto, está más relacionado con la rutina de Svelte que con un storybook. Básicamente, solo necesitamos tener una carpeta que se llame Slug que espera cualquier URL con cualquier combinación de una barra para tener, llamar a una ruta específica que estás creando dentro de un Slug. Entonces, solo crearemos una carpeta o heroes. Hey, roots please. No sé. Ah, no. Y aquí agregaremos esta cosa de Slug y simplemente moveremos las páginas dentro del Slug. Y, por supuesto, no funcionará porque necesitamos cambiar lo que está dentro de la página para obtener este rastro a través de los parámetros que tenemos en la ruta actual aquí. Entonces, copiemos esto, vayamos a pegar, sí, y cambiemos nuestra llamada estática por una dinámica. Y ahora podemos ver que los parámetros vienen de Svelte en sí. Ese es el sistema de enrutamiento de Svelte Kit, supongo, porque Svelte por defecto necesitas instalar una ruta, ¿verdad? Una ruta, como en Vue, por ejemplo. Pero Svelte Kit ya lo tiene y solo obtienes los parámetros y luego obtienes lo que está dentro de este Slug. Y con ese Slug es con lo que crearás la ruta para llamar a un storybook. Y si no es una ruta y es una barra, el dominio que tienes en este caso es localhost, siempre debes agregar inicio si no hay nada más porque el inicio es la página inicial que estás llamando desde un storybook. Y una vez que tienes la ruta combinada, puedes obtenerla de la solicitud de la API y similar a antes. Solo hacemos esta nueva parte, pero la otra parte es la misma. Entonces ahora, déjame ver si hay algo más que necesitemos hacer. Sí, básicamente ahora queremos tener un título en nuestra página, es hora de cambiar de una página que es otra de la página de inicio. Y para eso necesitamos obtener el contenido del historial y agregarlo al encabezado.

Pero esto es solo una forma elegante de hacerlo. Por supuesto, si no cambiamos nada, todo funcionará correctamente. Y tal vez si actualizo el servidor primero. A partir de ahí, simplemente puedes crear carpetas y no esperar. ¿Qué hice? Guión bajo. ¿Es la sintaxis de atrapar todo? Es un retraso. Creo que copié y pegué y los tres puntos no son tres puntos. Déjame ver ahora. Sí, lo fue, sabes, copié los tres puntos de notion. Y no eran tres puntos. Eso es gracioso. Es como, okay, bueno, pon los tres puntos. No copies y pegues tres puntos, por favor. Y una vez que lo tengas, tendrás estas URLs disponibles. Pero por supuesto, necesitamos crear las páginas para representar este data. Entonces, si creo la nueva página llamada Acerca de, podemos ver que el enlace será acerca-de. Necesitas llamarlo de nuevo. Puedo ver lo mismo, pero ellos no. De acuerdo, entonces Acerca de es el enlace que estamos llamando en el encabezado estático que creamos. Así que llamémoslo así. Y elegimos el tipo de contenido página. Ese es el único que tenemos en el punto de inicio en Storyblock. Pero puedes crear el tuyo propio, como un artículo. Y lo haremos más tarde. Entonces, básicamente seleccionamos una página. Solo la guardamos en la carpeta raíz de nuestro espacio. Y esto generará un error 500, una página que probablemente necesito actualizar, exactamente. Entonces, la primera vez que creamos una página, necesitamos tener contenido. Y la idea es, como no lo guardé, no había nada en la API. Entonces, el JSON estaba vacío. Y, por supuesto, no estaba recuperando nada. Pero ahora que tenemos un teaser que está vacío, podemos ver la vista previa en vivo y simplemente agregar un nuevo teaser. Y podemos tener, bueno, un nuevo teaser para la página Acerca de. Y ahora podemos ver la página Acerca de en sí. Y ahora podemos crear otro para el blog. Entonces, blog, su tipo es página, y ahora el teaser del blog. Y ahora podemos ver. Y ahora tenemos una forma dinámica de generar las páginas. Por supuesto, el error 500, puedes personalizarlo para decir, se están construyendo las páginas o algo así. Así los editores de contenido saben que hasta que hayan creado algún contenido, no tendrán nada en esa página, pero estás trabajando en ella básicamente. Y ahora que tenemos nuestras páginas, lo que haremos ahora es, por supuesto, agregar este nuevo bloque que te mencioné. Así que copiemos en el bloque de páginas, aquí, el encabezado que básicamente va al encabezado del HTML en sí. Y ahora creo que podremos ver si vamos a la vista previa, por supuesto, podemos ver blog en la parte superior en sí, acerca de, acerca de, y este contenido también proviene de Storyblock. Sí, usar Svelte es una forma conveniente de configurar todos los data, por ejemplo, para el SEO y todas esas cosas, configurando el título, el Open Graph, las etiquetas meta, etc., sí. Sí, muy genial. Me encanta. Y sí, ahora, lo que haremos es crear, bueno, editemos uno de los bloques, los bloques de tabla siguiente que ya tenemos en nuestro espacio. Para que puedas ver cómo es el proceso de agregar más data a tu base de datos creada en el bloque del servidor. Entonces, si vamos a la biblioteca de bloques, que es este icono aquí o este icono aquí o en la barra lateral, también tienes la biblioteca de bloques. Así que hay un par de formas de ingresar a este lugar. Y una vez que lo hayas abierto, puedes abrir el bloque de características uno y agreguemos nuevos campos a este esquema. Ahora mismo solo tenemos el nombre, ¿verdad? Agreguemos una imagen de tipo activo y el activo podría ser un PDF, MP3, ya sabes, cualquier tipo de archivo. Pero en este caso, solo queremos imágenes porque queremos agregar una imagen, eso es todo. Una vez que lo tengamos, tendremos acceso a nuestro administrador de activos digitales que ya está en un servidor por lo que no necesitas configurar nada. Y luego, una vez que tengas la imagen, veamos si queremos otra descripción. Entonces agreguemos una descripción de tipo área de texto. Así que tenemos un texto más largo. Y ahora, si vamos a nuestra página de inicio, en la característica que creamos antes, podemos ver que tenemos más contenido para agregar. Y, por supuesto, si agregamos algo de contenido, agreguemos una imagen a nuestro administrador de activos digitales, agreguemos esta, por ejemplo. Puedes personalizar el nombre del título, por ejemplo, digamos que es logo, y luego renderízalo en tu frontend. Pero por ahora, no verás ningún cambio aquí porque en tu frontend, no creaste la imagen en absoluto. Entonces, simplemente defines el esquema dentro de Storyblock para que suceda en el lado izquierdo. Entonces, en tu frontend, debemos anular el componente que tenemos. Y para eso, puedes ver aquí, el código para la característica. Así que copiémoslo y volvamos a nuestra característica, seleccionemos todo y anulemos. Entonces, ahora en lugar de tener solo el nombre del bloque, que era la parte que teníamos antes, ahora tenemos la imagen que se llama por el nombre del archivo. Básicamente tenemos un esquema JSON diferente que mostraré, ya sabes, y el alt que proporcioné. Y aquí representamos la descripción que es el área de texto que acabamos de agregar. Entonces, si voy a la página de inicio y abro el JSON, por supuesto, ahora puedes ver la imagen, pero si abro el JSON, podemos ver cómo se ve la respuesta de la API. Básicamente, inicialmente estábamos obteniendo las columnas y en cada una de esas columnas, tenemos una característica. Este es el componente característica, ves este. Entonces, este contenido antes era solo el nombre, pero ahora tenemos una imagen con muchos data que proviene del administrador de activos digitales de Storyblock. Entonces, básicamente tenemos el nombre del archivo, los derechos de autor, todo lo que te mostré que puedes editar y el texto alternativo, por supuesto. Aquí es donde obtenemos el contenido de la imagen y el nombre y no sé por qué, ah, sí, por supuesto. Si no agregaste uno de estos campos, no lo verás en la respuesta. Entonces, por ahora, si agregamos una descripción, ahora tenemos la descripción aquí. Y si guardo y vuelvo a ir, veré la descripción que proviene de la API. Una mejora realmente agradable porque en el pasado solo enviábamos todo vacío. Así que es muy agradable verlo en vivo. Y ahora que tenemos nuestra nueva descripción en nuestras imágenes, por supuesto, todo lo que hicimos, como ya viste, se puede editar en vivo. Entonces, si agrego otra imagen, ahora podemos ver esto sucediendo en realidad. Entonces, ahora si hago clic, puedo ver cómo se carga la imagen y tener el CMS, y puedo ver todo así, así es como puedes trabajar con nuevos campos. Básicamente, primero creando el esquema y luego definiéndolo en tu código. Y una vez que hayas terminado con eso, por supuesto, tenemos algo que hicimos en la aplicación que creo que es realmente importante. Por lo general, si usas el Administrador de Activos Digitales que Estrebo te proporciona, tienes la URL original en tu respuesta, esta, pero esta no está optimizada. Esta es la que los containers cargan. Entonces siempre necesitas optimizar los temas en lugar de usar un servicio estándar como Cloudinary u otros, tenemos nuestro propio servicio de imágenes. Solo necesitas agregar a la URL un slash MS/. Así que te mostraré cómo puedes hacerlo. Básicamente, en el nombre del archivo aquí, lo que puedes hacer es en lugar de tener directamente este nombre de archivo, puedes simplemente usar cadenas literales y déjame aquí, ciérralo, y luego agrega un slash MS/.

Y tal vez la versión de la imagen que deseas recortar. Por ejemplo, imagina que quieres un cuadrado o un rectángulo, puedes hacer esto. Y esto hará los cambios sobre la marcha para ti. No necesitas instalar nada, hacer nada con el registro de historial, solo necesitas agregar una barra diagonal MS/. Y se recortará automáticamente para ti. Así es como puedes trabajar con el servicio de imágenes. Pero, por supuesto, en este caso, queremos un cuadrado. Así que lo dejaré así, está bien. Pero así es como puedes personalizar tus imágenes. También puedes agregar filtros como desenfoque u otras cosas. Tienes el enlace aquí en la página de Notion. Así que si vas, puedes ver todas las opciones que tienes. Si tienes caras en tu imagen, puedes centrar esa imagen por la cara. Así que tenemos cosas realmente geniales allí. Eso, por supuesto, es necesario, sí. También puedes agregar solo la barra diagonal m, ¿verdad? Exactamente, así que si no quieres recortar la imagen, solo necesitas agregar la barra diagonal m. Y lo que hace es entregar automáticamente una imagen WebP si el navegador lo admite. De lo contrario, entregará la original. Así que la idea es que hoy en día todos los navegadores admiten WebP. Así que ya tendrás una imagen adecuada para el performance y con calidad 80. Si quieres tener el 100% de calidad porque quieres tener una imagen grande, por ejemplo, debes agregar el filtro de calidad a 10 100%. Eso es lo que hice en mi sitio web cuando me di cuenta. Sí, sí. Y sí, nuestra sugerencia es usar siempre la barra diagonal m porque ahorra muchos bytes en términos de tamaño de la imagen. Probablemente, si quieres, puedes echar un vistazo a abrir la imagen en el grupo de la imagen en el navegador e inspeccionar en el- Claro, hagámoslo. Solo para jugar con la imagen, probablemente porque la imagen es simple, probablemente vamos a ahorrar unos pocos bytes. Pero imagina si tienes una especie de imagen o fotos. Sí, la diferencia es enorme, ¿verdad? Así que en este caso- Sí, déjame hacerlo. Así podemos ver los kilobytes. En realidad, es una imagen muy pequeña. Si agregamos una barra y una barra, podemos ver que son 6.9. Pero al final, en porcentaje es una buena mejora. Piensa en tener nuestras fotos, 10 megabytes. Sí, puedes comenzar a ahorrar muchos bytes. Y sin estilos, nada, sin conocer ninguna tecnología, solo necesitas agregar una barra y una barra a las imágenes. Así es como funciona para mí en mi blog. Otro buen consejo es, por ejemplo, si quieres redimensionar este tipo de imagen, por ejemplo, a 64, pero no quieres pensar en la relación de aspecto, puedes escribir 64 y luego el cero, ¿verdad? Cero, sí. Y con cero, respeta la relación de aspecto. Sí, creo que el otro tal vez sea mejor para eso porque creo que no es un cuadrado. Déjame ver. Sí. No, también es un cuadrado. No puedo crear muchos que no sean cuadrados. Sí, en general, cuando los tienes duplicados, y no sabes, puedes hacer este tipo de técnicas para redimensionar las imágenes, sí. Sí, quiero decir, este no es un cuadrado. Y probablemente sea más grande. Sí, pero si hacemos esto, podemos hacer una barra y una barra, y luego 64, bueno no 64, sino 200 o cero, y luego podemos ver que no está recortado, sino redimensionado. Sí, eso es realmente importante. Y al revés también, para que podamos tener uno vertical. Sí. Así es como puedes cambiar la altura o el ancho y simplemente redimensionar la imagen. Sí, tenemos la documentation sobre el servicio de imágenes. Ya lo compartiste, ¿verdad? Sí, está en la página actual de Notion. Sí, porque ahora no queremos cubrir esto, pero también puedes cambiar los colores, y puedes aplicar algunos otros efectos agradables a la imagen sobre la marcha. Y eso es realmente genial.

De acuerdo. Así que ahora, sí, movámoslo. Lo que hará es crear un nuevo componente desde cero. En lugar de cambiar el feature one que cambiamos aquí, creemos uno nuevo desde cero para que veas el proceso de creación de un bloque. En este caso, el bloque será un bloque inestable porque se reutilizará en otras páginas como vimos con el teaser y con el grid. Básicamente, te envío un nuevo bloque. Puedes agregar este que crearemos ahora mismo. Llamémoslo Hero, y agrégalo a nuestra biblioteca de bloques.

Ahora, tenemos un esquema vacío y necesitamos comenzar a definir los campos. Ya lo he definido aquí para ti para que no tengas que pensar en los nombres. Solo tienes que tomar todos los nombres de aquí. Así que Hell line para el texto, queremos un sub-Hell-line que también sea texto pero podría ser un TextArea, no importa. Eso depende de ti. Luego, background-image que será nuevamente un archivo de recurso y este recurso será nuevamente una imagen. Y por último pero no menos importante, creemos un layout que será un desplegable con dos pares clave-valor. Así que una opción única que llamamos desplegables en un bloque de almacenamiento, o una opción única o multiopción. Entonces aquí, si agregas la opción única, tienes la posibilidad de definir pares clave-valor que aparecerán en un selector y puedes seleccionar uno de ellos o también puedes crear una fuente de datos con estos pares clave-valor y reutilizar estos pares clave-valor entre componentes, eso depende de ti. Y luego también puedes vincular a otras historias y ver en el desplegable la lista de páginas que creaste en una carpeta específica, por ejemplo, pero eso lo veremos más adelante. Por ahora, creemos la fuente de datos propia y creemos algunas opciones aquí. Entonces la primera será, déjame recordar, Constrain, qué nombre. Constrain y luego la otra será Full Width porque queremos tener un hero que te proporcione tal vez un contenedor o tal vez sin él y solo a pantalla completa. Ahora que tenemos las opciones, esta es la legible, la clave, la parte que el editor de contenido verá y el valor es el que se envía a través de la API. Entonces es el que usarás en tu código. Pero este es solo para que se vea mejor para el editor de contenido. Y ahora que lo tenemos, por supuesto podemos seleccionar cuál será por defecto. Así que se selecciona automáticamente. Siempre debes copiar y pegar el valor, no la clave para tener este valor por defecto. Y luego podemos guardarlo. Y ahora ya tenemos nuestro esquema para agregarlo a nuestra página y simplemente renderizarlo en el frontend estos campos. Así que veamos el orden que puse aquí. Básicamente... Ah, okay, prefiero crearlo primero. Sí, esa fue mi preferencia el otro día. Ahora no sé, pero sí. Si lo agregamos, no vemos ninguna vista previa porque aún no tenemos un hero en nuestro frontend. Pero digamos, nuevo hero sin vista previa. Y luego agreguemos esta imagen, por ejemplo, y eso es todo. Así que guardémoslo. Y ahora que tenemos el contenido, simplemente creemos un nuevo componente heroStyle dentro de la carpeta components. Así que vamos, y digamos, nuevo archivo heroes-style, y agreguemos este contenido. Y básicamente aquí estamos, nuevamente, obteniendo el bloque como siempre, no hay diferencia. También agregando el editable de storybook, lo mismo. Lo único que estamos haciendo diferente ahora es que queremos extraer los pares clave-valor que creamos para agregar algunas clases a nuestro componente. Entonces en este caso, como esta es una operación que podemos hacer mejor en JavaScript, lo hacemos en el script en lugar de hacerlo aquí. Pero también puedes copiar y pegar esto y hacerlo todo en el HTML, eso depende de ti. Ahora que lo tenemos, podemos ver que estamos representando el titular, el subtitular, la imagen nuevamente, y nuevamente, sin una barra diagonal M. Así que crezcamos, mejoremos. Agreguemos la barra diagonal M. Para que podamos tener una imagen redimensionada correctamente, ¿de acuerdo? Ahora que lo tenemos, si volvemos a nuestra aplicación y actualizamos nuestro frontend, ¿Por qué no está, espera. Oh sí, ¿qué hice? Hiciste el otro componente hero, importante. Sí, cuando creas uno, no se importa automáticamente. Necesitas ir a layout.js y luego agregar el nuevo dentro de tu archivo importante, sí. Te lo dije en otros frameworks, se importa automáticamente. Así que me estoy volviendo perezoso Roberto. Pero en este caso, puedes optimizar la carga del componente según la página en la que te encuentres, ¿verdad? Porque típicamente si tienes diferentes secciones del sitio web y vas a implementar diferentes archivos SVELT y quieres cargar algún componente específico para alguna sección o no. Puedes listar, pero sí, creo que podemos agregar en nuestro SVELT SDK porque proporcionamos este tipo de opción donde el desarrollador puede decir, okay, quiero carga automática y esta es la carpeta o quiero listar todos los componentes que quieras porque en el pasado también estamos que nuestras funcionalidades en lugar de proporcionar una lista de componentes como un objeto como puedes ver, proporcionamos la forma de proporcionar una función para cargar los componentes al final, sí. Podemos mejorarlo, sí. No, pero bien, sí. Entonces, si lo agregas, luego un spelled nos arriba y si vamos a nuestra página de inicio, podemos ver el hero aquí. Así que agreguémoslo en la parte superior, esta es una imagen brillante para que podamos verla y luego si queremos tener el diseño a ancho completo, también podemos hacer clic en ella y no hay muchos cambios porque mi pantalla es muy pequeña pero en general será así. Sí, y ahora que tenemos el hero, por supuesto al final estaba diciendo que necesitas agregarlo al layout que olvidé por completo. Así que sí, para eso tenemos estos Notion Nodes para que puedas echar un vistazo y sí, construir el tuyo propio.

De acuerdo, sí, de acuerdo, así que puse una nota aquí para que sepas algo que puedes hacer porque por ahora, como verás, estábamos haciendo todo manualmente pero normalmente, si estás trabajando en un proyecto real, no querrás que un desarrollador cree cosas manualmente. Querrás tener scripts que ejecuten líneas de comandos que creen estos bloques. Tenemos eso, tenemos el CLI de Straight Blocks que puedes crear, bueno, déjame empujar, que puedes crear tus esquemas JSON, por supuesto con la estructura de un bloque recto que por ejemplo, al principio extraes los componentes del espacio los estamos creando, estos. Puedes obtener su estructura y luego modificar esos archivos JSON y luego enviar los componentes a cualquier espacio que crees dentro del bloque recto. Así es como puedes hacerlo manualmente, de forma programática. Entonces lo que puedes hacer es crear un repositorio tal vez en GitHub y crear todos los archivos para los componentes que deseas tener en tu espacio y luego cuando estés en línea, se generará automáticamente. Si tienes una Acción de GitHub, por ejemplo, ejecutando este comando después de cambiar los esquemas. Así es como trabajarás en un proyecto real y no haciendo todo manualmente porque por supuesto, si quieres cambiar alguno de estos componentes y ya tienen contenido necesitarás migrar esos campos a los nuevos. Y para eso, el CLI tiene diferentes comandos para hacerlo. Por ejemplo, tenemos los comandos de migraciones. Déjame ver dónde están aquí. Así puedes generar migraciones cada vez que cambies los componentes y puedes ejecutar las migraciones para cambiar el contenido que se guardó en esos componentes o en esos campos específicamente. Por eso es importante hacer todo de forma programática cuando estás construyendo un proyecto grande pero para un proyecto personal o algo que estés creando solo por diversión, puedes hacerlo manualmente y funcionará bien. No hay complicaciones, está bien, está genial. Yo creé mi sitio web manualmente pero siempre hago las migraciones de forma programática porque es más fácil, por supuesto. Pero sí, esas son las opciones que tenemos. ¿Funcionó el ejercicio para ti? ¿Todo está funcionando bien para tu sitio o algo se rompió en el proceso? Funciona bastante bien, genial. Me alegra escuchar eso, me alegra mucho.

De acuerdo, ahora que hemos creado algunos componentes, espero que estés familiarizado con la interfaz de usuario y cómo funciona. La generación de nuevos componentes porque ahora el plan es crear un blog con artículos. Básicamente, una sección en nuestro sitio que tendrá un nuevo tipo de página. Ahora mismo tenemos la página de inicio que utiliza la plantilla de página y la plantilla de página son solo bloques. Entonces, son componentes dinámicos anidables que creamos en nuestro espacio. Es como una página de destino en la que puedes agregar muchos componentes. Pero normalmente un artículo tiene un esquema estricto. Por ejemplo, tienes una imagen, un titular, tal vez un título de CEO, una imagen OG, cosas así pero no tienes muchos bloques moviéndose. Por eso, crearemos un blog para ver cómo se puede crear una nueva plantilla en Storyblock. Y lo llamamos tipo de contenido. Creo que Contentful también lo hace. El tipo de contenido es más estándar en este momento en el ecosistema sin cabeza, diría yo. Sí. Pero también en otros sistemas. En general, en el sistema de gestión de contenido puedes crear un tipo de contenido diferente que define la estructura de la página.

Antes de continuar, quiero volver al componente de héroe para resaltar algunas cosas interesantes porque ahora en el lado de Storyblock en el héroe que ya creamos. Como puedes ver, tenemos varios campos, ¿verdad? Titular, subtítulo, imagen de fondo y los primeros tres, titular, subtítulo e imagen de fondo son campos que son útiles para mostrar algo al usuario final. Otros campos, por ejemplo, el diseño, cambian el diseño o en general el aspecto para la representación. Entonces, lo que estoy tratando de decir es que cuando vayas a decidir de qué manera quieres crear una estructura para cada componente, puedes definir el campo que deseas mostrar, titulares, subtítulos, pero también puedes agregar otros campos interesantes para permitir que el editor de contenido cambie el aspecto, cambie el diseño o cambie el tema. Por ejemplo, puedes agregar, por ejemplo, color de fondo, ¿verdad? Y luego, de la misma manera, estás gestionando el diseño en el código de Svelte. Porque al final, si recuerdas, tenemos una condición basada si el diseño está restringido, entonces aplica este tipo de estilo CSS, ¿de acuerdo? De la misma manera, puedes hacerlo para muchas cosas. Así que es agradable, creo, esta organización porque puedes permitir que el editor de contenido también cambie el aspecto. Sí, y luego puedes definir la libertad, ¿verdad? Entonces puedes tener múltiples campos para controlar el diseño, sí.

Exactamente, y una cosa importante que mencionó Roberto es que normalmente tendrás campos que no están relacionados con el contenido que están relacionados con otra cosa como CEO o diseño, por ejemplo. Entonces, en este caso, tenemos las pestañas, las pestañas de gestión. Lo que hicieron fue simplemente organizar los campos en diferentes pestañas para el editor de contenido pero en la solicitud de la API, están en la misma ruta. Entonces no tienes una API de tabla siguiente. Solo tienes esto en la interfaz de usuario. Entonces, si creo una pestaña de diseño y muevo cualquier campo a esta pestaña, ahora si vamos a la palabra clave en sí, veremos diferentes pestañas aquí y podemos gestionar todo lo que está relacionado con el diseño aquí o los estilos. Y luego, en la pestaña general, podemos tener las cosas principales en las que el editor de contenido debe trabajar. Entonces, así es como también puedes estructurar tus componentes para no tener una lista larga por la que deben desplazarse y perderse mientras lo hacen. Siempre puedes hacerlo de esta manera. Creo que es algo realmente agradable y genial que usarás si usas Storyblock. De acuerdo, entonces, ¿alguna pregunta o algo que quieras aclarar que no hayas entendido o todo está bien? De acuerdo, sigamos con el blog entonces. Genial. En este ejercicio, como siempre, tendrás una rama donde tienes el repositorio que puedes revisar con los cambios que se hicieron en los commits. Puedes ver los pasos que seguí que en su mayoría son los mismos que tenemos en la página de Notion básicamente. Y lo primero para definir el blog, por supuesto, es dónde queremos guardar ese blog. En este caso, será una carpeta de blog dentro del espacio de Storyblock. Y luego necesitaremos crear un historial de blog que es el que ya creamos pero dentro de la carpeta esta vez. Entonces puedes moverlo en lugar de eliminarlo. Y luego, en la configuración de entrada, seleccionaremos el historial de blog como la raíz de la carpeta porque es la barra diagonal de la carpeta, digamos. Pero hagámoslo para que sea mejor verlo en vivo. Entonces, si borro el blog y genero una nueva carpeta, esta carpeta puede llamarse blog nuevamente. Y luego podemos seleccionar el tipo de contenido predeterminado pero hagámoslo después. Por ahora, solo agreguemos la carpeta de blog. Y dentro de esta carpeta, creemos la nueva página, en este caso, será nuevamente blog. Y seleccionaremos la raíz más fina de la carpeta como te dije. Si haces eso, verás que es la barra diagonal de la carpeta de blog en específico. Y ahora seleccionemos el tipo de contenido que tenemos porque no tenemos ningún otro, la página, y simplemente agreguemos un héroe. Y digamos página de blog. Y sí, por supuesto, necesitamos agregar cualquier mucho. Y ahora tenemos la página de blog. Entonces ahora podemos crear algunos artículos, ¿verdad? Pero espera, no tenemos ninguna página para los artículos. Solo tenemos la plantilla de página, el tipo de contenido. Entonces creemos un nuevo tipo de contenido. Y ese es el siguiente ejercicio de esta página de Notion. Básicamente, creemos un tipo de contenido que tenga todos estos campos diferentes y los diferentes tipos que podemos ver aquí. Así que vayamos al nuevo bloque como hicimos antes, pero esta vez con tipo de contenido en lugar de bloque anidado. Definámoslo como artículo. Entonces tenemos nuestro front-end alineado con eso. Y ahora creemos todos estos campos diferentes que tenemos aquí. Entonces tendremos un título, un subtítulo, contenido esta vez en lugar de área de texto o texto, se restringirá con muchas funciones ya implementadas por este Storyblock. Campo restringido. Y luego la imagen con el tipo de activo imágenes nuevamente. Y finalmente el teaser, que es solo un área de texto que definiremos para tener como un certificado cuando estamos mostrando los artículos en otra página. En este caso, diré que el teaser va primero. Así que simplemente lo moveré y puedes jugar con los campos en el orden que desees. Así es como los editores de contenido los verán. Y ahora que lo tenemos, ahora podremos crear nuevas historias, nuevas entradas, nuevas páginas con este tipo de contenido. Entonces ahora, si voy aquí, puedo crear una nueva historia y ahora puedo seleccionar otro tipo de contenido. Entonces, lo que haremos es ir a la pestaña de contenido. Sí, espera, es pequeño. De acuerdo, así que en la pestaña de contenido, podemos seleccionar la carpeta y luego en Configuración, podemos definir que siempre queremos seleccionar un tipo de contenido específico cuando creamos una nueva historia. En este caso, digamos artículo. Entonces no necesito seleccionar artículo cada vez que quiero seleccionar una plantilla diferente dentro de la carpeta. Entonces, ahora si lo guardamos y creo una nueva historia, verás que por defecto es artículo. Por supuesto, puedes cambiarlo, no es restrictivo pero al principio no necesitas pensar en eso. Entonces eso es lo que puedes hacer para optimizar la forma en que los editores de contenido crean artículos. Página de artículo uno, creémosla. Y esto generará, por supuesto, una vista sin nada porque no tenemos nada para representarlo. Entonces, si agrego un nuevo título, así que nuevo artículo, no veremos ninguna vista previa porque no tenemos un componente en nuestra aplicación SVELTkit. Entonces aquí es donde se creará el SVELT de artículo en nuestra carpeta de componentes. Así que hagamos eso, vayamos a la carpeta de componentes, agreguemos un artículo y aquí básicamente hay dos cosas diferentes que necesito explicarte. El trato es que ahora estamos obteniendo un tipo de campo para el bloque como siempre, pero esta vez tenemos un tipo de campo específico que se llama risk test que es seguro en el contenido. Básicamente, este risk test necesita tener un renderizado. Y en lugar de representar el HTML a través del JSON que te proporcionamos, también te proporcionamos una acción, un método que puedes agregar desde este SDK de SVELTkit y luego guardarlo en tu propia variable reactiva. Y de esa manera puedes obtener el contenido de renderizado del HTML que te proporcionamos en el JSON. Te mostraré la respuesta JSON.

Así que obtienes todo lo que estamos haciendo bajo el capó, por lo que no necesitas hacerlo tú mismo. Y luego puedes representarlo a través de HTML y no pensar mucho en ello. Pero hay mucho detrás de eso, diría yo. Y estamos creando uno mejor en este momento porque ahora tenemos uno que te permite renderizar cosas básicas, pero queremos también renderizar diferentes bloques dentro del rich text. Pero eso es para otro día, diría yo.

Entonces, lo que haré ahora, antes de que se me olvide, es ir al layout, sí, y agregar nuestro componente. De lo contrario, no lo veremos. De acuerdo, así que si agrego el artículo, puedo agregar el artículo aquí y luego el artículo artículo, y luego simplemente agregar la pequeña a al principio. De acuerdo, ahora que tenemos el artículo, veamos si nos falta algo. Por supuesto, ya se dijo que debemos ir a layout.js para agregarlo, y ahora si volvemos, por supuesto, necesitamos guardar porque no tenemos ningún contenido, y ahora podemos comenzar a agregar todo el contenido en nuestras imágenes y demás. Así que digamos nuevo artículo, hola CMS. Está funcionando bien, ¡yuhú! Y puedes comenzar a ver cómo se agrega el contenido. Y como te dije, aquí tenemos el contenido de rich text. Así que si agregamos nuevo héroe, titular, lo que sea, podemos agregar nuevo texto. Podemos agregar a este nuevo héroe titular, por ejemplo, un titular de H2, para tener una respuesta diferente. No sé por qué no se está guardando. De acuerdo. ¿Por qué no se está renderizando? Bien, veamos si tienes algún error porque- Puedo intentar, oh no. Espera, espera, espera, pero no, no, la compilación se está renderizando, así que si voy- ¿Instalaste Tailwind Pros? Sí. Déjame ver. No. Sí. Pero ¿instalaste el paquete? No, no, no, de acuerdo, entiendo. Sí. Entonces la idea es que el renderizado está renderizando las etiquetas HTML, pero no el estilo de ellas. Bueno. Sí, porque bajo el capó, esto se traduce en H1, H2, H3, ¿verdad? Pero en este punto, porque estamos usando Tailwind CSS, y estamos usando este tipo de elemento de tipografía, tenemos que instalar Tailwind typography si queremos- Para renderizarlo correctamente. Sí, para renderizarlo correctamente, sin definir nada en nuestro CSS, a menos que quieras definir el estilo, tu propio estilo, pero porque hoy somos perezosos, podemos instalar Tailwind typography. Tipografía, sí, creo que probablemente sea parte del ejercicio. Sí. No, no lo agregué, de acuerdo. Bueno, puedo agregarlo ahora mismo. Entonces la idea es que aquí, como puedes ver, el contenido se entrega a través de la API como tipo doc, y este tipo doc tiene diferentes secciones. Básicamente, es hora de que crees un nuevo tipo de texto dentro del área de investigación, como hice con el encabezado. Tendrás una respuesta diferente con el texto específico que está dentro de este tipo de encabezado, pero no necesitas preocuparte por eso si solo estás en la acción que está renderizando todo como HTML. Así que hagamos un console log, lo siento por eso, si te gusta el libro, pero así es como lo hago. Ahora mismo. Así que si agrego un console log de este resolve re-test, veremos la respuesta real de la acción. Así que abramos, tal vez no aquí, tal vez ábrelo directamente en la vista previa. Sí, mejor. Entonces, si voy a la consola que tenemos en el archivo, espera, ¿por qué no se está leyendo? Porque tienes que cambiar algo, es mejor que puedas verlo en el... De acuerdo aquí, sí, el nuevo debug, no console log, solo representando la variable. Ese es el nuevo debug. Aquí puedes ver que todo lo que creamos en la API como DOC, así que el encabezado, el párrafo, y el negrita se generan realmente mediante su acción. Así que no necesitas hacer nada más que llamar a html, at, y eso es todo. Esto renderizará el tipo de campo rich text básicamente. Básicamente. Y, sí. Creo que lo que quiero hacer ahora es, luego agreguemos la configuración para la tipografía. Permíteme agregar la tipografía. Login.tailing. Para que se vea más elegante de lo que se ve ahora, por favor. De acuerdo, déjame agregarlo. De acuerdo, dicen que en dependencias de desarrollo. Y luego necesitamos agregarlo en nuestros plugins. Plugins, plugins. Aquí. Exactamente. ¿Y solo parar? Sí. Sí, eso es todo. Sí. Y luego, A partir de ahí, y veamos si se ve más elegante que antes. Sí. Ahora tenemos el héroe como un héroe. Porque esperaba algo como, ¿dónde está mi titular? Por favor. De acuerdo. Así que ahora BROWSE está haciendo el trabajo. Y si agrego una lista. Tienes una lista. Mira, tienes una lista, pero correctamente es con un elegante color gris. Así que puedes cambiar con BROWSE las variables del texto y cosas así. Pero es realmente genial. Sí, BROWSE está haciendo todo mucho más elegante. Entonces, sí, genial. Y sí, lo que podemos hacer ahora es, estos artículos que tenemos, por supuesto, solo hemos creado uno, pero podemos crear un par de ellos. Así podemos mostrarlos en las otras páginas. Para que los usuarios, cuando ingresen a la página de inicio, puedan ir a un nuevo artículo desde allí en lugar de estar solo en el artículo en sí. Entonces, hagamos eso. Creemos un nuevo historial. No, quiero guardar. De acuerdo. Creemos un nuevo historial llamado artículo para JS Nation. Esta A aquí. De acuerdo. Y podemos crear este y luego agregar otra imagen y nuevamente algo de texto y una pieza con contenido adicional, texto adecuado en negrita, y ahora solo duplicaremos este y cambiaremos el nombre. Así que ya tenemos algo y eso es todo. De acuerdo. Ahora que tenemos los diferentes artículos, podemos representarlos dentro de nuestras páginas. Para hacer eso, primero necesitaremos una tarjeta que se muestre entre todas las vistas que tendremos.

Básicamente, es un componente que vivirá en nuestro proyecto, pero no tendrá ningún bloque dentro de Storyblock. Será simplemente una forma de renderizar los datos del artículo de manera resumida, como un adelanto, un título y una imagen, pero no el artículo completo. Para hacer eso, creemos un componente llamado tarjeta de artículo en la carpeta de componentes con un contenido que ya se proporciona en la página de Notion. Entonces, tarjeta de artículo.spelt.spelt Y aquí podemos ver que esperaremos un artículo y su apariencia y no un bloque como siempre sospechamos porque no es un componente de Storyblock. Es solo un componente que usamos en nuestro frontend. Por eso tenemos diferentes variables en este caso. Y aquí también estamos usando el personal de DATABALL porque podemos abrir el artículo si queremos ya que tenemos de qué artículo estamos hablando abrirá el contenido del propio artículo en lugar de abrir un bloque dentro de la página en la que te encuentras en ese momento. Y aquí puedes ver que esta diapositiva solo se pasa por el padre. Por ahora podemos omitirlo. Y luego aquí estamos representando la imagen siempre utilizando el servicio de imágenes y el título y el adelanto solamente en lugar de utilizar también el contenido el texto de riesgo o el subtítulo. Por ejemplo, no están aquí porque no es necesario tener una descripción general de los artículos. Y ahora que tenemos los artículos allí por supuesto, dirás, hey, no lo agregaste al diseño. No, no es necesario porque no está funcionando directamente con Storyblock. Es algo que solo usamos para representar el contenido. No necesitamos agregarlo al diseño.

Ahora lo que quiero hacer es crear una visión general de todos los artículos que tengo en el historial del blog. Básicamente, cuando vayas a la ruta del blog, esperas ver la lista de artículos, ¿verdad? Pero ahora mismo no los estamos viendo porque no hay código de API y no hay un blog que los contenga. Entonces, podemos hacer dos cosas. Puedes crear una página dentro de las raíces directamente de tu proyecto y definir una para el propio blog. Pero si quieres tener un slug dinámico como el que tenemos aquí, es mejor crear un componente que no contenga nada pero en tu código obtendrá las publicaciones desde allí. Así que hagamos eso. Creemos un nuevo blog que sea un blog estable llamado 'todos los artículos'. Y en 'todos los artículos', simplemente agregaremos tal vez un titular o algo así. Veamos cómo lo llamo, no, título. Así que llamémoslo título. Y la idea es que ahora mismo, esta página del blog tendrá estos 'todos los artículos' aquí, y diremos 'todos los artículos' en el título. Y aquí tendremos un título. En el título. Pero lo que haremos ahora es renderizar este título, pero también llamar a todos los artículos en la carpeta del blog que no sean la página del blog. Para hacer eso, creemos nuevamente un nuevo componente, esta vez llamado 'todos los artículos' es válido, y copiemos todo el contenido que tenemos aquí. Así puedo explicártelo muy rápido. Entonces, 'todos los artículos'.isValid. Aquí, estamos obteniendo la 'tarjeta de artículo' que acabamos de crear para representar los artículos de manera resumida. El gancho 'among' que usaremos para obtener los historiales de él. Y luego la API de Storyblock que llamaremos para hacer la solicitud básicamente. Aquí puedes ver que en lugar de usar un slug específico como lo estábamos haciendo en las páginas. Lo que estamos haciendo es obtener todos los historiales de Storyblock. Todo lo que tenemos en el contenido y decir solo los que comienzan con 'blog'. Así que los que están dentro de la carpeta 'blog', esos son los que quiero. Y no me des la página de inicio. No me des la página del blog, dame solo los artículos. Eso es lo que estamos diciendo aquí. Y por supuesto, versión borrador como siempre. Y aquí estamos recuperando los artículos básicamente de los historiales de data. Y los artículos simplemente haremos un bucle y los enviaremos a la 'tarjeta de artículo' para que podamos tener la representación de ese contenido. Eso es básicamente lo que estamos haciendo aquí. Así que para tener 'todos los artículos' como siempre, vayamos al diseño y agreguemos 'todos los artículos' aquí. 'Todos los artículos', genial. Y aquí... Agreguemos aquí, okay. Mi mouse se está quedando sin batería, así que necesitamos comillas. Bien, ahora que tenemos el componente, ahora podemos usarlo realmente. Así que si vuelvo, oi, si vuelvo a MiEspacio, ahora puedo ver los artículos con el inicio que creamos y las imágenes y el título, pero no el contenido completo como podemos ver si vamos a ellos. Así que ahora aquí, podemos ver que tenemos este Subtítulo que no está siendo renderizado por la 'tarjeta de artículo' y esta área de alcance. Así que aquí tienes la lista de artículos, pero solo con el contenido que deseas representar. ¿Algo que quieras agregar? ¿Solo bien? No, estaba revisando si hay algunas preguntas. Si tienes algunas preguntas, puedes escribir en el canal, en el chat o levantar la mano. Sí, básicamente lo que hicimos fue crear una especie de estructura para el blog, ¿verdad? Así que tenemos dos tipos diferentes de páginas. El más flexible es la página de inicio donde tienes los componentes anidables. Entonces puedes anidar todos los componentes que quieras. Y otro es el artículo, donde tienes bien definida la estructura con el titular y todas estas cosas, ¿verdad? Así que puedes tener un enfoque múltiple proporcionando el máximo nivel de flexibilidad al creador de contenido, creando un blog, y luego pueden hacer todo. O definiendo una estructura, como en este ejemplo, el artículo donde tenemos una imagen, un título, un subtítulo. También puedes hacer un enfoque mixto. Por ejemplo, volvamos a la página de inicio, por ejemplo, en la estructura de la página. Es solo un ejemplo. Entonces, en el cuerpo, si vas a editar el cuerpo, esta estructura, sí, exactamente aquí. Como puedes ver, porque estás definiendo el tipo de campo de bloques, puedes anidar todos los componentes que quieras. Pero si quieres restringir la selección del componente, porque piensa que tienes miles y miles de componentes en tu proyecto, puedes ir a la opción, la última, permitir solo la inserción de componentes específicos, ¿verdad? Entonces, en este caso, puedes definir la lista de componentes que puedes insertar. Así que es un enfoque mixto, ¿verdad? Porque puedes proporcionar el máximo nivel de libertad al creador de contenido, permitiendo bloques, y eso es todo. O proporcionando como el artículo, proporcionando una estructura bien definida, o puedes definir un bloque, pero puedes restringir la selección en algunos componentes específicos que desees, ¿verdad? Así que depende de la configuración que desees. Y luego también puedes mezclar porque puedes tener titular, subtítulo, y luego puedes tener un tercer campo con bloques. Entonces, lo que estoy tratando de decir es que el nivel de libertad, déjame decirte que toda la flexibilidad es mejor, puedes decidirlo, ¿verdad, cuando vas a design y estructurar los componentes, si son componentes anidables o si son tipo de contenido. Exactamente. Sí, la idea es que tengas la libertad de crear lo que quieras. Pero por supuesto, también tienes las herramientas para hacerlo restrictivo para los editores de contenido para que no estropeen todo lo que están creando. Porque por ahora, como lo hice, solo bloqueé los que queremos tener en la página, pero imagina que también tenemos la característica. La característica era algo que estaba dentro de la cuadrícula. Así que ahora, si agrego uno aquí, estará un poco fuera porque no tiene la cuadrícula que lo contiene. Así que puedes ver que es de tamaño completo y no es la característica prevista de ese bloque específico. Por eso puedes restringir qué tipo de bloques quieres cargar cada vez. Así que sí, creo que es realmente importante tener eso en su lugar. Sí, y el otro punto a destacar es que cuando vayas a definir un componente en la interfaz de usuario de Storyblock, por ejemplo, en la biblioteca de bloques aquí, por ejemplo, selecciona el héroe. Bien, en el héroe, tienes claro que tienes el titular, el subtítulo, y la imagen de fondo. Y luego, en el proceso en el que vas a crear los componentes, tienes que cambiar a tu aplicación SvelteKit, y tienes que crear el componente similar en el frontend.

Probablemente en el front-end, tendrás el componente hero.svelte en el directorio de componentes, y el campo que puedes usar es el campo que se muestra aquí. Probablemente puedas acceder al titular, a la imagen de fondo. Y sí, piensa en por qué este tipo de enfoque. Piensa en su usabilidad. No solo su usabilidad en este tipo de proyecto, sino que puedes reutilizar, por ejemplo, el CLI que Alba mostró antes, puedes extraer la estructura del componente a través del CLI, y luego reutilizar esta estructura en el próximo proyecto. Probablemente, por ejemplo, si eres un freelancer y vas a crear múltiples sitios web o múltiples proyectos para tus clientes, o estás trabajando en una agencia y necesitas construir más de un proyecto para más de un cliente, probablemente al final, puedes crear tu conjunto de componentes en términos de componentes para Storyblock y componentes para Svelte. Y luego puedes reutilizarlo en el nuevo proyecto. Entonces, probablemente puedas crear algunos componentes al principio, pero luego puedes reutilizarlos. Exactamente. Sí. Sí, creo que es bastante bueno. ¿Tienes alguna pregunta en general o... De todos modos, si quieres tomarte tu tiempo para seguir todo el proceso, solo quiero decir que tenemos el tutorial definitivo para Svelte en nuestro sitio web, donde más o menos estamos explicando todas las cosas que Alba nos está mostrando, ¿verdad? Así que tenemos el tutorial definitivo, tenemos múltiples partes. La primera parte se centra en la integración con Storyblock y luego renderiza la historia de las historias en SvelteKit, y así sucesivamente. Así que si probablemente ahora estás siguiendo a Alba por una cuestión de tiempo, probablemente estamos yendo demasiado rápido para un nuevo usuario que por primera vez quiere integrar Storyblock en SvelteKit, pero sí, al final creo que intentamos proporcionar información sobre la viabilidad de este tipo de integración y luego puedes tomarte tu tiempo siguiendo este tipo de tutorial, ¿verdad? Exactamente. Sí, y por supuesto en la página de Notion tienes el enlace en los recursos. Creo que está aquí, no, este. Sí, así que tienes todos los recursos para comenzar con Storyblock y SvelteKit. Sí, porque probablemente quieras sentarte, tómalo con calma y luego sigue algunas instrucciones a un ritmo más lento, pero sí, al final tienes las mismas instrucciones, sí. Exactamente. Pero como puedes ver, seguimos un paso diferente. Comenzamos con la integración con Storyblock desde el principio. Configuramos el HTTPS. Sí, para italiano y español es realmente difícil. Una vez que configures todas las cosas, puedes comenzar a crear el componente y siguiendo la guía de Svelkit, puedes crear la conexión en la función de carga implementando el método de montaje y así sucesivamente, ¿verdad? Así que al final es bastante, una vez que entiendes la lógica, probablemente es bastante fácil. ¿Cubriste todas las cosas en tu lado? Solo quedó una cosa, pero no creo que sea realmente importante. Bueno, tal vez pueda mostrarlo rápidamente. La idea es que imagina que en lugar de listar todos los artículos en la página del blog aquí, en lugar de listar todos los artículos aquí, tal vez quieras tener como una función de artículo en tu página de inicio, como ve aquí, es el mejor artículo que jamás leerás o algo así. En realidad, puedes hacerlo vinculando contenido interno en Storyblock. Así que creo que mostraré solo este caso porque es importante conocer el campo de opción múltiple y la opción de lista, pero luego te daré la oportunidad de mostrar cualquier cosa que quieras mostrar. De acuerdo. Entonces, la idea es que ahora mismo, lo que queremos hacer es crear un nuevo componente que renderice los artículos que seleccionamos y no todos ellos. Para hacer eso, crearemos el componente de bloque de artículos populares. Así que volvamos a la biblioteca de bloques. Creemos un nuevo bloque, agreguemos el nombre de artículos populares en el bloque Nextable, y luego aquí, crearemos los nuevos tipos de campo. El primero es el titular y es de tipo texto. Así que no hay nada de qué preocuparse, pero ahora tenemos que seleccionar los artículos que serán un campo de opción múltiple. El campo de opción múltiple es similar al de opción única, pero puedes seleccionar más de uno. Esa es la única diferencia. Y en el campo de opciones múltiples, tienes la posibilidad, como ya te dije, de crear pares clave-valor, de tener fuentes de datos internas, o de obtener historiales de ellos. Así que seleccionaremos historiales. Y queremos que todos los artículos que estén dentro de la carpeta del blog se muestren en ese selector, para que podamos seleccionar los que queramos. Y en este caso, queremos restringir el contenido a los artículos, así que omitimos la página del blog. Solo queremos los artículos dentro de la carpeta. Así es como puedes hacerlo. Y por ejemplo, si solo queremos que se muestren tres artículos como función en la página de inicio, podemos seleccionar solo tres, como máximo, para que solo obtengamos un máximo de tres. Y si hago eso, solo crearé los artículos populares. Así que ahora, tenemos la posibilidad de crear un componente para ver la vista previa en vivo o simplemente agregar el contenido. Pero por ahora, solo crearé el componente para que podamos verlo. Copiemos y peguemos este contenido y creemos también los artículos populares aquí. Artículos populares. Articles.xsvelt. Iba a usar vista. Dios mío, mi estado predeterminado. De acuerdo, aquí usaremos la misma tarjeta de artículo que creamos para el artículo anterior para que podamos reutilizar el componente, por supuesto, y luego simplemente todos los artículos provienen del blog. Simplemente los renderizamos. Pero para tener este contenido, necesitaremos recuperar los datos que se agregan en la relación. Pero antes de explicar eso, veamos qué sucede. Básicamente, si voy a nuestra página de inicio y quiero una nueva sección, esta sección primero debemos agregarla porque la bloqueamos. Así que desbloqueemos esto. De acuerdo, ahora que podemos ver todos los blogs, quiero seleccionar el bloque de artículos populares. Aquí quiero definir un titular, tal vez los mejores artículos de todos los tiempos. Y luego quiero seleccionar los artículos que quiero mostrar. En este caso, será este y tal vez este, solo dos, por ejemplo. La idea es que ahora mismo, primero, por supuesto, necesito ir al diseño y agregar los artículos populares. Yo, esto es muy divertido. Así que necesitamos agregarlo aquí y luego agregar la palabra popular aquí y aquí. De acuerdo, ahora que lo tenemos, se renderizará, pero por supuesto tendrá un problema porque no podemos renderizar el contenido que tenemos aquí. ¿Por qué? Porque el contenido que estamos enviando aquí, la imagen, el título y esto aquí no se resuelven en absoluto para la API. Entonces, si vamos al JSON de borrador, podemos ver en el campo de artículos que tenemos IDs. ¿Qué es esto? Solo tenemos la relación con esa entrada específica, pero no tenemos el contenido. Para tener el contenido, tenemos que resolver la relación. Y para hacer eso, tenemos una consulta de API que podemos agregar. Entonces, básicamente, si vamos a nuestra página, sí, sí, necesitamos agregar la resolución de la relación que puedes ver aquí. Así que copiaré y te lo explicaré allí. Entonces, en la página, ahora estamos obteniendo el deslizamiento y eso es todo, pero lo que necesitamos hacer ahora es crear cualquier relación que tengamos. Entonces, cualquier campo de opción múltiple o campo de opción única que estemos usando en nuestro esquema, necesitamos definir qué componente es, qué bloque, qué campo es, qué campo está utilizando opción múltiple o opción única. Ahora que lo tenemos, podemos agregarlo a nuestra API y decir, okay, ahora resuelve la relación para obtener el contenido de ese ID. Y en realidad fusionará ese contenido dentro del array de artículos. Pero si queremos que también funcione el Bridge, también necesitamos enviar esto al Bridge. Entonces, para hacer eso, necesitamos ir a nuestras páginas belt y luego agregar la resolución de la relación allí también. Así que hagámoslo. Voy a nuestra página. Solo agreguemos esto. Y básicamente, en lugar de usar el Bridge directamente, necesitamos resolver las relaciones nuevamente y luego pasarlas. Esto es solo para la vista previa en vivo. Si no quieres usar la vista previa en vivo para resolver la relación porque no te importa, entonces puedes eliminarlo y no resolverlo allí. Eso depende de ti. Pero en este caso, hagámoslo para que puedas ver cómo funciona correctamente.

Ahora podemos ir a la página de inicio, refrescar para deshacernos del error, tal vez refrescar completamente. La idea es que estamos leyendo algo sin guardar. Así que eso es realmente importante. Si no guardas tus archivos, no se renderizarán. Dios mío, okay, ahora puedes ver que tengo los artículos aquí y al resolver las relaciones dentro del bridge, si lo cambio, se supone que debe cambiar la interfaz de usuario, pero no lo está haciendo. Okay, ahora sí, necesito guardar. Ahora puedes ver que- Esto es algo relacionado con Svelte. Sí, sí, porque yo... Sí. Sí. Creo que es esto. Te diré por qué. Aquí. Déjame ver exactamente. Exactamente, exactamente. Antes teníamos un error 500 cada vez que creamos una página, porque Svelte necesita saber que necesita volver a cargar todo el data. Entonces, si no pasas la clave, no se volverá a renderizar. Por eso, al principio, necesitábamos guardar algún contenido. Pero si lo tenemos, es diferente. Ahora podemos crear páginas sin guardar. Exactamente. Esta es una de las diferencias clave entre Svelte Kit y otros frameworks como Next, Naxt o en general Svelte. Porque al final, Svelte no cambia el DOM, permíteme decirlo, así que no utiliza el virtual DOM. Entonces, en este caso, cuando arrastras y sueltas algunos data porque estás arrastrando, cambiando la estructura, estás cambiando el data y no el DOM, debes notificar a Svelte para que vuelva a renderizar el DOM a través de los atributos key, okay, a través de la directiva key, lo siento. Y luego vuelve a renderizar el bloque porque no estás actuando sobre el virtual DOM, estás actuando sobre la estructura paralela que tienes pero está relacionada con el data. Esto es lo mismo cuando juegas con la animación, por ejemplo, o el lienzo con Svelte, ¿verdad? Porque si estás cambiando el texto, ¿verdad? Estás cambiando el texto y sí tienes una especie de reactividad en el front end pero si estás cambiando la estructura de esta manera estás cambiando el orden de los arrays porque al arrastrar y soltar al final estás cambiando, simplemente cambiando el orden del array pero no estás cambiando la referencia al array. Entonces, en este caso, debes ayudar a Svelte y decir que estás cambiando algo para que renderice este tipo de fragmento de HTML. Sí, esta es la razón. Y sí, esta es la razón por la que Svelte es más rápido que Vue o React, ¿verdad? Sí. Sí, muy bien, entonces podemos agregar nuevos artículos y ver la vista previa en vivo. de ellos. Así es como puedes seleccionar algunos artículos u otro contenido de Storyblock internamente. Puedes resolver las relaciones con cualquier tipo de data que tengas. Y eso es todo.

Bien, ahora tenemos una pregunta sobre el aviso recién notado de que la aplicación CSS en el repositorio de Github se convierte en app.post.css. ¿Ahora necesitas prestar atención? Creo que en algún lugar estamos usando post CSS en lugar de CSS. Sí, pero al final, si vas a usar post CSS necesitas usar post CSS. En general, por ejemplo, en mi ejemplo de esta masterclass no estoy usando post CSS, estoy usando CSS. Sí, exactamente, esto es más porque agregamos el complemento de Tile Window dentro de Svelte. Con Svelte-TileWindow genera todas las, digamos las cosas solicitadas para que Tile Window funcione. Entonces, este PostCSS fue generado por ellos. Así que creo que debería funcionar porque estás usando PostCSS en TileWindow. Si no quieres usar TileWindow y quieres eliminarlo, puedes deshacerte de él y usar un CSS normal. Sí, exactamente. Pero si quieres usar TileWindow, déjalo como está. Sí, está funcionando bien. Porque aquí tienes la cosa de preprocess. Sí, por ejemplo, si aplicas algo a PostCSS, si vas a redefinir algo para TileWind. Sí, pero no es algo obligatorio. Digamos que es opcional.

Bien, entonces, ¿quieres mostrarnos cómo implementar o? Sí, sí, si quieres puedo mostrar algo sobre la implementación. Por supuesto que quiero. Sí. Pero hasta ahora todo está claro. Más o menos, más o menos, menos, más. Sí, pero sí, no te asustes al final. Si pruebas Atom en esto, y verás que es más fácil porque ahora está, al final, la última parte de esta masterclass como puedes ver siempre está creando componentes, recordando definir el componente, y eso es todo. Así que al final es bastante fácil, ¿verdad? Entonces puedes acelerar el proceso de creación de nuevos componentes. Y mi sugerencia es crear algunos componentes que puedas reutilizar en múltiples proyectos. En caso de que necesites crear múltiples componentes. Pero si quieres, puedo mostrar algo sobre después de que vayas a crear tu sitio web, quieres publicarlo en algún lugar, ¿verdad? Entonces, localmente, vas a usar NPM run dev, ¿verdad? Y estás usando el servidor web local. Y en este caso, tienes una especie de Node.js en el fondo que sirve las páginas y demás, ¿verdad? Pero, ¿qué pasa si quieres generar un sitio estático a partir de tu proyecto y publicarlo en algún lugar, ¿verdad? Por ejemplo, en las páginas de GitHub o Netlify o en AWS S3 o algún CDN. Entonces, en este caso, puedes configurar Svelket para generar un sitio estático en lugar de uno dinámico, ¿verdad? Voy a compartir mi pantalla. En la pantalla compartida, puedes ver el control de zoom, ¿no? No. Pero solo puedes ver la terminal, ¿verdad? Solo la terminal, sí. De acuerdo, bien. Puedo mover esto. De acuerdo, bien. Perfecto. Así que necesito la terminal. Y en este caso, estoy usando un proyecto, más o menos, el mismo que construimos hoy con Alba. Permíteme resaltar algunas diferencias, ¿de acuerdo? Porque como sabes, en ciencias de la computación, puedes lograr las mismas cosas de varias formas, ¿verdad? Así que solo para que sepas que probablemente es mejor saber que, por ejemplo, puedes lograrlo de diferentes maneras. Una forma es, por ejemplo, en este caso, no estoy usando un preprocess de Svelte. Estoy usando Vite preprocess, ¿verdad? Y la diferencia principal es que el preprocess de Svelte es más complejo, te permite acceder a características adicionales. Por ejemplo, usando la plantilla, para cargar archivos externos y demás. Para este tipo de ejemplo, creo que Vite preprocess es suficiente, ¿verdad? Y la ventaja también es porque Vite preprocess viene incluido con Svelte, ¿verdad? Así que no tengo que instalar nada más. Otra forma de cargar los componentes, en mi caso, como puedes ver, en mi ejemplo, no estoy usando el layout. No es nuestra mejor práctica, ¿verdad? Porque el layout es muy útil cuando necesitas algún contenedor compartido en todas las páginas. Así que mi sugerencia es usar Layout.js y Layout.svelte. Pero para empezar, para mantenerlo simple, puedes omitir el layout porque no es obligatorio. En este caso, estoy cargando en el page.js. Y como puedes ver, estoy usando la función de user story block porque quiero centralizar y crear una especie de, como puedes ver, se importa desde SB Lib, ahora podemos ver. Y mi sugerencia en lugar de usar punto punto barra punto punto barra. Así que una ruta relativa cuando vas a importar algo para Svelkite, usando $Lib. $Libs es la palabra clave mágica para referirse a una variable. Para referirse a la lib, al directorio lib de origen. Así que en este caso, por ejemplo, si vas a mover este tipo de page.js a una subcarpeta, no tienes que reescribir la referencia porque no es relativa, ¿verdad? Así que en este caso, estoy importando desde s.blib y en s.blib tengo la función de user story block donde tengo el story block en él. Así que simplemente moví a un lugar centralizado el story block en él. Estoy usando el token de acceso, sí, pero en este caso lo estoy cargando desde el archivo .env. Por ejemplo, si no quieres usar el token de acceso directamente o codificado en tu código fuente, puedes importarlo, y estoy usando una convención de Svelkit, y estoy usando $env, barra estática, barra pública, lo que significa que estoy cargando una clave pública, y en este caso tengo el token de acceso público y la región pública, ¿verdad? Entonces de esta manera puedo crear algunos parámetros para controlar el token de acceso y la región. Y luego tengo, obviamente, el .env donde tengo el token de acceso público y la región pública. Y luego, y típicamente el .env pongo el .env en el archivo .gitignore y para, porque necesitaba un ejemplo, tengo .env.example que refleja el extractor y el nombre de la clave que necesito en mi código fuente. Pero como puedes ver, puedo poner algún ejemplo, ¿verdad? Así que en este caso, puedo ignorar en git el .env pero tengo el .env.example. Entonces, por ejemplo, en el proyecto, si tengo un nuevo desarrollador que quiere ayudarme, pueden clonar el proyecto, copiar .env.example en .env y luego personalizar su token de acceso. ¿Verdad? Sí, este. Luego también tenemos otra forma, porque en el pasado tuve algunos problemas al importar los componentes, especialmente si vas a jugar con el renderizado del lado del cliente, el renderizado del lado del servidor y solo el lado del servidor. Así que de esta manera, resolví un problema para importar el componente. Como puedes ver, la sintaxis es un poco diferente. Así que ahora, personalmente, estoy usando el await import de esta manera. Y de esta manera, como puedes ver, es el primer paso para hacerlo más dinámico, ¿verdad? Porque por ejemplo, esto es una cadena, así que puedes recorrer todos los archivos que tienes y luego realizar el await import. Pero sí, es solo una pequeña cosa. Sí, otra cosa que quiero mostrarte, sí, está en ahora. Y como puedes ver en este caso, estoy omitiendo el padre no solo porque no tengo el layout, sino porque tengo el user story block, ¿verdad? Y luego de la misma manera, estoy cargando la API de user story block, y luego puedo usar, de manera similar a los demás. Probablemente otra mejora que puedo hacer es porque puedo seleccionar las historias de borrador de las historias de los editores y tienen que configurar la versión, probablemente es mejor mover este valor codificado en una clave en el .env, ¿verdad? Así que solo una mejora de este código. Pero déjame mostrarte, en este caso, si voy a ejecutar este tipo de proyecto, puedo ver que, déjame mostrarte, ¿de acuerdo? Este es el proyecto servido por el servidor localmente, ¿verdad? Y el servidor local utiliza Node.js, ¿verdad? Así que significa que si quiero implementar este tipo de proyecto en algún lugar, necesito Node.js en el lado del servidor. Pero probablemente, a veces, es algo que no quiero porque quiero generar algunas páginas estáticas a partir de este contenido, ¿verdad? Por esta razón, para publicar cosas en SvelteKit, tienes los adaptadores. Tienes muchos adaptadores, pero quiero centrarme principalmente en el adaptador static, ¿verdad? Porque el adaptador static te permite crear una copia o mejor dicho, generar un archivo HTML estático en la fase de construcción, ¿verdad? Y luego, una vez que estén listos, puedes copiarlos en algún lugar. De acuerdo, para esto, tienes que instalar NPX y FTP, el m.adapterstatic es algo que ya tengo en mi proyecto, pero déjame hacerlo de nuevo, solo para mostrarte. De acuerdo, como puedes ver, ya tengo, y luego puedo ir a la configuración. En la configuración, tengo que ir al archivo de configuración svelte.config, y como puedes ver en el kit, tenemos el adaptador. En el adaptador, estoy usando el estático, como puedes ver, porque de forma predeterminada en el svelte.config.js predeterminado, encontrarás algo como esto, ¿de acuerdo? Pero porque instalé el estático, voy a cambiarlo a estático. Y luego puedo usar el adaptador. En el adaptador, puedo definir, principalmente, puedes definir más parámetros, pero los más importantes son, por ejemplo, el directorio, en este caso build, donde quieres crear tu sitio estático. Y luego lo último es, ir al archivo plus-page.js, o si tienes el archivo layout.js, tienes que declarar una variable, una constante, lo siento. La constante es PRENDER true. En este caso puedo generar el sitio estático, ¿verdad? De acuerdo. Ahora puedo ejecutar npm run build. Y el npm run build porque tenemos el adaptador static, genera todos los archivos. Y ahora tengo mi sitio web estático en el directorio de construcción. Así que tengo el index.html, tengo about.html, como puedes ver, porque en este caso solo tengo dos páginas. Y luego tengo underscore app donde tengo, si te muestro, probablemente es mejor mostrártelo en el código, si inspecciono el directorio de construcción, como puedes ver, está ignorado por Git porque no necesitas hacer commit y push a este tipo de activo generado. Y así en el underscore app tienes todo, por ejemplo, CSS y JavaScript generados. Como puedes ver, tengo un JavaScript para cada componente.

Pero como puedes ver, está compilado. Déjame ver, no se puede compilar. Sí, entiendes a lo que me refiero. Um, sí, pero esto es mágico porque, porque no estoy instruyendo, no estoy definiendo qué tipo de páginas tengo que renderizar, ¿verdad? Entonces, si no enumero el punto final para renderizar, Svelkit comienza desde la página de inicio. En la página de inicio, en este ejemplo, déjame ejecutar nuevamente npm run dev. Y déjame abrir nuevamente la página, de acuerdo. Tengo la barra de navegación donde tengo el ahref, así que tengo el enlace para la página de inicio y tengo el enlace para la página Acerca de, ¿verdad? Entonces, parte de la página, encuentra el elemento, el elemento de etiqueta A y luego intenta resolver el enlace, si encuentra la página, luego crea la página, ¿verdad? Y obviamente, si la página es servida por pluspage.js con pre-renderizado igual a true, de acuerdo. Entonces, si quieres permitir cambiarlo a mp2, hace la magia, tienes que poner el pre-renderizado en pluspage.js o pluslayout.js la constante pre-renderizado igual a true. Hay una forma de omitir la magia. Hay un parámetro en la configuración donde, por ejemplo, puedes... Déjame encontrar la documentación. De acuerdo, probablemente puedas enumerar las páginas. Fallback no asset pages. No esta. No recuerdo el nombre, pero sí, lo encontraré y te lo haré saber. Pero sí, al final puedes enumerar las entradas. Las entradas. La palabra clave es entradas. Las entradas. Las entradas. Entonces, si quieres especificar las entradas, aquí la configuración, ¿verdad? Como puedes ver, puedes enumerar las entradas. En este caso, el autor de Svelkit nos sugiere usar el parámetro que puedes enviar cuando ejecutas npm run build, pero como puedes ver, también puedes R code la lista, por ejemplo, ¿verdad? Como puedes ver, npm run build, y luego la lista. Bien. En este caso, puedes definir exactamente lo que deseas construir. Pero sin esto, Svelkit hace el trabajo sucio por ti. Ahora el código está listo para ser implementado en cualquier lugar porque ahora son páginas estáticas. Como puedes ver, tenemos en la construcción las páginas estáticas index.html y luego también acerca de. De acuerdo, así que en este caso, si quieres puedo mostrarte rápidamente, voy a configurar, déjame mostrarte. Voy a configurar Netlify. Voy a configurar Netlify. Entonces, en Netlify, he configurado mi proyecto. Vinculo el proyecto con mi repositorio de GitHub de este proyecto. Y luego lo único que puedo hacer es ejecutar npm run build, lo mismo, el mismo comando que se ejecuta localmente. Y eso es todo, ¿verdad? Entonces, la configuración de implementación, como puedes ver, tenemos npm run build. Y estoy diciendo que el activo publicado está en build, ¿verdad? De esta manera, cada vez que hago un push, se genera una nueva implementación, ¿verdad? Así que déjame hacer un ejemplo rápido. Entonces, si cambio algo, por ejemplo, también en el README, ¿verdad? Entonces voy a hacer un nuevo plugin. Y luego voy a hacer commit. De acuerdo, en este caso estoy actualizando el README, y luego puedo hacer push al origen. Ahora estoy enviando mi código fuente a Git, pero como Git está vinculado con Netlify, déjame ir a la configuración de Netlify, y si actualizo, probablemente pueda ver algo que se está construyendo. Así que desencadeno la construcción. Y luego tengo en producción, esto, el sitio web implementado, y esto es estático, es estático. Es muy importante, ¿verdad? ¿Está claro hasta ahora? Desde mi lado, sí, pero creo que no soy el único. Sí. Sí, porque puedo decir más, lo que he dicho, pero no quiero crear cosas más complejas. Sí. Diré que si no piden más, podemos detenernos aquí porque fue un día largo. Sí. Y creo que todos merecemos volver a otras cosas. Sí. Solo para que sepas que también hay una forma de vincular porque ahora estoy cambiando algo en el código fuente, ¿verdad? Lo empujo en GitHub, y luego esto es el desencadenante para desencadenar la nueva implementación. De acuerdo. Pero podemos configurar fácilmente, Storyblock cuando el editor de contenido publica una historia, enviar su web book a Netlify y Netlify ejecuta nuevamente las cosas porque el HTML es estático, ¿verdad? Entonces, si cambias algo en el contenido, tienes que implementarlo nuevamente, incluso si no estás cambiando el código fuente. Pero sí, es factible de esta manera. Si no hay una solicitud al respecto, porque no quiero agregar mucha información, ¿verdad? Probablemente sea mejor entender lo básico y luego tal vez en el futuro, hacer la segunda versión de esta masterclass con las cosas advanced. Sí, eso sería bueno. Sí, porque al final, jugando con la configuración del lado del servidor, puedes hacer algo de magia sobre el performance. Pero sí, necesitaría otras tres horas. Sí. Sí, puedo imaginar eso. Renderizar más, sí, un tema enorme. Sí, sí, sí. Pero al final, ahora estoy usando Netlify, pero repito de nuevo, estás creando HTML para que puedas implementar, por ejemplo, en las páginas de GitHub. Sí, no es necesario ir a la cloud. O a un CDN típico donde no tienes ningún tipo de lenguaje del lado del servidor, ¿verdad? Exactamente, sí. Entonces, ¿tienes alguna pregunta? Sí, algo que quieras decir, algún comentario? Algo... ¿Puedo saber un poco sobre la parte de internationalization? ¡Wow! ¿Quieres profundizar en eso? No, pero tal vez, sí, podemos explicar un poco cómo sería si quieres hacerlo. Pero no creo que tengamos, en este momento, un artículo para enviarle. O algunas referencias, ¿de acuerdo? Sí, exactamente, ese es un problema. Aún no tenemos la referencia. No, para Svelte no tenemos la referencia. Exactamente, para Svelte, sí, para Svelte. Entonces, podemos explicar cómo funciona. Sí, sí, sí. Pero no podemos enviarte el código literalmente, porque aún no está terminado. Sí. Está en progreso. Pero puedo mostrar rápidamente, si quieres- Sí, puedes mostrar cómo funciona. ¿Quieres ver la internationalization en general con Storyblock? De acuerdo, déjame hacer este tipo de ejemplo. Semanalmente. Entonces, ahora estoy creando un espacio básico con Storyblock, como puedes ver. Si saltas, y como puedes ver, si saltas a la página de inicio, no puedes ver el multilenguaje, ¿verdad? Entonces, porque tienes que ir a la configuración, habilitando la internationalization, puedes agregar, por ejemplo, varios idiomas, italiano y alemán, ¿de acuerdo? Y luego puedes agregar los nuevos idiomas, ¿verdad? Una vez que configure los idiomas, puedes volver al contenido, y en el contenido, como puedes ver ahora, puedes seleccionar los idiomas. Estás cambiando los idiomas predeterminados, pero puedes cambiar, por ejemplo, al idioma italiano. En el idioma italiano, puedes ir a los componentes, como puedes ver, pero en este caso, estás heredando el valor del idioma predeterminado. Si quieres personalizar, puedes hacer clic en Traducir, y luego comenzar a traducir. De acuerdo, esta es la forma de traducir por campo, ¿verdad? Porque tienes un sitio web, quieres traducir la misma estructura en varios idiomas, italiano, alemán, ¿y así sucesivamente, verdad? Tenemos un Advanced stuff, ahora no puedo explicarlo, pero donde puedes crear diferentes sitios web para países, y puedes administrar, por ejemplo, la página de inicio para países italianos, y, por ejemplo, en la página de inicio para francés. Y porque las páginas de inicio están vinculadas, luego puedes, por ejemplo, agregar un nuevo componente en la página de inicio italiana, y luego, si quieres, puedes fusionar el contenido en otras páginas de inicio. Esto es más complejo, porque al final, puedes definir una estructura diferente para cada país, y es una forma más enterprise de administrar los idiomas. Sí, lo siento, fui muy breve, pero solo para que sepas que, sí, es factible. Y como puedes ver, recibes el parámetro de los idiomas en la URL, y luego puedes, en el lado del código, recuperar los idiomas adecuados, las historias adecuadas en el idioma adecuado. Porque al final, la historia es la misma, ¿verdad? Pero puedes pedir, okay, dame el contenido en italiano, o en alemán, o en el idioma adecuado. Sí, de acuerdo, sí entiendes el punto, sí.

Puedes recuperar los idiomas, y luego cuando llames a las APIs de Storyblock, debes declarar el idioma que necesitas. Pero podemos hacer una segunda, la segunda parte de esta masterclass sobre temas más avanzados, como multilingüismo y, sí.

Sí, exactamente, eso podría ser bueno. Sí, tengo la misma sesión en Next, pero, uf, Next era inestable, y eso fue una especie de pesadilla. Espero que hoy en día sea más estable y podamos crear algunos sistemas internacionales para comenzar. Pero te refieres al lado de Next. Sí, en el ecosistema de Next. Sí, Storyblock siempre es el mismo, pero las cosas siempre están cambiando la forma en que hacen las cosas. Y las traducciones son una de ellas. Los paquetes que tienen, como I18N, ese tipo de paquetes, a veces están cambiando la forma en que quieren renderizar las cosas. Sí. También en SvelteKit fue una pesadilla antes de la versión 1.0 porque cambiaron mucho la estructura del archivo y demás. ¡Dios mío! Sí. Pero ahora, una vez que entiendes la estructura, es muy fácil de entender. Ahora es estable porque lanzaron la versión 1.0, ¿verdad? Pero recuerdo que antes de la versión 1.0, lo cambiaron mucho porque aún no se había lanzado, ¿verdad?, así que pueden hacerlo. Pero aprecio todo el esfuerzo y todos los cambios porque ahora es muy fácil. Sí. Es muy fácil. Sí, estoy de acuerdo. Es realmente genial. Bueno. Eso es todo de nuestra parte. Espero que entiendan o hayan aprendido un poco o al menos tengan más curiosidad sobre SvelteKit y Storyblock y luego puedan tomarse su tiempo para explorar más. Sí, creo que son dos tecnologías que puedes encontrar en el mercado. No solo porque somos de Storyblock. Pero sí, si eres freelancer o en general desarrollador, conocer un buen CMS y conocer un buen framework es muy útil para encontrar nuevos trabajos, nuevos clientes, nuevo personal. Sí. Sí, exactamente. Para tener múltiples posibilidades. Sí, bien, ¿qué puedo decir?, gracias por su tiempo. Sí, muchas gracias. Espero que hayan disfrutado de la sesión. Igualmente.