Takaisin portfolioon.

Folio

Folio on moderni, dynaaminen ja täysin staattisiin sivuihin pohjautuva sisältöalusta, joka on rakennettu Gatsby-kehyksellä. Se yhdistää nopeat latausajat, turvallisuuden ja skaalautuvuuden nykyaikaisiin kehitysstandardeihin. Sivusto buildataan aina, kun uusi sisältö lisätään tai vanhaa päivitetään, mikä varmistaa sen, että kaikki käyttäjälle näkyvä sisältö on optimoitu ja valmis tuotantokäyttöön.

Tekniset yksityiskohdat

Frontend

Gatsby mahdollistaa staattisten sivujen generoinnin moderneilla React-komponenteilla.
Dynaamiset sivut ja näyttelyt rakennetaan mukautetuilla GraphQL-kyselyillä.
Responsiivisuus ja saavutettavuus ovat suunnittelun keskiössä.

Backend

Käytössä on yksinkertainen webhook-pohjainen arkkitehtuuri, joka mahdollistaa Gatsby-buildien automaattisen käynnistyksen aina, kun uusi sisältö lisätään.
Sisältö hallitaan kevyen tietokantaratkaisun avulla (SQLite).

Build-prosessi

Jokainen muutos sisältöön, kuten uusien näyttelyiden luominen tai sivujen muokkaaminen, laukaisee Gatsby-buildin webhookin avulla.
Build-prosessin tuloksena syntyy täysin staattisia, optimoituja HTML-tiedostoja, jotka ovat valmiita palveluun.

Ominaisuudet

Näyttelyiden hallinta

Käyttäjä voi luoda näyttelyitä, jotka sisältävät kuvia, tekstiä ja muita elementtejä.
Näyttelyt voivat olla yksittäisiä tai pesiytyneitä osaksi suurempia kokonaisuuksia.

Staattisuus ja nopeus

Staattiset buildit tarjoavat salamannopeat latausajat, mikä parantaa käyttäjäkokemusta ja SEO-sijoituksia.
Staattisuus tuo myös lisäturvaa, sillä dynaaminen backend ei ole käyttäjien suoraan saavutettavissa.

Mukautettavuus

Jokainen sivu voidaan määrittää yksilöllisesti; käyttäjä voi valita, sisältääkö sivu näyttelyitä, sisältöä vai molempia.
Sivut voidaan järjestää hierarkkisesti.

Yksinkertainen admin-liittymä

Admin-puolella voidaan hallita sivuja, näyttelyitä ja tiedostoja helppokäyttöisen käyttöliittymän kautta.
Käytössä on kehittyneet toiminnot, kuten kuvien optimointi ja thumbnailien generointi automaattisesti.

Teknologiat ja työkalut

Gatsby: Staattisten sivujen generointiin.
Node.js + Express: Palvelinpuolen toiminnallisuuksien hallintaan, kuten webhook-kutsuihin.
SQLite: Tietokannan kevyt ja nopea hallinta.
Sharp: Kuvien optimointiin ja generointiin eri kokoisina.
GraphQL: Datan tehokas hakeminen ja järjestäminen.

Yleinen rakenne ja toiminnallisuudet

Koodi on jaettu moduuleihin ja hyödyntää RESTful-periaatteita sekä Express.js-reittien kautta tapahtuvaa toimintojen jakoa.
Frontend on rakennettu Gatsbyllä ja päivitetään webhookin kautta.
Backend tukee mm. kuvien lataamista, muokkaamista ja hierarkkista navigointia, ja siinä on CSRF-suojaus.
Käyttäjätietoja hallinnoidaan kirjautumismekanismilla, jossa on bcrypt-salasanan salaus ja JWT-autentikointi.

Hyödynnetyt kirjastot ja riippuvuudet

Express.js: Sovelluksen perusrakenne.
CSRF: Cross-Site Request Forgery -suojaus.
bcrypt: Salasanojen salaukseen.
JWT: Käyttäjien autentikointiin.
Multer: Tiedostojen lataamiseen ja tallentamiseen.
Sharp: Kuvien optimointiin ja muokkaamiseen.
SQLite: Tietokanta, jossa on dynaamisia kyselyitä.

Käyttäjän toiminta

Käyttäjä lähettää kuvan palvelimelle joko tilapäiseen kansioon (/temporary-upload/:tempId) tai suoraan tietylle sivulle (/upload-thumbnail/:pageId).
- Pyyntö sisältää:
  - Tiedoston (JPEG, PNG tai GIF).
  - tempId (tilapäinen tunniste) tai pageId (sivun ID), riippuen reitistä.
Reitin käsittely (Esim. /upload-thumbnail/:pageId)
- Reititiedosto (esim. routes/index.js) ohjaa pyynnön:
- Reitti käyttää Multeria tiedoston tallentamiseen oikeaan hakemistoon.
- Tiedoston MIME-tyyppi tarkistetaan hyväksyttyjä formaatteja vastaan.
- Tiedostokoko on rajoitettu (5MB).
- Tiedoston tallennus tapahtuu hakemistoon:
```
/public/uploads/<targetId>/original
```
  Missä targetId on joko tempId tai pageId.
Kuvan tallennus ja käsittely (Multer)
- Multer käyttää seuraavaa konfiguraatiota:
  - destination: Luo original-alihakemiston, jos sitä ei ole olemassa.
  - filename: Tallentaa tiedoston turvallisella nimellä (poistaa erikoismerkit ja lisää aikaleiman).
Tiedoston käsittely ja tallennus tietokantaan
- ImageService.js: handleUpload
  - Hakemiston luominen:
    Kutsuu createPageFolders-funktion, joka varmistaa, että seuraavat hakemistot ovat olemassa:
    - thumbnails
    - medium
    - large
    - original
  - Kuvan skaalaus ja optimointi:
    Kutsuu createThumbnails, joka:
    - Luo pienemmät versiot kuvasta (thumbnail, medium, large).
    - Tallentaa nämä eri formaateissa (JPEG, WebP, AVIF).
    - Käyttää Sharpia kuvien optimointiin ja skaalaukseen.
  - Tietokannan päivitys:
    Lisää uuden tietueen thumbnails-tauluun, joka sisältää:
    - Tiedoston polut (thumbnail, medium, large, original).
    - temp_id tai page_id, riippuen reitistä.
Rollback epäonnistumisen sattuessa
- Jos jokin vaihe epäonnistuu (esim. thumbnailien luonti), kutsutaan rollbackTransaction, joka:
- Poistaa tallennetut tiedostot.
- Poistaa tietueet tietokannasta.
Vastauksen palautus
- Onnistuminen:
  Palvelin vastaa 201 Created-tilakoodilla ja ilmoituksella: "Files uploaded successfully."
- Epäonnistuminen:
  Palvelin palauttaa virheviestin ja poistaa kaikki tilapäiset tiedostot sekä tietokantatiedot.
Tilapäiset tiedostot ja niiden siirto
- Jos tiedostot ladataan tilapäisesti (/temporary-upload/:tempId):
- Ne tallennetaan väliaikaiseen hakemistoon.
- Kun käyttäjä tallentaa muutokset, kutsutaan moveTemporaryFiles, joka siirtää tiedostot pysyvään sijaintiin ja päivittää tietokannan.

Tietokannan rakenne

Thumbnails-taulu

Kenttä	Kuvaus
id	Thumbnailin yksilöivä ID
path	Polku alkuperäiseen kuvaan
thumbnail_path	Polku pienimpään versioon
medium_path	Polku keskikokoiseen versioon
large_path	Polku suurimpaan versioon
page_id	Kuvaan liittyvä sivu
temp_id	Tilapäinen ID
order_index	Kuvan järjestys

Yhteenveto

Tiedosto tarkistetaan, tallennetaan ja optimoidaan.
Tietokanta päivitetään, jotta tiedosto voidaan jäljittää ja liittää oikeaan kontekstiin (sivu tai tilapäinen).
Epäonnistumisen tapauksessa kaikki muutokset peruutetaan.

Endpointit

1. Yleiset endpointit

Endpoint	HTTP-metodi	Kuvaus
`/gateway/`	GET	Tervetuloitusivu API:lle. Palauttaa viestin ja listan saatavilla olevista resursseista.
`/gateway/navigation`	GET	Palauttaa sivuhierarkian täydellisten permalinkeiden kanssa.
`/gateway/:resource`	GET	Palauttaa tietyn resurssin (esim. pages, articles, settings). Tukee suodatusta, lajittelua ja rajausta.
`/gateway/:resource/:id`	GET	Palauttaa yksittäisen resurssin (esim. tietyn sivun tai artikkelin) ID:n perusteella.

2. Sivut

Endpoint	HTTP-metodi	Kuvaus
`/gateway/pages`	GET	Palauttaa kaikki julkaistut sivut.
`/gateway/pages/:id`	GET	Palauttaa yksittäisen sivun tiedot ID:n perusteella.
`/gateway/pages/:id/details`	GET	Palauttaa yksityiskohtaiset tiedot tietystä sivusta (esim. galleriat, alasivut, featured-kuva).

3. Artikkelit

Endpoint	HTTP-metodi	Kuvaus
`/gateway/articles`	GET	Palauttaa kaikki julkaistut artikkelit.
`/gateway/articles/:id`	GET	Palauttaa yksittäisen artikkelin tiedot ID:n perusteella.
`/gateway/articles/:id/details`	GET	Palauttaa yksityiskohtaiset tiedot tietystä artikkelista, mukaan lukien kuvat ja kategoriat.

4. Asetukset ja yleinen sisältö

Endpoint	HTTP-metodi	Kuvaus
`/gateway/settings`	GET	Palauttaa kaikki asetukset, kuten faviconin, oletusotsikon ja kuvakoot.
`/gateway/general_content`	GET	Palauttaa yleistä sisältöä, kuten footerin ja muut yleiset tekstit.

5. Kuvien käsittely

Endpoint	HTTP-metodi	Kuvaus
`/upload-thumbnail/:pageId`	POST	Lataa kuvia tietylle sivulle. Luo thumbnailit ja tallentaa tiedot tietokantaan.
`/temporary-upload/:tempId`	POST	Lataa kuvia tilapäisesti. Tallentaa tiedot tilapäiseen kansioon ja tietokantaan.
`/temporary-thumbnails/:tempId`	GET	Palauttaa tilapäiset thumbnailit tilapäisen tunnisteen perusteella.
`/gateway/pages/:id/thumbnails`	GET	Palauttaa tietyn sivun thumbnailit.
`/delete-thumbnail/:id`	DELETE	Poistaa tietyn thumbnailin tietokannasta ja tiedostojärjestelmästä.
`/update-thumbnail/:id`	POST	Päivittää thumbnailin tiedot, kuten otsikon ja kuvauksen.
`/update-thumbnail-order/:pageId`	POST	Päivittää sivun thumbnailien järjestyksen.
`/update-temporary-thumbnail-order/:tempId`	POST	Päivittää tilapäisten thumbnailien järjestyksen.

6. Kirjautuminen ja käyttäjätoiminnot

Endpoint	HTTP-metodi	Kuvaus
`/login`	POST	Käyttäjän kirjautuminen. Palauttaa JWT-tokenin onnistuneesti kirjautuneelle käyttäjälle.
`/logout`	GET	Kirjaa käyttäjän ulos ja tyhjentää session.
`/update-user`	POST	Päivittää kirjautuneen käyttäjän tiedot (käyttäjänimi ja salasana).

7. Hallinta- ja asetustoiminnot

Endpoint	HTTP-metodi	Kuvaus
`/homepage`	GET	Palauttaa nykyisen aloitussivun tiedot.
`/homepage`	POST	Asettaa tietyn sivun aloitussivuksi.
`/regenerate-images`	POST	Generoi kaikki thumbnailit uudelleen uusien asetusten mukaan.
`/defaults`	POST	Päivittää oletusasetukset, kuten faviconin, logon ja oletuskuvan.
`/delete-file`	POST	Poistaa asetuksiin liittyvän tiedoston, kuten faviconin tai logon.