feat: add UI

.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

packages/app/.env.example

@@ -0,0 +1,5 @@
+NUXT_APP_ID=
+NUXT_WEBHOOK_SECRET=
+NUXT_PRIVATE_KEY=
+NUXT_RM_STALE_KEY=
+NUXT_GITHUB_TOKEN=

packages/app/.gitignore

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

packages/app/README.md

@@ -0,0 +1,37 @@
+# pkg.pr.new
+
+## 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
+```

packages/app/app/app.config.ts

@@ -0,0 +1,7 @@
+export default defineAppConfig({
+  ui: {
+    colors: {
+      primary: 'sky',
+    },
+  },
+})

packages/app/app/app.vue

@@ -0,0 +1,25 @@
+<script setup>
+useHead({
+  htmlAttrs: {
+    lang: 'en',
+  },
+  link: [
+    { rel: 'icon', href: '/favicon.png' },
+    { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
+  ],
+})
+
+useSeoMeta({
+  title: 'pkg.pr.new',
+  description: 'Search repositories on GitHub to list their continuous releases.',
+})
+</script>
+
+<template>
+  <UApp>
+    <NuxtLoadingIndicator color="#0ea5e9" />
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </UApp>
+</template>

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

@@ -0,0 +1,119 @@
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+@theme {
+  /* Colors */
+
+  --color-primary-50: var(--ui-color-primary-50);
+  --color-primary-100: var(--ui-color-primary-100);
+  --color-primary-200: var(--ui-color-primary-200);
+  --color-primary-300: var(--ui-color-primary-300);
+  --color-primary-400: var(--ui-color-primary-400);
+  --color-primary-500: var(--ui-color-primary-500);
+  --color-primary-600: var(--ui-color-primary-600);
+  --color-primary-700: var(--ui-color-primary-700);
+  --color-primary-800: var(--ui-color-primary-800);
+  --color-primary-900: var(--ui-color-primary-900);
+  --color-primary-950: var(--ui-color-primary-950);
+
+  --color-secondary-50: var(--ui-color-secondary-50);
+  --color-secondary-100: var(--ui-color-secondary-100);
+  --color-secondary-200: var(--ui-color-secondary-200);
+  --color-secondary-300: var(--ui-color-secondary-300);
+  --color-secondary-400: var(--ui-color-secondary-400);
+  --color-secondary-500: var(--ui-color-secondary-500);
+  --color-secondary-600: var(--ui-color-secondary-600);
+  --color-secondary-700: var(--ui-color-secondary-700);
+  --color-secondary-800: var(--ui-color-secondary-800);
+  --color-secondary-900: var(--ui-color-secondary-900);
+  --color-secondary-950: var(--ui-color-secondary-950);
+
+  --color-success-50: var(--ui-color-success-50);
+  --color-success-100: var(--ui-color-success-100);
+  --color-success-200: var(--ui-color-success-200);
+  --color-success-300: var(--ui-color-success-300);
+  --color-success-400: var(--ui-color-success-400);
+  --color-success-500: var(--ui-color-success-500);
+  --color-success-600: var(--ui-color-success-600);
+  --color-success-700: var(--ui-color-success-700);
+  --color-success-800: var(--ui-color-success-800);
+  --color-success-900: var(--ui-color-success-900);
+  --color-success-950: var(--ui-color-success-950);
+
+  --color-info-50: var(--ui-color-info-50);
+  --color-info-100: var(--ui-color-info-100);
+  --color-info-200: var(--ui-color-info-200);
+  --color-info-300: var(--ui-color-info-300);
+  --color-info-400: var(--ui-color-info-400);
+  --color-info-500: var(--ui-color-info-500);
+  --color-info-600: var(--ui-color-info-600);
+  --color-info-700: var(--ui-color-info-700);
+  --color-info-800: var(--ui-color-info-800);
+  --color-info-900: var(--ui-color-info-900);
+  --color-info-950: var(--ui-color-info-950);
+
+  --color-warning-50: var(--ui-color-warning-50);
+  --color-warning-100: var(--ui-color-warning-100);
+  --color-warning-200: var(--ui-color-warning-200);
+  --color-warning-300: var(--ui-color-warning-300);
+  --color-warning-400: var(--ui-color-warning-400);
+  --color-warning-500: var(--ui-color-warning-500);
+  --color-warning-600: var(--ui-color-warning-600);
+  --color-warning-700: var(--ui-color-warning-700);
+  --color-warning-800: var(--ui-color-warning-800);
+  --color-warning-900: var(--ui-color-warning-900);
+  --color-warning-950: var(--ui-color-warning-950);
+
+  --color-error-50: var(--ui-color-error-50);
+  --color-error-100: var(--ui-color-error-100);
+  --color-error-200: var(--ui-color-error-200);
+  --color-error-300: var(--ui-color-error-300);
+  --color-error-400: var(--ui-color-error-400);
+  --color-error-500: var(--ui-color-error-500);
+  --color-error-600: var(--ui-color-error-600);
+  --color-error-700: var(--ui-color-error-700);
+  --color-error-800: var(--ui-color-error-800);
+  --color-error-900: var(--ui-color-error-900);
+  --color-error-950: var(--ui-color-error-950);
+
+  --color-neutral-50: var(--ui-color-neutral-50);
+  --color-neutral-100: var(--ui-color-neutral-100);
+  --color-neutral-200: var(--ui-color-neutral-200);
+  --color-neutral-300: var(--ui-color-neutral-300);
+  --color-neutral-400: var(--ui-color-neutral-400);
+  --color-neutral-500: var(--ui-color-neutral-500);
+  --color-neutral-600: var(--ui-color-neutral-600);
+  --color-neutral-700: var(--ui-color-neutral-700);
+  --color-neutral-800: var(--ui-color-neutral-800);
+  --color-neutral-900: var(--ui-color-neutral-900);
+  --color-neutral-950: var(--ui-color-neutral-950);
+
+  /* Tailwind neutral color is overriden by semantic neutral above */
+  --color-gray-neutral-50: #fafafa;
+  --color-gray-neutral-100: #f5f5f5;
+  --color-gray-neutral-200: #e5e5e5;
+  --color-gray-neutral-300: #d4d4d4;
+  --color-gray-neutral-400: #a3a3a3;
+  --color-gray-neutral-500: #737373;
+  --color-gray-neutral-600: #525252;
+  --color-gray-neutral-700: #404040;
+  --color-gray-neutral-800: #262626;
+  --color-gray-neutral-900: #171717;
+  --color-gray-neutral-950: #0a0a0a;
+}
+
+@utility my-container {
+  @apply flex-1 p-4 sm:p-6 lg:p-8 w-screen max-w-192 mx-auto;
+}
+
+body {
+  @apply min-h-screen bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-200 font-sans;
+}
+
+details {
+  @apply my-2;
+}
+
+summary {
+  @apply cursor-pointer;
+}

packages/app/app/components/AppFooter.vue

@@ -0,0 +1,13 @@
+<template>
+  <footer class="text-center p-12 opacity-50 hover:opacity-100 focus-within:opacity-100 flex flex-col items-center gap-3 text-xs">
+    <a href="https://stackblitz.com/" target="_blank">
+      <img src="/stackblitz.svg" alt="StackBlitz" width="117" height="24" class="not-dark:hidden">
+      <img src="/stackblitz-black.svg" alt="StackBlitz" width="117" height="24" class="dark:hidden">
+    </a>
+    <div class="flex gap-3 items-center">
+      <div>Built by <a href="https://github.com/Aslemammad" target="_blank" class="text-primary">Aslemammad</a></div>
+      <UIcon name="ph-dot" />
+      <div>UI by <a href="https://github.com/Akryum" target="_blank" class="text-primary">Akryum</a></div>
+    </div>
+  </footer>
+</template>

packages/app/app/components/CodeSnippet.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  code: string
+}>()
+
+const { copy, isSupported } = useClipboard()
+
+const toast = useToast()
+
+function copyCode() {
+  copy(props.code)
+  toast.add({
+    title: 'Copied to clipboard',
+    color: 'success',
+    icon: 'ph-check',
+  })
+}
+</script>
+
+<template>
+  <div class="relative group">
+    <pre class="text-white bg-gray-500 dark:bg-black rounded-lg p-6"><code>{{ props.code }}</code></pre>
+
+    <ClientOnly>
+      <UTooltip
+        v-if="isSupported"
+        text="Copy to clipboard"
+      >
+        <UButton
+          icon="ph-clipboard"
+          class="absolute top-2 right-2 not-group-hover:hidden"
+          @click="copyCode"
+        />
+      </UTooltip>
+    </ClientOnly>
+  </div>
+</template>