dmythro.com

Репозиторій сам себе описує як «невиправдано складний проєкт, щоб показати дещо з того, що я роблю» — і це правда, і в цьому вся суть. Персональний сайт — одне з небагатьох місць, де вимоги ваші власні, ніхто не чекає на деплой, і можна з’ясувати, як насправді живеться зі стеком, перш ніж пропонувати його команді.

Це статичний двомовний сайт, який майже не віддає JavaScript, і монорепозиторій, значно більший, ніж сайту потрібно.

Приклади

git clone https://github.com/dmythro/dmythro.com
cd dmythro.com
bun install
bun run dev

Навіщо це

Усе почалося з резюме, яке я не хотів тримати у Word. А лишилося тому, що перетворилося на місце, де я пробую нове.

Кожна частина інфраструктури тут існує тому, що мені було цікаво, як вона поводиться, а не тому, що сайт цього вимагав: переходи між сторінками, соціальні картки на етапі збірки, стилі для друку, з яких виходить завантажуване резюме, колекції контенту з окремого пакета в монорепозиторії. Нічого з цього не потрібно кільком сторінкам про одну людину. І все це навчило мене чогось, що потім знадобилося в реальній роботі.

Правило, якого я тримаюся: сайт усе одно має лишатися швидким. Перемудрити зі збіркою — можна; перемудрити зі сторінкою, яку отримує читач, — ні.

Що всередині

Нуль JavaScript за замовчуванням

Сторінки — статичний HTML. Навігація, розмітка, перемикач теми та фільтри проєктів — це CSS або кілька рядків вбудованого скрипта. Острови на Preact з’являються лише там, де інтерактивність справді потрібна: калькулятор натягу гітарних струн — єдина сторінка, якій дійсно потрібен рантайм.

Двомовність наскрізь

Кожен маршрут має префікс [locale] і генерується і англійською, і українською — разом зі стрічками, структурованими даними та hreflang. Тексти живуть в окремому пакеті @dmythro/locales як типізовані об’єкти та MDX, тож пропущений переклад — це помилка типів, а не англійський рядок, що просочився на українську сторінку.

Соціальні картки на етапі збірки

Кожна сторінка проєкту отримує власне зображення Open Graph, згенероване під час збірки через takumi з HTML-шаблону — без headless-браузера й без сервісу в рантаймі. Шрифти обрізаються до тих гліфів, які реально малюються, — саме тому українські картки показують кирилицю без жодного шрифтового файлу в репозиторії.

Стрічки та машиночитний вивід

RSS для кожної локалі, зібраний із тих самих даних проєктів, що рендерять сторінки, плюс llms.txt і llms-full.txt для тих, хто сайт читає, а не переглядає.

Нотатки про рішення

Найцікавіше тут — монорепозиторій, а не сайт. Контент, константи й переклади живуть в окремих пакетах, які споживає застосунок. Для одного сайту це надмірно — і саме завдяки цьому резюме, PDF-експорт, стрічки та OG-картки читають одні й ті самі дані, без копій, які починають розходитися.

У репозиторії дві версії сайту. Поточна збудована на Astro; попередня, на Next.js, лежить поруч. Одразу після переписування вони віддавали однаковий контент, і це було чесне порівняння фреймворків — обидва гарні кожен по-своєму, і з обома сайт набирав 100% у PageSpeed. Відтоді контент розвивається лише у версії на Astro; застосунок на Next.js лишається як довідка й більше не підтримується.

Друк — це справжня ціль. Завантажуване резюме не є окремим документом, який треба підтримувати: це той самий сайт зі стилями для друку, тож PDF не може застаріти відносно сторінки.

Статика — свідомо. Усе прегенерується і деплоїться на Cloudflare Pages. Статистика з GitHub і npm збирається під час збірки, а не в браузері, тож сторінці не треба ні ходити в мережу, ні оберігати жодного API-ключа.

Статус

Живий — і саме на ньому ви це читаєте. Змінюється щоразу, коли я хочу щось спробувати, і це, власне, єдина його справжня функція.