Глава 4. Подключение VitePress

Мне хотелось не просто написать программу для перевода иероглифов, но также написать интресную и полезную историю и про иероглифы и про технологии. Убить, так сказать, сразу двух зайцев. Даже трех - еще и научиться понимать женскую логику египетские иероглифы (небольшой спойлер - этот заяц выжил).

При этом, мне не хотелось писать статью - во-первых, есть слишком большое кол-во мелких деталей, которые в статье будут лишние. Хотелось вести нечто-то вроде блога, описывать для себя и для безмерно благодарных потомков весь непростой процесс создания этого приложения. Во-вторых, статья обычно бывает посвящена одной линии - в ней сложно будет уместить вместе и иероглифы и web-технологии, а вот в блоге - запросто.

И раз уж имеется желание вести одновременно и блог и разработку, то стоит это делать в одном репозитории. А опубликовать можно будет на github.pages. И хотя там есть свой встроенный генератор статических сайтов jekyll, но мне не хотелось добавлять в проект Ruby, я решил выбрать что-нибудь более тайпскриптовое, а именно VitePress.

Не будем добавлять VitePress как отдельный проект Nx, просто заведем папку docs, добавим зависимости и запустим инициализую -

$ npm i -D vitepress
$ npx vitepress init

Еще осталась небольшая проблема - VitePress создает директорию .vitepress/cash и складывает туда свои файлы, в том числе package.json, а это ломает сборку Nx. Поэтому стоит добавить директорию docs в .nxignore.

Ну вот, я могу вести разработку и блог одновременно -

$ npx nx dev docs

Автогенерация сайдбара

Для автоматической генерации оглавления и переходов вперед-назад добавил плагин vitepress-sidebar

$ npm i -D vitepress-sidebar

и прописал настройки в файле .vitepress/config.mts.

Деплой на github pages

Процесс деплоя детально описан на официальном сайте. Правда есть еще пара тонкостей

• во-первых, задать бранч в настройках приложения - https://github.com/[name]/[project]/settings/pages
• во-вторых, нужно прописать базовый путь