chore: new architecture for the ui

packages/app/app/assets/css/main.css

@@ -117,3 +117,7 @@ details {
 summary {
   @apply cursor-pointer;
 }
+
+code > pre {
+  @apply rounded-lg overflow-x-scroll bg-transparent! text-sm;
+}

packages/app/app/components/Commits.vue

@@ -1,6 +1,11 @@
 <script lang="ts" setup>
 import type { RendererObject } from "marked";
+import bash from "@shikijs/langs/bash";
+import githubDark from "@shikijs/themes/github-dark";
+import githubLight from "@shikijs/themes/github-light";
 import { marked } from "marked";
+import { createHighlighterCoreSync, type HighlighterCore } from "shiki/core";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
 
 const props = defineProps<{
   owner: string;
@@ -42,16 +47,47 @@ const selectedCommit = shallowRef<
 // Markdown
 
 // Add target to links
-const renderer: RendererObject = {
-  link(originalLink) {
-    const link = marked.Renderer.prototype.link.call(this, originalLink);
-    return link.replace("<a", "<a target='_blank' rel='noreferrer' ");
-  },
-};
-marked.use({ renderer });
 
-// Pagination
+const colorMode = useColorMode();
+let shiki: HighlighterCore;
+
+onBeforeMount(async () => {
+  // if (typeof window === 'undefined') {
+  //   const { loadWasm } = await import('shiki')
+  //   // @ts-expect-error ignore error
+  //   await loadWasm(import(/* @vite-ignore */ 'shiki/onig.wasm'))
+  // }
+
+  shiki = createHighlighterCoreSync({
+    themes: [githubDark, githubLight],
+    langs: [bash],
+    engine: createJavaScriptRegexEngine(),
+  });
+
+  const renderer: RendererObject = {
+    link(originalLink) {
+      const link = marked.Renderer.prototype.link.call(this, originalLink);
+      return link.replace(
+        "<a",
+        "<a target='_blank' rel='noreferrer' class='text-primary underline'",
+      );
+    },
+    code({ text }) {
+      return `<code class="language-bash">${shiki.codeToHtml(text, {
+        theme: colorMode.preference === "dark" ? "github-dark" : "github-light",
+        lang: "bash",
+      })}</code>`;
+    },
+  };
 
+  marked.use({ renderer });
+});
+
+onBeforeUnmount(() => {
+  shiki?.dispose();
+});
+
+// Pagination
 const fetching = ref(false);
 const fetchMoreForceDisabled = ref(!commitsWithRelease.value.length);
 
@@ -218,7 +254,7 @@ async function fetchMore() {
           </div>
 
           <div
-            class="max-w-full p-4 border border-gray-100 dark:border-gray-800 rounded-lg prose dark:prose-invert"
+            class="max-w-full p-4 overflow-x-scroll border border-gray-100 dark:border-gray-800 rounded-lg prose dark:prose-invert flex flex-col gap-2"
             v-html="marked(selectedCommit.release.text)"
           />
         </div>

packages/app/app/components/RepoSearch.vue

@@ -14,15 +14,20 @@ const examples = [
     name: "vite",
     avatar: "https://avatars.githubusercontent.com/u/65625612?v=4",
   },
+  {
+    owner: "rolldown",
+    name: "rolldown",
+    avatar: "https://avatars.githubusercontent.com/u/94954945?s=200&v=4",
+  },
   {
     owner: "vuejs",
     name: "core",
     avatar: "https://avatars.githubusercontent.com/u/6128107?v=4",
   },
   {
-    owner: "QwikDev",
-    name: "qwik",
-    avatar: "https://avatars.githubusercontent.com/u/138123704?v=4",
+    owner: "sveltejs",
+    name: "svelte",
+    avatar: "https://avatars.githubusercontent.com/u/23617963?s=200&v=4",
   },
   {
     owner: "Tresjs",

packages/app/app/layouts/default.vue

@@ -22,22 +22,12 @@ const route = useRoute();
       <ClientOnly>
         <UButton
           aria-label="Toggle theme"
-          :icon="
-            colorMode.preference === 'dark'
-              ? 'ph-moon'
-              : colorMode.preference === 'light'
-                ? 'ph-sun'
-                : 'ph-moon-stars'
-          "
+          :icon="colorMode.preference === 'light' ? 'ph-sun' : 'ph-moon-stars'"
           color="neutral"
           variant="link"
           @click="
             colorMode.preference =
-              colorMode.preference === 'dark'
-                ? 'system'
-                : colorMode.preference === 'system'
-                  ? 'light'
-                  : 'dark'
+              colorMode.preference === 'dark' ? 'light' : 'dark'
           "
         />
         <template #fallback>

packages/app/e2e.test.ts

@@ -34,7 +34,7 @@ beforeAll(async () => {
   server = await app.listen(3300);
 
   await ezSpawn.async(
-    "pnpm cross-env TEST=true pnpm --filter=app run build",
+    "pnpm cross-env TEST=true NITRO_GH_BASE_URL=http://localhost:3300 pnpm --filter=app run build",
     [],
     {
       stdio: "inherit",

packages/app/nuxt.config.ts

@@ -1,16 +1,16 @@
-import process from "node:process";
-import ncb from "nitro-cloudflare-dev";
+// import ncb from "nitro-cloudflare-dev";
 import { resolve } from "pathe";
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+  sourcemap: true,
   compatibilityDate: "2024-07-30",
 
   // https://nuxt.com/docs/getting-started/upgrade#testing-nuxt-4
   future: { compatibilityVersion: 4 },
 
   // https://nuxt.com/modules
-  modules: ["@nuxt/eslint", "@nuxt/ui", "@vueuse/nuxt"],
+  modules: ["@nuxt/eslint", "@nuxt/ui", "@vueuse/nuxt", "nitro-cloudflare-dev"],
 
   css: ["~/assets/css/main.css"],
 
@@ -28,7 +28,6 @@ export default defineNuxtConfig({
     preset: "cloudflare-pages",
     sourceMap: "inline",
     compatibilityDate: "2024-09-19",
-    modules: [ncb],
     externals: {
       inline: [
         "@octokit",
@@ -47,14 +46,15 @@ export default defineNuxtConfig({
   },
 
   runtimeConfig: {
-    appId: process.env.NITRO_APP_ID || "",
-    webhookSecret: process.env.NITRO_WEBHOOK_SECRET || "",
-    privateKey: process.env.NITRO_PRIVATE_KEY || "",
-    rmStaleKey: process.env.NITRO_RM_STALE_KEY || "",
-    githubToken:
-      process.env.GITHUB_TOKEN || process.env.NITRO_GITHUB_TOKEN || "",
-    ghBaseUrl: process.env.NITRO_GH_BASE_URL || "https://api.github.com",
-    test: process.env.NITRO_TEST || "",
+    nitro: {
+      envPrefix: "NITRO_",
+    },
+    appId: "",
+    webhookSecret: "",
+    privateKey: "",
+    rmStaleKey: "",
+    ghBaseUrl: "https://api.github.com",
+    test: "",
   },
 
   hooks: {
@@ -68,7 +68,7 @@ export default defineNuxtConfig({
         handler: clientRenderer,
       });
       nitro.options.handlers.unshift({
-        route: "/view/**",
+        route: "/~/**",
         handler: clientRenderer,
       });
     },

packages/app/package.json

@@ -18,6 +18,7 @@
   "dependencies": {
     "@iconify-json/ph": "^1.1.14",
     "@nuxt/ui": "^3.0.0-alpha.10",
+    "@nuxtjs/mdc": "0.17.0",
     "@octokit/app": "^15.1.1",
     "@octokit/graphql": "^8.1.1",
     "@octokit/plugin-paginate-rest": "^11.3.6",
@@ -26,8 +27,10 @@
     "@vueuse/nuxt": "^12.2.0",
     "marked": "^15.0.4",
     "nuxt": "^3.15.0",
+    "nuxt-shiki": "0.3.0",
     "octokit": "^4.0.2",
     "query-registry": "^3.0.1",
+    "unstorage": "^1.16.0",
     "vue": "^3.5.13",
     "vue-router": "^4.4.3",
     "zod": "^3.23.8"

packages/app/server/api/repo/commits.get.ts

@@ -1,5 +1,4 @@
 import { z } from "zod";
-import { useGithubREST } from "../../../server/utils/octokit";
 
 const querySchema = z.object({
   owner: z.string(),
@@ -14,12 +13,19 @@
     const query = await getValidatedQuery(event, (data) =>
       querySchema.parse(data),
     );
-    const octokit = useGithubREST(event);
+    const installation = await useOctokitInstallation(
+      event,
+      query.owner,
+      query.repo,
+    );
 
-    const { data: repo } = await octokit.request("GET /repos/{owner}/{repo}", {
-      owner: query.owner,
-      repo: query.repo,
-    });
+    const { data: repo } = await installation.request(
+      "GET /repos/{owner}/{repo}",
+      {
+        owner: query.owner,
+        repo: query.repo,
+      },
+    );
 
     const defaultBranch = repo.default_branch;
 
@@ -30,7 +36,7 @@
         : 1;
     const per_page = Number.parseInt(query.per_page);
 
-    const { data: commits } = await octokit.request(
+    const { data: commits } = await installation.request(
       "GET /repos/{owner}/{repo}/commits",
       {
         owner: query.owner,
@@ -44,7 +50,7 @@
     const commitsWithStatuses = await Promise.all(
       commits.map(async (commit) => {
         try {
-          const { data: checkRuns } = await octokit.request(
+          const { data: checkRuns } = await installation.request(
             "GET /repos/{owner}/{repo}/commits/{ref}/check-runs",
             {
               owner: query.owner,
@@ -89,7 +95,7 @@
                 : null,
           };
         } catch (error) {
           console.warn(
             `Could not fetch check runs for commit ${commit.sha}:`,
             error,
           );
@@ -126,7 +132,7 @@
       },
     };
   } catch (error) {
     console.error("Error fetching repository commits:", error);
 
     return {
       id: "error",

packages/app/server/api/repo/index.get.ts

@@ -1,18 +1,17 @@
 import type { H3Event } from "h3";
 import { z } from "zod";
-import { useGithubREST } from "../../../server/utils/octokit";
 
 const querySchema = z.object({
   owner: z.string(),
   repo: z.string(),
 });
 
 const getRepoInfo = defineCachedFunction(
-  async (owner: string, repo: string, event?: H3Event) => {
+  async (owner: string, repo: string, event: H3Event) => {
     try {
-      const octokit = useGithubREST(event);
+      const installation = await useOctokitInstallation(event, owner, repo);
 
-      const { data } = await octokit.request("GET /repos/{owner}/{repo}", {
+      const { data } = await installation.request("GET /repos/{owner}/{repo}", {
         owner,
         repo,
       });
@@ -30,7 +29,7 @@
         description: data.description || "",
       };
     } catch (error) {
       console.error(
         `Error fetching repository info for ${owner}/${repo}:`,
         error,
       );
@@ -38,7 +37,7 @@
     }
   },
   {
     getKey: (owner: string, repo: string, _event?: H3Event) =>
       `${owner}/${repo}`,
     maxAge: 60 * 30, // 30 minutes
     swr: true,
@@ -52,7 +51,7 @@
     );
     return getRepoInfo(query.owner, query.repo, event);
   } catch (error) {
     console.error("Error in repo info endpoint:", error);
     return {
       error: true,
       message: (error as Error).message,

packages/app/server/api/repo/search.get.ts

@@ -1,12 +1,14 @@
-import type { RestEndpointMethodTypes } from "@octokit/plugin-rest-endpoint-methods";
 import { z } from "zod";
-import { useGithubREST } from "../../../server/utils/octokit";
 
 const querySchema = z.object({
   text: z.string(),
 });
 
 export default defineEventHandler(async (event) => {
+  const r2Binding = useBinding(event);
+  const request = toWebRequest(event);
+  const signal = request.signal;
+
   try {
     const query = await getValidatedQuery(event, (data) =>
       querySchema.parse(data),
@@ -16,32 +18,57 @@
       return { nodes: [] };
     }
 
-    const octokit = useGithubREST(event);
+    const searchText = query.text.toLowerCase();
+
+    // Internal pagination: iterate until uniqueNodes is filled or no more objects
+    let cursor: string | undefined;
+    const seen = new Set<string>();
+    const uniqueNodes = [];
+    const maxNodes = 10;
+    let keepGoing = true;
+
+    while (uniqueNodes.length < maxNodes && keepGoing && !signal.aborted) {
+      const listResult = await r2Binding.list({
+        prefix: usePackagesBucket.base,
+        limit: 1000,
+        cursor,
+      });
+      const { objects, truncated } = listResult;
+      cursor = truncated ? listResult.cursor : undefined;
+
+      for (const obj of objects) {
+        const parts = parseKey(obj.key);
+        const orgRepo = `${parts.org}/${parts.repo}`.toLowerCase();
+        const applies =
+          parts.org.toLowerCase().includes(searchText) ||
+          parts.repo.toLowerCase().includes(searchText) ||
+          orgRepo.includes(searchText);
+        if (!applies) continue;
 
-    const { data } = await octokit.request("GET /search/repositories", {
-      q: query.text,
-      per_page: 10,
-    });
+        const key = `${parts.org}/${parts.repo}`;
+        if (!seen.has(key)) {
+          seen.add(key);
+          uniqueNodes.push({
+            name: parts.repo,
+            owner: {
+              login: parts.org,
+              avatarUrl: `https://github.com/${parts.org}.png`,
+            },
+          });
+          if (uniqueNodes.length >= maxNodes) break;
+        }
+      }
+
+      if (!truncated || uniqueNodes.length >= maxNodes) {
+        keepGoing = false;
+      }
+    }
 
     return {
-      nodes: data.items.map(
-        (
-          repo: RestEndpointMethodTypes["search"]["repos"]["response"]["data"]["items"][0],
-        ) => ({
-          id: repo.id.toString(),
-          name: repo.name,
-          owner: repo.owner
-            ? {
-                id: repo.owner.id.toString(),
-                login: repo.owner.login,
-                avatarUrl: repo.owner.avatar_url,
-              }
-            : null,
-        }),
-      ),
+      nodes: uniqueNodes,
     };
   } catch (error) {
     console.error("Error in repository search:", error);
     return {
       nodes: [],
       error: true,
@@ -49,3 +76,11 @@
     };
   }
 });
+
+function parseKey(key: string) {
+  const parts = key.split(":");
+  return {
+    org: parts[2],
+    repo: parts[3],
+  };
+}