Skip to content

Latest commit

 

History

History
53 lines (36 loc) · 3.36 KB

HOWTO.md

File metadata and controls

53 lines (36 loc) · 3.36 KB
Raw

Hvordan bruke FFKS / How to use M3C

Denne filen innholder informasjon om hvordan installere og bruker FFKS. / This document contains information on how to install and use M3C.

Hvordan kjøre koden i development-modus fra datamaskinen?

  1. Clone repository fra git
  2. Gå inn i mappen i treminal

Du må ha npm/node installert på maskinen for de neste to trinn:

  1. Kjør npm install for å installere avhengigheter
  2. Kjør npm start for å starte
  3. Nå burde siden komme opp i nettleseren automatisk, eller du kan åpne http://localhost:3000 i nettleseren!

Når du gjør endringer i koden skal localhost:3000 oppdateres automatisk.

Hvordan deploye react-koden til github pages?

Det du må gjøre i dette prosjektet er å sørge for at du og den nye koden er på master branch. Deretter kan du kjøre npm run deploy fra terminalen, og siden skal oppdateres!
Tutorial til oppsett og endring av host-side: https://www.freecodecamp.org/news/deploy-a-react-app-to-github-pages/

Hvordan legge til default fargepaletter?

Gå til src > variables. Legg til under defaultColorPalettes.

Litt om systemet

Litt om mappestruktur og arkitekturen

Inne i mappen til prosjektet ser det slik ut om du åpner den i en fil-editor:
Skjermbilde 2022-07-06 kl 12 49 18

  • Components inneholder alle komponentene som er i appen. Komponenter er biter med kode som kan brukes flere steder. Eksempler er meny, knapp, inputfelt, el.
  • Pages er sidene i appen. I dette tilfellet er det alle sider som kan lastes når du skriver "nesside.no/xxxx" i nettleseren. Eksempler er Home (der vi sjekker kontrast) og About (her planla jeg å ha info om wcag, men ble aldri brukt)
  • color-checker.js er viktig: den inneholder koden som finner kontrastene mellom farger. Er hentet fra https://colorcontrast.dev/api/
  • contrast-calbulations.js er en fil med andre metoder som gjør diverse kalkulasjoner som har med fargekontraster å gjøre
  • viarbles.css og variables.js er filer som inneholder variabler som går igjen på tvers av sider og filer. Endres de, så endres variablen alle steder de har blitt brukt.

Litt om biblioteker og dependencies

react i18next er brukt for å enkelt kunne oversette siden mellom norsk og andre språk om det skulle bli ønskelig. Lenke: https://react.i18next.com/

Mui material icons er bruk for å vise profesjonelle ikoner. Se ikonene: https://mui.com/material-ui/material-icons/?query=text og les litt om hvordan de brukes i react: https://blog.wrappixel.com/how-to-use-mui-icons-in-react/.

react-undraw-illustrations er brukt for å vise illustrasjoner med de fargene som brukeren har valgt ut.
React-undraw-illustrations tar inn illustrasjoner med FRI LISENS og gjør dem om til react-komponenter så det er enkelt å bruke dem og gjøre justeringer som å endre farge.
Illustrasjonene kommer fra Undraw, en side hvor du kan finne svg-animasjoner på fri lisens: https://undraw.co/
Biblioteket har ikke alle illustrasjonene som Undraw har, men utvalget finnes her: https://graemefulton.github.io/.
En god bruksanvisning for hvordan man bruker komponentene er her: https://github.com/GraemeFulton/react-undraw-illustrations.