Колофон
Модное дизайнерское словечко, означающее «как был создан этот сайт». Я продумала его сама и создала с помощью Claude-агента. Пожалуй, я слишком перемудрила с ним для личного блога, но мне понравилось возиться с вебом.
Технологии и подход
Астро берёт на себя бо́льшую часть работы. Это конструктор для статических сайтов с большим объёмом контента.
Для создания и оформления интерфейса я использую обычный HTML, CSS и немного JavaScript. Тексты живут в MDX-файлах — это улучшенная версия Markdown, которая упрощает создание и повторное использование пользовательских компонентов и интерактивных JavaScript-элементов.
Как я пишу контент
Моя система управления контентом — это просто набор обычных файлов и папок. Пост — это текстовый файл, который я правлю в VS Code. Так у меня появляется полный контроль над типографикой, вёрсткой и каждым кусочком разметки. Захочу — добавлю буквицу, захочу — сноску на полях.
Типографика
Три гарнитуры: Playfair Display — крупные заголовки, Vollkorn — основной читаемый текст, Manrope — интерфейс, мета и теги.
Размеры и цвета заданы токенами в :root, поэтому тёмная тема и
единый ритм — это всего пара переменных, а не правка сотни мест.
Стадии готовности
У каждого поста на этом сайте есть стадия развития. Она показывает, насколько он завершён и полон.
- Чешуйка только проклюнулась, тонкая
- Обрастает бронёй набирает плотность и детали
- Крепкая броня дозрело — можно опереться
Самодельные элементы
В постах живут спецэлементы, которые оформляются автоматически. Вот несколько примеров:
Крупная первая буква, с которой красиво стартует текст поста — маленький ритуал входа в чтение.
Комментарий выносится в сторону1 и не разрывает основную мысль. 1 вот так выглядит сама сноска — мелким на полях.
А ещё — разные типы ссылок со всплывающими карточками (как у ссылок выше: адрес, аннотация, цитата из источника или превью своего поста).
Данные и медиа
Лайки постов — глобальные, через Supabase. Фото для дневника хранятся и оптимизируются в Cloudinary, а в репозиторий не попадают.