🎉 Initial template frontend setup (#1)

* Initial frontend setup

* Adapt template to home cert manager

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/components/Home.vue

@@ -0,0 +1,84 @@
+<template>
+  <v-container class="fill-height">
+    <v-responsive
+      class="align-centerfill-height mx-auto"
+      max-width="900"
+    >
+      <div class="text-center">
+        <div class="text-body-2 font-weight-light mb-n1">Welcome to</div>
+        <h1 class="text-h2 font-weight-bold">home-cert-manager</h1>
+      </div>
+
+      <div class="py-4" />
+
+      <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"
+            prepend-icon="mdi-rocket-launch-outline"
+            rounded="lg"
+            variant="outlined"
+          >
+            <template #image>
+              <v-img position="top right" />
+            </template>
+
+            <template #title>
+              <h2 class="text-h5 font-weight-bold">Get started</h2>
+            </template>
+          </v-card>
+        </v-col>
+
+        <v-col cols="6">
+          <v-card
+            class="py-4"
+            color="surface-variant"
+            prepend-icon="mdi-certificate"
+            rounded="lg"
+            title="Manage your certificates"
+            variant="text"
+          />
+        </v-col>
+
+        <v-col cols="6">
+          <v-card
+            class="py-4"
+            color="surface-variant"
+            prepend-icon="mdi-home-lock"
+            rounded="lg"
+            title="Secure your home lab"
+            variant="text"
+          />
+        </v-col>
+
+        <v-col cols="6">
+          <v-card
+            class="py-4"
+            color="surface-variant"
+            prepend-icon="mdi-domain"
+            rounded="lg"
+            title="Domain management"
+            variant="text"
+          />
+        </v-col>
+
+        <v-col cols="6">
+          <v-card
+            class="py-4"
+            color="surface-variant"
+            prepend-icon="mdi-web"
+            rounded="lg"
+            title="Internet certificate support"
+            variant="text"
+          />
+        </v-col>
+      </v-row>
+    </v-responsive>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+  //
+</script>

frontend/src/main.ts

@@ -0,0 +1,11 @@
+import { registerPlugins } from '@/plugins'
+
+import App from './App.vue'
+
+import { createApp } from 'vue'
+
+const app = createApp(App)
+
+registerPlugins(app)
+
+app.mount('#app')

frontend/src/pages/index.vue

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

frontend/src/plugins/index.ts

@@ -0,0 +1,10 @@
+import vuetify from './vuetify'
+import router from '../router'
+
+import type { App } from 'vue'
+
+export function registerPlugins (app: App) {
+  app
+    .use(vuetify)
+    .use(router)
+}

frontend/src/plugins/vuetify.ts

@@ -0,0 +1,10 @@
+import '@mdi/font/css/materialdesignicons.css'
+import 'vuetify/styles'
+
+import { createVuetify } from 'vuetify'
+
+export default createVuetify({
+  theme: {
+    defaultTheme: 'dark',
+  },
+})

frontend/src/router/index.ts

@@ -0,0 +1,28 @@
+import { createRouter, createWebHistory } from 'vue-router/auto'
+import { routes } from 'vue-router/auto-routes'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes,
+})
+
+// Workaround for https://github.com/vitejs/vite/issues/11804
+router.onError((err, to) => {
+  if (err?.message?.includes?.('Failed to fetch dynamically imported module')) {
+    if (!localStorage.getItem('vuetify:dynamic-reload')) {
+      console.log('Reloading page to fix dynamic import error')
+      localStorage.setItem('vuetify:dynamic-reload', 'true')
+      location.assign(to.fullPath)
+    } else {
+      console.error('Dynamic import error, reloading page did not fix it', err)
+    }
+  } else {
+    console.error(err)
+  }
+})
+
+router.isReady().then(() => {
+  localStorage.removeItem('vuetify:dynamic-reload')
+})
+
+export default router

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
+// );