docs: Vercel OSS branding and ProsePrompt blocks

.github/workflows/ci.yml

@@ -53,3 +53,4 @@ jobs:
       - run: corepack enable
       - run: pnpm install
       - run: pnpx pkg-pr-new publish --compact --no-template --pnpm './packages/github-tools'
+        continue-on-error: true

.github/workflows/release.yml

@@ -35,6 +35,7 @@ jobs:
           publish: pnpm run release
           title: 'chore: version packages'
           commit: 'chore: version packages'
+          commitMode: github-api
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 

apps/docs/app/app.config.ts

@@ -55,17 +55,12 @@ export default defineAppConfig({
   ui: {
     colors: {
       primary: 'neutral',
-      neutral: 'zinc',
+      neutral: 'neutral',
     },
     prose: {
-      h1: {
+      prompt: {
         slots: {
-          root: 'scroll-m-20 text-3xl/9 font-semibold tracking-tight sm:text-4xl/10',
-        },
-      },
-      h2: {
-        slots: {
-          root: 'mt-10 text-2xl/8 font-semibold tracking-tight',
+          root: 'relative flex flex-wrap items-center gap-2 border border-default bg-elevated/50 rounded-sm px-4 py-3 my-5 last:mb-0',
         },
       },
       p: {
@@ -89,4 +84,31 @@ export default defineAppConfig({
       },
     },
   },
+  footer: {
+    sections: [
+      {
+        title: 'Getting Started',
+        links: [
+          { label: 'Introduction', to: '/getting-started/introduction' },
+          { label: 'Installation', to: '/getting-started/installation' },
+          { label: 'Agent Skills', to: '/getting-started/agent-skills' },
+        ],
+      },
+      {
+        title: 'Guides',
+        links: [
+          { label: 'Quick Start', to: '/guide/quick-start' },
+          { label: 'Presets', to: '/guide/presets' },
+          { label: 'Durable Workflows', to: '/guide/durable-workflows' },
+        ],
+      },
+      {
+        title: 'API',
+        links: [
+          { label: 'Tools Catalog', to: '/api/tools-catalog' },
+          { label: 'API Reference', to: '/api/reference' },
+        ],
+      },
+    ],
+  },
 })

apps/docs/app/assets/css/main.css

@@ -2,15 +2,73 @@
 @import "@nuxt/ui";
 
 @theme {
-  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  --ui-container: 96rem;
+  --font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
+  --font-mono: 'Geist Mono', ui-monospace, monospace;
 }
 
 :root {
-  --ui-bg: oklch(0.13 0.005 260);
-  color-scheme: dark;
+  overscroll-behavior-y: none;
+
+  /* Geist light — https://vercel.com/design.md */
+  --ui-container: 75rem;
+  --ui-radius: 0.375rem;
+  --ui-primary: #171717;
+
+  --ui-bg: #ffffff;
+  --ui-bg-muted: #fafafa;
+  --ui-bg-elevated: #f2f2f2;
+  --ui-bg-accented: #ebebeb;
+  --ui-bg-inverted: #171717;
+
+  --ui-text-dimmed: #a8a8a8;
+  --ui-text-muted: #8f8f8f;
+  --ui-text-toned: #4d4d4d;
+  --ui-text: #4d4d4d;
+  --ui-text-highlighted: #171717;
+  --ui-text-inverted: #ffffff;
+
+  --ui-border: #00000014;
+  --ui-border-muted: #00000014;
+  --ui-border-accented: #0000001a;
+  --ui-border-inverted: #171717;
+}
+
+.dark {
+  /* Geist dark — https://vercel.com/design.dark.md */
+  --ui-primary: #ededed;
+
+  --ui-bg: #000000;
+  --ui-bg-muted: #1a1a1a;
+  --ui-bg-elevated: #1f1f1f;
+  --ui-bg-accented: #292929;
+  --ui-bg-inverted: #ededed;
+
+  --ui-text-dimmed: #878787;
+  --ui-text-muted: #878787;
+  --ui-text-toned: #a0a0a0;
+  --ui-text: #a0a0a0;
+  --ui-text-highlighted: #ffffff;
+  --ui-text-inverted: #171717;
+
+  --ui-border: #ffffff24;
+  --ui-border-muted: #ffffff21;
+  --ui-border-accented: #ffffff24;
+  --ui-border-inverted: #ededed;
+}
+
+:where(code, kbd, samp, pre, .font-mono) {
+  font-variant-ligatures: none;
+  font-feature-settings:
+    'liga' 0,
+    'calt' 0;
+}
+
+*:focus-visible,
+*:has(> a:focus-visible) {
+  --tw-ring-color: var(--ui-primary);
 }
 
-body {
-  background: var(--ui-bg);
+.hero-grid {
+  background-image: radial-gradient(circle, var(--ui-border) 1px, transparent 1px);
+  background-size: 24px 24px;
 }

apps/docs/app/components/OgImage/OgImageDocs.satori.vue

@@ -20,22 +20,38 @@ const FALLBACK_DESCRIPTION =
 <template>
   <div
     class="w-full h-full"
-    style="position: relative; overflow: hidden; background: #0a0a0f; color: #fafafa; display: flex; flex-direction: column; align-items: stretch; padding: 48px 64px 40px; box-sizing: border-box; font-family: Inter, ui-sans-serif, system-ui, sans-serif;"
+    style="position: relative; overflow: hidden; background: #000000; color: #ededed; display: flex; flex-direction: column; align-items: stretch; padding: 48px 64px 40px; box-sizing: border-box; font-family: Geist, ui-sans-serif, system-ui, sans-serif;"
   >
     <div
       style="position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 80% 55% at 50% -10%, rgba(255,255,255,0.06) 0%, transparent 55%);"
     />
 
-    <div style="position: relative; display: flex; align-items: center;">
+    <div style="position: relative; display: flex; align-items: center; gap: 12px;">
       <svg
-        width="40"
-        height="40"
+        width="20"
+        height="20"
+        viewBox="0 0 16 16"
+        fill="#ededed"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clip-rule="evenodd"
+          d="m8 1 8 14H0z"
+          fill-rule="evenodd"
+        />
+      </svg>
+      <span style="font-size: 14px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.5);">Vercel OSS</span>
+      <span style="font-size: 20px; font-weight: 300; color: rgba(255,255,255,0.3);">/</span>
+      <svg
+        width="28"
+        height="28"
         viewBox="0 0 24 24"
-        fill="#a1a1aa"
+        fill="#ededed"
+        xmlns="http://www.w3.org/2000/svg"
       >
         <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
       </svg>
-      <span style="margin-left: 16px; font-size: 28px; font-weight: 600; letter-spacing: -0.03em; color: #e4e4e7;">GitHub Tools</span>
+      <span style="font-size: 28px; font-weight: 600; letter-spacing: -0.03em; color: #ededed;">GitHub Tools</span>
     </div>
 
     <div

apps/docs/app/components/app/AppFooter.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+const appConfig = useAppConfig()
+</script>
+
+<template>
+  <div class="border-t border-default">
+    <UContainer class="px-0!">
+      <footer>
+        <div class="grid gap-8 border-b border-default px-6 py-8 sm:grid-cols-2 lg:grid-cols-4 md:px-8">
+          <div>
+            <AppHeaderLogo class="h-6 text-highlighted" />
+
+            <p class="mt-3 max-w-xs text-sm text-toned">
+              {{ appConfig.description }}
+            </p>
+          </div>
+
+          <div
+            v-for="section in appConfig.footer?.sections"
+            :key="section.title"
+          >
+            <h3 class="text-xs font-semibold uppercase tracking-wider text-highlighted">
+              {{ section.title }}
+            </h3>
+            <ul class="mt-3 space-y-1">
+              <li
+                v-for="link in section.links"
+                :key="link.to"
+              >
+                <UButton
+                  :label="link.label"
+                  :to="link.to"
+                  :external="link.to.startsWith('https://')"
+                  variant="link"
+                  color="neutral"
+                  size="sm"
+                  class="px-0 text-toned hover:text-highlighted"
+                />
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <div class="flex flex-col gap-4 px-6 py-6 sm:flex-row sm:items-center sm:justify-between md:px-8">
+          <p class="text-sm text-muted">
+            Copyright
+            <a
+              href="https://vercel.com"
+              target="_blank"
+              class="text-toned hover:text-highlighted"
+              rel="noopener"
+            >Vercel</a>
+            {{ new Date().getFullYear() }}. Released under the
+            <a
+              href="https://github.com/vercel-labs/github-tools/blob/main/LICENSE"
+              target="_blank"
+              class="text-toned hover:text-highlighted"
+              rel="noopener"
+            >MIT License</a>.
+          </p>
+          <div class="flex items-center gap-2 [&_button]:text-highlighted">
+            <UColorModeButton size="sm" />
+            <UButton
+              to="https://github.com/vercel-labs/github-tools"
+              external
+              icon="i-simple-icons-github"
+              variant="ghost"
+              color="neutral"
+              size="sm"
+              aria-label="GitHub"
+            />
+            <UButton
+              to="https://www.npmjs.com/package/@github-tools/sdk"
+              external
+              icon="i-simple-icons-npm"
+              variant="ghost"
+              color="neutral"
+              size="sm"
+              aria-label="npm"
+            />
+          </div>
+        </div>
+      </footer>
+    </UContainer>
+  </div>
+</template>

apps/docs/app/components/app/AppHeader.vue

@@ -1,11 +1,8 @@
 <script setup lang="ts">
-import { useDocusI18n } from '#imports'
-
 const appConfig = useAppConfig()
-const site = useSiteConfig()
+const { forced: forcedColorMode } = useDocusColorMode()
 
 const { isEnabled: isAssistantEnabled } = useAssistant()
-const { localePath } = useDocusI18n()
 
 const links = computed(() => appConfig.github && appConfig.github.url
   ? [
@@ -20,15 +17,11 @@ const links = computed(() => appConfig.github && appConfig.github.url
 </script>
 
 <template>
-  <UHeader
-    :ui="{ center: 'flex-1' }"
-    :to="localePath('/')"
-    :title="appConfig.header?.title || site.name"
-  >
+  <UHeader :ui="{ left: 'lg:flex-none', center: 'flex-1', right: 'gap-2.5 [&_button]:text-highlighted', body: 'sm:p-4' }">
     <AppHeaderCenter />
 
-    <template #title>
-      <AppHeaderLogo class="h-6 w-auto shrink-0" />
+    <template #left>
+      <AppHeaderLeft />
     </template>
 
     <template #right>
@@ -40,10 +33,19 @@ const links = computed(() => appConfig.github && appConfig.github.url
 
       <UContentSearchButton class="lg:hidden" />
 
+      <ClientOnly v-if="!forcedColorMode">
+        <UColorModeButton />
+
+        <template #fallback>
+          <div class="h-8 w-8 animate-pulse bg-elevated rounded-md" />
+        </template>
+      </ClientOnly>
+
       <template v-if="links?.length">
         <UButton
           v-for="(link, index) of links"
           :key="index"
+          class="text-highlighted"
           v-bind="{ color: 'neutral', variant: 'ghost', ...link }"
         />
       </template>
@@ -52,7 +54,8 @@ const links = computed(() => appConfig.github && appConfig.github.url
     <template #toggle="{ open, toggle }">
       <IconMenuToggle
         :open="open"
-        class="lg:hidden"
+        variant="outline"
+        class="lg:hidden rounded-full"
         @click="toggle"
       />
     </template>

apps/docs/app/components/app/AppHeaderCenter.vue

@@ -0,0 +1,10 @@
+<template>
+  <UContentSearchButton
+    :collapsed="false"
+    class="w-full"
+    variant="soft"
+    :ui="{
+      leadingIcon: 'size-4 mx-0.5',
+    }"
+  />
+</template>