diff --git a/README.md b/README.md index aae7282..b4d1131 100644 --- a/README.md +++ b/README.md @@ -1,112 +1 @@ -# React homework template - -Цей проект був створений за допомогою -[Create React App](https://github.com/facebook/create-react-app). Для знайомства -і налаштування додаткових можливостей -[звернися до документації](https://facebook.github.io/create-react-app/docs/getting-started). - -## Створення репозиторію за шаблоном - -Використовуй цей репозиторій організації 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 start`. -4. Перейди в браузері за адресою [http://localhost:3000](http://localhost:3000). - Ця сторінка буде автоматично перезавантажуватися після збереження змін у файлах проєкту. - -## Деплой - -Продакшн версія проєкту буде автоматично проходити лінтинг, збиратися і -деплоїтися на GitHub Pages, у гілку `gh-pages`, щоразу, коли оновлюється -гілка `main`. Наприклад, після прямого пушу або прийнятого пул-реквесту. Для цього -необхідно у файлі `package.json` відредагувати поле `homepage`, замінивши -`your_username` і `your_repo_name` на свої, і відправити зміни на GitHub. - -```json -"homepage": "https://your_username.github.io/your_repo_name/" -``` - -Далі необхідно зайти в налаштування GitHub-репозиторію (`Settings` > `Pages`) і -виставити роздачу продакшн-версії файлів із папки `/root` гілки `gh-pages`, якщо -це не було зроблено автоматично. - -![GitHub Pages settings](./assets/repo-settings.png) - -### Статус деплоя - -Статус деплою крайнього коміту відображається іконкою біля його ідентифікатора. - -- **Жовтий колір** - виконується збірка і деплой проєкту. -- **Зелений колір** - деплой завершився успішно. -- **Червоний колір** - під час лінтингу, сборки або деплою сталася помилка. - -Детальнішу інформацію про статус можна подивитися, клікнувши на іконку, і -у вікні, що випадає, перейти за посиланням `Details`. - -![Deployment status](./assets/deploy-status.png) - -### Жива сторінка - -Через якийсь час, зазвичай кілька хвилин, живу сторінку можна буде подивитися -за адресою, вказаною у відредагованій властивості `homepage`. Наприклад, ось -посилання на живу версію для цього репозиторію -[https://goitacademy.github.io/react-homework-template](https://goitacademy.github.io/react-homework-template). - -Якщо відкривається порожня сторінка, переконайся, що у вкладці `Console` немає помилок -пов'язаних із неправильними шляхами до CSS і JS файлів проєкту (**404**). Швидше -за все у тебе неправильне значення властивості `homepage` у файлі `package.json`. - -### Маршрутизація - -Якщо додаток використовує бібліотеку `react-router-dom` для маршрутизації, -необхідно додатково налаштувати компонент ``, передавши у пропе -`basename` точну назву твого репозиторію. Слеш на початку рядка обов'язковий. - -```jsx - - - -``` - -## Як це працює - -![How it works](./assets/how-it-works.png) - -1. Після кожного пушу в гілку `main` GitHub-репозиторія, запускається спеціальний - скрипт (GitHub Action) з файла `.github/workflows/deploy.yml`. -2. Усі файли репозиторію копіюються на сервер, де проект ініціалізується і - проходить лінтинг і збірку перед деплоєм. -3. Якщо всі кроки пройшли успішно, зібрана продакшн-версія файлів проєкту - відправляється в гілку `gh-pages`. В іншому випадку, в лозі виконання - скрипта буде вказано в чому проблема. +# goit-react-hw-01 \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index a1d4f24..8088ff5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { - "name": "react-homework-template", + "name": "goit-react-hw-1", "version": "0.1.0", "lockfileVersion": 2, "requires": true, "packages": { "": { - "name": "react-homework-template", + "name": "goit-react-hw-1", "version": "0.1.0", "dependencies": { "@testing-library/jest-dom": "^5.16.3", diff --git a/package.json b/package.json index 18768d5..0f90bcb 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { - "name": "react-homework-template", + "name": "goit-react-hw-1", "version": "0.1.0", "private": true, - "homepage": "https://goitacademy.github.io/react-homework-template/", + "homepage": "https://ciehgiordani.github.io/goit-react-hw-1/", "dependencies": { "@testing-library/jest-dom": "^5.16.3", "@testing-library/react": "^12.1.4", diff --git a/src/components/App.jsx b/src/components/App.jsx index ce3f3bf..8dd4ccd 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -1,16 +1,31 @@ +// FIRST NEED TO IMPORT THE CREATED COMPONENTS +import { Profile } from './Profile/Profile'; +import user from '../data/user.json'; //IT IS THE DOWNLOADED JSON FORM THE TASK + +import { Statistics } from './Statistics/Statistics'; +import data from '../data/data.json'; //IT IS THE DOWNLOADED JSON FORM THE TASK + +import { FriendList } from './FriendList/FriendList'; +import friends from '../data/friends.json'; //IT IS THE DOWNLOADED JSON FORM THE TASK + +import { TransactionHistory } from './TransactionHistory/TransactionHistory'; +import transactions from '../data/transactions.json'; //IT IS THE DOWNLOADED JSON FORM THE TASK + export const App = () => { - return ( -
- React homework template -
+ return ( +//<> is Short Syntax for React Fragment instead of using parent element like div + <> + + + + + + ); -}; +}; \ No newline at end of file diff --git a/src/components/FriendList/FriendList.jsx b/src/components/FriendList/FriendList.jsx new file mode 100644 index 0000000..385b736 --- /dev/null +++ b/src/components/FriendList/FriendList.jsx @@ -0,0 +1,26 @@ +import PropTypes from 'prop-types'; +import { FriendListItem } from 'components/FriendListItem/FriendListItem'; +import css from './FriendList.module.css'; + +export const FriendList = ({ friends }) => { + return ( +
    + {friends.map(({ avatar, name, isOnline, id }) => ( + + ))} +
+ ); +}; + +FriendList.propTypes = { + friends: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.number.isRequired, + }) + ).isRequired, +}; \ No newline at end of file diff --git a/src/components/FriendList/FriendList.module.css b/src/components/FriendList/FriendList.module.css new file mode 100644 index 0000000..306c099 --- /dev/null +++ b/src/components/FriendList/FriendList.module.css @@ -0,0 +1,6 @@ +.friendList { + margin: 50px auto; + width: 300px; + list-style-type: none; + border-radius: 5px; +} \ No newline at end of file diff --git a/src/components/FriendListItem/FriendListItem.jsx b/src/components/FriendListItem/FriendListItem.jsx new file mode 100644 index 0000000..521e0e4 --- /dev/null +++ b/src/components/FriendListItem/FriendListItem.jsx @@ -0,0 +1,26 @@ +import css from './FriendListItem.module.css'; +import PropTypes from 'prop-types'; + +export const FriendListItem = ({ avatar, name, isOnline }) => { + + // Generate Random Color + const generateRandomColor = () => { + return `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor( + Math.random() * 256 + )}, ${Math.floor(Math.random() * 256)})`; + }; + + return ( +
  • + + User avatar +

    {name}

    +
    • + ); +}; + +FriendListItem.propTypes = { + avatar: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + isOnline: PropTypes.bool.isRequired, +}; \ No newline at end of file diff --git a/src/components/FriendListItem/FriendListItem.module.css b/src/components/FriendListItem/FriendListItem.module.css new file mode 100644 index 0000000..4a01fae --- /dev/null +++ b/src/components/FriendListItem/FriendListItem.module.css @@ -0,0 +1,40 @@ +.friendListItem { + padding: 10px 15px; + margin-bottom: 15px; + display: flex; + align-items: center; + gap: 15px; + /* height: 60px; */ + border-radius: 5px; + background: white; + box-shadow: 0px 2px 1px 0px rgba(46, 47, 66, 0.08), + 0px 1px 1px 0px rgba(46, 47, 66, 0.16), + 0px 1px 6px 0px rgba(46, 47, 66, 0.08); +} + +.avatar{ + border-radius: 3px; + border: 1px solid rgba(0, 0, 0, 0.2); +} +.name { + font-size: 22px; + line-height: 1.62; + font-weight: 500; + color: black; +} +.status { + width: 20px; + height: 20px; + border-radius: 50%; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} + +.online { + composes: status; + background-color: green; +} + +.offline { + composes: status; + background-color: red; +} \ No newline at end of file diff --git a/src/components/Profile/Profile.jsx b/src/components/Profile/Profile.jsx new file mode 100644 index 0000000..1c89caa --- /dev/null +++ b/src/components/Profile/Profile.jsx @@ -0,0 +1,42 @@ +import PropTypes from 'prop-types'; +import css from './Profile.module.css'; + +export const Profile = ({ username, tag, location, avatar, stats }) => { + return ( +
    +
    + User avatar +

    {username}

    +

    @{tag}

    +

    {location}

    +
    + +
      +
    • + Followers + {stats.followers} +
      • +
    • + Views + {stats.views} +
      • +
    • + Likes + {stats.likes} +
      • +
    +
    + ); +}; + +Profile.propTypes = { + username: PropTypes.string.isRequired, + tag: PropTypes.string.isRequired, + location: PropTypes.string.isRequired, + avatar: PropTypes.string.isRequired, + stats: PropTypes.shape({ + followers: PropTypes.number.isRequired, + views: PropTypes.number.isRequired, + likes: PropTypes.number.isRequired, + }).isRequired, +}; \ No newline at end of file diff --git a/src/components/Profile/Profile.module.css b/src/components/Profile/Profile.module.css new file mode 100644 index 0000000..5afb5dc --- /dev/null +++ b/src/components/Profile/Profile.module.css @@ -0,0 +1,80 @@ +.profile{ + margin: 50px auto; + padding-top: 40px; + width: 300px; + background-color: #fcfcfc; + border-radius: 5px; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} + +.description { + display: flex; + flex-direction: column; + align-items: center; + width: 300px; + padding-bottom: 30px; +} + +.avatar { + display: block; + width: 100px; + border-radius: 50%; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} + +.name { + font-size: 22px; + line-height: 1.62; + font-weight: 700; + color: black; + margin-top: 20px; +} + +.userInfo { + margin-top: 10px; + font-size: 16px; + line-height: 1.58; + font-weight: 600; + color: rgba(78, 76, 76, 0.856); +} + +.stats { + background-color: rgb(240, 240, 240); + width: 300px; + display: flex; + margin: 0 auto; + padding: 0; + padding-bottom: 20px; + align-items: center; + justify-content: center; + border-radius: 0px 0px 5px 5px; +} + +.item { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + padding: 5px; + border-top: 1px solid rgb(196, 196, 196); + border-right: 1px solid rgb(196, 196, 196); +} + +.item:last-child { + border-right: none; +} + +.label { + display: flex; + color: rgb(121, 120, 120); + font-weight: 16px; + text-align: center; + padding-top: 10px; +} + +.quantity { + text-align: center; + color: rgb(59, 59, 59); + line-height: 1.58; + font-weight: bold; +} \ No newline at end of file diff --git a/src/components/Statistics/Statistics.jsx b/src/components/Statistics/Statistics.jsx new file mode 100644 index 0000000..1eb1cbb --- /dev/null +++ b/src/components/Statistics/Statistics.jsx @@ -0,0 +1,41 @@ +import PropTypes from 'prop-types'; +import css from './Statistics.module.css'; + +export const Statistics = ({ title, stats }) => { + // Generate Random Color + const generateRandomColor = () => { + return `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor( + Math.random() * 256 + )}, ${Math.floor(Math.random() * 256)})`; + }; + + return ( +
    + {title &&

    {title}

    } + +
      + {stats.map(stat => ( +
    • + {stat.label} + {stat.percentage}% +
      • + ))} +
    +
    + ); +}; + +Statistics.propTypes = { + title: PropTypes.string, + stats: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.string.isRequired, + label: PropTypes.string.isRequired, + percentage: PropTypes.number.isRequired, + }) + ).isRequired, +}; \ No newline at end of file diff --git a/src/components/Statistics/Statistics.module.css b/src/components/Statistics/Statistics.module.css new file mode 100644 index 0000000..9eabf8e --- /dev/null +++ b/src/components/Statistics/Statistics.module.css @@ -0,0 +1,54 @@ +.statistics { + width: 300px; + margin: 0 auto; + margin-top: 50px; + background-color: #fcfcfc; + border-radius: 5px; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} + +.title { + text-transform: uppercase; + text-align: center; + color: #192431; + padding-top: 30px; + padding-bottom: 30px; + +} + +.statList { + display: flex; + justify-content: center; + margin: 0 auto; + padding: 0; + +} + +.item { + display: flex; + flex-direction: column; + color: white; + row-gap: 10px; + text-align: center; + padding: 10px 0 10px 0; + width: 60px; +} + +.item:first-child { + border-radius: 0px 0px 0px 5px; +} + +.item:last-child { + border-radius: 0px 0px 5px 0px; +} +.label { + font-size: 15px; + padding: 0 auto; + line-height: 1.62; + font-weight: 200; +} + +.percentage { + font-size: 20px; + padding: 0 auto; +} \ No newline at end of file diff --git a/src/components/TransactionHistory/TransactionHistory.jsx b/src/components/TransactionHistory/TransactionHistory.jsx new file mode 100644 index 0000000..8e6cd88 --- /dev/null +++ b/src/components/TransactionHistory/TransactionHistory.jsx @@ -0,0 +1,37 @@ +import PropTypes from 'prop-types'; +import css from './TransactionHistory.module.css'; + +export const TransactionHistory = ({ items }) => { + return ( + + + + + + + + + + + {items.map(({ id, type, amount, currency }) => ( + + + + + + ))} + +
    TypeAmountCurrency
    {type}{amount}{currency}
    + ); +}; + +TransactionHistory.propTypes = { + items: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.string.isRequired, + type: PropTypes.string.isRequired, + amount: PropTypes.string.isRequired, + currency: PropTypes.string.isRequired, + }) + ).isRequired, +}; \ No newline at end of file diff --git a/src/components/TransactionHistory/TransactionHistory.module.css b/src/components/TransactionHistory/TransactionHistory.module.css new file mode 100644 index 0000000..ddb6edf --- /dev/null +++ b/src/components/TransactionHistory/TransactionHistory.module.css @@ -0,0 +1,47 @@ +.transactionHistory { + border-collapse: collapse; + table-layout: auto; + width: 600px; + margin: 50px auto; + padding: 5px; + background-color: #fcfcfc; + border-radius: 5px; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} + +.tableHeader { + padding: 8px; + text-align: center; + text-transform: uppercase; + background-color: #4bd8ee; + color: rgb(255, 255, 255); +} +.tableHeader:first-child { + border-radius: 5px 0px 0px 0px; +} +.tableHeader:last-child { + border-radius: 0px 5px 0px 0px; +} + +.tableData { + padding: 8px; + text-align: center; + color: rgba(78, 76, 76, 0.856); + border-bottom: 1px solid #ddd; +} + +.tableData:first-of-type { + text-transform: capitalize; +} + +.tableRow:nth-of-type(even) { + background-color: #dfdfdf; +} +.tableRow:last-child .tableData:first-child { + border: none; + border-radius: 0px 0px 0px 5px; +} +.tableRow:last-child .tableData:last-child { + border: none; + border-radius: 0px 0px 5px 0px; +} diff --git a/src/data/data.json b/src/data/data.json new file mode 100644 index 0000000..0b37d4b --- /dev/null +++ b/src/data/data.json @@ -0,0 +1,7 @@ +[ + { "id": "id-1", "label": ".docx", "percentage": 22 }, + { "id": "id-2", "label": ".pdf", "percentage": 4 }, + { "id": "id-3", "label": ".mp3", "percentage": 17 }, + { "id": "id-4", "label": ".psd", "percentage": 47 }, + { "id": "id-5", "label": ".pdf", "percentage": 10 } +] diff --git a/src/data/friends.json b/src/data/friends.json new file mode 100644 index 0000000..7082a76 --- /dev/null +++ b/src/data/friends.json @@ -0,0 +1,32 @@ +[ + { + "avatar": "https://cdn-icons-png.flaticon.com/512/1998/1998592.png", + "name": "Mango", + "isOnline": true, + "id": 1812 + }, + { + "avatar": "https://cdn-icons-png.flaticon.com/512/616/616438.png", + "name": "Kiwi", + "isOnline": false, + "id": 1137 + }, + { + "avatar": "https://cdn-icons-png.flaticon.com/512/1623/1623681.png", + "name": "Ajax", + "isOnline": true, + "id": 1213 + }, + { + "avatar": "https://cdn-icons-png.flaticon.com/512/2977/2977285.png", + "name": "Jay", + "isOnline": true, + "id": 1714 + }, + { + "avatar": "https://cdn-icons-png.flaticon.com/512/1998/1998749.png", + "name": "Poly", + "isOnline": false, + "id": 1284 + } +] diff --git a/src/data/transactions.json b/src/data/transactions.json new file mode 100644 index 0000000..2d2a0df --- /dev/null +++ b/src/data/transactions.json @@ -0,0 +1,122 @@ +[ + { + "id": "1e0700a2-5183-4291-85cc-2065a036a683", + "type": "invoice", + "amount": "964.82", + "currency": "LRD" + }, + { + "id": "a30f821b-4d25-4ff0-abdd-e340b3f0dd2b", + "type": "payment", + "amount": "686.50", + "currency": "WST" + }, + { + "id": "44dca67a-8e5a-4798-bf8e-b15efd4e1abd", + "type": "invoice", + "amount": "828.62", + "currency": "UGX" + }, + { + "id": "ea8ed3dc-2b68-4a53-905a-53ecb0adef33", + "type": "withdrawal", + "amount": "527.80", + "currency": "ALL" + }, + { + "id": "ea76146a-0b00-4b80-bc02-a8c822176712", + "type": "withdrawal", + "amount": "371.43", + "currency": "MUR" + }, + { + "id": "63ca02f9-d637-46b5-9237-f3b24425e029", + "type": "payment", + "amount": "862.44", + "currency": "AUD" + }, + { + "id": "ed0263e8-59a5-4bf1-87e0-2bb88e53dc34", + "type": "withdrawal", + "amount": "907.00", + "currency": "GEL" + }, + { + "id": "6013bad0-750c-4691-8bc2-d8f2b43969c4", + "type": "withdrawal", + "amount": "352.52", + "currency": "UGX" + }, + { + "id": "252c7be4-8b06-4fa7-8d42-61fb835b70d5", + "type": "payment", + "amount": "388.98", + "currency": "TOP" + }, + { + "id": "4eaab41b-b967-40ac-82ed-85fc66f646f1", + "type": "deposit", + "amount": "103.10", + "currency": "BWP" + }, + { + "id": "9648a350-8469-42d5-8bf3-18090de5fe67", + "type": "withdrawal", + "amount": "322.32", + "currency": "MRO" + }, + { + "id": "9c5c25fb-1a95-4b2f-8d1f-4c4426d677cc", + "type": "invoice", + "amount": "14.79", + "currency": "PYG" + }, + { + "id": "43ef232c-80e9-4d6f-b48a-b22405620de3", + "type": "payment", + "amount": "904.86", + "currency": "CHF" + }, + { + "id": "5161682e-e620-4019-ab0a-24ceb10fbd20", + "type": "withdrawal", + "amount": "307.08", + "currency": "NOK" + }, + { + "id": "7b119d71-42e6-4c42-a141-6818b07bb9ff", + "type": "invoice", + "amount": "275.07", + "currency": "AWG" + }, + { + "id": "a4f65722-65c4-4c28-b1f4-b8ed988bb205", + "type": "deposit", + "amount": "213.10", + "currency": "STD" + }, + { + "id": "c6e5784b-0ca3-48d6-86e5-b5128af5a523", + "type": "invoice", + "amount": "116.11", + "currency": "CUP CUC" + }, + { + "id": "c9ebed6a-3a02-4b49-ac0d-0534b51f2bfd", + "type": "invoice", + "amount": "878.67", + "currency": "HKD" + }, + { + "id": "a4a98b0e-b22c-438b-9f83-de2df52110c8", + "type": "invoice", + "amount": "725.03", + "currency": "UYU UYI" + }, + { + "id": "b39bfa7a-0166-4c47-94d6-87d20590f746", + "type": "payment", + "amount": "405.45", + "currency": "MDL" + } +] diff --git a/src/data/user.json b/src/data/user.json new file mode 100644 index 0000000..44503fb --- /dev/null +++ b/src/data/user.json @@ -0,0 +1,11 @@ +{ + "username": "Franci Giordani", + "tag": "ciehgiordani", + "location": "Cavite, Philippines", + "avatar": "https://cdn-icons-png.flaticon.com/512/2922/2922506.png", + "stats": { + "followers": 5603, + "views": 4827, + "likes": 1308 + } +} diff --git a/src/index.css b/src/index.css index 1aac5f6..fc0b7d6 100644 --- a/src/index.css +++ b/src/index.css @@ -7,9 +7,39 @@ body { sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + background-color: rgba(155, 153, 153, 0.499); + /* display: flex; + justify-content: center; */ + /* align-items: center; */ + /* text-align: center; */ } code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } +/* START OF RESET CSS */ +h1, +h2, +h3, +h4, +h5, +h6, +p { + margin: 0; +} + +ul, +ol { + margin: 0; + padding: 0; + list-style: none; +} + +img { + display: block; + max-width: 100%; + height: auto; +} + +/* END OF RESET CSS */ \ No newline at end of file diff --git a/workflows/deploy.yml b/workflows/deploy.yml new file mode 100644 index 0000000..bd12c6e --- /dev/null +++ b/workflows/deploy.yml @@ -0,0 +1,24 @@ +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, lint, build 🔧 + run: | + npm install + npm run lint:js + npm run build + + - name: Deploy 🚀 + uses: JamesIves/github-pages-deploy-action@4.1.0 + with: + branch: gh-pages + folder: build