Что умеет WikiNest

Основной пост был про концепцию. Здесь — конкретно что внутри.

Редактор Сплит-вью — маркдаун слева, рендер справа, обновляется в реальном времени. Над редактором тулбар с 16 кнопками — жирный, курсив, зачёркнутый, три уровня заголовков, блокквот, списки, таск-листы, код, ссылки, картинки, таблицы. Всё с toggle-семантикой — нажал ещё раз, убрал форматирование.

Офлайн-черновики: редактор автосохраняется в localStorage каждые 500мс. Закрыл вкладку, вернулся — черновик на месте, жёлтый баннер предлагает восстановить или выбросить.

Drag-and-drop картинок — перетащил файл в редактор, он загружается в docs/assets/ через API и вставляется как маркдаун-ссылка. Руками ничего не нужно.

История и версии Кнопка «История» в шапке страницы — список последних 20 коммитов, затронувших файл. Кликаешь на любой — видишь рендер той версии. Кнопка «Восстановить» загружает её в редактор, дальше сохраняешь как обычно. Это снова коммит.

Поиск ⌘K открывает поиск. Полнотекстовый — индексирует всё содержимое страниц, не только заголовки. search.json собирается Actions при каждом пуше, загружается лениво при первом открытии поиска. Результаты с бейджем «Full text» если совпадение в теле, а не в заголовке.

Фронтматтер и теги Страница может начинаться с YAML-блока — tags, author, description. Теги рендерятся как кликабельные чипсы под заголовком, клик открывает поиск с этим тегом. Автор показывается в метастроке страницы.

Wiki-ссылки [[Название страницы]] в маркдауне превращается в ссылку на страницу по заголовку или пути. В редакторе после [[ открывается автодополнение — стрелками, Enter, Escape. Битые ссылки рендерятся красным зачёркиванием.

Deploy-статус После сохранения в сайдбаре рядом с файлом появляется индикатор: пульсирующая точка пока Actions работает, зелёная галочка когда задеплоилось, красный крест если упало. Автоматически убирается через 3.5 секунды после успеха.

Остальное Тёмная тема по prefers-color-scheme. Мобилка с гамбургером. i18n — EN и RU из коробки, добавить язык это один JSON-файл. Печать страницы через window.print() с отдельными print-стилями. TOC по заголовкам h2/h3 с плавным скроллом и якорными ссылками.

Всё это в одном HTML-файле без npm.

🌎 https://keegooroomie.github.io/wikinest/

Что умеет WikiNest
Основной пост был про концепцию. Здесь — конкретно что внутри.
Редактор
Сплит-вью — маркдаун слева, рендер справа, обновляется в реальном времени | Сетка — социальная сеть от hh.ru