Skip to main content

Docusaurus (MD)

Використовуємо для створення документації розробника і користувача.

Необхідні знання для написання документації​

  1. Gitflow для оновлення репозиторія з/до Gitlab
  2. Markdown мова
  3. Docusaurus гайд
  4. Кастомні компоненти Strapi Docs

Gitflow​

Встановлення​

  1. Клонувати репозиторій git clone -b dev http://git.softpro.ua/docs/dev.git
  2. Перейти в папку з проєктом cd /dev/
  3. Встановити yarn npm i yarn -g
  4. Встановити необхідні залежності yarn

Запуск/Розробка документації​

  1. Перейти в папку з проєктом cd /dev/
  2. Оновити проєкт до останньої версії git pull
  3. Запустити проєкт yarn dev
  4. Відкрити локальний сайт http://localhost:8080/

Публікація змін​

  1. Завершити локальний запуск проєкту ctrl + c + ctrl + c
  2. Зробити коміт з відповідним повідомленням через інтерфейc VSCode
  3. Запушити зміни на сервер

Структура папок/файлів в Docusaurus​

Докладний гайд можна прочитати на офіційному сайті Docusaurus

- docs
    - dev                   # - документація розробника
        - файл/папка
        - файл/папка
        - ...
    - guide                 # - документація користувача
        - файл/папка
        - файл/папка
        - ...

Кастомні компоненти Strapi Docs​

VueExample​

Вставка Vue

// вставка з фалу src/example/:file
<VueExample class='py-2' uuid='d13' title="VstButton" file='button.js'/> 

// вставка напряму
<VueExample class='py-2' uuid='d13' title="VstButton">
  { '<VsButton className="my-2" type="primary">test111</VsButton>' }
</VueExample>

// вставка напряму multi
<VueExample class='py-2' uuid='d13' title="VstButton">
  {`
      <VsButton className="my-2" type="primary">test11</VsButton>
      <VsButton className="my-2" type="primary">test22</VsButton>
      <VsButton className="my-2" type="primary">test33</VsButton>  
  `}
</VueExample>
<ThemedImage
  alt="Альтернативний текст"
  sources={{
    light: './img/light.png',
    dark: './img/dark.png',
  }}
/>

ThemedImage​

Вставка зображення, яке повинно адаптуватись під конкретну тему. Для світлої теми необхідно вказувати ключ light, для темної - dark

<ThemedImage
  alt="Альтернативний текст"
  sources={{
    light: './img/light.png',
    dark: './img/dark.png',
  }}
/>

TODO - описати інші кастомні компоненти​