diff --git a/.github/ISSUE_TEMPLATE/bug-report.md b/.github/ISSUE_TEMPLATE/bug-report.md index da5872eb..8a6629f0 100644 --- a/.github/ISSUE_TEMPLATE/bug-report.md +++ b/.github/ISSUE_TEMPLATE/bug-report.md @@ -1,10 +1,9 @@ --- name: Bug rapport about: Maak een bug rapport om fouten te signaleren -title: "`error message` of beschrijving" +title: '`error message` of beschrijving' labels: bug assignees: '' - --- **Beschrijf de bug** @@ -12,6 +11,7 @@ Een duidelijke, beknopte beschrijving van de bug. **Reproductie** Stappen om het gedrag te reproduceren: + 1. Ga naar '...' 2. Klik op '....' 3. Scroll naar beneden tot '....' diff --git a/.github/ISSUE_TEMPLATE/feature-request.md b/.github/ISSUE_TEMPLATE/feature-request.md index d06f41bc..b99513ab 100644 --- a/.github/ISSUE_TEMPLATE/feature-request.md +++ b/.github/ISSUE_TEMPLATE/feature-request.md @@ -1,10 +1,9 @@ --- name: Feature aanvragen about: Stel een feature voor -title: "Korte beschrijving of naam" +title: 'Korte beschrijving of naam' labels: enhancement assignees: '' - --- **Is your feature request related to a problem? Please describe.** diff --git a/backend/src/app.ts b/backend/src/app.ts index 6bc5d509..65dd8a7a 100644 --- a/backend/src/app.ts +++ b/backend/src/app.ts @@ -1,21 +1,22 @@ -import express, {Express, Request, Response} from 'express'; -import initORM from './orm' +import express, { Express, Response } from 'express'; +import initORM from './orm.js'; const app: Express = express(); const port: string | number = process.env.PORT || 3000; // TODO Replace with Express routes app.get('/', (_, res: Response) => { - res.json({ - message: 'Hello Dwengo!' - }); + res.json({ + message: 'Hello Dwengo!', + }); }); async function startServer() { - const orm = await initORM(); - app.listen(port, () => { - console.log(`Server is running at http://localhost:${port}`); - }); + await initORM(); + + app.listen(port, () => { + console.log(`Server is running at http://localhost:${port}`); + }); } startServer(); diff --git a/backend/src/entities/user.entity.ts b/backend/src/entities/user.entity.ts index 94b7bcad..f7b0c426 100644 --- a/backend/src/entities/user.entity.ts +++ b/backend/src/entities/user.entity.ts @@ -1,13 +1,13 @@ -import { Entity, OneToOne, PrimaryKey, Property } from '@mikro-orm/core' +import { Entity, PrimaryKey, Property } from '@mikro-orm/core'; @Entity() export class User { - @PrimaryKey({ type: 'number' }) - id!: number; + @PrimaryKey({ type: 'number' }) + id!: number; - @Property() - firstName: string = ''; + @Property() + firstName: string = ''; - @Property() - lastName: string = ''; -} \ No newline at end of file + @Property() + lastName: string = ''; +} diff --git a/backend/src/mikro-orm.config.ts b/backend/src/mikro-orm.config.ts index 3c126949..c4302a37 100644 --- a/backend/src/mikro-orm.config.ts +++ b/backend/src/mikro-orm.config.ts @@ -1,12 +1,12 @@ -import { Options } from '@mikro-orm/core' -import { PostgreSqlDriver } from '@mikro-orm/postgresql' +import { Options } from '@mikro-orm/core'; +import { PostgreSqlDriver } from '@mikro-orm/postgresql'; const config: Options = { - driver: PostgreSqlDriver, - dbName: 'dwengo', - entities: ['dist/**/*.entity.js'], - entitiesTs: ['src/**/*.entity.ts'], - debug: true + driver: PostgreSqlDriver, + dbName: 'dwengo', + entities: ['dist/**/*.entity.js'], + entitiesTs: ['src/**/*.entity.ts'], + debug: true, }; export default config; diff --git a/backend/src/orm.ts b/backend/src/orm.ts index 74bc570d..d9de328f 100644 --- a/backend/src/orm.ts +++ b/backend/src/orm.ts @@ -1,6 +1,6 @@ -import { MikroORM } from '@mikro-orm/core' -import config from './mikro-orm.config'; +import { MikroORM } from '@mikro-orm/core'; +import config from './mikro-orm.config.js'; export default async function initORM() { - await MikroORM.init(config); + await MikroORM.init(config); } diff --git a/frontend/e2e/vue.spec.ts b/frontend/e2e/vue.spec.ts index fc116a96..9471698e 100644 --- a/frontend/e2e/vue.spec.ts +++ b/frontend/e2e/vue.spec.ts @@ -3,6 +3,6 @@ import { test, expect } from '@playwright/test'; // See here how to get started: // https://playwright.dev/docs/intro test('visits the app root url', async ({ page }) => { - await page.goto('/'); - await expect(page.locator('h1')).toHaveText('You did it!'); -}) + await page.goto('/'); + await expect(page.locator('h1')).toHaveText('You did it!'); +}); diff --git a/frontend/index.html b/frontend/index.html index 9e5fc8f0..a678cb53 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1,13 +1,13 @@ - + - - - - - Vite App - - -
- - + + + + + Vite App + + +
+ + diff --git a/frontend/playwright.config.ts b/frontend/playwright.config.ts index 5ece9567..a6cfb499 100644 --- a/frontend/playwright.config.ts +++ b/frontend/playwright.config.ts @@ -1,110 +1,112 @@ -import process from 'node:process' -import { defineConfig, devices } from '@playwright/test' +import process from 'node:process'; +import { defineConfig, devices } from '@playwright/test'; /** * Read environment variables from file. * https://github.com/motdotla/dotenv */ -// require('dotenv').config(); +// Require('dotenv').config(); /** * See https://playwright.dev/docs/test-configuration. */ export default defineConfig({ - testDir: './e2e', - /* Maximum time one test can run for. */ - timeout: 30 * 1000, - expect: { - /** - * Maximum time expect() should wait for the condition to be met. - * For example in `await expect(locator).toHaveText();` - */ - timeout: 5000, - }, - /* Fail the build on CI if you accidentally left test.only in the source code. */ - forbidOnly: !!process.env.CI, - /* Retry on CI only */ - retries: process.env.CI ? 2 : 0, - /* Opt out of parallel tests on CI. */ - workers: process.env.CI ? 1 : undefined, - /* Reporter to use. See https://playwright.dev/docs/test-reporters */ - reporter: 'html', - /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ - use: { - /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */ - actionTimeout: 0, - /* Base URL to use in actions like `await page.goto('/')`. */ - baseURL: process.env.CI ? 'http://localhost:4173' : 'http://localhost:5173', - - /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ - trace: 'on-first-retry', - - /* Only on CI systems run the tests headless */ - headless: !!process.env.CI, - }, - - /* Configure projects for major browsers */ - projects: [ - { - name: 'chromium', - use: { - ...devices['Desktop Chrome'], - }, + testDir: './e2e', + /* Maximum time one test can run for. */ + timeout: 30 * 1000, + expect: { + /** + * Maximum time expect() should wait for the condition to be met. + * For example in `await expect(locator).toHaveText();` + */ + timeout: 5000, }, - { - name: 'firefox', - use: { - ...devices['Desktop Firefox'], - }, - }, - { - name: 'webkit', - use: { - ...devices['Desktop Safari'], - }, + /* Fail the build on CI if you accidentally left test.only in the source code. */ + forbidOnly: Boolean(process.env.CI), + /* Retry on CI only */ + retries: process.env.CI ? 2 : 0, + /* Opt out of parallel tests on CI. */ + workers: process.env.CI ? 1 : undefined, + /* Reporter to use. See https://playwright.dev/docs/test-reporters */ + reporter: 'html', + /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ + use: { + /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */ + actionTimeout: 0, + /* Base URL to use in actions like `await page.goto('/')`. */ + baseURL: process.env.CI + ? 'http://localhost:4173' + : 'http://localhost:5173', + + /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ + trace: 'on-first-retry', + + /* Only on CI systems run the tests headless */ + headless: Boolean(process.env.CI), }, - /* Test against mobile viewports. */ - // { - // name: 'Mobile Chrome', - // use: { - // ...devices['Pixel 5'], - // }, - // }, - // { - // name: 'Mobile Safari', - // use: { - // ...devices['iPhone 12'], - // }, - // }, + /* Configure projects for major browsers */ + projects: [ + { + name: 'chromium', + use: { + ...devices['Desktop Chrome'], + }, + }, + { + name: 'firefox', + use: { + ...devices['Desktop Firefox'], + }, + }, + { + name: 'webkit', + use: { + ...devices['Desktop Safari'], + }, + }, - /* Test against branded browsers. */ - // { - // name: 'Microsoft Edge', - // use: { - // channel: 'msedge', - // }, - // }, - // { - // name: 'Google Chrome', - // use: { - // channel: 'chrome', - // }, - // }, - ], + /* Test against mobile viewports. */ + // { + // Name: 'Mobile Chrome', + // Use: { + // ...devices['Pixel 5'], + // }, + // }, + // { + // Name: 'Mobile Safari', + // Use: { + // ...devices['iPhone 12'], + // }, + // }, - /* Folder for test artifacts such as screenshots, videos, traces, etc. */ - // outputDir: 'test-results/', + /* Test against branded browsers. */ + // { + // Name: 'Microsoft Edge', + // Use: { + // Channel: 'msedge', + // }, + // }, + // { + // Name: 'Google Chrome', + // Use: { + // Channel: 'chrome', + // }, + // }, + ], - /* Run your local dev server before starting the tests */ - webServer: { - /** - * Use the dev server by default for faster feedback loop. - * Use the preview server on CI for more realistic testing. - * Playwright will re-use the local server if there is already a dev-server running. - */ - command: process.env.CI ? 'npm run preview' : 'npm run dev', - port: process.env.CI ? 4173 : 5173, - reuseExistingServer: !process.env.CI, - }, -}) + /* Folder for test artifacts such as screenshots, videos, traces, etc. */ + // OutputDir: 'test-results/', + + /* Run your local dev server before starting the tests */ + webServer: { + /** + * Use the dev server by default for faster feedback loop. + * Use the preview server on CI for more realistic testing. + * Playwright will re-use the local server if there is already a dev-server running. + */ + command: process.env.CI ? 'npm run preview' : 'npm run dev', + port: process.env.CI ? 4173 : 5173, + reuseExistingServer: !process.env.CI, + }, +}); diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 7905b051..e1c5388d 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -1,85 +1,91 @@ diff --git a/frontend/src/assets/base.css b/frontend/src/assets/base.css index 8816868a..f10adb8b 100644 --- a/frontend/src/assets/base.css +++ b/frontend/src/assets/base.css @@ -1,86 +1,86 @@ /* color palette from */ :root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; - --vt-c-indigo: #2c3e50; + --vt-c-indigo: #2c3e50; - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); } /* semantic color variables for this project */ :root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); - --section-gap: 160px; + --section-gap: 160px; } @media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } } *, *::before, *::after { - box-sizing: border-box; - margin: 0; - font-weight: normal; + box-sizing: border-box; + margin: 0; + font-weight: normal; } body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: - color 0.5s, - background-color 0.5s; - line-height: 1.6; - font-family: - Inter, - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Roboto, - Oxygen, - Ubuntu, - Cantarell, - 'Fira Sans', - 'Droid Sans', - 'Helvetica Neue', - sans-serif; - font-size: 15px; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: + color 0.5s, + background-color 0.5s; + line-height: 1.6; + font-family: + Inter, + -apple-system, + BlinkMacSystemFont, + "Segoe UI", + Roboto, + Oxygen, + Ubuntu, + Cantarell, + "Fira Sans", + "Droid Sans", + "Helvetica Neue", + sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css index 36fb845b..0304c6d1 100644 --- a/frontend/src/assets/main.css +++ b/frontend/src/assets/main.css @@ -1,35 +1,35 @@ -@import './base.css'; +@import "./base.css"; #app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - font-weight: normal; + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + font-weight: normal; } a, .green { - text-decoration: none; - color: hsla(160, 100%, 37%, 1); - transition: 0.4s; - padding: 3px; + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; + padding: 3px; } @media (hover: hover) { - a:hover { - background-color: hsla(160, 100%, 37%, 0.2); - } + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } } @media (min-width: 1024px) { - body { - display: flex; - place-items: center; - } + body { + display: flex; + place-items: center; + } - #app { - display: grid; - grid-template-columns: 1fr 1fr; - padding: 0 2rem; - } + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } } diff --git a/frontend/src/components/HelloWorld.vue b/frontend/src/components/HelloWorld.vue index d174cf8e..0a6ee1fe 100644 --- a/frontend/src/components/HelloWorld.vue +++ b/frontend/src/components/HelloWorld.vue @@ -1,41 +1,52 @@ diff --git a/frontend/src/components/TheWelcome.vue b/frontend/src/components/TheWelcome.vue index ae6eec3b..fc109ae4 100644 --- a/frontend/src/components/TheWelcome.vue +++ b/frontend/src/components/TheWelcome.vue @@ -1,94 +1,178 @@ diff --git a/frontend/src/components/WelcomeItem.vue b/frontend/src/components/WelcomeItem.vue index 6d7086ae..5d1b8a63 100644 --- a/frontend/src/components/WelcomeItem.vue +++ b/frontend/src/components/WelcomeItem.vue @@ -1,87 +1,87 @@ diff --git a/frontend/src/components/__tests__/HelloWorld.spec.ts b/frontend/src/components/__tests__/HelloWorld.spec.ts index 25332020..79c1e3ae 100644 --- a/frontend/src/components/__tests__/HelloWorld.spec.ts +++ b/frontend/src/components/__tests__/HelloWorld.spec.ts @@ -1,11 +1,11 @@ -import { describe, it, expect } from 'vitest' +import { describe, it, expect } from "vitest"; -import { mount } from '@vue/test-utils' -import HelloWorld from '../HelloWorld.vue' +import { mount } from "@vue/test-utils"; +import HelloWorld from "../HelloWorld.vue"; -describe('HelloWorld', () => { - it('renders properly', () => { - const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } }) - expect(wrapper.text()).toContain('Hello Vitest') - }) -}) +describe("HelloWorld", () => { + it("renders properly", () => { + const wrapper = mount(HelloWorld, { props: { msg: "Hello Vitest" } }); + expect(wrapper.text()).toContain("Hello Vitest"); + }); +}); diff --git a/frontend/src/components/icons/IconCommunity.vue b/frontend/src/components/icons/IconCommunity.vue index 2dc8b055..708fa1b6 100644 --- a/frontend/src/components/icons/IconCommunity.vue +++ b/frontend/src/components/icons/IconCommunity.vue @@ -1,7 +1,12 @@ diff --git a/frontend/src/components/icons/IconDocumentation.vue b/frontend/src/components/icons/IconDocumentation.vue index 6d4791cf..cd61e991 100644 --- a/frontend/src/components/icons/IconDocumentation.vue +++ b/frontend/src/components/icons/IconDocumentation.vue @@ -1,7 +1,12 @@ diff --git a/frontend/src/components/icons/IconEcosystem.vue b/frontend/src/components/icons/IconEcosystem.vue index c3a4f078..0e72c40f 100644 --- a/frontend/src/components/icons/IconEcosystem.vue +++ b/frontend/src/components/icons/IconEcosystem.vue @@ -1,7 +1,12 @@ diff --git a/frontend/src/components/icons/IconSupport.vue b/frontend/src/components/icons/IconSupport.vue index 7452834d..cc131b12 100644 --- a/frontend/src/components/icons/IconSupport.vue +++ b/frontend/src/components/icons/IconSupport.vue @@ -1,7 +1,12 @@ diff --git a/frontend/src/components/icons/IconTooling.vue b/frontend/src/components/icons/IconTooling.vue index 660598d7..9e820684 100644 --- a/frontend/src/components/icons/IconTooling.vue +++ b/frontend/src/components/icons/IconTooling.vue @@ -1,19 +1,19 @@ diff --git a/frontend/src/main.ts b/frontend/src/main.ts index a1cde031..5701eca8 100644 --- a/frontend/src/main.ts +++ b/frontend/src/main.ts @@ -1,24 +1,24 @@ -import './assets/main.css' -import { createApp } from 'vue'; +import "./assets/main.css"; +import { createApp } from "vue"; // Vuetify -import 'vuetify/styles'; -import { createVuetify } from 'vuetify'; -import * as components from 'vuetify/components'; -import * as directives from 'vuetify/directives'; +import "vuetify/styles"; +import { createVuetify } from "vuetify"; +import * as components from "vuetify/components"; +import * as directives from "vuetify/directives"; // Components -import App from './App.vue' -import router from './router' +import App from "./App.vue"; +import router from "./router"; const app = createApp(App); app.use(router); const vuetify = createVuetify({ - components, - directives, + components, + directives, }); app.use(vuetify); -app.mount('#app'); +app.mount("#app"); diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts index 3e49915c..55ba8fb7 100644 --- a/frontend/src/router/index.ts +++ b/frontend/src/router/index.ts @@ -1,23 +1,25 @@ -import { createRouter, createWebHistory } from 'vue-router' -import HomeView from '../views/HomeView.vue' +import { createRouter, createWebHistory } from "vue-router"; +import HomeView from "../views/HomeView.vue"; const router = createRouter({ - history: createWebHistory(import.meta.env.BASE_URL), - routes: [ - { - path: '/', - name: 'home', - component: HomeView, - }, - { - path: '/about', - name: 'about', - // route level code-splitting - // this generates a separate chunk (About.[hash].js) for this route - // which is lazy-loaded when the route is visited. - component: () => import('../views/AboutView.vue'), - }, - ], -}) + history: createWebHistory(import.meta.env.BASE_URL), + routes: [ + { + path: "/", + name: "home", + component: HomeView, + }, + { + path: "/about", + name: "about", + // Route level code-splitting + // This generates a separate chunk (About.[hash].js) for this route + // Which is lazy-loaded when the route is visited. + component: () => { + return import("../views/AboutView.vue"); + }, + }, + ], +}); -export default router +export default router; diff --git a/frontend/src/views/AboutView.vue b/frontend/src/views/AboutView.vue index f49a73d9..1c17d1c9 100644 --- a/frontend/src/views/AboutView.vue +++ b/frontend/src/views/AboutView.vue @@ -1,16 +1,16 @@ diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue index d5c0217e..56ceba6d 100644 --- a/frontend/src/views/HomeView.vue +++ b/frontend/src/views/HomeView.vue @@ -1,9 +1,9 @@ diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index 4217010a..a558039c 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -1,18 +1,15 @@ -import { fileURLToPath, URL } from 'node:url' +import { fileURLToPath, URL } from 'node:url'; -import { defineConfig } from 'vite' -import vue from '@vitejs/plugin-vue' -import vueDevTools from 'vite-plugin-vue-devtools' +import { defineConfig } from 'vite'; +import vue from '@vitejs/plugin-vue'; +import vueDevTools from 'vite-plugin-vue-devtools'; // https://vite.dev/config/ export default defineConfig({ - plugins: [ - vue(), - vueDevTools(), - ], - resolve: { - alias: { - '@': fileURLToPath(new URL('./src', import.meta.url)) + plugins: [vue(), vueDevTools()], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)), + }, }, - }, -}) +});