feat: implement as github app

Author: danielroe

app/app.vue

@@ -6,37 +6,39 @@ useSeoMeta({
 </script>
 
 <template>
-  <main class="font-sans m-2">
-    <nav class="flex flex-row items-center gap-2 ">
-      <h1 class="text-lg">
-        <NuxtLink
-          to="/"
-          class="no-underline color-current"
-        >
-          unsight.dev
-        </NuxtLink>
-      </h1>
-      <p class="flex gap-1 items-center bg-yellow-400 rounded-full color-black px-2 py-[2px] text-xs font-bold">
-        proof of concept
-      </p>
-    </nav>
-    <NuxtPage />
-  </main>
-  <footer class="justify-center flex gap-2 font-sans mt-auto p-2 text-center text-sm opacity-75 hover:opacity-100">
-    <a
-      class="no-underline hover:underline text-white"
-      href="https://github.com/danielroe/unsight.dev"
-    >
-      source
-    </a>
-    &middot;
-    made with ❤️ by <a
-      class="no-underline font-semibold hover:underline text-white"
-      href="https://bsky.app/profile/danielroe.dev"
-    >
-      @danielroe.dev
-    </a>
-  </footer>
+  <div class="min-h-screen flex flex-col">
+    <main class="flex flex-col font-sans m-2 flex-grow">
+      <nav class="flex flex-row items-center gap-2 ">
+        <h1 class="text-lg">
+          <NuxtLink
+            to="/"
+            class="no-underline color-current"
+          >
+            unsight.dev
+          </NuxtLink>
+        </h1>
+        <p class="flex gap-1 items-center bg-yellow-400 rounded-full color-black px-2 py-[2px] text-xs font-bold">
+          proof of concept
+        </p>
+      </nav>
+      <NuxtPage />
+    </main>
+    <footer class="justify-center flex gap-2 font-sans p-2 text-center text-sm opacity-75 hover:opacity-100 mb-4">
+      <a
+        class="no-underline hover:underline text-white"
+        href="https://github.com/danielroe/unsight.dev"
+      >
+        source
+      </a>
+      &middot;
+      made with ❤️ by <a
+        class="no-underline font-semibold hover:underline text-white"
+        href="https://bsky.app/profile/danielroe.dev"
+      >
+        @danielroe.dev
+      </a>
+    </footer>
+  </div>
 </template>
 
 <style>

app/pages/[[owner]]/[[repo]]/index.vue app/pages/[owner]/[repo]/index.vue

@@ -4,6 +4,8 @@ import rgbToHSL from 'rgb-to-hsl'
 
 import { allowedRepos } from '#shared/repos'
 
+const { data: allowedRepos } = useFetch('/api/repos')
+
 const route = useRoute('owner-repo')
 const selectedRepo = computed(() => route.params.owner && route.params.repo ? `${route.params.owner}/${route.params.repo}` : 'nuxt/nuxt')
 
@@ -44,11 +46,6 @@ function labelColors(color: string) {
   }
 }
 
-const stateColors: Record<string, string> = {
-  open: 'text-green-500',
-  closed: 'text-purple-500',
-}
-
 const openState = reactive<Record<string, boolean>>({})
 </script>
 
@@ -142,14 +139,11 @@ const openState = reactive<Record<string, boolean>>({})
           :key="i"
           class="flex flex-row gap-2 leading-tightest"
         >
-          <span
-            class="flex-shrink-0 inline-block w-5 h-5"
-            :class="[stateColors[issue.state] || 'text-gray-400', issue.pull_request ? 'i-tabler-git-pull-request' : issue.state === 'closed' ? 'i-tabler-circle-check' : 'i-tabler-circle-dot']"
-          />
+          <span class="flex-shrink-0 inline-block w-5 h-5 i-tabler-circle-dot text-green-500" />
           <div class="flex flex-row gap-2 flex-wrap md:flex-nowrap md:pb-6 flex-grow">
             <NuxtLink
               class="line-clamp-1 flex-grow text-sm md:text-base lg:flex-grow-0 no-underline color-current hover:underline"
-              :href="issue.html_url"
+              :href="issue.url"
             >
               {{ issue.title }}
             </NuxtLink>

app/pages/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <section class="flex flex-col items-center flex-grow gap-4 md:gap-8">
+    <p class="text-xl md:text-2xl lg:text-3xl mb-8 text-center mt-18 md:mt-36">
+      cluster issues by similarity across multiple repositories
+    </p>
+    <NuxtLink
+      class="bg-green-700 rounded-md px-5 py-3 font-medium flex flex-row gap-2 items-center"
+      href="https://github.com/apps/unsight-dev"
+    >
+      <span class="i-ri:github-fill inline-block w-5 h-5" />
+      install as a github app
+    </NuxtLink>
+  </section>
+</template>

nuxt.config.ts

@@ -7,6 +7,7 @@ export default defineNuxtConfig({
     'nuxt-time',
     '@nuxtjs/html-validator',
     // TODO: 'nuxt-og-image',
+    'nuxt-webhook-validators',
   ],
   devtools: { enabled: true },
   app: {
@@ -20,6 +21,8 @@ export default defineNuxtConfig({
   },
   runtimeConfig: {
     github: {
+      appId: '',
+      privateKey: '',
       token: '',
     },
   },
@@ -40,6 +43,10 @@ export default defineNuxtConfig({
       issues: {
         dimensions: 1024,
         metric: 'euclidean',
+        metadataIndexes: {
+          owner: 'string',
+          repository: 'string',
+        },
       },
     },
     kv: true,

package.json

@@ -16,13 +16,15 @@
     "@iconify-json/tabler": "1.2.10",
     "@nuxthub/core": "^0.8.7",
     "@nuxtjs/html-validator": "1.8.2",
-    "@octokit/rest": "^21.0.2",
+    "@octokit/webhooks-types": "^7.6.1",
     "@unocss/nuxt": "^0.65.1",
     "hex-rgb": "^5.0.0",
     "ml-distance": "^4.0.1",
     "ml-kmeans": "^6.0.0",
     "nuxt": "latest",
     "nuxt-time": "1.0.3",
+    "nuxt-webhook-validators": "0.1.4",
+    "octokit": "^4.0.2",
     "ohash": "^1.1.4",
     "openai": "^4.76.0",
     "rgb-to-hsl": "^0.0.3",
@@ -31,6 +33,7 @@
   },
   "devDependencies": {
     "@nuxt/eslint": "0.7.2",
+    "@octokit/rest": "^21.0.2",
     "lint-staged": "15.2.10",
     "simple-git-hooks": "2.11.1",
     "typescript": "5.6.3",