[v2] Docs (#734)

* fix card grid * add more docs * wip * wip * wip * explain why table is rendered differently (#813) * explain why table is rendered differently * fix * wip * wip * theme docs and rename some options * update config * fix config * fix lint errors * fix type error * add changeset Co-authored-by: Dimitri POSTOLOV <en3m@ya.ru>
shuding · Sep 10, 2022 · a0e5847 · a0e5847
1 parent d130955
commit a0e5847
Show file tree

Hide file tree

Showing 69 changed files with 2,019 additions and 642 deletions.
diff --git a/.changeset/loud-baboons-wash.md b/.changeset/loud-baboons-wash.md
@@ -0,0 +1,6 @@
+---
+'nextra': patch
+'nextra-theme-docs': patch
+---
+
+Rename some docs theme configurations
diff --git a/docs/components/card/index.tsx b/docs/components/card/index.tsx
@@ -3,23 +3,75 @@ import Link from 'next/link'
 
 import styles from './style.module.css'
 
-export function Card({ children, title, icon, href, ...props }) {
+export function Card({ children, title, icon, image, arrow, href, ...props }) {
+  const animatedArrow = arrow ? (
+    <span
+      className={cn(
+        'transition-transform duration-75',
+        'group-hover:translate-x-[2px]'
+      )}
+    >
+      →
+    </span>
+  ) : null
+
+  if (image) {
+    return (
+      <Link href={href}>
+        <a
+          className={cn(
+            styles.card,
+            'group flex flex-col justify-start text-current rounded-lg overflow-hidden shadow shadow-gray-200 border border-transparent bg-gray-100 no-underline transition-all duration-200',
+            'hover:border-gray-200 hover:shadow-lg hover:shadow-gray-200'
+          )}
+          {...props}
+        >
+          {children}
+          <span
+            className={cn(
+              styles.title,
+              'p-4 text-gray-700 gap-1',
+              'hover:text-gray-900'
+            )}
+          >
+            {icon}
+            {title}
+            {animatedArrow}
+          </span>
+        </a>
+      </Link>
+    )
+  }
+
   return (
     <Link href={href}>
-      <a className={cn(styles.card)} {...props}>
-        <span className={styles.title}>
+      <a
+        className={cn(
+          styles.card,
+          'group flex flex-col justify-start text-current rounded-lg overflow-hidden shadow shadow-transparent border border-transparent bg-gray-100 no-underline transition-all duration-200',
+          'hover:border-gray-200 hover:shadow-md hover:shadow-gray-100'
+        )}
+        {...props}
+      >
+        <span
+          className={cn(
+            styles.title,
+            'p-4 text-gray-700 gap-1',
+            'hover:text-gray-900'
+          )}
+        >
           {icon}
           {title}
+          {animatedArrow}
         </span>
-        {children}
       </a>
     </Link>
   )
 }
 
 export function Cards({ children, ...props }) {
   return (
-    <div className={cn(styles.cards)} {...props}>
+    <div className={cn(styles.cards, 'gap-4 mt-4')} {...props}>
       {children}
     </div>
   )

diff --git a/docs/components/card/style.module.css b/docs/components/card/style.module.css
@@ -1,26 +1,11 @@
 .cards {
   display: grid;
-  grid-gap: 1rem;
-  grid-template-columns: repeat(3, 1fr);
-  margin-top: 1rem;
+  grid-template-columns: repeat(
+    auto-fill,
+    minmax(max(250px, calc((100% - 1rem * 2) / 3)), 1fr)
+  );
 }
 
-.card {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  padding: 1rem;
-  color: currentColor;
-  text-decoration: none;
-  background-color: hsl(var(--nextra-primary-hue) 10% 96%/0.9);
-  border-radius: 0.25rem;
-  cursor: pointer;
-  transition: box-shadow 0.1s ease;
-}
-
-.card:hover {
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
-}
 .card:hover svg {
   color: currentColor;
 }
@@ -37,7 +22,19 @@
 
 .card .title {
   display: flex;
-  gap: 0.5rem;
   font-weight: 600;
   align-items: flex-start;
 }
+
+:global(.dark) .card {
+  background-color: hsl(var(--nextra-primary-hue) 10% 12%/0.9);
+}
+:global(.dark) .card:hover {
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
+}
+:global(.dark) .card svg {
+  color: #ffffff66;
+}
+:global(.dark) .card:hover svg {
+  color: currentColor;
+}
diff --git a/docs/components/features/index.tsx b/docs/components/features/index.tsx
@@ -1,4 +1,6 @@
 import cn from 'clsx'
+import { motion } from 'framer-motion'
+
 import styles from './style.module.css'
 
 export function Feature({
@@ -10,7 +12,11 @@ export function Feature({
   ...props
 }) {
   return (
-    <div
+    <motion.div
+      initial={{ opacity: 0 }}
+      whileInView={{ opacity: 1 }}
+      viewport={{ once: true, margin: '-20px' }}
+      transition={{ duration: 0.5, delay: 0.1 }}
       className={cn(
         styles.feature,
         large && styles.large,
@@ -21,7 +27,7 @@ export function Feature({
       {...props}
     >
       {children}
-    </div>
+    </motion.div>
   )
 }
 

diff --git a/docs/components/features/style.module.css b/docs/components/features/style.module.css
@@ -15,6 +15,7 @@
 .feature h3 {
   position: relative;
   font-size: 34px;
+  font-size: min(34px, max(4vw, 24px));
   font-weight: 600;
   line-height: 1.25;
   letter-spacing: -0.02rem;

diff --git a/docs/components/icons/globe.tsx b/docs/components/icons/globe.tsx
@@ -0,0 +1,12 @@
+export default (
+  <svg viewBox="0 0 24 24">
+    <path
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      d="M21 12a9 9 0 0 1-9 9m9-9a9 9 0 0 0-9-9m9 9H3m9 9a9 9 0 0 1-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 0 1 9-9"
+    ></path>
+  </svg>
+)
diff --git a/docs/components/icons/markdown.tsx b/docs/components/icons/markdown.tsx
@@ -0,0 +1,8 @@
+export default (
+  <svg viewBox="0 0 24 24">
+    <path
+      fill="currentColor"
+      d="M20.56 18H3.44C2.65 18 2 17.37 2 16.59V7.41C2 6.63 2.65 6 3.44 6h17.12c.79 0 1.44.63 1.44 1.41v9.18c0 .78-.65 1.41-1.44 1.41M6.81 15.19v-3.66l1.92 2.35l1.92-2.35v3.66h1.93V8.81h-1.93l-1.92 2.35l-1.92-2.35H4.89v6.38h1.92M19.69 12h-1.92V8.81h-1.92V12h-1.93l2.89 3.28L19.69 12Z"
+    ></path>
+  </svg>
+)
diff --git a/docs/components/icons/switch.tsx b/docs/components/icons/switch.tsx
@@ -0,0 +1,8 @@
+export default (
+  <svg viewBox="0 0 24 24">
+    <path
+      fill="currentColor"
+      d="M7 18q-2.5 0-4.25-1.75T1 12q0-2.5 1.75-4.25T7 6h10q2.5 0 4.25 1.75T23 12q0 2.5-1.75 4.25T17 18Zm0-2h10q1.65 0 2.825-1.175Q21 13.65 21 12q0-1.65-1.175-2.825Q18.65 8 17 8H7Q5.35 8 4.175 9.175Q3 10.35 3 12q0 1.65 1.175 2.825Q5.35 16 7 16Zm0-1q1.25 0 2.125-.875T10 12q0-1.25-.875-2.125T7 9q-1.25 0-2.125.875T4 12q0 1.25.875 2.125T7 15Zm5-3Z"
+    ></path>
+  </svg>
+)
diff --git a/docs/components/table/index.tsx b/docs/components/table/index.tsx
@@ -0,0 +1,31 @@
+export function OptionTable({ options }: { options: [string, string, any] }) {
+  return (
+    <div className="mt-6 mb-4 pb-4 overflow-x-auto overscroll-x-contain">
+      <table className="border-collapse w-full text-sm">
+        <thead>
+          <tr className="border-b text-left py-4 dark:border-primary-100/10">
+            <th className="py-2 font-semibold">Option</th>
+            <th className="py-2 pl-6 font-semibold">Type</th>
+            <th className="py-2 pl-6 pr-6 font-semibold">Description</th>
+          </tr>
+        </thead>
+        <tbody className="text-gray-900 dark:text-gray-100 align-baseline">
+          {options.map(([option, type, description]) => (
+            <tr
+              key={option}
+              className="border-b border-gray-100 dark:border-zinc-800/50"
+            >
+              <td className="py-2 font-mono font-semibold text-xs leading-6 text-violet-600 whitespace-pre dark:text-violet-500">
+                {option}
+              </td>
+              <td className="py-2 pl-6 font-mono font-semibold text-xs leading-6 text-slate-500 whitespace-pre dark:text-slate-400">
+                {type}
+              </td>
+              <td className="py-2 pl-6">{description}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
diff --git a/docs/components/utils/shadow.jsx b/docs/components/utils/shadow.jsx
@@ -5,6 +5,8 @@ import { createPortal } from 'react-dom'
 
 export class Shadow extends Component {
   componentDidMount() {
+    if (this.shadowAttached) return
+    this.shadowAttached = true
     this.shadowRoot = this.node.attachShadow({ mode: this.props.mode })
     this.forceUpdate()
   }

diff --git a/docs/next.config.mjs b/docs/next.config.mjs
@@ -6,9 +6,11 @@ const withNextra = nextra({
   unstable_staticImage: true,
   unstable_flexsearch: {
     codeblocks: true
-  }
+  },
+  unstable_defaultShowCopyCode: true
 })
 
 export default withNextra({
-  reactStrictMode: true
+  reactStrictMode: true,
+  experimental: { images: { allowFutureImage: true } }
 })
diff --git a/docs/package.json b/docs/package.json
@@ -9,15 +9,19 @@
   "license": "MIT",
   "dependencies": {
     "clsx": "^1.2.1",
+    "framer-motion": "^7.3.2",
     "next": "^12.2.3",
-    "nextra": "2.0.0-beta.18",
-    "nextra-theme-docs": "2.0.0-beta.18",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "nextra": "2.0.0-beta.25",
+    "nextra-theme-docs": "2.0.0-beta.25",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@types/node": "^18.7.8",
+    "autoprefixer": "^10.4.8",
+    "postcss": "^8.4.16",
     "prettier": "^2.7.1",
+    "tailwindcss": "^3.1.8",
     "typescript": "^4.7.4"
   },
   "prettier": {

diff --git a/docs/pages/_app.tsx b/docs/pages/_app.tsx
@@ -1,14 +1,11 @@
-import { ReactElement } from 'react'
-import { AppProps } from 'next/app'
-import 'nextra-theme-docs/style.css'
+import type { ReactElement } from 'react'
+import type { AppProps } from 'next/app'
+
 import '../style.css'
 
 export default function Nextra({
   Component,
   pageProps
 }: AppProps): ReactElement {
-  // Use the layout defined at the page level, if available
-  const getLayout = (Component as any).getLayout || (page => page)
-
-  return getLayout(<Component {...pageProps} />)
+  return <Component {...pageProps} />
 }
diff --git a/docs/pages/meta.json → docs/pages/_meta.json b/docs/pages/meta.json → docs/pages/_meta.json
@@ -15,9 +15,17 @@
     "title": "Showcase",
     "type": "page"
   },
-  "about": {
-    "title": "About",
-    "type": "page",
-    "href": "/docs/about"
+  "faq": {
+    "title": "FAQ",
+    "type": "menu",
+    "items": {
+      "about": {
+        "title": "About Nextra",
+        "href": "/docs/about"
+      },
+      "community": {
+        "title": "Community"
+      }
+    }
   }
 }
diff --git a/docs/pages/docs/meta.json → docs/pages/docs/_meta.json b/docs/pages/docs/meta.json → docs/pages/docs/_meta.json
@@ -6,7 +6,7 @@
     "title": "Themes"
   },
   "docs-theme": "Docs Theme",
-  "blog": "Blog Theme",
+  "blog-theme": "Blog Theme",
   "your-own-theme": "Your Own Theme",
   "-- About --": {
     "type": "separator",

diff --git a/docs/pages/docs/about.mdx b/docs/pages/docs/about.mdx
@@ -6,9 +6,9 @@ Nextra was created by [Shu Ding](https://twitter.com/shuding_) and [Paco Coursey
 
 // Maintainers and contributors
 
-## Acknowledgements
+## Credits
 
-On top of React, Nextra is based on these incredible open source projects:
+On top of React, Nextra is inspired and/or built on top of these incredible open source projects:
 
 - https://nextjs.org
 - https://pnpm.io
@@ -20,3 +20,5 @@ On top of React, Nextra is based on these incredible open source projects:
 - https://github.com/nextapps-de/flexsearch
 - https://github.com/atomiks/rehype-pretty-code
 - https://github.com/Brooooooklyn/simple-git
+- https://docusaurus.io
+- https://vitepress.vuejs.org
diff --git a/docs/pages/docs/blog-theme.mdx b/docs/pages/docs/blog-theme.mdx
@@ -0,0 +1,6 @@
+# Nextra Blog Theme
+
+import { Card, Cards } from '@components/card'
+
+<Cards>
+</Cards>
diff --git a/docs/pages/docs/blog-theme/_meta.json b/docs/pages/docs/blog-theme/_meta.json
@@ -0,0 +1,3 @@
+{
+  "start": "Get Started"
+}
diff --git a/docs/pages/docs/blog/index.mdx → docs/pages/docs/blog-theme/start.mdx b/docs/pages/docs/blog/index.mdx → docs/pages/docs/blog-theme/start.mdx
diff --git a/docs/pages/docs/blog/meta.json b/docs/pages/docs/blog/meta.json
diff --git a/docs/pages/docs/docs-theme.mdx b/docs/pages/docs/docs-theme.mdx
@@ -13,13 +13,13 @@ import { Card, Cards } from '@components/card'
     <svg width="24" viewBox="0 0 20 20" fill="currentColor">
   <path d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z" />
 </svg>
-  } title="Structure" href="/docs/docs-theme/structure">
+  } title="Page Configuration" href="/docs/docs-theme/page-configuration">
   </Card>
   <Card icon={
     <svg width="24" viewBox="0 0 20 20" fill="currentColor">
   <path fillRule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clipRule="evenodd" />
 </svg>
-  } title="Configuration" href="/docs/docs-theme/configuration">
+  } title="Theme Configuration" href="/docs/docs-theme/theme-configuration">
   </Card>
   <Card icon={
     <svg width="24" viewBox="0 0 20 20" fill="currentColor">

diff --git a/docs/pages/docs/docs-theme/_meta.json b/docs/pages/docs/docs-theme/_meta.json
@@ -0,0 +1,6 @@
+{
+  "start": "Get Started",
+  "page-configuration": "Page Configuration",
+  "theme-configuration": "Theme Configuration",
+  "components": "Components"
+}