Поправил статью, добавил видео

.github/workflows/main.yml

@@ -0,0 +1,45 @@
+name: Deploy extra
+
+on:
+  push:
+    branches:
+      - main
+
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Deploying
+        uses: appleboy/ssh-action@master
+        with:
+          host: ${{ secrets.HOST }}
+          username: ${{ secrets.USERNAME }}
+          key: ${{ secrets.KEY }}
+          script: |
+            # Copy and build new version of Extra
+
+            export NVM_DIR=/home/${{ secrets.USERNAME }}/.nvm
+            source /home/${{ secrets.USERNAME }}/.nvm/nvm.sh
+            cp -r extra-content extra-content-new
+            cd extra-content-new
+            git checkout main
+            git fetch --all
+            git reset --hard origin/main
+            npm install
+            npm run build
+
+            # Replace current version of Extra with the new one
+
+            cd ..
+            mv extra-content extra-content-old
+            mv extra-content-new extra-content
+            # Restart server
+            cd extra-content
+            pm2 delete Extra
+            pm2 start "npm run start" --name Extra
+            rm -rf ../extra-content-old

README.md

@@ -4,9 +4,9 @@
 
 Проект открыт для наставников и код-ревьюэров. Мы будем рады, если вы принесёте статью, поможете с разработкой сайта, или просто предложите идею, куда двигаться дальше.
 
-Сейчас сайт деплоим сюда (скоро будет красивый домен):
+Сейчас сайт деплоим сюда из main:
 
-https://graceful-mochi-984f47.netlify.app/
+https://extra.students-projects.ru/
 
 ## Стек и запуск
 
@@ -28,7 +28,7 @@ npm i && npm run dev
 
 В репозитории есть папка `/content`, в ней подпапки:
 
-- `/general` — для статей на общую тематику, чвязанную с технологиями
+- `/general` — для статей на общую тематику, связанную с технологиями
 - `/html` — для статей про HTML
 - `/css` — для статей про CSS
 - `/js` — для статей про JavaScript
@@ -106,6 +106,17 @@ prop2: propvalue
 
 `::` — закрывающий тег компонента
 
+## Как принести Pull Request
+
+Ваши права к репозиторию — triage. Это значит, что перед созданием PR, вам нужно сделать fork репозитория, вносить изменения внутри ветки своего fork'а, а затем открывать PR в upstream, в ветку main.
+
+Пишите коммиты на русском языке. В формате ответа на вопрос «Что делает коммит?».
+
+Пример:
+
+`Добавляет статью про кроссбраузерность`
+
+При формировании PR для открытой issue используйте синтаксис `Closes #${issueId}`
 
 ## Что приносить?
 
@@ -121,4 +132,4 @@ prop2: propvalue
 
 ## Что будет дальше, если я принесу контент или правку?
 
-Мы позовём кого-то из контент команды на помощь вам. Это может быть другой автор, редактор, методист или дизайнер. Они помогут доделать пост. Следите за вашими issue или PR, будут комментарии.
+Мы позовём кого-то из контент команды на помощь вам. Это может быть другой автор, редактор, методист или дизайнер. Они помогут доделать пост. Следите за вашими issue или PR, будут комментарии.

content/tools/gitbash-tools.md

@@ -0,0 +1,112 @@
+---
+title: "Введение в Git Bash"
+---
+
+# Введение в Git Bash
+
+::CCoverImage
+---
+src: /images/tools/gitbash/cover.png
+---
+::
+
+В этой статье мы разберём:
+
+- [ ] что такое Bash
+- [ ] как его установить на Windows
+- [ ] как с его помощью загрузить проект на GitHub
+
+## Что такое Bash
+
+**Bash (Bourne Again SHell)** — это специальная командная строка, которая позволяет управлять компьютером с помощью текстовых команд. Она используется в некоторых операционных системах, например, Linux и macOS.
+
+### Почему важно изучить Bash
+
+Изучение Bash важно, потому что множество веб-серверов, на которых работают веб-сайты, используют операционные системы, похожие на Linux и macOS. Это значит, что для управления веб-серверами разработчику надо знать команды Bash. Поэтому знание команд Bash поможет вам лучше понимать, как работают серверы и как взаимодействовать с ними.
+
+### Git Bash
+
+Вы могли раньше встречаться с загрузкой кода на GitHub через графические интерфейсы: Github Desktop, сам сайт github.com или встроенные плагины для редактора кода. Но Git был изначально создан как консольная программа, где пользователь вводит команды в терминал, и они выполняются. Этот подход, хоть и может показаться сложным на первый взгляд, на самом деле предоставляет более гибкий и мощный способ управления компьютером.
+
+## Как установить Git Bash на Windows за четыре шага
+
+1. Перейди на [официальный сайт Git](https://git-scm.com/downloads).
+2. Скачай установочный файл для Windows.
+::CCoverImage
+---
+src: /images/tools/gitbash/1.png
+---
+:: 
+3. Запусти установку и следуй инструкциям мастера установки.
+::CVideo
+---
+url: /video/tools/gitbash/1.mov
+poster: /video/tools/gitbash/1.png
+---
+:: 
+4. После установки открой Git Bash из меню Пуск или щёлкни правой кнопкой мыши на папке в проводнике и выбери «Git Bash Here».
+::CCoverImage
+---
+src: /images/tools/gitbash/2.png
+---
+::
+
+### Как загрузить проект на Git с помощью Git Bash
+
+Чтобы загрузить проект на свой Git-репозиторий через Git Bash, выполни следующие шаги:
+
+1. Открой Git Bash и перейди в папку с твоим проектом с помощью команды
+
+```bash
+cd
+```
+
+2. Инициализируй новый Git-репозиторий с помощью команды
+
+```bash
+git init
+```
+
+3. Добавь все файлы проекта в индекс с помощью команды
+
+```bash
+git add .
+```
+
+4. Сделай коммит с твоими изменениями с помощью команды
+
+```bash
+git commit -m "Initial commit"
+```
+
+5. Создай новый удалённый репозиторий на GitHub или GitLab.
+   Свяжи локальный репозиторий с удалённым с помощью команды
+
+```bash
+git remote add origin <URL_удаленного_репозитория>
+```
+
+6. Загрузи изменения на удалённый репозиторий с помощью команды
+
+```bash
+git push -u origin master
+```
+
+Ниже скринкаст о том, как выгрузить проект на гитхаб.
+
+::CVideo
+---
+url: /video/tools/gitbash/2.mov
+poster: /video/tools/gitbash/2.png
+---
+::
+
+### Заключение
+
+В данной статье мы разобрали:
+
+- [x] что такое Bash
+- [x] как его установить на Windows
+- [x] как с его помощью загрузить проект на GitHub
+
+Изучение Bash и использование Git Bash помогут тебе эффективно управлять проектами. Знание командной строки и умение работать с Git открывают новые возможности и делают процесс разработки более удобным и эффективным.

error.vue

@@ -1,6 +1,7 @@
 <template>
-  <main class="error-main">
-    ошибка
+  <main class="error-main article">
+    <h1>Ошибка 🙀</h1>
+    <p>Переходи на <a href="/">главную страницу</a>, чтобы искать статьи</p>
   </main>
 </template>
 
@@ -25,5 +26,162 @@ useHead({
 </script>
 
 <style>
+*, *::before, *::after {
+    box-sizing: border-box;
+  }
+
+  a {
+    color: inherit;
+    transition: opacity 0.2s ease-in-out;
+  }
+
+  a:hover {
+    opacity: 0.8;
+  }
+
+  body {
+    font-family: 'Anonymous Pro', monospace;
+    min-width: 375px;
+    font-size: 20px;
+    line-height: 1.5;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    min-height: 100dvb;
+    background-color: #008793;
+    background-size: cover;
+    background-attachment: fixed;
+    background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  .article {
+    background-color: #fff;
+    padding: 2em;
+    border-radius: 40px;
+    width: 100%;
+    margin: 80px auto;
+    max-width: 1560px;
+  }
+
+
+  h1, h2, h3, h4, h5, h6 {
+    font-family: 'Rubic One', monospace;
+    font-weight: 400;
+    margin: 1em 0;
+    text-transform: uppercase;
+    text-wrap: balance;
+    hyphens: auto;
+    -webkit-hyphens: auto;
+  }
+
+  h1 {
+    margin-top: 0.5em;
+    font-size: 4em;
+  }
+
+  h2 {
+    font-size: 3em;
+  }
+
+  h3 {
+    font-size: 2em;
+  }
+
+  .callout {
+    background-color: #f0f0f0;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    margin: 1em 0;
+    padding: 1em;
+  }
+
+  pre:has(code) {
+    background-color: #1e1e1e;
+    padding: 10px;
+    border-radius: 0.2em;
+    overflow-x: auto;
+  }
+
+  code {
+    font-family: 'Anonymous Pro', monospace;
+    background-color: #1e1e1e;
+    border-radius: 0.2em !important;
+    color: #9ECBFF;
+    padding: 0.2em 0.3em !important;
+  }
+
+  pre {
+    white-space: normal !important;
+  }
+
+  @media (width <= 1100px) {
+    body {
+      font-size: 22px;
+    }
+    .article {
+      width: 90%;
+    }
+    h1 {
+      font-size: 3em;
+    }
+
+    h2 {
+      font-size: 2em;
+    }
+
+    h3 {
+      font-size: 1.5em;
+    }
+  }
+
+  @media (max-width: 768px) {
+    body {
+      font-size: 20px;
+    }
+    .article {
+      width: 90%;
+      margin: 40px auto;
+    }
+
+    h1 {
+      font-size: 3em;
+    }
+
+    h2 {
+      font-size: 2em;
+    }
+
+    h3 {
+      font-size: 1.5em;
+    }
+  }
+
+  @media (width <= 700px) {
+    body {
+      font-size: 16px;
+    }
+    .article {
+      width: 95%;
+      margin: 20px auto;
+    }
+
+    h1 {
+      font-size: 2em;
+    }
+
+    h2 {
+      font-size: 1.5em;
+    }
+
+    h3 {
+      font-size: 1.2em;
+    }
+  }
 
 </style>

nuxt.config.ts

@@ -45,6 +45,7 @@ export default defineNuxtConfig({
     }
   },
   image: {
+    quality: 80,
     format: ['avif', 'webp', 'png', 'jpg'],
     screens: {
       'xs': 320,