add to repo

.editorconfig

@@ -0,0 +1,12 @@
+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 ci
+          npm run build
+
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@4.1.0
+        with:
+          branch: gh-pages
+          folder: dist

.gitignore

@@ -0,0 +1,109 @@
+#Junk
+.DS_Store
+.vscode/
+.idea/
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.parcel-cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port

.htmlnanorc

@@ -0,0 +1,3 @@
+{
+  "minifySvg": false
+}

.parcelrc

@@ -0,0 +1,9 @@
+{
+  "extends": [
+    "@parcel/config-default"
+  ],
+  "reporters": [
+    "...",
+    "parcel-reporter-clean-dist"
+  ]
+}

.posthtmlrc

@@ -0,0 +1,7 @@
+{
+  "plugins": {
+    "posthtml-include": {
+      "root": "./src"
+    }
+  }
+}

.prettierrc

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

.sassrc

@@ -0,0 +1,5 @@
+{
+  "includePaths": [
+    "node_modules"
+  ]
+}

README.md

@@ -0,0 +1,101 @@
+**Read in other languages: [Русский](README.md), [Polski](README.pl.md).**
+
+# Parcel template
+
+Этот проект был создан при помощи Parcel. Для знакомства и настройки
+дополнительных возможностей [обратись к документации](https://parceljs.org/).
+
+## Подготовка нового проекта
+
+1. Убедись что на компьютере установлена LTS-версия Node.js.
+   [Скачай и установи](https://nodejs.org/en/) её если необходимо.
+2. Склонируй этот репозиторий.
+3. Измени имя папки с `parcel-project-template` на имя своего проекта.
+4. Создай новый пустой репозиторий на GitHub.
+5. Открой проект в VSCode, запусти терминал и свяжи проект с GitHub-репозиторием
+   [по инструкции](https://docs.github.com/en/get-started/getting-started-with-git/managing-remote-repositories#changing-a-remote-repositorys-url).
+6. Установи зависимости проекта в терминале командой `npm install` .
+7. Запусти режим разработки, выполнив команду `npm start`.
+8. Перейди в браузере по адресу [http://localhost:1234](http://localhost:1234).
+   Эта страница будет автоматически перезагружаться после сохранения изменений в
+   файлах проекта.
+
+## Файлы и папки
+
+- Все паршалы файлов стилей должны лежать в папке `src/sass` и импортироваться в
+  файлы стилей страниц. Например, для `index.html` файл стилей называется
+  `index.scss`.
+- Изображения добавляй в папку `src/images`. Сборщик оптимизирует их, но только
+  при деплое продакшн версии проекта. Все это происходит в облаке, чтобы не
+  нагружать твой компьютер, так как на слабых машинах это может занять много
+  времени.
+
+## Деплой
+
+Для настройки деплоя проекта необходимо выполнить несколько дополнительных шагов
+по настройке твоего репозитория. Зайди во вкладку `Settings` и в подсекции
+`Actions` выбери выбери пункт `General`.
+
+![GitHub actions settings](./assets/actions-config-step-1.png)
+
+Пролистай страницу до последней секции, в которой убедись что выбраны опции как
+на следующем изображении и нажми `Save`. Без этих настроек у сборки будет
+недостаточно прав для автоматизации процесса деплоя.
+
+![GitHub actions settings](./assets/actions-config-step-2.png)
+
+Продакшн версия проекта будет автоматически собираться и деплоиться на GitHub
+Pages, в ветку `gh-pages`, каждый раз когда обновляется ветка `main`. Например,
+после прямого пуша или принятого пул-реквеста. Для этого необходимо в файле
+`package.json` отредактировать поле `homepage` и скрипт `build`, заменив
+`your_username` и `your_repo_name` на свои, и отправить изменения на GitHub.
+
+```json
+"homepage": "https://your_username.github.io/your_repo_name/",
+"scripts": {
+  "build": "parcel build src/*.html --public-url /your_repo_name/"
+},
+```
+
+Далее необходимо зайти в настройки GitHub-репозитория (`Settings` > `Pages`) и
+выставить раздачу продакшн версии файлов из папки `/root` ветки `gh-pages`, если
+это небыло сделано автоматически.
+
+![GitHub Pages settings](./assets/repo-settings.png)
+
+### Статус деплоя
+
+Статус деплоя крайнего коммита отображается иконкой возле его идентификатора.
+
+- **Желтый цвет** - выполняется сборка и деплой проекта.
+- **Зеленый цвет** - деплой завершился успешно.
+- **Красный цвет** - во время линтинга, сборки или деплоя произошла ошибка.
+
+Более детальную информацию о статусе можно посмотреть кликнув по иконке, и в
+выпадающем окне перейти по ссылке `Details`.
+
+![Deployment status](./assets/status.png)
+
+### Живая страница
+
+Через какое-то время, обычно пару минут, живую страницу можно будет посмотреть
+по адресу указанному в отредактированном свойстве `homepage`. Например, вот
+ссылка на живую версию для этого репозитория
+[https://goitacademy.github.io/parcel-project-template](https://goitacademy.github.io/parcel-project-template).
+
+Если открывается пустая страница, убедись что во вкладке `Console` нет ошибок
+связанных с неправильными путями к CSS и JS файлам проекта (**404**). Скорее
+всего у тебя неправильное значение свойства `homepage` или скрипта `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,74 @@
+**Read in other languages: [Русский](README.md), [Polski](README.pl.md).**
+
+# Parcel template
+
+Ten projekt został stworzony przy pomocy Parcel. W celu zapoznania się i skonfigurowania dodatkowych opcji [zobacz dokumentację](https://parceljs.org/)
+
+## Przygotowanie nowego projektu
+
+1. Upewnij się, że na komputerze zainstalowana jest wersja LTS Node.js. [Ściągnij i zainstaluj](https://nodejs.org/en/), jeśli jest taka potrzeba.
+2. Sklonuj to repozytorium.
+3. Zmień nazwę folderu z `parcel-project-template` na nazwę swojego projektu.
+4. Utwórz nowe, puste repozytorium na GitHub.
+5. Otwórz projekt w VSCode, uruchom terminal i zwiąż projekt z repozytorium GitHub [zgodnie z instrukcją](https://docs.github.com/en/get-started/getting-started-with-git/managing-remote-repositories#changing-a-remote-repositorys-url).
+6. Utwórz zależność projektu w terminalu przez polecenie `npm install` .
+7. Włącz tryb edycji, wykonując polecenie `npm start`.
+8. Przejdź w przeglądarce pod adres [http://localhost:1234](http://localhost:1234). Ta strona będzie się automatycznie odświeżać po dokonaniu zmian w plikach projektu.
+
+## Pliki i foldery
+
+- Wszystkie partiale plików stylów powinny znajdować się w folderze `src/sass` i importować się w pliki stylów stron. Na przykład dla `index.html` plik stylów nazywa się  `index.scss`.
+- Obrazy dodawaj do pliku `src/images`. Moduł zbierający optymalizuje je, ale tylko przy deploymencie wersji produkcyjnej projektu. Wszystko to zachodzi w chmurze, aby nie obciążać twojego komputera, ponieważ na słabszym sprzęcie może to zająć sporo czasu.
+
+## Deployment
+
+Aby skonfigurować deployment projektu należy wykonać kilka dodatkowych kroków konfigurowania twojego repozytorium. Wejdź w zakładkę `Settings` i w podsekcji `Actions` wybierz punkt `General`.
+
+
+![GitHub actions settings](./assets/actions-config-step-1.png)
+
+Przejdź do ostatniej sekcji, w której upewnij się, że wybrane opcje są takie same jak na następnym obrazku i kliknij `Save`. Bez tych ustawień w module zbierającym będzie zbyt mało pozwoleń dla automatyzacji procesu deploymentu.
+
+![GitHub actions settings](./assets/actions-config-step-2.png)
+
+Wersja produkcyjna projektu będzie automatycznie gromadzić się i deployować na GitHub Pages w gałęzi `gh-pages` za każdym razem, gdy aktualizuje się gałąź `main`. Na przykład po bezpośrednim pushu lub przyjętym pull requeście. W tym celu niezbędne jest, aby w pliku `package.json` wyedytować pole `homepage` i skrypt `build`, zamieniając `your_username` i `your_repo_name` na swoje nazwy i wysłać zmiany na GitHub.
+
+```json
+"homepage": "https://your_username.github.io/your_repo_name/",
+"scripts": {
+  "build": "parcel build src/*.html --public-url /your_repo_name/"
+},
+```
+
+Dalej należy wejść w ustawienia repozytorium GitHub (`Settings` > `Pages`) i wystawić dystrybucję wersji produkcyjnej z folderu `/root` gałęzi `gh-pages`, jeśli nie zrobiło się to automatycznie.
+
+![GitHub Pages settings](./assets/repo-settings.png)
+
+### Status deploymentu
+
+Status deploymentu ostatniego commitu wyświetla się na ikonie obok jego identyfikatora.
+
+- ** Żółty kolor** - wykonuje się zbudowanie i deployment projektu.
+- ** Zielony kolor** - deployment zakończył się sukcesem.
+- ** Czerwony kolor** - w czasie lintingu, budowania lub deplymentu pojawił się błąd.
+
+Więcej informacji o statusie można zobaczyć klikając na ikonkę i w wyskakującym oknie przejść do odnośnika `Details`.
+
+![Deployment status](./assets/status.png)
+
+### Działająca strona
+
+Po jakimś czasie, zazwyczaj kilku minut, działającą stronę będzie można zobaczyć pod adresem wskazanym w wyedytowanej właściwości `homepage`. Na przykład tu znajduje się odnośnik do działającej strony dla tego repozytorium
+ [https://goitacademy.github.io/parcel-project-template](https://goitacademy.github.io/parcel-project-template).
+
+
+Jeżeli otwiera się pusta strona, upewnij się, że w zakładce `Console` nie ma błędów związanych z nieprawidłowymi ścieżkami do plików projektu CSS i JS (**404**). Najprawdopodobniej wprowadzona została nieprawidłowa wartość właściwości `homepage` lub skryptu `build` w pliku `package.json`.
+
+## Jak to działa
+
+![How it works](./assets/how-it-works.png)
+
+1. Po każdym pushu w gałęzi `main` repozytorium GitHub, włącza się specjalny skrypt (GitHub Action) z pliku `.github/workflows/deploy.yml`.
+2. Wszystkie pliki repozytorium kopiują się na serwer, gdzie projekt inicjalizuje się i buduje przed deploymentem.
+3. Jeżeli wszystkie kroki zakończyły się sukcesem, zbudowana wersja produkcyjna plików projektu wysyła się w gałąź `gh-pages`. W przeciwnym razie, w logu wykonania skryptu wskazane zostanie, w czym jest problem.
+