Next.js + Nextocat documentation (#927)

Author: rezrah

.changeset/new-tigers-stare.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Improved typings to various components. This update should not affect the end-user API's.

.github/workflows/deploy_docs_preview.yml

@@ -17,12 +17,13 @@ jobs:
     # SHA for security hardening. Points at 2.1.1 release
     uses: primer/.github/.github/workflows/deploy_preview.yml@2a60f4cc62889bd218f3019ce4a090ff89b71cca
     with:
-      node_version: 18
+      node_version: 20
       install: npm ci --legacy-peer-deps && cd apps/docs && npm ci --legacy-peer-deps && cd ..
       build: |
+        export NEXT_PUBLIC_SITE_TITLE='Brand UI'
+        export NEXT_PUBLIC_REPO='https://github.com/primer/brand'
+        export NEXT_PUBLIC_REPO_SRC_PATH='app/next-docs'
         npm run build && \
-        npm run build:docs && \
-        npm run build:storybook && \
         mkdir brand-temp && \
         mv apps/docs/public/* brand-temp && \
         mv brand-temp apps/docs/public/brand && \

.github/workflows/ui_test_accessibility.yml

@@ -32,6 +32,9 @@ jobs:
       - name: Install dependencies
         run: npm ci --legacy-peer-deps && cd apps/docs && npm ci --legacy-peer-deps
 
+      - name: Install Playwright
+        run: npx playwright install
+
       - name: Build dependencies
         run: npm run build:lib && cd apps/storybook && npx storybook build
 

apps/next-docs/.env

@@ -0,0 +1,4 @@
+NEXT_PUBLIC_SITE_TITLE = Brand UI
+NEXT_PUBLIC_REPO = https://github.com/primer/brand
+NEXT_PUBLIC_REPO_SRC_PATH = app/next-docs
+NEXT_PUBLIC_PATH_PREFIX = 

apps/next-docs/.eslintrc.cjs

@@ -0,0 +1,28 @@
+module.exports = {
+  //extends: ['next/core-web-vitals'], // To reenable after upgrading prettier to v3+
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+  },
+  rules: {
+    'import/extensions': [
+      'error',
+      'ignorePackages',
+      {
+        js: 'always',
+      },
+    ],
+    '@next/next/no-img-element': 'off',
+    'primer-react/no-system-props': 'off',
+    'react/react-in-jsx-scope': 'off', // TODO remove once next/core-web-vitals is reenabled
+    'react/jsx-no-undef': 'off', // TODO Off due to sideloaded components
+    'jsx-a11y/html-has-lang': 'off', // Off to suppress false positives in code blocks
+    'import/extensions': 'off', // TODO reenable once base config is reenabled
+    'react/no-unescaped-entities': 'off', // TODO reenable once base config is reenabled
+    'import/no-unresolved': [
+      'error',
+      {
+        ignore: ['^@primer/react-brand'],
+      },
+    ],
+  },
+}

apps/next-docs/.gitignore

@@ -0,0 +1,4 @@
+.next/
+out/
+*.tsbuildinfo
+!.env

apps/next-docs/app/[[...mdxPath]]/page.tsx

@@ -0,0 +1,29 @@
+import {generateStaticParamsFor, importPage} from '@primer/doctocat-nextjs'
+import {useMDXComponents as getMDXComponents} from '../../mdx-components.js'
+
+export const generateStaticParams = generateStaticParamsFor('mdxPath')
+
+type Props = {
+  params: Promise<{
+    mdxPath: string[]
+  }>
+}
+export async function generateMetadata(props: Props) {
+  const params = await props.params
+  const {metadata} = await importPage(params.mdxPath)
+  return metadata
+}
+
+const {Article: Wrapper} = getMDXComponents()
+
+export default async function Page(props: Props) {
+  const params = await props.params
+  const result = await importPage(params.mdxPath)
+  const {default: MDXContent, toc, metadata} = result
+
+  return (
+    <Wrapper toc={toc} metadata={metadata}>
+      <MDXContent {...props} params={params} />
+    </Wrapper>
+  )
+}

apps/next-docs/app/_meta.global.ts

@@ -0,0 +1,23 @@
+// eslint-disable-next-line filenames/match-regex
+export default {
+  github: {
+    type: 'page',
+    href: 'https://github.com/primer/brand',
+    title: 'GitHub',
+  },
+  product: {
+    type: 'page',
+    href: 'https://primer.style',
+    title: 'Product UI',
+  },
+  toolkit: {
+    type: 'page',
+    href: 'https://brand.github.com',
+    title: 'Brand Toolkit',
+  },
+  octicons: {
+    type: 'page',
+    href: 'https://primer.style/octicons',
+    title: 'Octicons',
+  },
+}