README.md

Spis treści

1. Otwarcie projektu
2. Zmiana obsługi maila na własny
3. Zmiana treści strony
4. Dodawanie postów do bloga
5. Dodawanie showcases
6. Strona na Githubie

Otwarcie projektu

Aby otworzyć projekt, należy mieć zainstalowany Node.js w wersji LTS tutaj. Sklonuj repozytorium. W folderze z repozytorium wykonaj z terminala polecenie npm install, które zainstaluje wszystkie potrzebne pakiety. Po udanej instalacji można uruchomić serwer lokalny, dzięki któremu będzie można na bieżąco sprawdzać zmiany poleceniem npm start. Każda zmiana w kodzie będzie na bieżąco widoczna na stronie lokalnej.

Zmiana obsługi maila na własny

• Załóż konto na emailjs.com.

• Dodaj nową usługę -> Gmail.

• 

• Dodaj szablon e-maila:

Przykładowo:

Subject: {{name}} send us a message via the contact form on our website!
Content:
Hello DocWire Support,
You got a new message from {{name}}
Reason: {{Reason}}
Email: {{email}}
Message:
"{{message}}"

Reply as soon as possible.

To email: wasz mail (docwire)

Teraz w kodzie należy zaktualizować 3 klucze:

• Klucz Service ID

• Klucz Template ID
  

• Oraz Public Api Key
  

Wstawiamy do funkcji handleOnSubmit (linia 21) w pliku src/containers/components/contactUs/Form.jsx.

Zmiana treści strony

Najłatwiejszym sposobem znalezienia odpowiedniej sekcji, aby zmienić tekst, będzie przejście do src/App.js i nawigacja w głąb po elementach strony. Przykładowo, aby dostać się do sekcji "Tech suport" na głównej stronie:

1. Zaczynamy z App.js.

4. Przechodzimy do Home przez Ctrl + LMouse

5. Teraz wystarczy znaleźć tekst i go podmienić na nowy.

Po zapisaniu zmiany są widoczne na serwerze lokalnym.

Dodawanie postów do bloga

W folderze src/pages są 4 przykładowe posty. Każdy post jest napisany w Markdown.

---
title: Introduction to the 4th Industrial Revolution    // tytuł postu
author: Ferid Obeidat                                   // imię i nazwisko Autora
authorImage: Ferid-headshot.png                         // nazwa pliku z miniaturą autora
preview: preview.jpg                                    // nazwa pliku z grafiką postu
date: March 22, 2023                                    // data wstawienia postu
introduction: "..."                                     // krótki opis postu znajdujący się wyłącznie na liście postów
---

Pliki z authorImage i preview muszą być wstawione do src/assets, skąd są automatycznie pobierane. Data musi być w dokładnie powyższym formacie po angielsku. Według niej są porządkowane posty w kolejności od najnowszego do najstarszego.

Po dodaniu posta, w celu pokazania go na stronie, należy w terminalu wykonać polecenie

npm run server

Nadaje ono id każdemu postowi wg czasu dodania, oraz konwertuje na json, który już automatycznie jest wrzucany na stronę. Każdy post jest już generowany dynamicznie, więc nie ma potrzeby dodawania osobnej strony.

WAŻNE: zdarza się, że po wykonaniu polecenia npm run server nie wszystkie posty zostają przez ten skrypt przeanalizowane i nie wszystkie znajdują się w pliku src/posts.json. Dlatego też proszę każdorazowo sprawdzić, czy wszystkie posty zostały dodane i widnieją w pliku src/posts.json. W przypadku, gdy jakiegoś brakuje, należy wywołać skrypt jeszcze raz.

Dodawanie showcases

System dodawania showcases opiera się na pliku src/pages/Showcases/data.js. Znajduje się w nim tablica z przykładowymi użyciami.

"id": , // Należy dodać kolejne id

"linkName": "", // Pod tą nazwą będzie ukryty dynamicznie generowany link, np.:

"image": '', Nazwa pliku znajdującego się w src/assets

"companyName": "", Nazwa firmy

"showcasesShortInfo": "", Krótki opis na stronie zbiorczej, np.:

"subtitle": "", Fraza pod nazwą firmy

"website": "", Pełny link do strony zewnętrznej zlinkowany pod przyciskiem "Website"

"whoWeAre": "", Tekst po lewej stronie pod logiem

"whatIs": "",

"WhyWereDocwireApproached": "",

"WhatDidWeDo": "",

"WhatWereTheResults": ""

}

Po dodaniu wpisu należy plik zapisać i od razu widoczny jest nowy wpis.

Strona na Githubie

Instrukcja dotycząca hostowania strony na GitHub Pages znajduje się tutaj.

Każde zmiany należy najpierw skomitować i wypchnąć na repozytorium, a następnie wykonać polecenie:

npm run deploy