Denne filen innholder informasjon om hvordan installere og bruker FFKS. / This document contains information on how to install and use M3C.
- Clone repository fra git
- Gå inn i mappen i treminal
Du må ha npm/node installert på maskinen for de neste to trinn:
- Kjør
npm install
for å installere avhengigheter - Kjør
npm start
for å starte - 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.
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/
Gå til src > variables. Legg til under defaultColorPalettes.
Inne i mappen til prosjektet ser det slik ut om du åpner den i en fil-editor:
- 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.
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.