Сайт із собою:
HTML без інтернету

Що саме означає «без інтернету»

Kotka.dev починався зі звичайних HTML, CSS і JavaScript. Нам потрібна копія, яку можна розпакувати й показати без запущеного сервера: з тими самими шрифтами, котячими фото, нотатками й перемикачем мови. Зберегти лише HTML замало: під’єднані картинки та скрипти залишилися б окремо.

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

Запакуй залежності, а не лише сторінку

1. Вбудуй стилі й скрипти
   Збирач вставляє наш CSS в елемент style, а кожен звичайний скрипт — у script. Порядок не змінюється: дані нотаток, інтерфейс, блокнот.
2. Вбудуй локальні зображення та шрифти
   Байти картинок стають data URL. Те саме відбувається з адресами шрифтів і фактур у CSS. Перевір також favicon і картинки в data-атрибутах, не лише великий hero.
3. Заміни внутрішні адреси
   Посилання на notes.html має вести до kotka-notes-standalone.html. Шляхи статей усередині JavaScript потребують такого самого перетворення. Параметр мови та якір секції треба зберегти.

Data URL містить тип медіа та закодований вміст: наприклад, data:image/webp;base64,…. Це не запит до віддаленої картинки. Тип має відповідати справжньому файлу, а не оманливій назві в адресі завантаження. MDN: data URL

Маленька функція, яка виявилася важливою

Коли перевіряли обкладинку PPC4 у зібраному HTML, виявили, що її WebP-дані позначені як application/octet-stream. Той браузер усе одно показував зображення, але покладатися на таке розпізнавання було зайвим. Тепер збирач задає типи сучасних зображень явно.

Це справжня функція з tools/build-standalone.py з імпортами, потрібними для окремого запуску. Виклич data_uri(pathlib.Path("assets/img/project-ppc4-hero.webp")), щоб отримати рядок для адреси зображення. Функція вбудовує один файл, а не переписує весь сайт самотужки.

import base64, mimetypes, pathlib

def data_uri(path: pathlib.Path) -> str:
    # Windows MIME registry entries may omit modern image types.
    known_types = {".woff2": "font/woff2", ".webp": "image/webp", ".avif": "image/avif"}
    mime = known_types.get(path.suffix.lower()) or mimetypes.guess_type(path.name)[0] or "application/octet-stream"
    return f"data:{mime};base64,{base64.b64encode(path.read_bytes()).decode()}"

База mimetypes у Python може залежати від операційної системи, зокрема реєстру Windows. Явна таблиця робить ці три типи ресурсів передбачуваними в нашому пакеті. При цьому ми все ще очікуємо, що розширення файлів правильні. Python: mimetypes

У теці проєкту Kotka.dev запусти дві команди нижче. Для збирання потрібен Python 3, для автоматичних перевірок — Node.js. Жодна команда не встановлює сторонніх пакетів. Збирач перезаписує згенеровані HTML та ZIP у dist, тому редагуй вихідні сторінки, а не ці файли.

python tools/build-standalone.py
node tools/check-notebook.cjs

Розпакуй dist/kotka-dev-offline.zip, залиш HTML-файли в одній теці й відкрий kotka-dev-standalone.html. Кожна сторінка містить свої ресурси, але сторінки, на які вона посилається, — окремі файли. Якщо надіслати лише головну, цих переходів не буде.

Перевір саме ту копію, яку передаєш

• Перевір зібраний HTML на залишки локальних шляхів до ресурсів і назв вихідних сторінок. Наші тести також порівнюють вбудовані байти проєктних зображень з оригіналами.
• Відкрий розпаковану головну в потрібному браузері без мережі. Пройди до архіву, статті й назад; перевір, чи не зникли шрифти або картинки.
• Перемкни UA / EN / PL і перейди за посиланням. Офлайн наші посилання містять ?lang= (на сайті мова — частина адреси, як-от /pl/); необов’язковий local storage не має бути єдиним способом зберегти мову.
• Не обіцяй зайвого: англійський текст статей — статичний HTML, а переклад, пошук і перемикання блокнота потребують JavaScript.

Автоматичні перевірки контролюють згенеровані шляхи, вбудовані ресурси та синтаксис скриптів. Перегляд через localhost перевіряє вигляд і взаємодії. Це корисно, але не тотожно відкриттю файла з диска: перевірка файлового режиму в браузері одержувача лишається окремим фінальним кроком.