¡Bienvenido a la segunda entrega de nuestra serie en jergons.dev!

¡Vamos a ello!

Después de la confirmación inicial, comencé a trabajar en "el script de bifurcación" (¿me pregunto qué es eso? ¿Lo descubrirá más adelante en la serie?), pero debo confesar que, como encontrará en el historial de confirmaciones, que me tomé un largo descanso (3 meses) de trabajar en jergons.dev. En estos momentos he tenido la oportunidad de hacer una reflexión subconsciente que fue genial para el proyecto.

Oportunidad de reflexión

Dejé de trabajar en jergons.dev por un tiempo, no intencionalmente sino porque estaba tan inmerso en el trabajo que estaba haciendo en Hearts, que ni siquiera pensé en jergons.dev. Bueno, en el transcurso de esos meses, llegó el nuevo año (con nuevas metas, por supuesto), también experimenté y estuve expuesto a algunas tecnologías nuevas. Una tecnología me llamó la atención y fue Astro.

Astro resonando con jergons.dev

En enero, tenía el objetivo de "aprender nuevas tecnologías con documentos", este fue un desafío que me ayudó a comenzar con Astro después de escuchar excelentes cosas sobre él.

Avanzando rápidamente en marzo, me encontré trabajando en otro proyecto paralelo completamente diferente (wp-theme), estaba viendo una transmisión de YT de Eddie Jaoude donde le hice saber esto a Eddie, pero su respuesta terminaría empujándome a volver a trabajar en jergas.dev

Tienes bastantes proyectos paralelos... No sé cuál.

Esta afirmación me hizo pensar mucho, por lo que decidí detener todos los muchos proyectos paralelos y centrarme en algunos que importaban de inmediato; fácilmente me vino a la mente jergons.dev.

En este punto, ya estaba algo familiarizado con Astro: es un marco para aplicaciones web basadas en contenido, con un sistema de archivos súper simple, listo para i18n, SSG con excelente SEO (importante para el proyecto), rendimiento, soporte para otras bibliotecas frontend como ReactJS con islas (me encanta ésta especialmente); era una herramienta hecha en el cielo para construir jergons.dev.

Bueno, rápidamente me puse a trabajar el siguiente fin de semana disponible. Tenía que trabajar en la parte del diccionario base del proyecto.

El diccionario básico

Inicialicé un nuevo proyecto Astro para este, tan simple como ejecutar el siguiente comando y seguir las instrucciones...

npm create astro@latest

También agregué la integración tailwindcss para diseñar; integración mdx para contenido; esto también fue muy fácil de configurar simplemente ejecutando el comando respectivamente

npx astro add tailwind
npx astro add mdx

Seguí y completé las siguientes tareas

• Se creó una página de inicio estándar con un formulario de búsqueda estático
• Se resolvió temporalmente tener el directorio src/pages/word como el directorio que debe contener cada palabra en el diccionario como un archivo mdx.
• Se implementó el diseño word.astro, que sirve como marco dentro del cual se puede representar todo el contenido de los archivos .mdx para las palabras dentro del directorio src/pages/word/ usando frontmatter.
• También se agregó un mini formulario de búsqueda estático a la barra de navegación de diseño de palabras.

Con esta función, ya podemos ver palabras del diccionario en la ruta jergons.dev/word/[word]. Esto significa que cuando el archivo tuple.mdx está presente en el directorio src/pages/word/, podremos acceder a la página para ver la palabra del diccionario visitando jergons.dev/word/tuple

las relaciones públicas

hazaña: implementar diccionario base #4

balbuceo publicado el 24 de marzo de 2024

Esta solicitud de extracción implementa la aplicación de diccionario base con AstroJS

Cambios realizados

• Se inició un nuevo proyecto astro
• Página de inicio creada
• Se implementaron 2 diseños
  • Base: contenedor principal principal para todas las páginas y diseños
  • Word: diseño que se utilizará en las páginas de Word
• Se implementaron activadores de formularios de búsqueda estáticos en la página de inicio y en el diseño de Word

Capturas de pantalla

Página principal

Página de Word

Ver en GitHub