qubyte codes
1.0.0
Este repositorio contiene tanto el generador de sitios estáticos como el contenido de https://qubyte.codes.
El generador está contenido principalmente en index.js. La mayor parte del trabajo pesado se realiza mediante un sistema de creación de gráficos personalizado y se marca, que toma archivos de rebajas y los procesa en contenido HTML. Sin embargo, no es perfecto y fue necesario algunos parches de mono. El módulo lib/render.js realiza este parche y agrega resaltado de sintaxis y formato de fórmulas matemáticas.
serve.js es un servidor de desarrollo. Cuando los archivos cambian, partes del gráfico de compilación se vuelven a ejecutar para obtener resultados actualizados.
Los archivos fuente están contenidos en los directorios src y content. Tras la compilación, se crea un directorio público y se copian algunos de estos archivos fuente (los que no necesitan compilación, como el trabajador del servicio). Se deben generar otros archivos y se colocan en el directorio público a medida que se crean.
netlify.toml es una configuración para Netlify, que aloja mi blog (lo recomiendo mucho). Al momento de escribir este artículo, este archivo solo contiene configuración para encabezados. Están optimizados para la seguridad y para el almacenamiento en caché de CSS del navegador. Originalmente alojé este blog en una gota de DigitalOcean usando NGINX. Una configuración para eso todavía es parte de este repositorio, nginx.conf.
Utilizo postcss para compilar CSS. En principio, el CSS se puede utilizar sin él. En su mayor parte, postcss se utiliza para concatenar y minimizar el CSS. El CSS de salida tiene un hash y el hash pasa a formar parte del nombre del archivo CSS. Esto es para eliminar el caché, ya que a CSS se le da un tiempo de caché largo o indefinido para evitar que bloquee la carga de la página después de que se haya cargado una vez.
Con la excepción del resaltado de sintaxis, este sitio evita en gran medida el uso de clases en HTML como enlaces para CSS, y en lugar de eso afirma que el marcado semántico proporciona suficiente contexto para que CSS se ciña.
El blog es una aplicación web progresiva (PWA) y tiene íconos de varios tamaños en consecuencia. Uno de ellos es también el favicon.
Este directorio contiene las fuentes de rebajas de las publicaciones publicadas. Cada publicación tiene un preámbulo JSON que contiene varios metadatos:
| nombre | descripción |
|---|---|
| fecha y hora | La marca de tiempo de publicación de la publicación. Si esto es en el futuro, la publicación no se entregará. |
| título | El título de la publicación. |
| descripción | La descripción de la publicación. Esto se agrega al encabezado HTML como una meta descripción y una meta descripción de Twitter. Twitter utiliza este último para completar las tarjetas de Twitter. |
| borrador | Si es verdadero, la publicación no se mostrará. |
| etiquetas | Una lista de etiquetas. Estos se muestran en la parte superior de cada entrada y también se utilizan al compartir en Twitter y Mastodon a través de los enlaces en la parte inferior de cada publicación. |
| menciones web | Una lista de menciones web de otros blogs. |
| guiones | Una lista de objetos con un campo href . Estos se agregarán como scripts de tipo módulo al encabezado de la publicación. |
Utilizo plantillas de manillar para representar contenido en páginas. Algunos de ellos contienen páginas y otros son componentes comunes de las páginas. Son bastante de la vieja escuela, pero hacen un buen trabajo.
El trabajador del servicio y el manifiesto son archivos que permiten que este blog se comporte como una PWA. En su mayor parte, esto proporciona almacenamiento en caché personalizado. También permite "instalar" este blog en Android (aunque no estoy realmente interesado en esta funcionalidad).
