Add Short URLs Route

AGENTS.md

@@ -0,0 +1,30 @@
+# Agent Guide
+
+This is a Vue3 application that runs on GitHub Pages to collect feedback from users.
+Originally designed for Web Extension Uninstall feedback, but also used for General Feedback.
+
+- TypeScript 6 with Vue 3.5
+- Bootstrap 5.3 and FontAwesome
+
+## Project Structure
+
+### Files
+
+- `wxt.config.ts` - WXT Config and Extension Manifest
+- `src/components/FeedbackForm.vue` Feedback Form
+
+## Commands
+
+ALWAYS use the `npm run *` command NEVER pipe output into arbitrary truncation commands.
+
+| Command            | What it does                     |
+| ------------------ | -------------------------------- |
+| `npm run build`    | `npm run tsc && vite build`      |
+| `npm run lint`     | `eslint . --cache --fix` ESLint  |
+| `npm run tsc`      | `vue-tsc --noEmit` TS Check Only |
+| `npm run prettier` | ALWAYS RUN AFTER EDITING FILES   |
+
+## Follow Existing Patterns
+
+Before adding or modifying any feature, search the codebase for the closest existing implementation and follow its full integration chain.
+Do not stop after writing the core logic — trace every file that touches the feature (imports, registration, configuration, UI binding) and ensure each is accounted for.

package.json

@@ -9,6 +9,7 @@
     "dev": "vite",
     "lint": "eslint . --cache --fix",
     "lint:check": "eslint . --cache",
+    "prettier": "npm run prettier:write",
     "prettier:write": "npx prettier --write .",
     "prettier:check": "npx prettier --check .",
     "preview": "vite preview",

src/router/index.ts

@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
+import { apps } from '@/config/apps.ts'
 
 // https://router.vuejs.org/guide/
 const router = createRouter({
@@ -21,6 +22,14 @@ const router = createRouter({
       component: HomeView,
       meta: { hideHeader: true, hideFooter: true },
     },
+    {
+      // Path based app routing: /feedback/zipline-android
+      // Custom regex only matches known app ids from src/config/apps.ts
+      path: `/:appName(${Object.keys(apps).join('|')})`,
+      name: 'app',
+      component: HomeView,
+      meta: { hideHeader: true, hideFooter: true },
+    },
     {
       path: '/about',
       name: 'about',

src/views/HomeView.vue

@@ -1,15 +1,20 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted } from 'vue'
+import { useRoute } from 'vue-router'
 import { type App, apps } from '@/config/apps.ts'
 import particlesConfig from '@/assets/particles.json'
 import FeedbackForm from '@/components/FeedbackForm.vue'
 import NotFound from '@/components/NotFound.vue'
 
+const route = useRoute()
 const url = new URL(window.location.href)
 console.log('url:', url)
 const params = Object.fromEntries(url.searchParams.entries())
 console.log('params:', params)
-const app: App = apps[params['name'] as keyof typeof apps]
+// Support path based app ids (/feedback/zipline-android) or query string (?name=zipline-android)
+const appId = (route.params.appName as string) || params['name']
+console.log('appId:', appId)
+const app: App = apps[appId as keyof typeof apps]
 console.log('app:', app)
 
 onMounted(() => {