init

frontend/src/App.vue

@@ -0,0 +1,11 @@
+<template>
+  <v-app>
+    <v-main>
+      <router-view />
+    </v-main>
+  </v-app>
+</template>
+
+<script lang="ts" setup>
+  //
+</script>

frontend/src/assets/logo.svg

@@ -0,0 +1,6 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M261.126 140.65L164.624 307.732L256.001 466L377.028 256.5L498.001 47H315.192L261.126 140.65Z" fill="#1697F6"/>
+<path d="M135.027 256.5L141.365 267.518L231.64 111.178L268.731 47H256H14L135.027 256.5Z" fill="#AEDDFF"/>
+<path d="M315.191 47C360.935 197.446 256 466 256 466L164.624 307.732L315.191 47Z" fill="#1867C0"/>
+<path d="M268.731 47C76.0026 47 141.366 267.518 141.366 267.518L268.731 47Z" fill="#7BC6FF"/>
+</svg>

frontend/src/components/HelloWorld.vue

@@ -0,0 +1,102 @@
+<template>
+  <v-container class="fill-height d-flex flex-column justify-center" max-width="1100">
+    <div>
+      <v-img
+        class="mb-4 font-weight-bold"
+        height="150"
+        src="@/assets/logo.png"
+      />
+
+      <div class="mb-8 text-center">
+        <div class="text-body-medium font-weight-light mb-n1">Welcome to</div>
+        <div class="text-display-medium font-weight-bold">Vuetify</div>
+      </div>
+
+      <v-row>
+        <v-col cols="12">
+          <v-card
+            class="py-4"
+            color="surface-variant"
+            image="https://cdn.vuetifyjs.com/docs/images/one/create/feature.png"
+            rounded="lg"
+            variant="tonal"
+          >
+            <template #prepend>
+              <v-avatar class="ml-2 mr-4" icon="mdi-rocket-launch-outline" size="60" variant="tonal"/>
+            </template>
+
+            <template #image>
+              <v-img position="top right"/>
+            </template>
+
+            <template #title>
+              <div class="my-title my-uppercase text-headline-medium font-weight-bold">Get started</div>
+            </template>
+
+            <template #subtitle>
+              <div class="text-body-large">
+                Change this page by updating
+                <v-kbd>{{
+                    `
+                  <HelloWorld/>
+                  ` }}
+                </v-kbd>
+                in
+                <v-kbd>components/HelloWorld.vue</v-kbd>
+                .
+              </div>
+            </template>
+          </v-card>
+        </v-col>
+
+        <v-col v-for="link in links" :key="link.href" cols="6">
+          <v-card
+            :href="link.href"
+            :subtitle="link.subtitle"
+            :title="link.title"
+            append-icon="mdi-open-in-new"
+            class="py-4"
+            color="surface-variant"
+            rel="noopener noreferrer"
+            rounded="lg"
+            target="_blank"
+            variant="tonal"
+          >
+            <template #prepend>
+              <v-avatar :icon="link.icon" class="ml-2 mr-4" size="60" variant="tonal"/>
+            </template>
+          </v-card>
+        </v-col>
+      </v-row>
+    </div>
+  </v-container>
+</template>
+
+<script lang="ts" setup>
+const links = [
+  {
+    href: 'https://vuetifyjs.com/',
+    icon: 'mdi-text-box-outline',
+    subtitle: 'Learn about all things Vuetify in our documentation.',
+    title: 'Documentation',
+  },
+  {
+    href: 'https://vuetifyjs.com/introduction/why-vuetify/#feature-guides',
+    icon: 'mdi-star-circle-outline',
+    subtitle: 'Explore available framework Features.',
+    title: 'Features',
+  },
+  {
+    href: 'https://vuetifyjs.com/components/all',
+    icon: 'mdi-widgets-outline',
+    subtitle: 'Discover components in the API Explorer.',
+    title: 'Components',
+  },
+  {
+    href: 'https://discord.vuetifyjs.com',
+    icon: 'mdi-account-group-outline',
+    subtitle: 'Connect with Vuetify developers.',
+    title: 'Community',
+  },
+]
+</script>

frontend/src/components/README.md

@@ -0,0 +1,35 @@
+# Components
+
+Vue template files in this folder are automatically imported.
+
+## 🚀 Usage
+
+Importing is handled by [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components). This plugin automatically imports `.vue` files created in the `src/components` directory, and registers them as global components. This means that you can use any component in your application without having to manually import it.
+
+The following example assumes a component located at `src/components/MyComponent.vue`:
+
+```vue
+<template>
+  <div>
+    <MyComponent />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  //
+</script>
+```
+
+When your template is rendered, the component's import will automatically be inlined, which renders to this:
+
+```vue
+<template>
+  <div>
+    <MyComponent />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import MyComponent from '@/components/MyComponent.vue'
+</script>
+```

frontend/src/main.ts

@@ -0,0 +1,23 @@
+/**
+ * main.ts
+ *
+ * Bootstraps Vuetify and other plugins then mounts the App`
+ */
+
+// Composables
+import { createApp } from 'vue'
+
+// Plugins
+import { registerPlugins } from '@/plugins'
+
+// Components
+import App from './App.vue'
+
+// Styles
+import 'unfonts.css'
+
+const app = createApp(App)
+
+registerPlugins(app)
+
+app.mount('#app')

frontend/src/pages/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <HelloWorld />
+</template>
+
+<script lang="ts" setup>
+  import HelloWorld from '@/components/HelloWorld.vue'
+</script>

frontend/src/plugins/README.md

@@ -0,0 +1,3 @@
+# Plugins
+
+Plugins are a way to extend the functionality of your Vue application. Use this folder for registering plugins that you want to use globally.

frontend/src/plugins/i18n.ts

@@ -0,0 +1,21 @@
+import { createI18n } from 'vue-i18n'
+
+const messages = {
+  en: {
+    message: {
+      hello: 'hello world',
+    },
+  },
+  ja: {
+    message: {
+      hello: 'こんにちは、世界',
+    },
+  },
+}
+
+export default createI18n({
+  legacy: false,
+  locale: 'en',
+  fallbackLocale: 'en',
+  messages,
+})

frontend/src/plugins/index.ts

@@ -0,0 +1,21 @@
+import router from '../router';
+import i18n from './i18n';
+import {createPinia} from 'pinia';
+/**
+ * plugins/index.ts
+ *
+ * Automatically included in `./src/main.ts`
+ */
+
+// Types
+import type { App } from 'vue'
+
+// Plugins
+import vuetify from './vuetify'
+
+export function registerPlugins (app: App) {
+ app.use(vuetify)
+ app.use(createPinia());
+ app.use(i18n);
+ app.use(router);
+}

frontend/src/plugins/vuetify.ts

@@ -0,0 +1,19 @@
+/**
+ * plugins/vuetify.ts
+ *
+ * Framework documentation: https://vuetifyjs.com`
+ */
+
+// Composables
+import { createVuetify } from 'vuetify'
+// Styles
+import '@mdi/font/css/materialdesignicons.css'
+
+import 'vuetify/styles'
+
+// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
+export default createVuetify({
+  theme: {
+    defaultTheme: 'system',
+  },
+})

frontend/src/router/index.ts

@@ -0,0 +1,21 @@
+/**
+ * router/index.ts
+ *
+ * Manual routes for ./src/pages/*.vue
+ */
+
+// Composables
+import { createRouter, createWebHistory } from 'vue-router'
+import Index from '@/pages/index.vue'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      component: Index,
+    },
+  ],
+})
+
+export default router

frontend/src/stores/app.ts

@@ -0,0 +1,8 @@
+// Utilities
+import { defineStore } from 'pinia'
+
+export const useAppStore = defineStore('app', {
+  state: () => ({
+    //
+  }),
+})

frontend/src/styles/README.md

@@ -0,0 +1,3 @@
+# Styles
+
+This directory is for configuring the styles of the application.

frontend/src/styles/settings.scss

@@ -0,0 +1,10 @@
+/**
+ * src/styles/settings.scss
+ *
+ * Configures SASS variables and Vuetify overwrites
+ */
+
+// https://vuetifyjs.com/features/sass-variables/`
+// @use 'vuetify/settings' with (
+//   $color-pack: false
+// );