17 content op home page zien

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.env
+.DS_Store

README.md

@@ -1,33 +1,48 @@
-> _Fork_ deze leertaak en ga aan de slag. Onderstaande outline ga je gedurende deze taak in jouw eigen GitHub omgeving uitwerken. De instructie vind je in: [docs/INSTRUCTIONS.md](docs/INSTRUCTIONS.md)
+<h1>
+  <img src="https://user-images.githubusercontent.com/47314813/223076346-b8c52030-686b-4541-9746-5b5ade5d98db.png" style="height: 1em;">
+  <span> Toolgankelijk</span>
+</h1>
 
-# Titel
-<!-- Geef je project een titel en schrijf in één zin wat het is -->
+Foto van de voorpagina
+***
 
-## Inhoudsopgave
+<h2 id="inhoud">📦 Inhoud</h2>
 
-  * [Beschrijving](#beschrijving)
-  * [Gebruik](#gebruik)
-  * [Kenmerken](#kenmerken)
-  * [Installatie](#installatie)
-  * [Bronnen](#bronnen)
-  * [Licentie](#licentie)
+1. Beschrijving
+2. Gebruik
+3. Kenmerken
+4. Bronnen
+5. Licenties
 
-## Beschrijving
-<!-- Bij Beschrijving staat kort beschreven wat voor project het is en wat je hebt gemaakt -->
-<!-- Voeg een mooie poster visual toe 📸 -->
-<!-- Voeg een link toe naar Github Pages 🌐-->
+<h2 id="beschrijving">ℹ️ Beschrijving</h2>
 
-## Gebruik
-<!-- Bij Gebruik staat de user story, hoe het werkt en wat je er mee kan. -->
+Toolgankelijk is een tool waar de partners van Vervoerregio Amsterdram kunnen zien aan welke toegankelijkheids principes hun website en/of pagina's voldoen. Parnters kunnen pagina's aan hun website toevoegen die ze kunnen controleren aan welke principes ze voldoen.
 
-## Kenmerken
-<!-- Bij Kenmerken staat welke technieken zijn gebruikt en hoe. Wat is de HTML structuur? Wat zijn de belangrijkste dingen in CSS? Wat is er met JS gedaan en hoe? Misschien heb je iets met NodeJS gedaan, of heb je een framwork of library gebruikt? -->
+<h2 id="gebruik">🖥️ Gebruik</h2>
 
-## Installatie
-<!-- Bij Instalatie staat hoe een andere developer aan jouw repo kan werken -->
+***
 
-## Bronnen
+<h2 id="kenmerken">✨ Kenmerken</h2>
 
-## Licentie
+De website wordt server side gerendered door middel van NodeJS, ExpressJS & EJS. Het is gebouwd in HTML, CSS & JS. Data wordt geleverd door de API van FDND die voor vervoerregio-amsterdam is gemaakt.
+
+<h2 id="installatie">📥 Installatie</h2>
+
+Zorg dat je NodeJS geïnstalleerd hebt. Clone deze repository. Open een terminal. Zorg dat je in het juiste pad zit van dit project. Voer de commando `npm install` uit. Wanneer deze klaar is kun je de applicatie starten door de commando `npm run dev` uit te voeren. De applicatie wordt gehost op http://localhost:3000/
+
+<h2 id="bronnen">🌍 Bronnen</h2>
+
+- [Instructies](docs/INSTRUCTIONS.md)
+- [NodeJS](https://nodejs.org/)
+- [ExpressJS](https://expressjs.com/)
+- [EJS](https://ejs.co/)
+- [API Documentatie](https://api.vervoerregio-amsterdam.fdnd.nl/)
+- [nodemon](https://nodemon.io/)
+- [Mobile menu inspiratie](https://www.youtube.com/watch?v=7YZe5XE5lls&t=551s)
+- [Control Flow](https://github.com/luukbrauckmann/sprint-9-leertaak/wiki/Control-Flow)
+- [Pen menu](https://codepen.io/luuk-brauckmann/pen/jOvdbeq)
+- [Pen folder card](https://codepen.io/luuk-brauckmann/pen/eYLQOQB)
+
+<h2 id="licenties">🪪 Licenties</h2>
 
 This project is licensed under the terms of the [MIT license](./LICENSE).

helpers/fontawesome.js

@@ -0,0 +1,8 @@
+import { library, dom, icon } from '@fortawesome/fontawesome-svg-core';
+import { fas } from '@fortawesome/free-solid-svg-icons';
+
+export const fontawesome = (server) => {
+	library.add(fas)
+	server.locals.fas = () => dom.css()
+	server.locals.icon = (iconName) => icon({ prefix: 'fas', iconName }).html
+}

helpers/highlight.js

@@ -0,0 +1,7 @@
+import hljs from 'highlight.js/lib/core';
+import xml from 'highlight.js/lib/languages/xml';
+
+export const highlightjs = (server) => {
+	hljs.registerLanguage('xml', xml)
+	server.locals.highlight = (code) => hljs.highlight(code, { language: 'xml' }).value
+}

index.js

@@ -0,0 +1,43 @@
+import { fontawesome } from './helpers/fontawesome.js'
+import { highlightjs } from './helpers/highlight.js'
+
+import express from 'express'
+import compression from 'compression'
+import helmet from 'helmet'
+
+import startPage from './routes/start.js'
+import newChecklist from './routes/new-checklist.js'
+import partners from './routes/partners.js'
+import styleguide from './routes/styleguide.js'
+import notFoundPage from './routes/not-found.js'
+
+const { env } = process
+const server = express()
+
+const port = env.PORT || 3000
+
+server.set('view engine', 'ejs')
+server.set('views', 'views')
+server.set('trust proxy', true)
+
+server.use(compression())
+server.use(helmet())
+server.use(express.static('public'))
+server.use(express.json())
+server.use(express.urlencoded({ extended: true }))
+
+fontawesome(server)
+highlightjs(server)
+
+/* Routes */
+server.get('/', startPage)
+server.get('/new-checklist', newChecklist)
+server.get('/partners', partners)
+server.get('/styleguide', styleguide)
+server.get('/styleguide/**', styleguide)
+server.get('**', notFoundPage)
+
+server.listen(port, () => {
+	console.log(`App is served on port http://localhost:${port}/`)
+})
+

lib/data-access.js

@@ -0,0 +1,81 @@
+import dotenv from "dotenv"
+dotenv.config()
+
+const { env } = process
+
+/**
+ * Data getten
+ * @param {string} endpoint De endpoint van de data die je wilt getten
+ * @param {*} query extra parameters om eventueel te filteren
+ * @returns Promise met de data
+ */
+export const get = async (endpoint, query) => {
+	const queryParams = new URLSearchParams(query).toString()
+	const url = `${env._API_URL}/${endpoint}?${queryParams}`
+
+	console.log(query);
+
+	const options = {
+		method: "GET"
+	}
+
+	return await fetch(url, options)
+		.then((response) => response.json())
+		.catch((error) => error)
+}
+
+/**
+ * Data toevoegen aan de database
+ * @param {string} endpoint De endpoint van de data die je wilt posten
+ * @param {*} data De data die je wilt toevoegen aan de database
+ * @returns Promise met de data
+ */
+export const create = async (endpoint, data) => {
+	const url = `${env._API_URL}/${endpoint}`
+
+	const options = {
+		method: "POST",
+		body: JSON.stringify(data)
+	}
+
+	return await fetch(url, options)
+		.then((response) => response.json())
+		.catch((error) => error)
+}
+
+/**
+ * Data updaten in de database
+ * @param {string} endpoint De endpoint van de data die je wilt patchen
+ * @param {*} data De data die je wilt updaten in de database
+ * @returns Priomise met de data
+ */
+export const update = async (endpoint, data) => {
+	const url = `${env._API_URL}/${endpoint}`
+
+	const options = {
+		method: "PATCH",
+		body: JSON.stringify(data)
+	}
+
+	return await fetch(url, options)
+		.then((response) => response.json())
+		.catch((error) => error)
+}
+
+/**
+ *
+ * @param {string} endpoint De endpoint van de data die je wilt deleten
+ * @param {*} id De identifier van de data die je wilt deleten
+ * @returns Promise met de data
+ */
+export const remove = async (endpoint, id) => {
+	const url = `${env._API_URL}/${endpoint}`
+
+	const options = {
+		method: "DELETE"
+	}
+
+	return await fetch(url, options)
+		.then((response) => response.json())
+		.catch((error) => error)
+}