fix: add missing apiUrl to OpenPanel config for self-hosted instance

- vite 5 → 8
- vite-plugin-pwa 0.19 → 1.2 (vite 8 compat confirmed via vite-pwa/vite-plugin-pwa#918)
- @vitejs/plugin-vue 5 → 6
- vitest 1 → 4
- @vitest/browser, @vitest/ui 1 → 4
- workbox-build, workbox-window added as direct deps at ^7.4.0 to satisfy vite-plugin-pwa peer reqs

Dockerfile

@@ -0,0 +1,17 @@
+FROM node:24-alpine AS builder
+
+RUN corepack enable && corepack prepare pnpm@latest --activate
+
+WORKDIR /app
+COPY package.json pnpm-lock.yaml ./
+RUN pnpm install --frozen-lockfile
+
+COPY . .
+RUN pnpm build-only
+
+FROM nginx:alpine
+
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+EXPOSE 80

netlify.toml

@@ -1,4 +0,0 @@
-[[redirects]]
-  from = "/*"
-  to = "/"
-  status = 200

nginx.conf

@@ -0,0 +1,23 @@
+server {
+    listen 80;
+    server_name _;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;
+    gzip_min_length 1024;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot|webmanifest)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+
+    location = /index.html {
+        add_header Cache-Control "no-cache";
+    }
+}

package.json

@@ -16,6 +16,7 @@
     "commit": "cz"
   },
   "dependencies": {
+    "@openpanel/web": "^1.3.0",
     "@vueuse/core": "^10.7.2",
     "@vueuse/math": "^10.7.2",
     "bulma": "^0.9.4",
@@ -30,16 +31,16 @@
     "vue-router": "^4.6.4"
   },
   "devDependencies": {
-    "@types/md5": "^2.3.6",
     "@faker-js/faker": "^10.2.0",
     "@pinia/testing": "^0.1.3",
     "@rushstack/eslint-patch": "^1.15.0",
     "@tsconfig/node18": "^18.2.6",
     "@types/jsdom": "^27.0.0",
+    "@types/md5": "^2.3.6",
     "@types/node": "^25.0.10",
-    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitejs/plugin-vue": "^6.0.5",
-    "@vitest/browser": "^1.3.0",
+    "@vitest/browser": "^4.1.2",
-    "@vitest/ui": "^1.3.0",
+    "@vitest/ui": "^4.1.2",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/test-utils": "^2.4.4",
@@ -52,10 +53,12 @@
     "prettier": "^3.8.1",
     "sass": "^1.97.3",
     "typescript": "~5.9.3",
-    "vite": "^5.1.3",
+    "vite": "^8.0.3",
-    "vite-plugin-pwa": "^0.19.0",
+    "vite-plugin-pwa": "^1.2.0",
-    "vitest": "^1.3.0",
+    "vitest": "^4.1.2",
     "vue-tsc": "^3.2.3",
-    "webdriverio": "^8.32.2"
+    "webdriverio": "^8.32.2",
+    "workbox-build": "^7.4.0",
+    "workbox-window": "^7.4.0"
   }
 }

src/main.ts

@@ -5,6 +5,7 @@ import App from './App.vue'
 import { router } from './router'
 import VueDiff from 'vue-diff'
 
+import './openpanel'
 import './assets/main.scss'
 import 'vue-diff/dist/index.css'
 

src/openpanel.ts

@@ -0,0 +1,9 @@
+import { OpenPanel } from '@openpanel/web'
+
+export const op = new OpenPanel({
+  apiUrl: 'https://api.panel.apoena.dev',
+  clientId: '00b205e9-2993-4124-9290-bb45851f5967',
+  trackScreenViews: true,
+  trackOutgoingLinks: true,
+  trackAttributes: true
+})

src/views/HomeView.vue

@@ -84,7 +84,7 @@ onUnmounted(() => {
         </div>
         <section class="message is-info paste-hint">
           <div class="message-body">
-            Paste a list of items to directly create a new task
+            <span>Paste a list of items to directly create a new task</span>
             <button @click="handlePaste()" class="button is-info">Paste</button>
           </div>
         </section>
@@ -128,7 +128,12 @@ main {
 
 .paste-hint {
   margin: 1rem;
-  text-align: center;
+}
+
+.paste-hint .message-body {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
 }
 
 .description-hint {

vite.config.mts

@@ -92,6 +92,18 @@ export default defineConfig({
       }
     })
   ],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern',
+        silenceDeprecations: ['import', 'global-builtin', 'color-functions', 'if-function']
+      },
+      sass: {
+        api: 'modern',
+        silenceDeprecations: ['import', 'global-builtin', 'color-functions', 'if-function']
+      }
+    }
+  },
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))