Zeta: Replace getGitLastEditTime with new getGithubLastEdit API

.changeset/soft-impalas-serve.md

@@ -0,0 +1,5 @@
+---
+'next-docs-zeta': patch
+---
+
+Replace `getGitLastEditTime` with new `getGithubLastEdit` API

apps/docs/app/docs/[mode]/[[...slug]]/page.tsx

@@ -8,7 +8,7 @@ import type { Utils } from 'next-docs-mdx/map'
 import type { Page } from 'next-docs-mdx/types'
 import { Card, Cards, MDXContent } from 'next-docs-ui/mdx'
 import { DocsPage } from 'next-docs-ui/page'
-import { findNeighbour, getGitLastEditTime } from 'next-docs-zeta/server'
+import { findNeighbour, getGithubLastEdit } from 'next-docs-zeta/server'
 import { notFound } from 'next/navigation'
 
 type Param = {
@@ -26,18 +26,12 @@ export default async function Page({ params }: { params: Param }) {
 
   const neighbours = findNeighbour(tab.tree, tab.getPageUrl(page.slugs))
 
-  const headers = new Headers()
-  if (process.env.GIT_TOKEN)
-    headers.append('authorization', `Bearer ${process.env.GIT_TOKEN}`)
-
-  const time = await getGitLastEditTime(
-    'fuma-nama/next-docs',
-    resolve('apps/docs/', page.file.path),
-    undefined,
-    {
-      headers
-    }
-  )
+  const time = await getGithubLastEdit({
+    owner: 'fuma-nama',
+    repo: 'next-docs',
+    path: resolve('apps/docs/content/docs/', page.file.path),
+    token: process.env.GIT_TOKEN ? `Bearer ${process.env.GIT_TOKEN}` : undefined
+  })
 
   const preview = page.matter.preview?.trim()
   const MDX = page.data.default

apps/docs/app/docs/page.tsx

@@ -26,9 +26,13 @@ export default function DocsPage() {
         Different packages for different use cases.
       </p>
       <div className="grid grid-cols-2 gap-4 mt-4">
-        <Link href="/docs/ui" className={cn(buttonVariants({ size: 'lg' }))}>
-          Next Docs UI
-        </Link>
+        <a
+          href="https://github.com/fuma-nama/next-docs"
+          rel="noreferrer noopener"
+          className={cn(buttonVariants({ size: 'lg' }))}
+        >
+          Github
+        </a>
         <Link
           href="/showcase"
           className={cn(buttonVariants({ variant: 'outline', size: 'lg' }))}

apps/docs/app/showcase/page.tsx

@@ -23,36 +23,46 @@ export default function Showcase() {
     ],
     [YeecordImage, 'Yeecord Docs', 'https://yeecord.com']
   ] as const
+  const maskImage = 'linear-gradient(to top, rgba(0,0,0,0.5), transparent 70%)'
 
   return (
-    <main className="container flex flex-col items-center text-center py-16">
-      <div className="absolute top-16 w-full h-[120px] bg-gradient-to-r from-red-500/20 via-purple-500/50 to-blue-500/20 opacity-50 z-[-1]">
+    <main>
+      <div className="relative py-16 text-center">
         <div
-          className="absolute inset-0"
+          className="absolute inset-0 animate-in fade-in duration-1000 bg-gradient-to-r from-red-500/20 via-purple-500/50 to-blue-500/20 z-[-1]"
           style={{
-            backgroundImage:
-              'repeating-linear-gradient(to right, hsl(var(--primary)/.4) 1px,transparent 2px,transparent 40px), repeating-linear-gradient(to bottom, hsl(var(--primary)/.4) 1px,transparent 2px,transparent 40px)'
+            maskImage,
+            WebkitMaskImage: maskImage
           }}
-        />
-        <div className="absolute inset-0 bg-gradient-to-t from-background" />
+        >
+          <div
+            className="absolute inset-0"
+            style={{
+              backgroundImage:
+                'repeating-linear-gradient(to right, hsl(var(--primary)/.4) 1px,transparent 2px,transparent 40px), repeating-linear-gradient(to bottom, hsl(var(--primary)/.4),hsl(var(--primary)/.4) 1px,transparent 2px,transparent 40px)'
+            }}
+          />
+        </div>
+        <div className="container">
+          <h1 className="font-semibold text-3xl mb-4 lg:text-4xl">Showcase</h1>
+          <p className="text-muted-foreground">
+            Some cool websites using Next Docs
+          </p>
+          <div className="mt-4">
+            <a
+              href="https://github.com/fuma-nama/next-docs/discussions/30"
+              target="_blank"
+              rel="noreferrer noopener"
+              className={cn(buttonVariants())}
+            >
+              <PlusIcon className="w-4 h-4 mr-2" />
+              Add Your Own
+            </a>
+          </div>
+        </div>
       </div>
 
-      <h1 className="font-semibold text-3xl mb-4 lg:text-4xl">Showcase</h1>
-      <p className="text-muted-foreground">
-        Some cool websites using Next Docs
-      </p>
-      <div className="mt-4">
-        <a
-          href="https://github.com/fuma-nama/next-docs/discussions/30"
-          target="_blank"
-          rel="noreferrer noopener"
-          className={cn(buttonVariants())}
-        >
-          <PlusIcon className="w-4 h-4 mr-2" />
-          Add Your Own
-        </a>
-      </div>
-      <div className="grid grid-cols-1 gap-4 mt-12 animate-in fade-in slide-in-from-bottom-20 duration-1000 md:grid-cols-2 lg:grid-cols-3">
+      <div className="grid grid-cols-1 gap-4 mt-12 container md:grid-cols-2 lg:grid-cols-3">
         {showcases.map(([image, name, href], key) => (
           <a
             key={key}

packages/next-docs/src/server/git-api.ts

@@ -1,6 +1,15 @@
+type Response = {
+  commit: {
+    committer: {
+      date: string
+    }
+  }
+}[]
+
 /**
  * @param repo The repository, example: "fuma/next-docs"
  * @param path the path to file
+ * @deprecated use `getGithubLastEdit` instead
  */
 export async function getGitLastEditTime(
   repo: string,
@@ -8,6 +17,53 @@ export async function getGitLastEditTime(
   customParams: Record<string, string> = {},
   init: RequestInit = {}
 ): Promise<Date | null> {
+  return getGithubLastEdit({
+    repo: repo.split('/')[1],
+    owner: repo.split('/')[0],
+    path,
+    options: init,
+    params: customParams
+  })
+}
+
+export type GetGithubLastCommitOptions = {
+  /**
+   * Repository name, like "next-docs"
+   */
+  repo: string
+
+  /** Owner of repository */
+  owner: string
+
+  /**
+   * Path to file
+   */
+  path: string
+
+  /**
+   * Github access token
+   */
+  token?: string
+
+  /**
+   * Custom query parameters
+   */
+  params?: Record<string, string>
+
+  options?: RequestInit
+}
+
+/**
+ * Get the last edit time of a file
+ */
+export async function getGithubLastEdit({
+  repo,
+  token,
+  owner,
+  path,
+  options = {},
+  params: customParams = {}
+}: GetGithubLastCommitOptions): Promise<Date | null> {
   const params = new URLSearchParams()
   params.set('path', path)
   params.set('page', '1')
@@ -17,14 +73,22 @@ export async function getGitLastEditTime(
     params.set(key, value)
   }
 
+  if (token) {
+    options.headers = new Headers(options.headers)
+    options.headers.append('authorization', token)
+  }
+
   const res = await fetch(
-    `https://api.github.com/repos/${repo}/commits?${params}`,
-    init
+    `https://api.github.com/repos/${owner}/${repo}/commits?${params}`,
+    options
   )
 
-  if (!res.ok) throw new Error('Failed to fetch last edit time from Git')
-  const data = await res.json()
+  if (!res.ok)
+    throw new Error(
+      'Failed to fetch last edit time from Git ' + (await res.text())
+    )
+  const data: Response = await res.json()
 
-  if (!data[0]) return null
+  if (data.length === 0) return null
   return new Date(data[0].commit.committer.date)
 }