feat(website): explore commits from r2 on the repository's page

packages/app/app/app.vue

@@ -11,8 +11,7 @@ useHead({
 
 useSeoMeta({
   title: "pkg.pr.new",
-  description:
-    "Search repositories on GitHub to list their continuous releases.",
+  description: "Search repositories to list their continuous releases.",
 });
 </script>
 

packages/app/app/components/Commits.vue

@@ -12,18 +12,24 @@ const props = defineProps<{
   repo: string;
 }>();
 
-const data = await $fetch("/api/repo/commits", {
-  query: {
-    owner: props.owner,
-    repo: props.repo,
-  },
-});
+const requestFetch = useRequestFetch();
+
+const { data } = await useAsyncData(
+  `repo-commits:${props.owner}:${props.repo}:page:1`,
+  () =>
+    requestFetch("/api/repo/commits", {
+      query: {
+        owner: props.owner,
+        repo: props.repo,
+      },
+    }),
+);
 
-if (!data) {
+if (!data.value) {
   throw createError("Could not load Commits");
 }
 
-const branch = shallowReactive(data);
+const branch = shallowReactive(data.value);
 
 const commitsWithRelease = computed(() =>
   branch.target.history.nodes
@@ -113,58 +119,78 @@ onBeforeUnmount(() => {
 
 // Pagination
 const fetching = ref(false);
-const fetchMoreForceDisabled = ref(!commitsWithRelease.value.length);
+const currentPage = ref(branch.target.history.pageInfo.currentPage || 1);
+const totalPages = computed(
+  () => branch.target.history.pageInfo.totalPages || 1,
+);
+const hasNextPage = computed(() => currentPage.value < totalPages.value);
+const hasPrevPage = computed(() => currentPage.value > 1);
 
-async function fetchMore() {
-  if (!branch.target.history.pageInfo.hasNextPage) {
-    return;
+const paginationItems = computed<(number | "...")[]>(() => {
+  const total = totalPages.value;
+  const page = currentPage.value;
+  if (total <= 7) {
+    return Array.from({ length: total }, (_, i) => i + 1);
+  }
+
+  const items: (number | "...")[] = [1];
+  const start = Math.max(2, page - 1);
+  const end = Math.min(total - 1, page + 1);
+
+  if (start > 2) {
+    items.push("...");
   }
+  for (let i = start; i <= end; i++) {
+    items.push(i);
+  }
+  if (end < total - 1) {
+    items.push("...");
+  }
+  items.push(total);
+  return items;
+});
 
+async function fetchPage(page: number) {
   if (fetching.value) {
     return;
   }
 
   try {
     fetching.value = true;
-
-    const cursor = branch.target.history.pageInfo.endCursor;
-
     const result = await $fetch("/api/repo/commits", {
       query: {
         owner: props.owner,
         repo: props.repo,
-        cursor,
+        page: String(page),
       },
     });
 
-    const count = commitsWithRelease.value.length;
-
-    branch.target = {
-      ...branch.target,
-      history: {
-        ...branch.target.history,
-        nodes: [...branch.target.history.nodes, ...result.target.history.nodes],
-        pageInfo: result.target.history.pageInfo,
-      },
-    };
-
-    if (count === commitsWithRelease.value.length) {
-      fetchMoreForceDisabled.value = true;
-    }
+    currentPage.value = result.target.history.pageInfo.currentPage || page;
+    branch.id = result.id;
+    branch.name = result.name;
+    branch.target = result.target;
   } finally {
     fetching.value = false;
   }
 }
+
+async function goNextPage() {
+  if (!hasNextPage.value) {
+    return;
+  }
+  await fetchPage(currentPage.value + 1);
+}
+
+async function goPrevPage() {
+  if (!hasPrevPage.value) {
+    return;
+  }
+  await fetchPage(currentPage.value - 1);
+}
 </script>
 
 <template>
   <div class="flex flex-col gap-6">
-    <div class="text-center flex justify-center items-center gap-1 opacity-80">
-      Continuous Releases from
-      <UIcon name="i-ph-git-branch" />
-      {{ branch.name }}
-    </div>
-
     <div class="flex flex-col gap-2">
       <div
         v-for="commit of commitsWithRelease"
@@ -176,13 +202,42 @@ async function fetchMore() {
         aria-role="button"
         @click="selectedCommit = commit"
       >
-        <div class="flex items-center gap-2">
+        <div class="flex items-center gap-2 min-w-0">
           <UIcon name="i-ph-git-commit" class="opacity-50 flex-none" />
-          <span class="truncate">{{ commit.message }}</span>
-          <span class="opacity-50 flex-none">
+          <span class="truncate min-w-0 flex-1">{{ commit.message }}</span>
+          <span class="opacity-50 flex-none whitespace-nowrap">
             {{ useTimeAgo(commit.authoredDate) }}
           </span>
-          <span class="flex-1" />
+          <UIcon
+            v-if="commit.pinned"
+            name="i-ph-push-pin"
+            class="opacity-70 flex-none"
+            aria-label="Pinned release"
+          />
+          <UButton
+            v-if="commit.unverified && !commit.branch && !commit.pinned"
+            color="neutral"
+            variant="subtle"
+            size="xs"
+            :ui="{
+              base: 'font-mono pointer-events-none whitespace-nowrap',
+            }"
+          >
+            External
+          </UButton>
+          <UButton
+            v-if="commit.branch"
+            color="neutral"
+            variant="subtle"
+            size="xs"
+            :ui="{
+              base: 'font-mono pointer-events-none whitespace-nowrap shrink-0 inline-flex items-center',
+            }"
+          >
+            <span class="block max-w-48 truncate whitespace-nowrap">
+              {{ commit.branch }}
+            </span>
+          </UButton>
           <UButton
             :to="commit.url"
             target="_blank"
@@ -191,7 +246,7 @@ async function fetchMore() {
             size="xs"
             aria-label="View Commit"
             :ui="{
-              base: 'font-mono',
+              base: 'font-mono whitespace-nowrap shrink-0 inline-flex items-center',
             }"
             @click.stop
           >
@@ -202,18 +257,42 @@ async function fetchMore() {
     </div>
 
     <div
-      v-if="
-        branch.target.history.pageInfo.hasNextPage && !fetchMoreForceDisabled
-      "
-      class="flex justify-center"
+      v-if="commitsWithRelease.length"
+      class="flex justify-center items-center gap-1 flex-wrap"
     >
       <UButton
         color="neutral"
         variant="subtle"
+        icon="i-ph-caret-left"
+        :disabled="!hasPrevPage"
+        :loading="fetching"
+        @click="goPrevPage()"
+      >
+        Prev
+      </UButton>
+
+      <template v-for="(item, index) in paginationItems" :key="`page-${index}`">
+        <span v-if="item === '...'" class="px-2 text-sm opacity-60">…</span>
+        <UButton
+          v-else
+          :color="item === currentPage ? 'primary' : 'neutral'"
+          :variant="item === currentPage ? 'solid' : 'subtle'"
+          :disabled="fetching"
+          @click="fetchPage(item)"
+        >
+          {{ item }}
+        </UButton>
+      </template>
+
+      <UButton
+        color="neutral"
+        variant="subtle"
+        icon="i-ph-caret-right"
+        :disabled="!hasNextPage"
         :loading="fetching"
-        @click="fetchMore()"
+        @click="goNextPage()"
       >
-        Load More
+        Next
       </UButton>
     </div>
 

packages/app/nuxt.config.ts

@@ -45,6 +45,15 @@ export default defineNuxtConfig({
     },
   },
 
+  routeRules: {
+    "/~/**": {
+      headers: {
+        "cache-control":
+          "public, max-age=30, s-maxage=120, stale-while-revalidate=300",
+      },
+    },
+  },
+
   runtimeConfig: {
     nitro: {
       envPrefix: "NITRO_",