tdpeuter/2025SELab2-project-Dwengo
tdpeuter/2025SELab2-project-Dwengo
Archived
1
Fork 0
Code Issues Releases 4 Packages 2 Wiki Activity

style: Format boilerplate

Browse source
This commit is contained in:
Tibo De Peuter 2025-02-20 14:18:32 +01:00
parent 9b52b43f65
commit 788e1642d1
Signed by: tdpeuter
GPG key ID: 38297DE43F75FFE2
26 changed files with 686 additions and 564 deletions
Download patch file Download diff file Expand all files Collapse all files

4
.github/ISSUE_TEMPLATE/bug-report.md vendored
View file

@ -1,10 +1,9 @@
--- ---
name: Bug rapport name: Bug rapport
about: Maak een bug rapport om fouten te signaleren about: Maak een bug rapport om fouten te signaleren
title: "`error message` of beschrijving" title: '`error message` of beschrijving'
labels: bug labels: bug
assignees: '' assignees: ''
--- ---
**Beschrijf de bug** **Beschrijf de bug**
@ -12,6 +11,7 @@ Een duidelijke, beknopte beschrijving van de bug.
**Reproductie** **Reproductie**
Stappen om het gedrag te reproduceren: Stappen om het gedrag te reproduceren:
1. Ga naar '...' 1. Ga naar '...'
2. Klik op '....' 2. Klik op '....'
3. Scroll naar beneden tot '....' 3. Scroll naar beneden tot '....'

3
.github/ISSUE_TEMPLATE/feature-request.md vendored
View file

@ -1,10 +1,9 @@
--- ---
name: Feature aanvragen name: Feature aanvragen
about: Stel een feature voor about: Stel een feature voor
title: "Korte beschrijving of naam" title: 'Korte beschrijving of naam'
labels: enhancement labels: enhancement
assignees: '' assignees: ''
--- ---
**Is your feature request related to a problem? Please describe.** **Is your feature request related to a problem? Please describe.**

19
backend/src/app.ts
View file

@ -1,21 +1,22 @@
import express, {Express, Request, Response} from 'express'; import express, { Express, Response } from 'express';
import initORM from './orm' import initORM from './orm.js';
const app: Express = express(); const app: Express = express();
const port: string | number = process.env.PORT || 3000; const port: string | number = process.env.PORT || 3000;
// TODO Replace with Express routes // TODO Replace with Express routes
app.get('/', (_, res: Response) => { app.get('/', (_, res: Response) => {
res.json({ res.json({
message: 'Hello Dwengo!' message: 'Hello Dwengo!',
}); });
}); });
async function startServer() { async function startServer() {
const orm = await initORM(); await initORM();
app.listen(port, () => {
console.log(`Server is running at http://localhost:${port}`); app.listen(port, () => {
}); console.log(`Server is running at http://localhost:${port}`);
});
} }
startServer(); startServer();

14
backend/src/entities/user.entity.ts
View file

@ -1,13 +1,13 @@
import { Entity, OneToOne, PrimaryKey, Property } from '@mikro-orm/core' import { Entity, PrimaryKey, Property } from '@mikro-orm/core';
@Entity() @Entity()
export class User { export class User {
@PrimaryKey({ type: 'number' }) @PrimaryKey({ type: 'number' })
id!: number; id!: number;
@Property() @Property()
firstName: string = ''; firstName: string = '';
@Property() @Property()
lastName: string = ''; lastName: string = '';
} }

14
backend/src/mikro-orm.config.ts
View file

@ -1,12 +1,12 @@
import { Options } from '@mikro-orm/core' import { Options } from '@mikro-orm/core';
import { PostgreSqlDriver } from '@mikro-orm/postgresql' import { PostgreSqlDriver } from '@mikro-orm/postgresql';
const config: Options = { const config: Options = {
driver: PostgreSqlDriver, driver: PostgreSqlDriver,
dbName: 'dwengo', dbName: 'dwengo',
entities: ['dist/**/*.entity.js'], entities: ['dist/**/*.entity.js'],
entitiesTs: ['src/**/*.entity.ts'], entitiesTs: ['src/**/*.entity.ts'],
debug: true debug: true,
}; };
export default config; export default config;

6
backend/src/orm.ts
View file

@ -1,6 +1,6 @@
import { MikroORM } from '@mikro-orm/core' import { MikroORM } from '@mikro-orm/core';
import config from './mikro-orm.config'; import config from './mikro-orm.config.js';
export default async function initORM() { export default async function initORM() {
await MikroORM.init(config); await MikroORM.init(config);
} }

6
frontend/e2e/vue.spec.ts
View file

@ -3,6 +3,6 @@ import { test, expect } from '@playwright/test';
// See here how to get started: // See here how to get started:
// https://playwright.dev/docs/intro // https://playwright.dev/docs/intro
test('visits the app root url', async ({ page }) => { test('visits the app root url', async ({ page }) => {
await page.goto('/'); await page.goto('/');
await expect(page.locator('h1')).toHaveText('You did it!'); await expect(page.locator('h1')).toHaveText('You did it!');
}) });

22
frontend/index.html
View file

@ -1,13 +1,13 @@
<!DOCTYPE html> <!doctype html>
<html lang=""> <html lang="">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title> <title>Vite App</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>

190
frontend/playwright.config.ts
View file

@ -1,110 +1,112 @@
import process from 'node:process' import process from 'node:process';
import { defineConfig, devices } from '@playwright/test' import { defineConfig, devices } from '@playwright/test';
/** /**
* Read environment variables from file. * Read environment variables from file.
* https://github.com/motdotla/dotenv * https://github.com/motdotla/dotenv
*/ */
// require('dotenv').config(); // Require('dotenv').config();
/** /**
* See https://playwright.dev/docs/test-configuration. * See https://playwright.dev/docs/test-configuration.
*/ */
export default defineConfig({ export default defineConfig({
testDir: './e2e', testDir: './e2e',
/* Maximum time one test can run for. */ /* Maximum time one test can run for. */
timeout: 30 * 1000, timeout: 30 * 1000,
expect: { expect: {
/** /**
* Maximum time expect() should wait for the condition to be met. * Maximum time expect() should wait for the condition to be met.
* For example in `await expect(locator).toHaveText();` * For example in `await expect(locator).toHaveText();`
*/ */
timeout: 5000, 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'],
},
}, },
{ /* Fail the build on CI if you accidentally left test.only in the source code. */
name: 'firefox', forbidOnly: Boolean(process.env.CI),
use: { /* Retry on CI only */
...devices['Desktop Firefox'], 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 */
name: 'webkit', reporter: 'html',
use: { /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
...devices['Desktop Safari'], 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. */ /* Configure projects for major browsers */
// { projects: [
// name: 'Mobile Chrome', {
// use: { name: 'chromium',
// ...devices['Pixel 5'], use: {
// }, ...devices['Desktop Chrome'],
// }, },
// { },
// name: 'Mobile Safari', {
// use: { name: 'firefox',
// ...devices['iPhone 12'], use: {
// }, ...devices['Desktop Firefox'],
// }, },
},
{
name: 'webkit',
use: {
...devices['Desktop Safari'],
},
},
/* Test against branded browsers. */ /* Test against mobile viewports. */
// { // {
// name: 'Microsoft Edge', // Name: 'Mobile Chrome',
// use: { // Use: {
// channel: 'msedge', // ...devices['Pixel 5'],
// }, // },
// }, // },
// { // {
// name: 'Google Chrome', // Name: 'Mobile Safari',
// use: { // Use: {
// channel: 'chrome', // ...devices['iPhone 12'],
// }, // },
// }, // },
],
/* Folder for test artifacts such as screenshots, videos, traces, etc. */ /* Test against branded browsers. */
// outputDir: 'test-results/', // {
// Name: 'Microsoft Edge',
// Use: {
// Channel: 'msedge',
// },
// },
// {
// Name: 'Google Chrome',
// Use: {
// Channel: 'chrome',
// },
// },
],
/* Run your local dev server before starting the tests */ /* Folder for test artifacts such as screenshots, videos, traces, etc. */
webServer: { // OutputDir: 'test-results/',
/**
* Use the dev server by default for faster feedback loop. /* Run your local dev server before starting the tests */
* Use the preview server on CI for more realistic testing. webServer: {
* Playwright will re-use the local server if there is already a dev-server running. /**
*/ * Use the dev server by default for faster feedback loop.
command: process.env.CI ? 'npm run preview' : 'npm run dev', * Use the preview server on CI for more realistic testing.
port: process.env.CI ? 4173 : 5173, * Playwright will re-use the local server if there is already a dev-server running.
reuseExistingServer: !process.env.CI, */
}, command: process.env.CI ? 'npm run preview' : 'npm run dev',
}) port: process.env.CI ? 4173 : 5173,
reuseExistingServer: !process.env.CI,
},
});

132
frontend/src/App.vue
View file

@ -1,85 +1,91 @@
<script setup lang="ts"> <script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router' import { RouterLink, RouterView } from "vue-router";
import HelloWorld from './components/HelloWorld.vue' import HelloWorld from "./components/HelloWorld.vue";
</script> </script>
<template> <template>
<header> <header>
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" /> <img
alt="Vue logo"
class="logo"
src="@/assets/logo.svg"
width="125"
height="125"
/>
<div class="wrapper"> <div class="wrapper">
<HelloWorld msg="You did it!" /> <HelloWorld msg="You did it!" />
<nav> <nav>
<RouterLink to="/">Home</RouterLink> <RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink> <RouterLink to="/about">About</RouterLink>
</nav> </nav>
</div> </div>
</header> </header>
<RouterView /> <RouterView />
</template> </template>
<style scoped> <style scoped>
header { header {
line-height: 1.5; line-height: 1.5;
max-height: 100vh; max-height: 100vh;
} }
.logo { .logo {
display: block; display: block;
margin: 0 auto 2rem; margin: 0 auto 2rem;
} }
nav { nav {
width: 100%; width: 100%;
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
margin-top: 2rem; margin-top: 2rem;
} }
nav a.router-link-exact-active { nav a.router-link-exact-active {
color: var(--color-text); color: var(--color-text);
} }
nav a.router-link-exact-active:hover { nav a.router-link-exact-active:hover {
background-color: transparent; background-color: transparent;
} }
nav a { nav a {
display: inline-block; display: inline-block;
padding: 0 1rem; padding: 0 1rem;
border-left: 1px solid var(--color-border); border-left: 1px solid var(--color-border);
} }
nav a:first-of-type { nav a:first-of-type {
border: 0; border: 0;
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
header { header {
display: flex; display: flex;
place-items: center; place-items: center;
padding-right: calc(var(--section-gap) / 2); padding-right: calc(var(--section-gap) / 2);
} }
.logo { .logo {
margin: 0 2rem 0 0; margin: 0 2rem 0 0;
} }
header .wrapper { header .wrapper {
display: flex; display: flex;
place-items: flex-start; place-items: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
} }
nav { nav {
text-align: left; text-align: left;
margin-left: -1rem; margin-left: -1rem;
font-size: 1rem; font-size: 1rem;
padding: 1rem 0; padding: 1rem 0;
margin-top: 1rem; margin-top: 1rem;
} }
} }
</style> </style>

118
frontend/src/assets/base.css
View file

@ -1,86 +1,86 @@
/* color palette from <https://github.com/vuejs/theme> */ /* color palette from <https://github.com/vuejs/theme> */
:root { :root {
--vt-c-white: #ffffff; --vt-c-white: #ffffff;
--vt-c-white-soft: #f8f8f8; --vt-c-white-soft: #f8f8f8;
--vt-c-white-mute: #f2f2f2; --vt-c-white-mute: #f2f2f2;
--vt-c-black: #181818; --vt-c-black: #181818;
--vt-c-black-soft: #222222; --vt-c-black-soft: #222222;
--vt-c-black-mute: #282828; --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-1: rgba(60, 60, 60, 0.29);
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12); --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-1: rgba(84, 84, 84, 0.65);
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
--vt-c-text-light-1: var(--vt-c-indigo); --vt-c-text-light-1: var(--vt-c-indigo);
--vt-c-text-light-2: rgba(60, 60, 60, 0.66); --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
--vt-c-text-dark-1: var(--vt-c-white); --vt-c-text-dark-1: var(--vt-c-white);
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64); --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
} }
/* semantic color variables for this project */ /* semantic color variables for this project */
:root { :root {
--color-background: var(--vt-c-white); --color-background: var(--vt-c-white);
--color-background-soft: var(--vt-c-white-soft); --color-background-soft: var(--vt-c-white-soft);
--color-background-mute: var(--vt-c-white-mute); --color-background-mute: var(--vt-c-white-mute);
--color-border: var(--vt-c-divider-light-2); --color-border: var(--vt-c-divider-light-2);
--color-border-hover: var(--vt-c-divider-light-1); --color-border-hover: var(--vt-c-divider-light-1);
--color-heading: var(--vt-c-text-light-1); --color-heading: var(--vt-c-text-light-1);
--color-text: 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) { @media (prefers-color-scheme: dark) {
:root { :root {
--color-background: var(--vt-c-black); --color-background: var(--vt-c-black);
--color-background-soft: var(--vt-c-black-soft); --color-background-soft: var(--vt-c-black-soft);
--color-background-mute: var(--vt-c-black-mute); --color-background-mute: var(--vt-c-black-mute);
--color-border: var(--vt-c-divider-dark-2); --color-border: var(--vt-c-divider-dark-2);
--color-border-hover: var(--vt-c-divider-dark-1); --color-border-hover: var(--vt-c-divider-dark-1);
--color-heading: var(--vt-c-text-dark-1); --color-heading: var(--vt-c-text-dark-1);
--color-text: var(--vt-c-text-dark-2); --color-text: var(--vt-c-text-dark-2);
} }
} }
*, *,
*::before, *::before,
*::after { *::after {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
font-weight: normal; font-weight: normal;
} }
body { body {
min-height: 100vh; min-height: 100vh;
color: var(--color-text); color: var(--color-text);
background: var(--color-background); background: var(--color-background);
transition: transition:
color 0.5s, color 0.5s,
background-color 0.5s; background-color 0.5s;
line-height: 1.6; line-height: 1.6;
font-family: font-family:
Inter, Inter,
-apple-system, -apple-system,
BlinkMacSystemFont, BlinkMacSystemFont,
'Segoe UI', "Segoe UI",
Roboto, Roboto,
Oxygen, Oxygen,
Ubuntu, Ubuntu,
Cantarell, Cantarell,
'Fira Sans', "Fira Sans",
'Droid Sans', "Droid Sans",
'Helvetica Neue', "Helvetica Neue",
sans-serif; sans-serif;
font-size: 15px; font-size: 15px;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }

42
frontend/src/assets/main.css
View file

@ -1,35 +1,35 @@
@import './base.css'; @import "./base.css";
#app { #app {
max-width: 1280px; max-width: 1280px;
margin: 0 auto; margin: 0 auto;
padding: 2rem; padding: 2rem;
font-weight: normal; font-weight: normal;
} }
a, a,
.green { .green {
text-decoration: none; text-decoration: none;
color: hsla(160, 100%, 37%, 1); color: hsla(160, 100%, 37%, 1);
transition: 0.4s; transition: 0.4s;
padding: 3px; padding: 3px;
} }
@media (hover: hover) { @media (hover: hover) {
a:hover { a:hover {
background-color: hsla(160, 100%, 37%, 0.2); background-color: hsla(160, 100%, 37%, 0.2);
} }
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
body { body {
display: flex; display: flex;
place-items: center; place-items: center;
} }
#app { #app {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
padding: 0 2rem; padding: 0 2rem;
} }
} }

71
frontend/src/components/HelloWorld.vue
View file

@ -1,41 +1,52 @@
<script setup lang="ts"> <script setup lang="ts">
defineProps<{ defineProps<{
msg: string msg: string;
}>() }>();
</script> </script>
<template> <template>
<div class="greetings"> <div class="greetings">
<h1 class="green">{{ msg }}</h1> <h1 class="green">{{ msg }}</h1>
<h3> <h3>
You’ve successfully created a project with You’ve successfully created a project with
<a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> + <a
<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next? href="https://vite.dev/"
</h3> target="_blank"
</div> rel="noopener"
>Vite</a
>
+
<a
href="https://vuejs.org/"
target="_blank"
rel="noopener"
>Vue 3</a
>. What's next?
</h3>
</div>
</template> </template>
<style scoped> <style scoped>
h1 { h1 {
font-weight: 500; font-weight: 500;
font-size: 2.6rem; font-size: 2.6rem;
position: relative; position: relative;
top: -10px; top: -10px;
} }
h3 { h3 {
font-size: 1.2rem; font-size: 1.2rem;
} }
.greetings h1, .greetings h1,
.greetings h3 { .greetings h3 {
text-align: center; text-align: center;
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
.greetings h1, .greetings h1,
.greetings h3 { .greetings h3 {
text-align: left; text-align: left;
} }
} }
</style> </style>

238
frontend/src/components/TheWelcome.vue
View file

@ -1,94 +1,178 @@
<script setup lang="ts"> <script setup lang="ts">
import WelcomeItem from './WelcomeItem.vue' import WelcomeItem from "./WelcomeItem.vue";
import DocumentationIcon from './icons/IconDocumentation.vue' import DocumentationIcon from "./icons/IconDocumentation.vue";
import ToolingIcon from './icons/IconTooling.vue' import ToolingIcon from "./icons/IconTooling.vue";
import EcosystemIcon from './icons/IconEcosystem.vue' import EcosystemIcon from "./icons/IconEcosystem.vue";
import CommunityIcon from './icons/IconCommunity.vue' import CommunityIcon from "./icons/IconCommunity.vue";
import SupportIcon from './icons/IconSupport.vue' import SupportIcon from "./icons/IconSupport.vue";
const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md') function openReadmeInEditor() {
return fetch("/__open-in-editor?file=README.md");
}
</script> </script>
<template> <template>
<WelcomeItem> <WelcomeItem>
<template #icon> <template #icon>
<DocumentationIcon /> <DocumentationIcon />
</template> </template>
<template #heading>Documentation</template> <template #heading>Documentation</template>
Vue’s Vue’s
<a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a> <a
provides you with all information you need to get started. href="https://vuejs.org/"
</WelcomeItem> target="_blank"
rel="noopener"
>official documentation</a
>
provides you with all information you need to get started.
</WelcomeItem>
<WelcomeItem> <WelcomeItem>
<template #icon> <template #icon>
<ToolingIcon /> <ToolingIcon />
</template> </template>
<template #heading>Tooling</template> <template #heading>Tooling</template>
This project is served and bundled with This project is served and bundled with
<a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The <a
recommended IDE setup is href="https://vite.dev/guide/features.html"
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> target="_blank"
+ rel="noopener"
<a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If >Vite</a
you need to test your components and web pages, check out >. The recommended IDE setup is
<a href="https://vitest.dev/" target="_blank" rel="noopener">Vitest</a> <a
and href="https://code.visualstudio.com/"
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> target="_blank"
/ rel="noopener"
<a href="https://playwright.dev/" target="_blank" rel="noopener">Playwright</a>. >VSCode</a
>
+
<a
href="https://github.com/johnsoncodehk/volar"
target="_blank"
rel="noopener"
>Volar</a
>. If you need to test your components and web pages, check out
<a
href="https://vitest.dev/"
target="_blank"
rel="noopener"
>Vitest</a
>
and
<a
href="https://www.cypress.io/"
target="_blank"
rel="noopener"
>Cypress</a
>
/
<a
href="https://playwright.dev/"
target="_blank"
rel="noopener"
>Playwright</a
>.
<br /> <br />
More instructions are available in More instructions are available in
<a href="javascript:void(0)" @click="openReadmeInEditor"><code>README.md</code></a <a
>. href="javascript:void(0)"
</WelcomeItem> @click="openReadmeInEditor"
><code>README.md</code></a
>.
</WelcomeItem>
<WelcomeItem> <WelcomeItem>
<template #icon> <template #icon>
<EcosystemIcon /> <EcosystemIcon />
</template> </template>
<template #heading>Ecosystem</template> <template #heading>Ecosystem</template>
Get official tools and libraries for your project: Get official tools and libraries for your project:
<a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>, <a
<a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>, href="https://pinia.vuejs.org/"
<a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and target="_blank"
<a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If rel="noopener"
you need more resources, we suggest paying >Pinia</a
<a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a> >,
a visit. <a
</WelcomeItem> href="https://router.vuejs.org/"
target="_blank"
rel="noopener"
>Vue Router</a
>,
<a
href="https://test-utils.vuejs.org/"
target="_blank"
rel="noopener"
>Vue Test Utils</a
>, and
<a
href="https://github.com/vuejs/devtools"
target="_blank"
rel="noopener"
>Vue Dev Tools</a
>. If you need more resources, we suggest paying
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
rel="noopener"
>Awesome Vue</a
>
a visit.
</WelcomeItem>
<WelcomeItem> <WelcomeItem>
<template #icon> <template #icon>
<CommunityIcon /> <CommunityIcon />
</template> </template>
<template #heading>Community</template> <template #heading>Community</template>
Got stuck? Ask your question on Got stuck? Ask your question on
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a> <a
(our official Discord server), or href="https://chat.vuejs.org"
<a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener" target="_blank"
>StackOverflow</a rel="noopener"
>. You should also follow the official >Vue Land</a
<a href="https://bsky.app/profile/vuejs.org" target="_blank" rel="noopener">@vuejs.org</a> >
Bluesky account or the (our official Discord server), or
<a href="https://x.com/vuejs" target="_blank" rel="noopener">@vuejs</a> <a
X account for latest news in the Vue world. href="https://stackoverflow.com/questions/tagged/vue.js"
</WelcomeItem> target="_blank"
rel="noopener"
>StackOverflow</a
>. You should also follow the official
<a
href="https://bsky.app/profile/vuejs.org"
target="_blank"
rel="noopener"
>@vuejs.org</a
>
Bluesky account or the
<a
href="https://x.com/vuejs"
target="_blank"
rel="noopener"
>@vuejs</a
>
X account for latest news in the Vue world.
</WelcomeItem>
<WelcomeItem> <WelcomeItem>
<template #icon> <template #icon>
<SupportIcon /> <SupportIcon />
</template> </template>
<template #heading>Support Vue</template> <template #heading>Support Vue</template>
As an independent project, Vue relies on community backing for its sustainability. You can help As an independent project, Vue relies on community backing for its sustainability. You can help us by
us by <a
<a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>. href="https://vuejs.org/sponsor/"
</WelcomeItem> target="_blank"
rel="noopener"
>becoming a sponsor</a
>.
</WelcomeItem>
</template> </template>

142
frontend/src/components/WelcomeItem.vue
View file

@ -1,87 +1,87 @@
<template> <template>
<div class="item"> <div class="item">
<i> <i>
<slot name="icon"></slot> <slot name="icon"></slot>
</i> </i>
<div class="details"> <div class="details">
<h3> <h3>
<slot name="heading"></slot> <slot name="heading"></slot>
</h3> </h3>
<slot></slot> <slot></slot>
</div>
</div> </div>
</div>
</template> </template>
<style scoped> <style scoped>
.item { .item {
margin-top: 2rem; margin-top: 2rem;
display: flex; display: flex;
position: relative; position: relative;
} }
.details { .details {
flex: 1; flex: 1;
margin-left: 1rem; margin-left: 1rem;
} }
i { i {
display: flex; display: flex;
place-items: center; place-items: center;
place-content: center; place-content: center;
width: 32px; width: 32px;
height: 32px; height: 32px;
color: var(--color-text); color: var(--color-text);
} }
h3 { h3 {
font-size: 1.2rem; font-size: 1.2rem;
font-weight: 500; font-weight: 500;
margin-bottom: 0.4rem; margin-bottom: 0.4rem;
color: var(--color-heading); color: var(--color-heading);
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
.item { .item {
margin-top: 0; margin-top: 0;
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2); padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
} }
i { i {
top: calc(50% - 25px); top: calc(50% - 25px);
left: -26px; left: -26px;
position: absolute; position: absolute;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
background: var(--color-background); background: var(--color-background);
border-radius: 8px; border-radius: 8px;
width: 50px; width: 50px;
height: 50px; height: 50px;
} }
.item:before { .item:before {
content: ' '; content: " ";
border-left: 1px solid var(--color-border); border-left: 1px solid var(--color-border);
position: absolute; position: absolute;
left: 0; left: 0;
bottom: calc(50% + 25px); bottom: calc(50% + 25px);
height: calc(50% - 25px); height: calc(50% - 25px);
} }
.item:after { .item:after {
content: ' '; content: " ";
border-left: 1px solid var(--color-border); border-left: 1px solid var(--color-border);
position: absolute; position: absolute;
left: 0; left: 0;
top: calc(50% + 25px); top: calc(50% + 25px);
height: calc(50% - 25px); height: calc(50% - 25px);
} }
.item:first-of-type:before { .item:first-of-type:before {
display: none; display: none;
} }
.item:last-of-type:after { .item:last-of-type:after {
display: none; display: none;
} }
} }
</style> </style>

18
frontend/src/components/__tests__/HelloWorld.spec.ts
View file

@ -1,11 +1,11 @@
import { describe, it, expect } from 'vitest' import { describe, it, expect } from "vitest";
import { mount } from '@vue/test-utils' import { mount } from "@vue/test-utils";
import HelloWorld from '../HelloWorld.vue' import HelloWorld from "../HelloWorld.vue";
describe('HelloWorld', () => { describe("HelloWorld", () => {
it('renders properly', () => { it("renders properly", () => {
const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } }) const wrapper = mount(HelloWorld, { props: { msg: "Hello Vitest" } });
expect(wrapper.text()).toContain('Hello Vitest') expect(wrapper.text()).toContain("Hello Vitest");
}) });
}) });

15
frontend/src/components/icons/IconCommunity.vue
View file

@ -1,7 +1,12 @@
<template> <template>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"> <svg
<path xmlns="http://www.w3.org/2000/svg"
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z" width="20"
/> height="20"
</svg> fill="currentColor"
>
<path
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
/>
</svg>
</template> </template>

15
frontend/src/components/icons/IconDocumentation.vue
View file

@ -1,7 +1,12 @@
<template> <template>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor"> <svg
<path xmlns="http://www.w3.org/2000/svg"
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z" width="20"
/> height="17"
</svg> fill="currentColor"
>
<path
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
/>
</svg>
</template> </template>

15
frontend/src/components/icons/IconEcosystem.vue
View file

@ -1,7 +1,12 @@
<template> <template>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor"> <svg
<path xmlns="http://www.w3.org/2000/svg"
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z" width="18"
/> height="20"
</svg> fill="currentColor"
>
<path
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
/>
</svg>
</template> </template>

15
frontend/src/components/icons/IconSupport.vue
View file

@ -1,7 +1,12 @@
<template> <template>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"> <svg
<path xmlns="http://www.w3.org/2000/svg"
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z" width="20"
/> height="20"
</svg> fill="currentColor"
>
<path
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
/>
</svg>
</template> </template>

32
frontend/src/components/icons/IconTooling.vue
View file

@ -1,19 +1,19 @@
<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license--> <!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
<template> <template>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" aria-hidden="true"
role="img" role="img"
class="iconify iconify--mdi" class="iconify iconify--mdi"
width="24" width="24"
height="24" height="24"
preserveAspectRatio="xMidYMid meet" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 24 24" viewBox="0 0 24 24"
> >
<path <path
d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z" d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
fill="currentColor" fill="currentColor"
></path> ></path>
</svg> </svg>
</template> </template>

22
frontend/src/main.ts
View file

@ -1,24 +1,24 @@
import './assets/main.css' import "./assets/main.css";
import { createApp } from 'vue'; import { createApp } from "vue";
// Vuetify // Vuetify
import 'vuetify/styles'; import "vuetify/styles";
import { createVuetify } from 'vuetify'; import { createVuetify } from "vuetify";
import * as components from 'vuetify/components'; import * as components from "vuetify/components";
import * as directives from 'vuetify/directives'; import * as directives from "vuetify/directives";
// Components // Components
import App from './App.vue' import App from "./App.vue";
import router from './router' import router from "./router";
const app = createApp(App); const app = createApp(App);
app.use(router); app.use(router);
const vuetify = createVuetify({ const vuetify = createVuetify({
components, components,
directives, directives,
}); });
app.use(vuetify); app.use(vuetify);
app.mount('#app'); app.mount("#app");

42
frontend/src/router/index.ts
View file

@ -1,23 +1,25 @@
import { createRouter, createWebHistory } from 'vue-router' import { createRouter, createWebHistory } from "vue-router";
import HomeView from '../views/HomeView.vue' import HomeView from "../views/HomeView.vue";
const router = createRouter({ const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), history: createWebHistory(import.meta.env.BASE_URL),
routes: [ routes: [
{ {
path: '/', path: "/",
name: 'home', name: "home",
component: HomeView, component: HomeView,
}, },
{ {
path: '/about', path: "/about",
name: 'about', name: "about",
// route level code-splitting // Route level code-splitting
// this generates a separate chunk (About.[hash].js) for this route // This generates a separate chunk (About.[hash].js) for this route
// which is lazy-loaded when the route is visited. // Which is lazy-loaded when the route is visited.
component: () => import('../views/AboutView.vue'), component: () => {
}, return import("../views/AboutView.vue");
], },
}) },
],
});
export default router export default router;

22
frontend/src/views/AboutView.vue
View file

@ -1,16 +1,16 @@
<template> <template>
<div class="about"> <div class="about">
<h1>This is an about page</h1> <h1>This is an about page</h1>
<v-slider></v-slider> <v-slider></v-slider>
</div> </div>
</template> </template>
<style> <style>
@media (min-width: 1024px) { @media (min-width: 1024px) {
.about { .about {
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
align-items: center; align-items: center;
} }
} }
</style> </style>

8
frontend/src/views/HomeView.vue
View file

@ -1,9 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import TheWelcome from '../components/TheWelcome.vue' import TheWelcome from "../components/TheWelcome.vue";
</script> </script>
<template> <template>
<main> <main>
<TheWelcome /> <TheWelcome />
</main> </main>
</template> </template>

23
frontend/vite.config.ts
View file

@ -1,18 +1,15 @@
import { fileURLToPath, URL } from 'node:url' import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite' import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue' import vue from '@vitejs/plugin-vue';
import vueDevTools from 'vite-plugin-vue-devtools' import vueDevTools from 'vite-plugin-vue-devtools';
// https://vite.dev/config/ // https://vite.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [vue(), vueDevTools()],
vue(), resolve: {
vueDevTools(), alias: {
], '@': fileURLToPath(new URL('./src', import.meta.url)),
resolve: { },
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}, },
}, });
})