feat: add UI

packages/app/.gitignore

@@ -0,0 +1,8 @@
+node_modules
+*.log
+dist
+.output
+.nuxt
+.env
+.idea/
+.data

packages/app/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-PRESENT Sebastien Chopin<https://github.com/atinux> & Anthony Fu<https://github.com/antfu>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/app/README.md

@@ -0,0 +1,72 @@
+# Share your Open Source Contributions 🤍
+
+Create a website with an RSS feed of your recent GitHub pull requests across the Open Source projects you contribute to.
+
+![atinux-pull-requests](https://github.com/user-attachments/assets/cfa82cc2-51af-4fd4-9012-1f8517dd370f)
+
+Demo: https://prs.atinux.com
+
+[![Deploy to NuxtHub](https://hub.nuxt.com/button.svg)](https://hub.nuxt.com/new?template=my-pull-requests)
+
+## Features
+
+- List the 50 most recent pull requests you've contributed to.
+- RSS feed
+- Only add your GitHub token to get started
+- One click deploy on 275+ locations for free
+
+## Setup
+
+Make sure to install the dependencies with [pnpm](https://pnpm.io/installation#using-corepack):
+
+```bash
+pnpm install
+```
+
+Copy the `.env.example` file to `.env` and fill in your GitHub token:
+
+```bash
+cp .env.example .env
+```
+
+Create a GitHub token with no special scope on [GitHub](https://github.com/settings/personal-access-tokens/new) and set it in the `.env` file:
+
+```bash
+NUXT_GITHUB_TOKEN=your-github-token
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+pnpm dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+pnpm build
+```
+
+## Deploy
+
+Deploy the application on the Edge with [NuxtHub](https://hub.nuxt.com) on your Cloudflare account:
+
+```bash
+npx nuxthub deploy
+```
+
+Then checkout your server cache, analaytics and more in the [NuxtHub Admin](https://admin.hub.nuxt.com).
+
+You can also deploy using [Cloudflare Pages CI](https://hub.nuxt.com/docs/getting-started/deploy#cloudflare-pages-ci).
+
+## Credits
+
+This project is inspired by [Anthony Fu](https://github.com/antfu)'s [releases.antfu.me](https://github.com/antfu/releases.antfu.me) project.
+
+## License
+
+[MIT](./LICENSE)

packages/app/app/app.config.ts

@@ -0,0 +1,6 @@
+export default defineAppConfig({
+  ui: {
+    primary: 'orange',
+    gray: 'zinc',
+  },
+})

packages/app/app/app.vue

@@ -0,0 +1,35 @@
+<script setup>
+useHead({
+  htmlAttrs: {
+    lang: 'en',
+  },
+  link: [
+    { rel: 'icon', href: '/favicon.png' },
+    { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
+  ],
+})
+
+useSeoMeta({
+  title: 'Continuous Releases',
+  description: 'Search repositories on GitHub to list their continuous releases.',
+})
+</script>
+
+<template>
+  <div class="flex flex-col min-h-screen">
+    <div class="flex-1">
+      <NuxtLoadingIndicator color="orange" />
+      <NuxtPage />
+    </div>
+
+    <footer class="text-center p-12 opacity-50 hover:opacity-100 focus-within:opacity-100">
+      Made with ❤️ by <a href="https://github.com/Akryum" target="_blank" class="text-primary">Akryum</a>
+    </footer>
+  </div>
+</template>
+
+<style lang="postcss">
+body {
+  @apply min-h-screen bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-200 font-sans;
+}
+</style>

packages/app/app/components/Commits.vue

@@ -0,0 +1,209 @@
+<script lang="ts" setup>
+import type { RendererObject } from 'marked'
+import { marked } from 'marked'
+
+const props = defineProps<{
+  owner: string
+  repo: string
+}>()
+
+const data = await $fetch('/api/repo/commits', {
+  query: {
+    owner: props.owner,
+    repo: props.repo,
+  },
+})
+
+if (!data) {
+  throw createError('Could not load Commits')
+}
+
+const branch = shallowReactive(data)
+
+const commitsWithRelease = computed(() => branch.target.history.nodes.filter(commit => commit.statusCheckRollup?.contexts.nodes.some(context => context.name === 'Continuous Releases')).map(commit => ({
+  ...commit,
+  release: commit.statusCheckRollup.contexts.nodes.find(context => context.name === 'Continuous Releases')!,
+})))
+
+const selectedCommit = shallowRef<(typeof commitsWithRelease.value)[number] | null>(null)
+
+// 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 fetching = ref(false)
+const fetchMoreForceDisabled = ref(!commitsWithRelease.value.length)
+
+async function fetchMore() {
+  if (!branch.target.history.pageInfo.hasNextPage) {
+    return
+  }
+
+  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,
+      },
+    })
+
+    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
+    }
+  }
+  finally {
+    fetching.value = false
+  }
+}
+</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"
+        :key="commit.id"
+        class="px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg cursor-pointer"
+        :class="{
+          'bg-gray-100 dark:bg-gray-800': selectedCommit === commit,
+        }"
+        aria-role="button"
+        @click="selectedCommit = commit"
+      >
+        <div class="flex items-center gap-2">
+          <UIcon name="i-ph-git-commit" class="opacity-50 flex-none" />
+          <span class="truncate">{{ commit.message }}</span>
+          <span class="opacity-50 flex-none">
+            {{ useTimeAgo(commit.authoredDate) }}
+          </span>
+          <span class="flex-1" />
+          <UButton
+            :to="commit.url"
+            target="_blank"
+            color="gray"
+            size="2xs"
+            aria-label="View Commit"
+            :ui="{
+              font: 'font-mono',
+            }"
+            @click.stop
+          >
+            {{ commit.abbreviatedOid }}
+          </UButton>
+        </div>
+      </div>
+    </div>
+
+    <div
+      v-if="branch.target.history.pageInfo.hasNextPage && !fetchMoreForceDisabled"
+      class="flex justify-center"
+    >
+      <UButton
+        color="gray"
+        :loading="fetching"
+        @click="fetchMore()"
+      >
+        Load More
+      </UButton>
+    </div>
+
+    <div
+      v-if="!commitsWithRelease.length"
+      class="flex flex-col items-center gap-4 border border-gray-100 dark:border-gray-800 rounded-xl p-8"
+    >
+      <UIcon name="i-ph-crane-tower-light" class="text-6xl opacity-50" />
+      <p class="text-center text-lg">
+        No Continuous Releases found
+      </p>
+      <p class="text-center">
+        Setup continuous releases with <a href="https://github.com/stackblitz-labs/pkg.pr.new" target="_blank" class="text-primary">pkg.pr.new</a> first!
+      </p>
+    </div>
+
+    <!-- Commit sidepane -->
+    <USlideover
+      :model-value="!!selectedCommit"
+      :ui="{
+        width: 'w-screen max-w-[800px]',
+      }"
+      @update:model-value="selectedCommit = null"
+    >
+      <div
+        v-if="selectedCommit"
+        class="p-4 flex flex-col items-stretch gap-4 overflow-auto"
+      >
+        <div class="flex items-center gap-2">
+          <UIcon name="i-ph-git-commit" class="opacity-50 flex-none" />
+          <span>{{ selectedCommit.message }}</span>
+          <span class="opacity-50 flex-none">
+            {{ useTimeAgo(selectedCommit.authoredDate) }}
+          </span>
+          <span class="flex-1" />
+          <UButton
+            :to="selectedCommit.url"
+            target="_blank"
+            color="gray"
+            size="2xs"
+            aria-label="View Commit"
+            @click.stop
+          >
+            {{ selectedCommit.abbreviatedOid }}
+          </UButton>
+        </div>
+
+        <div
+          class="max-w-full p-4 border border-gray-100 dark:border-gray-800 rounded-lg prose dark:prose-invert"
+          v-html="marked(selectedCommit.release.text)"
+        />
+      </div>
+    </USlideover>
+  </div>
+</template>
+
+<style>
+details {
+  @apply my-2;
+}
+
+summary {
+  @apply cursor-pointer;
+}
+</style>

packages/app/app/components/RepoButton.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+defineProps<{
+  owner: string
+  name: string
+  avatar?: string
+}>()
+</script>
+
+<template>
+  <UButton
+    :to="`/${owner}/${name}`"
+    class="w-full"
+    size="lg"
+    color="gray"
+    variant="ghost"
+  >
+    <UAvatar
+      :src="avatar"
+      :alt="name"
+      size="sm"
+    />
+
+    <div class="font-mono">
+      <span>{{ owner }}</span>
+      <span class="opacity-50">/</span>
+      <span>{{ name }}</span>
+    </div>
+  </UButton>
+</template>