init

2026-05-17 13:33:10 +02:00
parent b2cefb7d66
commit fed75d4820
54 changed files with 3845 additions and 51 deletions
@@ -0,0 +1 @@
+node_modules/
@@ -0,0 +1,4 @@
+# Project Rules
+
+## General
+- Follow the existing code style and patterns.
@@ -0,0 +1,11 @@
+# For a complete example, see: https://okigu.com/ruler#complete-example
+
+# List of agents to configure
+default_agents = ["copilot", "claude", "trae"]
+
+[mcp_servers.vuetify]
+url = "https://mcp.vuetifyjs.com/mcp"
+
+# https://github.com/vuetifyjs/mcp#authentication
+# [mcp_servers.vuetify.headers]
+# Authorization = "Bearer <YOUR_API_KEY>"
@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    "vuetifyjs.vuetify-vscode",
+    "vue.volar"
+  ]
+}
@@ -0,0 +1,11 @@
+# Project Rules
+
+## General
+- Follow the existing code style and patterns.
+- Use yarn for running project commands.
+- Keep code in TypeScript unless migration is required.
+
+## Stack
+- Framework: Vue 3 + Vite
+- UI Library: Vuetify
+- Enabled Features: ESLint, Vuetify MCP, Pinia, Vue I18n, Vue Router
@@ -0,0 +1,83 @@
+# oxspeak-frontend
+
+Scaffolded with Vuetify CLI.
+
+## ❗️ Documentation
+
+- Primary docs: https://vuetifyjs.com/
+- Getting started guide: https://vuetifyjs.com/en/getting-started/installation/
+- Community support: https://community.vuetifyjs.com/
+- Issue tracker: https://issues.vuetifyjs.com/
+
+## 🧱 Stack
+
+- Framework: Vue 3 + Vite
+- UI Library: Vuetify
+- Language: TypeScript
+- Package manager: yarn
+
+## 🧭 Start Here
+
+- Main entry: `src/main.ts`
+- Main app component: `src/App.vue`
+- Main styles: `src/styles/`
+- Plugin setup: `src/plugins/`
+
+## 📁 Project Structure
+
+- `src/main.ts` — application entry point
+- `src/App.vue` — root component
+- `src/components/` — reusable Vue components
+- `src/plugins/` — plugin registration and setup
+- `src/styles/` — global styles and theme settings
+- `public/` — static public files
+
+## ✨ Enabled Features
+
+- ESLint
+- Vuetify MCP
+- Pinia
+- Vue I18n
+- Vue Router
+
+## 💿 Install
+
+Use your selected package manager (yarn) to install dependencies:
+
+```bash
+yarn install
+```
+
+## 🚀 Quick Start
+
+```bash
+yarn install
+yarn dev
+```
+
+## 🏗️ Build
+
+```bash
+yarn build
+```
+
+## 🧪 Available Scripts
+
+- `yarn dev`
+- `yarn build`
+- `yarn preview`
+- `yarn build-only`
+- `yarn type-check`
+- `yarn lint`
+- `yarn lint:fix`
+- `yarn mcp`
+- `yarn mcp:revert`
+
+## 💪 Support Vuetify Development
+
+This project uses Vuetify - an MIT licensed Open Source project. We are glad to welcome contributors and any support for ongoing development:
+
+- Contribute to Vuetify and ecosystem projects: https://github.com/vuetifyjs
+- Request enterprise support: https://support.vuetifyjs.com/
+- Sponsor on GitHub: https://github.com/sponsors/vuetifyjs
+- Support on Open Collective: https://opencollective.com/vuetify
@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-vue-layouts-next/client" />
@@ -0,0 +1,5 @@
+import vuetify from 'eslint-config-vuetify'
+
+export default vuetify({
+  ts: true,
+})
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Welcome to Vuetify 4</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
@@ -0,0 +1,47 @@
+{
+  "name": "oxspeak-frontend",
+  "private": true,
+  "type": "module",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build --force",
+    "lint": "eslint",
+    "lint:fix": "eslint --fix",
+    "mcp": "ruler apply",
+    "mcp:revert": "ruler revert"
+  },
+  "dependencies": {
+    "@fontsource/roboto": "^5.2.10",
+    "@mdi/font": "7.4.47",
+    "vue": "^3.5.30",
+    "vuetify": "^4.0.2",
+    "pinia": "^3.0.4",
+    "vue-i18n": "^11.3.0",
+    "vue-router": "^5.0.3"
+  },
+  "devDependencies": {
+    "@tsconfig/node22": "^22.0.5",
+    "@types/node": "^24.12.0",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "@vue/tsconfig": "^0.9.0",
+    "npm-run-all2": "^8.0.4",
+    "sass-embedded": "^1.98.0",
+    "typescript": "~5.9.3",
+    "unplugin-fonts": "^1.4.0",
+    "vite": "^8.0.0",
+    "vite-plugin-vuetify": "^2.1.3",
+    "vue-tsc": "^3.2.5",
+    "eslint": "^9.39.4",
+    "eslint-config-vuetify": "^4.3.4",
+    "@intellectronica/ruler": "^0.3.37"
+  },
+  "overrides": {
+    "unplugin-fonts": {
+      "vite": "^8.0.0"
+    }
+  }
+}
@@ -0,0 +1,11 @@
+<template>
+  <v-app>
+    <v-main>
+      <router-view />
+    </v-main>
+  </v-app>
+</template>
+
+<script lang="ts" setup>
+  //
+</script>
@@ -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>
@@ -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>
@@ -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>
+```
@@ -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')
@@ -0,0 +1,7 @@
+<template>
+  <HelloWorld />
+</template>
+
+<script lang="ts" setup>
+  import HelloWorld from '@/components/HelloWorld.vue'
+</script>
@@ -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.
@@ -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,
+})
@@ -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);
+}
@@ -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',
+  },
+})
@@ -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
@@ -0,0 +1,8 @@
+// Utilities
+import { defineStore } from 'pinia'
+
+export const useAppStore = defineStore('app', {
+  state: () => ({
+    //
+  }),
+})
@@ -0,0 +1,3 @@
+# Styles
+
+This directory is for configuring the styles of the application.
@@ -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
+// );
@@ -0,0 +1,27 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": [
+    "env.d.ts",
+    "src/**/*",
+    "src/**/*.vue"
+  ],
+  "exclude": [
+    "src/**/__tests__/*"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "vueCompilerOptions": {
+    "plugins": [
+      "vue-router/volar/sfc-typed-router",
+      "vue-router/volar/sfc-route-blocks"
+    ]
+  }
+}
@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}
@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/node22/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}
@@ -0,0 +1,50 @@
+import { fileURLToPath, URL } from 'node:url'
+import Vue from '@vitejs/plugin-vue'
+import Fonts from 'unplugin-fonts/vite'
+import { defineConfig } from 'vite'
+import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    Vue({
+      template: { transformAssetUrls },
+    }),
+    // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
+    Vuetify({
+      autoImport: true,
+      styles: {
+        configFile: 'src/styles/settings.scss',
+      },
+    }),
+    Fonts({
+      fontsource: {
+        families: [
+          {
+            name: 'Roboto',
+            weights: [100, 300, 400, 500, 700, 900],
+            styles: ['normal', 'italic'],
+          },
+        ],
+      },
+    }),
+  ],
+  define: { 'process.env': {} },
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('src', import.meta.url)),
+    },
+    extensions: [
+      '.js',
+      '.json',
+      '.jsx',
+      '.mjs',
+      '.ts',
+      '.tsx',
+      '.vue',
+    ],
+  },
+  server: {
+    port: 3000,
+  },
+})