qubyte codes

Кубитные коды

Этот репозиторий содержит как генератор статического сайта, так и контент для https://qubyte.codes.

Генератор

Генератор в основном содержится в index.js. Большую часть тяжелой работы выполняет специальная система построения и разметки графиков, которая принимает файлы уценки и обрабатывает их в HTML-контент. Однако он не идеален, и потребовались некоторые исправления. Модуль lib/render.js выполняет это исправление и добавляет подсветку синтаксиса и форматирование математических формул.

«serve.js» — это сервер разработки. При изменении файлов части графа сборки перезапускаются для получения обновленных результатов.

Исходные файлы содержатся в каталогах src и content. При сборке создается общедоступный каталог, и некоторые из этих исходных файлов копируются (те, которые не требуют компиляции, например, сервис-воркер). Другие файлы должны быть созданы и помещены в общий каталог по мере их создания.

netlify.toml — это конфигурация для Netlify, на которой размещен мой блог (очень рекомендую). На момент написания этот файл содержит только конфигурацию заголовков. Они оптимизированы с точки зрения безопасности и кэширования CSS в браузере. Первоначально я вел этот блог в дроплете DigitalOcean с использованием NGINX. Конфигурация для этого все еще находится в этом репозитории nginx.conf.

CSS

Я использую postcss для компиляции CSS. В принципе, CSS можно использовать и без него. По большей части postcss используется для объединения и минимизации CSS. Выходной CSS хешируется, и хеш становится частью имени файла CSS. Это делается для блокировки кэша, поскольку CSS дается длительное или неопределенное время кэширования, чтобы избежать блокировки загрузки страницы после ее однократной загрузки.

За исключением подсветки синтаксиса, этот сайт в значительной степени избегает использования классов HTML в качестве крючков для CSS, вместо этого утверждая, что семантическая разметка обеспечивает достаточный контекст для CSS.

Иконки

Блог представляет собой прогрессивное веб-приложение (PWA) и имеет значки различного размера соответственно. Одним из них также является значок.

Сообщения (содержание)

Этот каталог содержит источники уценки опубликованных сообщений. Каждый пост имеет преамбулу в формате JSON, содержащую различные метаданные:

имя	описание
дата и время	Время публикации сообщения. Если это произойдет в будущем, сообщение не будет отображено.
заголовок	Название поста.
описание	Описание поста. Это добавляется в заголовок HTML как мета-описание и мета-описание в Твиттере. Последний используется Twitter для заполнения карточек Twitter.
черновик	Если это правда, сообщение не будет отображаться.
теги	Список тегов. Они отображаются вверху каждой записи, а также используются при публикации в Twitter и mastodon через ссылки внизу каждой публикации.
веб-упоминания	Список веб-упоминаний из других блогов.
сценарии	Список объектов с полем href . Они будут добавлены как скрипты типа модуля в заголовок сообщения.

Шаблоны

Я использую шаблоны рулей для рендеринга контента на страницах. Некоторые из них содержат страницы, а другие являются общими компонентами страниц. Они довольно старой школы, но делают хорошую работу.

Сервисный работник и манифест

Service Worker и манифест — это файлы, которые позволяют этому блогу вести себя как PWA. По большей части это обеспечивает настраиваемое кэширование. Это также позволяет «установить» этот блог на Android (хотя эта функция меня не особо интересует).