Initial commit

Author: Ivan227-hub

.editorconfig

@@ -0,0 +1,11 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = false
+
+[*.{json,md,yaml}]
+indent_size = 2

.github/workflows/deploy.yml

@@ -0,0 +1,23 @@
+name: Build and deploy to GitHub Pages
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v2.3.1
+
+      - name: Install and build 🔧
+        run: |
+          npm install
+          npm run build
+
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@4.1.0
+        with:
+          branch: gh-pages
+          folder: dist

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.prettierrc.json

@@ -0,0 +1,10 @@
+{
+  "printWidth": 80,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "proseWrap": "always"
+}

README.md

@@ -0,0 +1,113 @@
+# Vanilla App Template
+
+Цей проект було створено за допомогою Vite. Для знайомства та налаштування
+додаткових можливостей [звернись до документації](https://vitejs.dev/).
+
+## Створення репозиторію за шаблоном
+
+Використовуй цей репозиторій організації GoIT як шаблон для створення
+репозиторію свого проекту. Для цього натисни на кнопку `«Use this template»` і
+обери опцію `«Create a new repository»`, як показано на зображенні.
+
+![Creating repo from a template step 1](./assets/template-step-1.png)
+
+На наступному етапі відкриється сторінка створення нового репозиторію. Заповни
+поле його імені, переконайся, що репозиторій публічний, після чого натисни
+кнопку `«Create repository from template»`.
+
+![Creating repo from a template step 2](./assets/template-step-2.png)
+
+Після того, як репозиторій буде створено, необхідно перейти в налаштування
+створеного репозиторію на вкладку `Settings` > `Actions` > `General` як показано
+на зображенні.
+
+![Settings GitHub Actions permissions step 1](./assets/gh-actions-perm-1.png)
+
+Проскроливши сторінку до самого кінця, в секції `«Workflow permissions»` обери
+опцію `«Read and write permissions»` і постав галочку в чекбоксі. Це необхідно
+для автоматизації процесу деплою проекту.
+
+![Settings GitHub Actions permissions step 2](./assets/gh-actions-perm-2.png)
+
+Тепер у тебе є особистий репозиторій проекту, зі структурою файлів та папок
+репозиторію-шаблону. Далі працюй з ним, як з будь-яким іншим особистим
+репозиторієм, клонуй його собі на комп'ютер, пиши код, роби коміти та відправляй
+їх на GitHub.
+
+## Підготовка до роботи
+
+1. Переконайся, що на комп'ютері встановлено LTS-версію Node.js.
+   [Скачай та встанови](https://nodejs.org/en/) її якщо необхідно.
+2. Встанови базові залежності проекту в терміналі командою `npm install`.
+3. Запусти режим розробки, виконавши в терміналі команду `npm run dev`.
+4. Перейдіть у браузері за адресою
+   [http://localhost:5173](http://localhost:5173). Ця сторінка буде автоматично
+   перезавантажуватись після збереження змін у файли проекту.
+
+## Файли і папки
+
+- Файли розмітки компонентів сторінки повинні лежати в папці `src/partials` та
+  імпортуватись до файлу `index.html`. Наприклад, файл з розміткою хедера
+  `header.html` створюємо у папці `partials` та імпортуємо в `index.html`.
+- Файли стилів повинні лежати в папці `src/css` та імпортуватись до HTML-файлів
+  сторінок. Наприклад, для `index.html` файл стилів називається `index.css`.
+- Зображення додавай до папки `src/img`. Збирач оптимізує їх, але тільки при
+  деплої продакшн версії проекту. Все це відбувається у хмарі, щоб не
+  навантажувати твій комп'ютер, тому що на слабких компʼютерах це може зайняти
+  багато часу.
+
+## Деплой
+
+Продакшн версія проекту буде автоматично збиратися та деплоїтись на GitHub
+Pages, у гілку `gh-pages`, щоразу, коли оновлюється гілка `main`. Наприклад,
+після прямого пуша або прийнятого пул-реквесту. Для цього необхідно у файлі
+`package.json` змінити значення прапора `--base=/<REPO>/`, для команди `build`,
+замінивши `<REPO>` на назву свого репозиторію, та відправити зміни на GitHub.
+
+```json
+"build": "vite build --base=/<REPO>/",
+```
+
+Далі необхідно зайти в налаштування GitHub-репозиторію (`Settings` > `Pages`) та
+виставити роздачу продакшн версії файлів з папки `/root` гілки `gh-pages`, якщо
+це не було зроблено автоматично.
+
+![GitHub Pages settings](./assets/repo-settings.png)
+
+### Статус деплою
+
+Статус деплою крайнього коміту відображається іконкою біля його ідентифікатора.
+
+- **Жовтий колір** - виконується збірка та деплой проекту.
+- **Зелений колір** - деплой завершився успішно.
+- **Червоний колір** - під час лінтингу, збірки чи деплою сталася помилка.
+
+Більш детальну інформацію про статус можна переглянути натиснувши на іконку, і в
+вікні, що випадає, перейти за посиланням `Details`.
+
+![Deployment status](./assets/deploy-status.png)
+
+### Жива сторінка
+
+Через якийсь час, зазвичай кілька хвилин, живу сторінку можна буде подивитися за
+адресою, вказаною на вкладці `Settings` > `Pages` в налаштуваннях репозиторію.
+Наприклад, ось посилання на живу версію для цього репозиторію
+
+[https://goitacademy.github.io/vanilla-app-template/](https://goitacademy.github.io/vanilla-app-template/).
+
+Якщо відкриється порожня сторінка, переконайся, що у вкладці `Console` немає
+помилок пов'язаних з неправильними шляхами до CSS та JS файлів проекту
+(**404**). Швидше за все у тебе неправильне значення прапора `--base` для
+команди `build` у файлі `package.json`.
+
+## Як це працює
+
+![How it works](./assets/how-it-works.png)
+
+1. Після кожного пуша у гілку `main` GitHub-репозиторію, запускається
+   спеціальний скрипт (GitHub Action) із файлу `.github/workflows/deploy.yml`.
+2. Усі файли репозиторію копіюються на сервер, де проект ініціалізується та
+   проходить лінтинг та збірку перед деплоєм.
+3. Якщо всі кроки пройшли успішно, зібрана продакшн версія файлів проекту
+   відправляється у гілку `gh-pages`. В іншому випадку, у лозі виконання скрипта
+   буде вказано в чому проблема.

README.pl.md

@@ -0,0 +1,111 @@
+# Vanilla App Template
+
+Ten projekt został zbudowany przy użyciu Vite. Aby zapoznać się i skonfigurować
+dodatkowe funkcje [zapoznaj się z dokumentacją](https://vitejs.dev/).
+
+## Tworzenie repozytorium za pomocą szablonu
+
+Użyj tego repozytorium GoIT jako szablonu, aby utworzyć repozytorium
+dla swojego projektu. By to zrobić, kliknij przycisk `«Use this template»` і
+wybierz opcję `«Create a new repository»`, jak pokazano na obrazku.
+
+![Creating repo from a template step 1](./assets/template-step-1.png)
+
+Na kolejnym etapie otworzy się strona tworzenia nowego repozytorium. Wypełnij
+pole nazwy, upewnij się, że repozytorium jest publiczne, a następnie kliknij
+przycisk `«Create repository from template»`.
+
+![Creating repo from a template step 2](./assets/template-step-2.png)
+
+Po utworzeniu repozytorium należy przejść do ustawień
+utworzonego repozytorium w zakładce `Settings` > `Actions` > `General`,
+jak pokazano na obrazku.
+
+![Settings GitHub Actions permissions step 1](./assets/gh-actions-perm-1.png)
+
+Przewiń do samego końca strony, w sekcji `«Workflow permissions»` wybierz
+opcję `«Read and write permissions»` i zaznacz pole wyboru. Jest to konieczne,
+aby zautomatyzować proces wdrażania projektu.
+
+![Settings GitHub Actions permissions step 2](./assets/gh-actions-perm-2.png)
+
+Teraz masz osobiste repozytorium projektu ze strukturą plików i folderów
+repozytorium wzorcowego. Pracuj z nim tak, jak z każdym innym osobistym
+repozytorium: klonuj je na swój komputer, pisz kod, dokonuj zatwierdzeń i
+przesyłaj je do GitHub.
+
+## Przygotowanie do pracy
+
+1. Upewnij się, że na komputerze zainstalowana jest wersja LTS Node.js.
+   [W razie potrzeby pobierz ją i zainstaluj](https://nodejs.org/en/).
+2. Zainstaluj podstawowe zależności projektu w terminalu za pomocą polecenia `npm install`.
+3. Uruchom tryb deweloperski, uruchamiając polecenie `npm run dev`.
+4. Wejdź na stronę [http://localhost:5173](http://localhost:5173) w przeglądarce. Strona
+   ta zostanie automatycznie przeładowana po zapisaniu zmian w plikach projektu.
+
+## Pliki i foldery
+
+- Pliki znaczników dla komponentów strony powinny być umieszczone w folderze `src/partials` i
+  zaimportowane do pliku `index.html`. Na przykład, plik ze znacznikami nagłówka
+  `header.html` należy utworzyć w folderze `partials` i zaimportować do `index.html`.
+- Pliki stylów powinny być umieszczone w folderze `src/css` i zaimportowane do plików HTML
+  stron. Na przykład, dla `index.html` plik stylów nazywa się `index.css`.
+- Obrazy należy dodawać do folderu `src/img`. Konstruktor zoptymalizuje je, ale dopiero po 
+  wdrożeniu produkcyjnej wersji projektu. Wszystko to dzieje się w chmurze, aby nie
+  obciążać Twojego komputera, ponieważ na słabych komputerach może to zająć dużo czasu.
+
+## Wdrożenie
+
+Wersja produkcyjna projektu zostanie automatycznie zbudowana i wdrożona na GitHub
+Pages, w gałęzi `gh-pages`, za każdym razem, gdy gałąź `main` zostanie zaktualizowana.
+Na przykład po bezpośrednim przesłaniu lub zaakceptowaniu pull request. Aby to zrobić, 
+należy w pliku `package.json` zmienić wartość flagi `--base=/<REPO>/`, dla polecenia `build`,
+zastępując `<REPO>` nazwą repozytorium i wysłać zmiany do GitHub.
+
+```json
+"build": "vite build --base=/<REPO>/",
+```
+
+Następnie należy przejść do ustawień repozytorium GitHub (`Settings` > `Pages`) i
+i ustawić dystrybucję wersji produkcyjnej plików z folderu `/root` gałęzi `gh-pages`,
+jeśli nie zostało to zrobione automatycznie.
+
+![GitHub Pages settings](./assets/repo-settings.png)
+
+### Status wdrożenia
+
+Status wdrożenia ostatniego zatwierdzenia jest wyświetlany za pomocą ikony obok jego identyfikatora.
+
+- **Żółty** - projekt jest budowany i wdrażany.
+- **Zielony** - wdrożenie zakończyło się pomyślnie.
+- **Czerwony** - wystąpił błąd podczas lintingu, budowania lub wdrażania.
+
+Bardziej szczegółowe informacje na temat statusu można wyświetlić, klikając ikonę, 
+a następnie link `Details` znajdujący się w rozwijanym oknie.
+
+![Deployment status](./assets/deploy-status.png)
+
+### Strona na żywo
+
+Po pewnym czasie, zwykle kilku minutach, strona na żywo może być wyświetlona
+pod adresem określonym w zakładce `Settings` > `Pages` w ustawieniach repozytorium. 
+Na przykład, oto link do wersji live dla tego repozytorium:
+
+[https://goitacademy.github.io/vanilla-app-template/](https://goitacademy.github.io/vanilla-app-template/).
+
+Jeśli widzisz pustą stronę, upewnij się, że w zakładce `Console` nie ma
+błędów związanych z nieprawidłowymi ścieżkami do plików CSS i JS projektu
+(**404**). Najprawdopodobniej masz nieprawidłową wartość flagi `--base`
+dla polecenia `build` w pliku `package.json`.
+
+## Jak to działa
+
+![How it works](./assets/how-it-works.png)
+
+1. Po każdym wysłaniu do gałęzi `main` repozytorium GitHub, uruchamiany jest
+   specjalny skrypt (GitHub Action) z pliku `.github/workflows/deploy.yml`.
+2. Wszystkie pliki repozytorium są kopiowane na serwer, gdzie projekt jest
+   inicjalizowany, przechodzi linting i budowanie przed wdrożeniem.
+3. Jeśli wszystkie kroki zakończą się powodzeniem, zmontowana wersja produkcyjna
+   plików projektu zostanie wysłana do gałęzi `gh-pages`. W przeciwnym razie
+   w logu wykonania skryptu pojawi się informacja o problemie.