css modifications; blog-setup base structure

blog/blog-setup/index.md

@@ -8,23 +8,219 @@ keywords: [docker, linux]
 date: 2023-12-15
 ---
 
-Описание для предварительного просмотра на главной странице
+Сегодня с расскажу как установить этот блог к себе на сайт
 
 [![logo](./logo.png)](/blog/blog-setup)
 <!--truncate-->
 
-### Введение
+## Введение
 
-Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/).
+[Зачем это вообще надо и кому нужен блог]
 
-:::tip
 
-Use the power of React to create interactive blog posts.
+## Настройка сайта
+- <p style={{fontSize: '12px', margin: "0"}}>Если сайт уже есть, то пеерходите сразу к <a href="#установка-блога">установке блога</a></p>
 
-```js
+### Покупка домена
-<button onClick={() => alert('button clicked!')}>Click me!</button>
+
+[Идём на регистратор и покупаем]
+
+### Настройка DNS
+
+[Находим бесплатный DNS сервер и писхаем туда ip]
+
+### Настройка WEB сервера
+
+[Тут будет как настроить nginx на выдачу index.html + certbot]
+
+## Установка блога
+
+
+### Качаем
+
+[тут гит клон]
+
+### Общая структура
+
+Вот так сейчас выглядит структура файлов блога:
+```plain
+...
+| -- blog
+|   | -- _template
+|   |   | -- index.md
+|   |   | -- logo-template.psd
+|   |   ` -- logo.png
+|   ` -- blog-setup
+|       | -- index.md
+|       ` -- logo.png
+| -- docs
+|   | -- _template
+|   |   | -- _category_.json
+|   |   | -- doc1.md
+|   |   ` -- doc2.md
+|   ` -- intro.md
+...
 ```
 
-<button onClick={() => alert('button clicked!')}>Click me!</button>
+[Тут надо рассказать про основные файлы]
+
+### Cтруктура блогов
+
+[Несколько слов про то, или инное, рассмотрим на примере blog._template]
+
+[Стандартная структура 1 блога]
+```plain
+| -- blog
+|   ` -- _template
+|       | -- index.md
+|       ` -- logo.png
+```
+
+##### Заголовок у блога
+```md
+---
+slug: template
+title: title
+description: Описание
+image: ./logo.png
+tags: [docker, linux, networks]
+keywords: [docker, linux]
+date: 2023-11-29
+---
+
+Описание для предварительного просмотра на главной странице
+
+[![logo](./logo.png)](/blog/_template)
+<!--truncate-->
+```
+
+`slug` - [Это..]\
+`title` - [Это..]\
+`description` - [Это..]\
+`image` - [Это..]\
+`keywords` - [Это..]\
+`date` - [Это...]\
+\
+`<!--truncate-->` - [Это...]
+
+
+### Структура доков
+
+[Несколько слов про то, или инное, рассмотрим на примере docs._template]
+
+
+[Стандартная структура 1 дока]
+```plain
+| -- docs
+|   | -- _template
+|   |   | -- _category_.json
+|   |   | -- doc1.md
+|   |   ` -- doc2.md
+|   ` -- intro.md
+```
+
+[_category_.json Обязателен, рассказать что в нём]
+
+Содержимое \<theme>/_category_.json
+```json
+{
+  "label": "Template",
+  "position": 1,
+  "link": {
+    "type": "generated-index",
+    "description": "Template description"
+  }
+}
+```
+
+`label` - [Это..]\
+`position` - [Это..]\
+`link` - [Это..]\
+`link.type` - [Это..]\
+`link.description` - []
+
+##### Заголовок у доков
+[У каждого файла должен быть заголовок... Зачем? Почему?]
+
+Заголовок doc1.md
+```md
+---
+sidebar_position: 1
+title: Template title 1
+---
+
+Template text
+```
+
+в doc2.md соответсвенно будет
+```md
+---
+sidebar_position: 2
+title: Template title 2
+---
+
+Template text
+```
+
+`sidebar_position` - [Это..]\
+`title` - [Это...]
+
+### Настройка стилей
+
+Стили лежать по пути `/src/css/custom.css`
+
+Я преднастроил их, и выглядят они сейчас вот так:
+
+```css
+/* src/css/custom.css */
+
+:root {
+  --footer-padding: 0.5em;
+}
+[data-theme='light'] {
+  --ifm-color-primary: #7c538bfd;
+  --ifm-color-primary-dark: #21af90;
+  --ifm-color-primary-darker: #1fa588;
+  --ifm-color-primary-darkest: #1a8870;
+  --ifm-color-primary-light: #424242;
+  --ifm-color-primary-lighter: #32d8b4;
+  --ifm-color-primary-lightest: #4fddbf;
+  --footer-background-color: #ececec;
+  --footer-color: #000;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+}
+[data-theme='dark'] {
+  --ifm-color-primary: #c4c0c5fd;
+  --ifm-color-primary-dark: #21af90;
+  --ifm-color-primary-darker: #1fa588;
+  --ifm-color-primary-darkest: #1a8870;
+  --ifm-color-primary-light: #29d5b0;
+  --ifm-color-primary-lighter: #32d8b4;
+  --ifm-color-primary-lightest: #4fddbf;
+  --footer-background-color: #242526;
+  --footer-color: #ebedf0;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+}
+.footer {
+  --ifm-footer-background-color: var(--footer-background-color);
+  --ifm-footer-color: var(--footer-color);
+  padding: var(--footer-padding) 
+}
+.header-github-link:hover {
+  opacity: 0.6;
+}
+.header-github-link::before {
+  content: '';
+  width: 24px;
+  height: 24px;
+  display: flex;
+  background: url("/img/github.svg") 0 center / 25px 25px no-repeat;
+}
+h2 {
+  --ifm-heading-vertical-rhythm-bottom: 0;
+}
+p a {
+  text-decoration: underline dotted;
+}
+```
 
-:::

docs/_template/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Template",
-  "position": 6,
+  "position": 1,
   "link": {
     "type": "generated-index",
     "description": "Template description"

docs/_template/commands.md

@@ -1,7 +0,0 @@
----
-sidebar_position: 2
-title: Ansible commands
----
-
-
-Тут частые команды

docs/_template/doc1.md

@@ -0,0 +1,6 @@
+---
+sidebar_position: 1
+title: Template title 1
+---
+
+Template text

docs/_template/doc2.md

@@ -0,0 +1,6 @@
+---
+sidebar_position: 2
+title: Template title 2
+---
+
+Template text

docs/nginx/_category_.json

@@ -1,8 +0,0 @@
-{
-  "label": "Nginx",
-  "position": 1,
-  "link": {
-    "type": "generated-index",
-    "description": "Nginx commands and docs"
-  }
-}

docs/nginx/commands.md

@@ -1,7 +0,0 @@
----
-sidebar_position: 2
-title: Nginx commands
----
-
-
-Тут частые команды

docusaurus.config.js

@@ -100,11 +100,12 @@ const config = {
       // },
       prism: {
         additionalLanguages: ['bash', 'diff', 'json'],
-        // darkTheme: darkCodeTheme,
+        darkTheme: darkTheme,
+        lightTheme: lightTheme
       },
       colorMode: {
         defaultMode: 'dark',
-        disableSwitch: true,
+        disableSwitch: false,
         respectPrefersColorScheme: false,
       },
     }),

src/css/custom.css

@@ -18,42 +18,42 @@
 } */
 
 :root {
-  --ifm-color-primary: #efefeffd;
+  --footer-padding: 0.5em;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
+[data-theme='light'] {
+  --ifm-color-primary: #7c538bfd;
+  --ifm-color-primary-dark: #21af90;
+  --ifm-color-primary-darker: #1fa588;
+  --ifm-color-primary-darkest: #1a8870;
+  --ifm-color-primary-light: #424242;
+  --ifm-color-primary-lighter: #32d8b4;
+  --ifm-color-primary-lightest: #4fddbf;
+  --footer-background-color: #ececec;
+  --footer-color: #000;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+}
+
 [data-theme='dark'] {
-  --ifm-color-primary: #efefeffd;
+  --ifm-color-primary: #c4c0c5fd;
   --ifm-color-primary-dark: #21af90;
   --ifm-color-primary-darker: #1fa588;
   --ifm-color-primary-darkest: #1a8870;
   --ifm-color-primary-light: #29d5b0;
   --ifm-color-primary-lighter: #32d8b4;
   --ifm-color-primary-lightest: #4fddbf;
+  --footer-background-color: #242526;
+  --footer-color: #ebedf0;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 
 .footer {
-  --ifm-footer-background-color: #242526;
+  --ifm-footer-background-color: var(--footer-background-color);
-  --ifm-footer-color: var(--ifm-footer-link-color);
+  --ifm-footer-color: var(--footer-color);
-  --ifm-footer-link-color: var(--ifm-color-secondary);
+  padding: var(--footer-padding) 
-  --ifm-footer-title-color: var(--ifm-color-white);
 }
 
-/* h2 {
-  font-family: "Inter", sans-serif;
-  font-weight: 700;
-  font-size: 1em;
-  font-weight: bold;
-} */
-
 .header-github-link:hover {
   opacity: 0.6;
 }
@@ -66,6 +66,9 @@
   background: url("/img/github.svg") 0 center / 25px 25px no-repeat;
 }
 
-html[data-theme="dark"] .DocSearch-Hit[aria-selected="true"] a {
+p a {
-  background-color: #000;
+  --ifm-heading-vertical-rhythm-bottom: 0;
+  text-decoration: underline dotted;
+  font-size: '10px';
+  margin: "0"
 }

static/files/tree-generator.py

@@ -0,0 +1,18 @@
+import os
+
+def print_tree(dir_path, prefix=''):
+    items = os.listdir(dir_path)
+    items.sort(key=lambda x: (os.path.isfile(os.path.join(dir_path, x)), x))
+
+    for index, item in enumerate(items):
+        full_path = os.path.join(dir_path, item)
+        is_last = index == len(items) - 1
+
+        if os.path.isdir(full_path):
+            print(f"{prefix}{'` -- ' if is_last else '| -- '}{item}")
+            print_tree(full_path, prefix + ('    ' if is_last else '|   '))
+        else:
+            print(f"{prefix}{'` -- ' if is_last else '| -- '}{item}")
+
+
+print_tree('.')