qubyte codes
1.0.0
Este repositório contém o gerador de site estático e conteúdo para https://qubyte.codes.
O gerador está contido principalmente em index.js. A maior parte do trabalho pesado é feita por um sistema de construção de gráfico personalizado e marcado, que pega os arquivos markdown e os processa em conteúdo HTML. Porém, não é perfeito e alguns patches de macaco foram necessários. O módulo lib/render.js faz essa correção e adiciona destaque de sintaxe e formatação de fórmulas matemáticas.
serve.js é um servidor de desenvolvimento. Quando os arquivos mudam, partes do gráfico de construção são executadas novamente para obter a saída atualizada.
Os arquivos de origem estão contidos nos diretórios src e content. Após a compilação, um diretório público é criado e alguns desses arquivos de origem são copiados (aqueles que não precisam de compilação, como o service worker). Outros arquivos devem ser gerados e colocados no diretório público à medida que são criados.
netlify.toml é uma configuração do Netlify, que hospeda meu blog (recomendo fortemente). No momento em que este artigo foi escrito, este arquivo continha apenas configuração para cabeçalhos. Eles são otimizados para segurança e para cache de CSS do navegador. Originalmente, hospedei este blog em um droplet DigitalOcean usando NGINX. Uma configuração para isso ainda faz parte deste repositório, nginx.conf.
Eu uso postcss para compilar CSS. Em princípio, o CSS pode ser usado sem ele. Na maior parte, o postcss é usado para concatenar e reduzir o CSS. O CSS de saída é hash e o hash se torna parte do nome do arquivo CSS. Isso ocorre para bloquear o cache, já que o CSS recebe um tempo de cache longo ou indefinido para evitar o bloqueio do carregamento da página após ter sido carregado uma vez.
Com exceção do destaque de sintaxe, este site evita amplamente o uso de classes em HTML como ganchos para CSS, em vez disso afirma que a marcação semântica fornece contexto suficiente para o CSS seguir.
O blog é um Progressive Web App (PWA) e possui ícones de vários tamanhos, respectivamente. Um deles também é o favicon.
Este diretório contém as fontes de redução de postagens publicadas. Cada postagem possui um preâmbulo JSON contendo vários metadados:
| nome | descrição |
|---|---|
| datahora | O carimbo de data/hora de publicação da postagem. Se isso ocorrer no futuro, a postagem não será renderizada. |
| título | O título da postagem. |
| descrição | A descrição da postagem. Isso é adicionado ao cabeçalho HTML como uma meta descrição e uma meta descrição do Twitter. Este último é usado pelo Twitter para preencher os cartões do Twitter. |
| rascunho | Se for verdade, a postagem não será renderizada. |
| etiquetas | Uma lista de tags. Eles são exibidos na parte superior de cada entrada e também são usados ao compartilhar no Twitter e no Mastodon por meio dos links na parte inferior de cada postagem. |
| webmenções | Uma lista de webmenções de outros blogs. |
| roteiros | Uma lista de objetos com um campo href . Eles serão adicionados como scripts de tipo de módulo no cabeçalho da postagem. |
Eu uso modelos de guiador para renderizar conteúdo em páginas. Alguns deles contêm páginas e outros são componentes comuns de páginas. Eles são bem old school, mas fazem um bom trabalho.
O service worker e o manifesto são arquivos que permitem que este blog se comporte como um PWA. Na maior parte, isso fornece cache personalizado. Também permite que este blog seja "instalado" no Android (embora eu não esteja realmente interessado nesta funcionalidade).
