hypermedia blog

Gerador de blog estático hipermediário

o que é isso?

Construindo um blog usando o padrão de design "Islands". Um back -end orientado ao banco de dados do SQLite que gera um site moderno estático.

Como funciona?

Os scripts atravessam o banco de dados, criando documentos HTML totalmente renderizados e snippets DOM para cada página do site. O NGINX lê solicitações e servirá um ou outro com base na existência do cabeçalho hx-request . hx-boost é empregado para içar automaticamente todas as tags de âncora em solicitações de Ajax, fazendo a mágica acontecer. Os documentos de resposta contêm tags <title> que o HTMX reconhece e aplica -se à página para obter melhores UX e SEO.

Capturas de tela

post renderizado

Editor de postagem de back -end

marcação de metadados do editor

Edição da categoria de back -end

prédio

Todos os comandos de construção são executados usando BUN.

• bun install puxará todas as dependências necessárias.
• bun edit executa o servidor de backend para gerenciamento de banco de dados WYSIWYG.
• bun run init constrói a estrutura da pasta dist e move os arquivos no lugar para o site renderizado.
• bun htmx executará o TypeScript para realmente gerar os ativos HTML do site.
• bun css executa os scripts do PostCSS para gerar e otimizar o estilo do site usando o TailWindSCSS.
• bun start executa o init, HTMX e CSS.

dados

O conteúdo do site é gerado a partir de um banco de dados SQLite de 4 tabela contendo: postagens, categorias, tags e uma tabela de metadados relacionais que as correlaciona. A lógica do banco de dados existe em: SRC/modelos.

modelos

modelos html/bigode vivem em: src/visualizações

A folha de estilo principal está aqui: src/ui/theme.css. Eu sei que estou usando o Tailwinds "errado", saia aqui.

domínios

Existem 2 arquivos que definem os domínios globais utilizados. Um é para o editor de back -end para o outro o próprio blog. Eles são inadimplentes para //localhost para obter suporte de fallback http.

Editor de back -end

O editor WYSIWYG baseado na Web pode ser acessado executando bun edit . O editor suporta adicionar, editar e remover postagens e seus meta -dados, bem como as categorias e as próprias tags. A porta padrão e o nome do host (localhost: 8999) podem ser alterados em: src/server.ts.

servidor da web

As configurações de amostra nginx estão disponíveis no diretório Nginx. O único "mágico" real está anexando o diretório raiz da existência do cabeçalho de solicitação HX no exemplo que está disponível para sites.

status

v1.0 deste projeto está completo! Agora está alimentando meu blog em https://blog.xe.ro

TODO & IDEIAS

• Alternativas Nginx (por exemplo, Caddy)
  • nginx hx-header "root rewrite" vs embutido hx-get to slug urls perfh testing
• IDK, talvez blogs reais? • ͡ ㇁ ㇁ • ͡

fundo

(Eu estava pensando em chamar este projeto tnthumbs b/c, foi construído usando: tipyscript nginx caudwindcsss htmx unix bigode bun sqlite)

Referências

• https://bun.sh/docs
• https://bun.sh/docs/api/sqlite
• https://tailwindcss.com/docs
• https://tailwindcomponents.com/cheatsheet
• https://htmx.org/docs
• https://htmx.org/api
• https://htmx.org/attributes/hx-push-url
• https://www.nerdfonts.com/cheat-sheet
• https://github.com/janl/mustache.js
• http://mustache.github.io/mustache.5.html

licença

Todos os arquivos neste repositório, incluindo o conteúdo do meu blog, são lançados CC0 / Kopimi! No espírito de liberdade de informação , encorajo você a bifurcar, modificar, mudar, compartilhar ou fazer o que quiser com este projeto! ^c^v