refactor(docs): combine docs and blogs

docs/components/blog-index.tsx

@@ -0,0 +1,43 @@
+// modified from https://github.com/vercel/swr-site/blob/01ab74e8ce302d6c6a108b09d9c3ea01c53db90c/components/blog-index.js
+import Link from 'next/link'
+import { getPagesUnderRoute } from 'nextra/context'
+
+export default function BlogIndex() {
+  return getPagesUnderRoute('/blog')
+    .filter((page) => page.kind === 'MdxPage')
+    .map((page) => {
+      // @ts-expect-error: frontMatter exists on Page
+      const { frontMatter, meta } = page
+      return (
+        <div key={page.route} className="mb-10 space-y-4">
+          <h1>
+            <Link
+              href={page.route}
+              className="text-2xl font-semibold hover:underline"
+            >
+              {meta?.title || frontMatter?.title || page.name}
+            </Link>
+          </h1>
+          <p className="leading-7 opacity-80">
+            {frontMatter?.description}{' '}
+            <span className="inline-block">
+              <Link
+                href={page.route}
+                className="text-[color:hsl(var(--nextra-primary-hue),100%,50%)]
+                  underline decoration-from-font underline-offset-2
+                  hover:opacity-75"
+              >
+                <span className="ml-2">Read more →</span>
+              </Link>
+            </span>
+          </p>
+          {frontMatter?.date ? (
+            <p className="my-4 text-sm opacity-50">
+              {frontMatter.author || 'NPi Authors'}
+              {frontMatter.date ? ` • ${frontMatter.date}` : ''}
+            </p>
+          ) : null}
+        </div>
+      )
+    })
+}

docs/components/feature-request.tsx

@@ -0,0 +1,25 @@
+import { Callout } from 'nextra/components'
+
+export function FeatureRequest() {
+  return (
+    <Callout type="info">
+      Didn't find the feature you were looking for? Feel free to submit an{' '}
+      <a
+        className="underline"
+        href="https://github.com/npi-ai/npi/issues/new"
+        target="_blank"
+      >
+        issue
+      </a>{' '}
+      or{' '}
+      <a
+        className="underline"
+        href="https://github.com/npi-ai/npi/pulls"
+        target="_blank"
+      >
+        PR
+      </a>
+      !
+    </Callout>
+  )
+}

docs/components/logo.tsx

@@ -0,0 +1,29 @@
+import Image from 'next/image'
+import { useTheme } from 'nextra-theme-docs'
+import { useEffect, useState } from 'react'
+import LogoFullDark from '../public/images/logo-full-dark.svg'
+import LogoFull from '../public/images/logo-full.svg'
+
+export default function Logo({
+  width,
+  height,
+}: {
+  width?: number
+  height?: number
+}) {
+  const { resolvedTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => setMounted(true), [])
+
+  if (!mounted) return null
+
+  return (
+    <Image
+      src={resolvedTheme === 'dark' ? LogoFullDark : LogoFull}
+      alt="NPi AI"
+      width={width}
+      height={height}
+    />
+  )
+}

docs/components/tabs.tsx

@@ -0,0 +1,19 @@
+import { useAtom } from 'jotai'
+import { atomWithStorage } from 'jotai/utils'
+import { Tabs as NextraTabs } from 'nextra/components'
+
+const selectedIndexAtom = atomWithStorage('nextra-tab-index', 0)
+
+export function Tabs(props) {
+  const [selectedIndex, setSelectedIndex] = useAtom(selectedIndexAtom)
+
+  return (
+    <NextraTabs
+      {...props}
+      selectedIndex={selectedIndex}
+      onChange={(idx) => setSelectedIndex(idx)}
+    />
+  )
+}
+
+Tabs.Tab = NextraTabs.Tab

docs/components/tagged-posts.tsx

@@ -0,0 +1,72 @@
+// modified from https://github.com/vercel/swr-site/blob/01ab74e8ce302d6c6a108b09d9c3ea01c53db90c/components/blog-index.js
+import Link from 'next/link'
+import { useParams } from 'next/navigation'
+import { getPagesUnderRoute } from 'nextra/context'
+
+function PostList({ tag }: { tag?: string }) {
+  if (!tag) {
+    return null
+  }
+
+  const posts = getPagesUnderRoute('/blog')
+    .filter((page) => page.kind === 'MdxPage')
+    .filter((page) => {
+      // @ts-expect-error: frontMatter exists on Page
+      const { frontMatter } = page
+      return frontMatter.tag
+        ?.split(',')
+        .map((t) => t.trim())
+        .includes(tag)
+    })
+    .map((page) => {
+      // @ts-expect-error: frontMatter exists on Page
+      const { frontMatter, meta } = page
+      return (
+        <div key={page.route} className="mb-10 space-y-4">
+          <h1>
+            <Link
+              href={page.route}
+              className="text-2xl font-semibold hover:underline"
+            >
+              {meta?.title || frontMatter?.title || page.name}
+            </Link>
+          </h1>
+          <p className="leading-7 opacity-80">
+            {frontMatter?.description}{' '}
+            <span className="inline-block">
+              <Link
+                href={page.route}
+                className="text-[color:hsl(var(--nextra-primary-hue),100%,50%)]
+                  underline decoration-from-font underline-offset-2
+                  hover:opacity-75"
+              >
+                <span className="ml-2">Read more →</span>
+              </Link>
+            </span>
+          </p>
+          {frontMatter?.date ? (
+            <p className="my-4 text-sm opacity-50">
+              {frontMatter.author || 'NPi Authors'}
+              {frontMatter.date ? ` • ${frontMatter.date}` : ''}
+            </p>
+          ) : null}
+        </div>
+      )
+    })
+
+  return <>{posts}</>
+}
+
+export default function TaggedPosts() {
+  const param = useParams<{ tag?: string }>()
+
+  return (
+    <>
+      <h1 className="my-10 text-center text-4xl font-extrabold md:text-5xl">
+        Posts Tagged with “{param?.tag}”
+      </h1>
+
+      <PostList tag={param?.tag} />
+    </>
+  )
+}

docs/components/todo/index.tsx → docs/components/todo.tsx

@@ -1,9 +1,9 @@
-import { Callout } from 'nextra/components';
+import { Callout } from 'nextra/components'
 
 export function Todo() {
   return (
-    <Callout type='warning' emoji='🚧'>
+    <Callout type="warning" emoji="🚧">
       This page is under construction.
     </Callout>
-  );
+  )
 }

docs/components/youtube.tsx

@@ -0,0 +1,20 @@
+import YouTube from 'react-youtube'
+
+export function YouTubeComponent({ videoId }: { videoId: string }) {
+  const opts = {
+    height: 'auto',
+    width: '640',
+    playerVars: {
+      // https://developers.google.com/youtube/player_parameters
+      autoplay: 0,
+    },
+  }
+
+  return (
+    <YouTube
+      className="w-full [&_iframe]:aspect-video [&_iframe]:max-w-full"
+      videoId={videoId}
+      opts={opts}
+    />
+  )
+}

docs/next.config.js

@@ -2,18 +2,16 @@ const withNextra = require('nextra')({
   theme: 'nextra-theme-docs',
   themeConfig: './theme.config.tsx',
   defaultShowCopyCode: true,
-});
+})
 
 module.exports = withNextra({
-  basePath: '/docs',
   async redirects() {
     return [
       {
-        source: '/:match((?!docs).*)',
-        destination: '/docs/:match*',
+        source: '/docs/examples',
+        destination: '/examples',
         permanent: true,
-        basePath: false
-      }
+      },
     ]
-  }
-});
+  },
+})

docs/package.json

@@ -29,7 +29,17 @@
     "react-youtube": "^10.1.0"
   },
   "devDependencies": {
+    "@ianvs/prettier-plugin-sort-imports": "^4.3.0",
     "@types/node": "18.11.10",
+    "autoprefixer": "^10.4.19",
+    "nextra-theme-blog": "^2.13.4",
+    "postcss": "^8.4.39",
+    "prettier": "^3.3.2",
+    "prettier-plugin-classnames": "^0.7.0",
+    "prettier-plugin-merge": "^0.7.0",
+    "prettier-plugin-packagejson": "^2.5.0",
+    "prettier-plugin-tailwindcss": "^0.6.5",
+    "tailwindcss": "^3.4.4",
     "typescript": "^5.4.5"
   }
 }

docs/pages/_app.mdx

@@ -1,4 +1,4 @@
-import '../style.css';
+import './style.css';
 import PlausibleProvider from 'next-plausible'
 
 export default function MyApp({ Component, pageProps }) {

docs/pages/_legacy/index.mdx

@@ -61,7 +61,7 @@ Confirm server connectivity by running `npi connect test`, it may take a few sec
 
 Generate a new token via [GitHub Tokens Page](https://github.com/settings/tokens) for NPi. You may need to grant the `repo` scope so that NPi can access repositories on behalf of you. ([Read more about scopes](https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/scopes-for-oauth-apps))
 
-![grant-repo-scope](../../assets/github-token-grant-repo.png)
+![grant-repo-scope](/images/github-token-grant-repo.png)
 
 Then, authorize NPi's access to your GitHub account with the following command:
 

docs/pages/_meta.json

@@ -1,24 +1,22 @@
 {
-  "index": "Quick Start",
-  "examples": "Examples",
-  "core-concepts": "Core Concepts",
-  "how-to": "How To Guides",
-  "references": "SDK References",
-  "official-tools": "Official Tools References",
-  "playground": {
-    "title": "Playground",
+  "index": {
+    "title": "Introduction",
     "type": "page",
-    "href": "https://try.npi.ai/"
+    "display": "hidden"
+  },
+  "docs": {
+    "title": "Docs",
+    "type": "page"
+  },
+  "examples": {
+    "title": "Examples",
+    "type": "page"
   },
   "blog": {
     "title": "Blog",
     "type": "page",
-    "href": "https://www.npi.ai/blog"
-  },
-  "contact": {
-    "title": "Contact ↗",
-    "type": "page",
-    "href": "https://twitter.com/npi_ai",
-    "newWindow": true
+    "theme": {
+      "sidebar": false
+    }
   }
 }