hypermedia blog

Hypermedia generator blog statis

apa ini?

Membangun blog menggunakan pola desain "pulau". Backend Database SQLite yang Didorong Backend yang menghasilkan situs web modern bertenaga statis.

bagaimana cara kerjanya?

Script melingkarkan melalui database yang membuat dokumen HTML dan cuplikan DOM sepenuhnya untuk setiap halaman di Situs. Nginx membaca permintaan dan akan melayani satu atau yang lain berdasarkan keberadaan header hx-request . hx-boost digunakan untuk secara otomatis mengangkat semua tag jangkar ke permintaan AJAX, mewujudkan keajaiban. Dokumen respons berisi tag <title> yang dikenali dan diterapkan HTMX ke halaman untuk UX & SEO yang lebih baik.

Tangkapan layar

posting yang diberikan

Editor Pos Backend

Tagging metadata editor

pengeditan kategori backend

bangunan

Semua perintah build dijalankan menggunakan roti.

• bun install akan menarik semua dependensi yang diperlukan.
• bun edit menjalankan server backend untuk manajemen database WYSIWYG.
• bun run init membangun struktur folder dist dan memindahkan file ke tempat untuk situs yang diberikan.
• bun htmx akan menjalankan naskah untuk benar -benar menghasilkan aset HTML situs.
• bun css menjalankan skrip PostCSS untuk menghasilkan & mengoptimalkan gaya situs menggunakan tailwindscss.
• bun start menjalankan init, htmx, dan css.

data

Konten situs dihasilkan dari database 4 tabel SQLite yang berisi: posting, kategori, tag, dan tabel metadata relasional yang menghubungkannya. Logika basis data ada di: SRC/Model.

template

Templat HTML/Kumis Hidup di: SRC/Views

Stylesheet utama ada di sini: src/ui/tema.css. Saya tahu saya menggunakan tailwinds "salah" keluar dari sini.

Domain

Ada 2 file yang menentukan domain global yang digunakan. Salah satunya adalah untuk editor backend yang lain blog itu sendiri. Mereka default ke //localhost untuk dukungan fallback http.

Editor Backend

Editor WYSIWYG berbasis web dapat diakses dengan menjalankan bun edit . Editor mendukung penambahan, mengedit, dan menghapus posting dan data meta mereka, serta kategori dan tag sendiri. Port default dan nama host (localhost: 8999) dapat diubah di: src/server.ts.

server web

Konfigurasi sampel nginx tersedia di direktori nginx. Satu-satunya "sihir" nyata adalah menambahkan direktori root pada keberadaan header HX-Request dalam contoh yang tersedia untuk situs.

status

v1.0 dari proyek ini selesai! Sekarang menyalakan blog saya di https://blog.xe.ro

TODO & IDEA

• Alternatif Nginx (misalnya Caddy)
  • Nginx HX-header "Root RERITE" VS INLINE HX-GET TO SLUG URLS Perf Testing
• idk, mungkin blogging yang sebenarnya? • ͡˘ ㇁ • ͡

latar belakang

(Saya berpikir untuk memanggil proyek ini Tnthumbs b/c itu dibangun menggunakan: ncript nginx tailwindcss htmx unix kumis sqlite)

referensi

• 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-Tush-url
• https://www.nerdfonts.com/cheat-sheet
• https://github.com/janl/mustache.js
• http://mustache.github.io/mustache.5.html

lisensi

Semua file dalam repo ini, termasuk konten blog saya, dirilis CC0 / Kopimi! Dalam semangat kebebasan informasi , saya mendorong Anda untuk membayar, memodifikasi, mengubah, berbagi, atau melakukan apa pun yang Anda suka dengan proyek ini! ^c^v