Въведение

Това хранилище е трета част от пъзела, който ви е нужен, за да сглобите проекта.

Приложението, което е поместено в това хранилище, се базира на Nuxt 3 и отговаря за извличането на информация от Laravel приложението, както и подаването на потребителска информация към него.

---

Хранилища

1. Част първа - Статично съдържание за забележителностите
2. Част втора - Laravel за административен панел и REST API
3. Част трета - Nuxt 3 за публичната част на сайта

Технологии

Тип	Технологии
Server & Building	Vite
Language	TypeScript
Framework	Nuxt 3
Plugins	i18n, Pinia, VueUse, VeeValidate, NuxtAuth, Nuxt Google Tag, Schema.org, Flaticon UIcons
Styles	SASS, PostCSS, Autoprefixer, Browserslist
Linters	ESlint, Prettier, Stylelint
Tests	Vitest
Git Hooks	Husky, lint-staged

Инсталация

За да инсталирате приложението, е нужно да свалите и инсталирате LTS версията на Node.js, която по време на създаването на това хранилище е била 18.16.0. За различните Node.js пакети понякога е нужно да сменим версията на самия Node.js, затова препоръчваме да свалите също Node Version Manager (nvm), за да можете лесно да сменяте версиите му, докато разработвате.

След това свалете Nuxt приложението в папка destinationbg-nuxt (или по Ваш избор) на локалната Ви машина и инсталирайте нужните за него Node.js пакети, описани в package.json файла.

git clone [email protected]:destinationbg/frontend-nuxt.git destinationbg-nuxt
cd destinationbg-nuxt
npm install

Създайте нов файл от .env.local, който кръстете .env и го отворете, за да попълните празните променливи, описани по-долу.

cp .env.local .env

Попълване на "FACEBOOK_CLIENT_ID" и "FACEBOOK_CLIENT_SECRET"

Създайте собствено приложение в сайта на Facebook за разработчици. Отворете го и идете на Settings > Basic, от където трябва да вземете App ID за FACEBOOK_CLIENT_ID и App secret за FACEBOOK_CLIENT_SECRET.

Попълване на "GOOGLE_CLIENT_ID" и "GOOGLE_CLIENT_SECRET"

Създайте собствен проект в сайта на Google Console за разработчици, след което го изберете и отидете на Credentials страницата, от където кликнете на CREATE CREDENTIALS и изберете OAuth client ID. Изберете, че става въпрос за уеб приложение и задължително добавете унифициран идентификатор на ресурс (URI) в секцията Authorized redirect URIs, който да отговаря на http://localhost:3000/api/auth/callback/google.

Върнете се на Credentials страницата и от там отворете новосъздаденото OAuth 2.0 Client ID, от където трябва да вземете Client ID за GOOGLE_CLIENT_ID и Client secret за GOOGLE_CLIENT_SECRET.

Попълване на "GOOGLE_TAG_ID"

Създайте собствен акаунт в сайта на Google Analytics, към който трябва да закачите Property, от което вече да вземете Measurement ID, намиращо се в Admin > Account (създаденият от Вас акаунт) > Property (създаденото от Вас свойство) > Data Streams.

Попълване на "VITE_APP_MAPBOX_ACCESS_TOKEN" и "VITE_APP_MAPBOX_MAP_STYLE"

Създайте собствен акаунт в сайта на Mapbox, след което използвайте Default public token за VITE_APP_MAPBOX_ACCESS_TOKEN.

Променливата VITE_APP_MAPBOX_MAP_STYLE вече е попълнена, но все пак, ако искате да експериментирате със собствен стил на картата, е нужно да отидете в Mapbox Studio. В горния ляв ъгъл на страницата кликнете на трите точки, за да се разпъне падащо меню и от там копирайте Style URL линка, който се е генерирал.

Стартиране на локален сървър за разработка

npm run dev

Създаване на версия за продуктова среда

npm run build

Форматиране на кода

Ако желаете само да проверите дали има нещо за оправяне, изпълнете следните команди:

npm run lint #това изпълнява долните три команди една след друга
npm run lint:eslint
npm run lint:prettier
npm run lint:stylelint

Ако искате да оправите автоматично всичко, което е по силите на ESlint, Prettier и Stylelint, то изпълнете следните команди:

npm run lint:fix #това изпълнява долните три команди една след друга
npm run lint:eslint:fix
npm run lint:prettier:fix
npm run lint:stylelint:fix

Ако останат неразрешени проблеми, тогава трябва да се намесите и ръчно да ги оправите.

Тестване на кода

npm run test

---

Искате да допринесете?

Този проект е управляван изцяло от доброволци. Зад него не стои компания, която да го разработва и финансира. Ако смятате, че има какво да се промени към по-добро и имате желание да помогнете, ето няколко направления, в които можете да го направите.

Цялата комуникация се извършва чрез нашия Discord сървър, така че трябва да бъдете там, за да проследите процесите.

1. Исторически текст за забележителност - използвайте канал #landmarks, за да сигнализирате, ако има неточности в текстовете на забележителностите или директно ги променете, както е описано в Наръчника за текстовете
2. Разработка - прочетете нашите наръчници на доброволеца в Laravel хранилището или в Nuxt 3 хранилището и използвайте каналите #frontend и #backend в Discord
3. Дизайн - използвайте канал #design в Discord
4. SEO оптимизация - използвайте канал #seo в Discord
5. Маркетинг и реклама - използвайте канал #marketing в Discord
6. Друго? - свържете се с нас чрез нашата контактна форма в сайта и ни кажете с какво друго искате да ни помогнете или ни пишете директно в канал #general в Discord

Кой вече допринесе?

---

Финансов принос

Като проект, управляван изцяло доброволно от общността, без голяма корпоративна подкрепа зад гърба си, приветстваме финансова помощ чрез GitHub Sponsors и OpenCollective страниците.

Предварително благодарим на всеки, който допринесе финансово за поддръжката и развитието на проекта!