hypermedia blog

Генератор статического блога Hypermedia

что это?

Создание блога, используя шаблон дизайна "Islands". Бэкэнд с базой данных SQLITE, который генерирует статический современный веб -сайт.

Как это работает?

Сценарии проходят через базу данных, создавая как полностью отображаемые документы HTML, так и фрагменты DOM для каждой страницы на сайте. Nginx читает запросы и будет служить одному или другому, основанного на существовании заголовка hx-request . hx-boost используется для автоматического подъема всех якорных тегов по запросам AJAX, что делает магию. Ответные документы содержат теги <title> , которые HTMX распознает и применяется на странице для лучшего UX & SEO.

Скриншоты

рендерированный пост

Бэкэнд -пост редактор

Метаданы редактора

Бэкэнд -категория редактирование

здание

Все команды сборки запускаются с использованием BUN.

• bun install будет снижать все необходимые зависимости.
• bun edit запускает сервер бэкэнд для управления базами данных Wysiwyg.
• bun run init создает структуру папки dist и перемещает файлы на место для рендерированного сайта.
• bun htmx запустит TypeScript, чтобы фактически генерировать HTML -активы сайта.
• bun css запускает сценарии PostCSS для создания и оптимизации стиля сайта с помощью TailWindScss.
• bun start Runs init, HTMX и CSS.

данные

Содержание сайта генерируется из базы данных SQLite 4 таблицы, содержащей: сообщения, категории, теги и таблицу реляционных метаданных, которая их коррелирует. Логика базы данных существует в: SRC/Models.

шаблоны

Шаблоны HTML/усы живут в: SRC/Views

Основная таблица стилей здесь: src/ui/theme.css. Я знаю, что использую Tailwind "неправильно", уходите здесь.

домены

Есть 2 файла, которые определяют используемые глобальные домены. Один для редактора бэкэнд, другой - сам блог. Они по умолчанию //localhost для HTTP Swarkback Support.

Бэкэнд редактор

Доступ к веб -редактору Wysiwyg можно получить с помощью bun edit . Редактор поддерживает добавление, редактирование и удаление сообщений и их метаданные, а также сами категории и теги. Порт по умолчанию и имя хоста (Localhost: 8999) можно изменить в: src/server.ts.

веб -сервер

Примеры NGINX доступны в каталоге NGINX. Единственная реальная «магия» добавляет к корневому каталогу о существовании заголовка HX-Request в примере, доступном для сайтов.

статус

v1.0 этого проекта завершен! Теперь он питает мой блог по адресу https://blog.xe.ro

Тодо и идеи

• Альтернативы nginx (например, Caddy)
  • nginx Hx-header "root rewrite" против встроенного HX-Get to Slug URL
• Idk, может быть, фактическое ведение блога? • ͡ ㇁ • ͡

фон

(Я думал о том, чтобы назвать этот проект Tnthumbs b/c, он построен с помощью: TypeScript nginx tailwindcss htmx unix mustache bun sqlite)

ссылки

• 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

лицензия

Все файлы в этом репо, включая контент моего блога, выпущены CC0 / Kopimi! В духе свободы информации я призываю вас раскошелиться, изменять, менять, делиться или делать все, что вам нравится с этим проектом! ^c^v