Как устроен этот Quartz-сайт Smirnoff

Этот сайт — не чистый Obsidian-vault, который просто выложили в интернет. Он устроен как публичная витрина и рабочая карта проекта одновременно: здесь есть главная, контакты, проектные статьи, юридические документы, библиотека и набор кастомных интерфейсных компонентов.

Markdown остаётся основным форматом для статей, поэтому материалы удобно писать как заметки. Но ключевые страницы собраны не только из Markdown: часть данных лежит в JSON, а поведение вынесено в Preact-компоненты и inline-скрипты. За счёт этого сайт не превращается в набор разрозненных страниц: он ведёт читателя от общего смысла к конкретным проектам и точкам контакта.

Назначение сайта

У сайта несколько задач одновременно. Это не только место, куда складываются заметки, и не только страница «об услугах». Сайт должен объяснять, чем занимается автор, показывать ход работы над проектами и при этом оставаться удобным для чтения:

• показывать услуги и подход к разработке;
• хранить проектные материалы и технические заметки;
• давать понятную навигацию по разделам;
• принимать заявки через форму и callback-механику;
• публиковать юридические документы;
• показывать книжную полку, связанную с BOOK-LIBRARY;
• оставаться статическим сайтом, который можно деплоить на GitHub Pages.

Из-за этого Quartz здесь используется шире, чем обычный «digital garden». Он отвечает и за текстовую часть, и за интерфейсные сценарии: читатель видит понятный сайт, а автор сохраняет привычный способ писать и обновлять материалы.

Структура content

content — источник страниц сайта и самая понятная часть всей системы. Если смотреть на проект глазами автора, это рабочее пространство для статей, заметок и разделов. Если смотреть глазами читателя, именно из этой структуры рождаются страницы, карточки, теги и маршруты. Внутри лежат обычные Markdown-файлы и разделы:

• главная страница index.md;
• страница библиотеки library.md;
• проектные материалы в Проекты;
• серия про Obsidian и Quartz в Проекты/Obsidian;
• материалы про BOOK-LIBRARY в Проекты/book-library;
• юридические документы;
• изображения и вложения, которые используются в статьях.

Quartz читает это дерево, строит slug-и, ссылки, папки, теги, RSS и sitemap. Поэтому структура content одновременно влияет и на Obsidian-удобство, и на навигацию сайта. Это решает простую проблему: материалы можно вести как базу знаний, но публиковать их так, чтобы человек снаружи не заблудился в папках.

Роль quartz.config.ts

quartz.config.ts отвечает за то, каким будет сайт при сборке. Это слой общих правил: как называются страницы, какие ссылки считаются внутренними, какие плагины участвуют в сборке и каким будет визуальный язык сайта. В текущем проекте там заданы:

• название Smirnoff;
• baseUrl: "slavx.ru";
• SPA-навигация;
• popovers для внутренних ссылок;
• Plausible Analytics;
• шрифты Inter и IBM Plex Mono;
• light/dark палитры;
• Markdown-трансформеры;
• emitters для content pages, folder pages, tag pages, RSS, sitemap, static assets и custom OG.

Отдельно важны FolderPage и TagPage с usePreviewList: true. Благодаря этому папки и теги показываются карточками, а не сухими списками. Для читателя это маленькая, но заметная разница: раздел выглядит как подборка материалов, а не как технический индекс файлов.

Роль quartz.layout.ts

quartz.layout.ts отвечает за то, что стоит вокруг контента: левая колонка, правая колонка, общие компоненты и исключения для особых страниц. Если quartz.config.ts задаёт правила сборки, то layout определяет, как читатель будет двигаться по сайту и какие подсказки увидит рядом с текстом.

В общих компонентах подключены:

• геометрический фон;
• карусель услуг;
• FeedbackForm;
• HomeCallback;
• CookieConsent;
• Footer.

Для обычных статей layout добавляет breadcrumbs, title и meta. Слева находится Avatar, мобильный toolbar и CardMenu. Справа — поиск, dark mode, reader mode, граф, TOC и Backlinks.

Это важная особенность Quartz: Markdown-файл отвечает за текст, а layout задаёт контекст вокруг него. Поэтому статья не висит в пустоте: рядом есть навигация, поиск, граф связей, оглавление и обратные ссылки.

Главная как data-driven лендинг

Главная страница index не рендерится как обычная статья. В layout для неё есть ConditionalRender, который вставляет LandingContainer с блоками из quartz/static/data/home.json.

Состав блоков управляется массивом порядка:

• hero;
• focus;
• services;
• works;
• FAQ;
• contact.

Так главная остаётся управляемой данными. Можно менять тексты, карточки, CTA и порядок блоков без превращения content/index.md в огромный HTML-шаблон. Это важно для лендинга: ему нужна выразительная подача, но его всё равно должно быть легко поддерживать.

На главной также есть отдельный граф и scroll sequence. Это уже не типовая страница Quartz, а полноценный лендинг поверх Quartz-движка: она встречает нового посетителя, объясняет направление сайта и мягко ведёт к проектам или контакту.

Контакты как data-driven страница

Страница Кoнтакты устроена похожим образом. Она берёт данные из quartz/static/data/contacts.json и собирается из специальных компонентов:

• hero;
• каналы связи;
• workflow;
• форматы старта;
• FAQ;
• CTA.

Это удобно для страницы, где важна структура и интерактивные блоки. Markdown здесь был бы слишком плоским, а JSON + компоненты дают нормальную управляемость: можно отдельно настраивать смысловые блоки, не смешивая текст, данные и интерфейсную логику в одной простыне.

Проектные разделы

Проектные статьи остаются ближе к классическому Quartz. Они лежат в content/Проекты, получают title, description, tags, preview image и участвуют в графе связей. В отличие от главной, здесь важна не эффектная подача, а понятный рассказ: что делалось, как устроено решение и с чем оно связано.

Для таких материалов важны:

• аккуратный frontmatter;
• внутренние ссылки через wiki-links;
• короткие descriptions для карточек;
• preview_image, чтобы папки и теги выглядели нормально;
• понятная структура папок.

Так сайт работает как база знаний, но не теряет вид обычного публичного сайта. Автор может накапливать технический контекст, а читатель получает не внутренний архив, а аккуратно оформленные проектные страницы.

Юридические документы

Юридические документы лежат в content и публикуются как обычные страницы. Они важны не сами по себе, а в связке с формами и CTA. Если сайт собирает заявку, email, телефон или согласие, рядом должны быть корректные тексты про обработку данных.

Поэтому legal-страницы — часть архитектуры сайта, а не формальность в конце меню. Они поддерживают доверие к интерактивным сценариям: человек понимает, что происходит с данными, которые он оставляет через форму.

Кастомные компоненты

В проекте есть несколько компонентов, которые сильно меняют ощущение от Quartz:

• Avatar — визуальная точка входа в левом сайдбаре;
• CardMenu — основная навигация вместо Explorer;
• Search, Darkmode, ReaderMode — базовые переключатели;
• Graph — граф связей без показа тегов;
• PagePreviewList — карточки на страницах папок и тегов;
• FeedbackForm — форма заявки через JSON-конфиг;
• HomeCallback — callback-механика для лендингов;
• LibraryPage — витрина книжной полки.

Часть компонентов рендерит HTML сразу, часть работает как ресурсный placeholder и оживает через inline-скрипт после загрузки страницы. Именно эти компоненты делают Quartz менее похожим на стандартную тему: у сайта появляется собственный ритм, навигация и точки действия.

Библиотека

content/library.md выглядит почти пустым, но это нормально. В этой странице Markdown нужен скорее как точка входа, а основную работу делает layout: для slug library он вставляет LibraryPage, который берёт настройки из bookshelf.json.

Библиотека показывает категории и книги из BOOK-LIBRARY: сначала пытается работать с live API, а при проблемах может использовать static catalog из quartz/static/generated. Обложки могут быть зеркалированы в generated-папку.

Quartz здесь — витрина. Источник истины по книгам остаётся в BOOK-LIBRARY. Такой разнос ролей полезен: сайт показывает библиотеку читателю, но не пытается заменить собой систему, где эти данные живут и обновляются.

Итог

Этот Quartz-сайт устроен как смесь Markdown-базы и компонентного сайта. Обычные статьи живут в content, внешний вид и поведение задаются через quartz.config.ts и quartz.layout.ts, а сложные страницы собираются из JSON и компонентов.

Главная мысль такая: Quartz здесь используется не ради эффекта «ещё один сайт из заметок», а как способ связать личную базу материалов, публичные проектные страницы и лендинговые сценарии в одну систему. Такой подход оставляет сайт статическим, но не ограничивает его форматом «страница заметки и список ссылок».