Update docs for 2.0 (#988)

* more docs work

* add changeset

.changeset/new-dragons-search.md

@@ -0,0 +1,7 @@
+---
+'nextra': patch
+'nextra-theme-blog': patch
+'nextra-theme-docs': patch
+---
+
+update docs for 2.0

docs/components/card/index.tsx

@@ -58,16 +58,16 @@ export function Card({
       href={href}
       className={cn(
         styles.card,
-        'group flex flex-col justify-start overflow-hidden rounded-lg border border-gray-200 text-current no-underline shadow-sm shadow-gray-100 transition-all duration-200',
-        'hover:border-gray-300 hover:bg-slate-50 hover:shadow-md hover:shadow-gray-100'
+        'group flex flex-col justify-start overflow-hidden rounded-lg border border-gray-200 bg-transparent text-current no-underline shadow-sm shadow-gray-100 transition-all duration-200 dark:border-neutral-800 dark:shadow-none',
+        'hover:border-gray-300 hover:bg-slate-50 hover:shadow-md hover:shadow-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-900 dark:hover:shadow-none'
       )}
       {...props}
     >
       <span
         className={cn(
           styles.title,
-          'gap-2 p-4 text-gray-700',
-          'hover:text-gray-900'
+          'gap-2 p-4 text-gray-700 dark:text-neutral-400',
+          'hover:text-gray-900 dark:hover:text-neutral-100'
         )}
       >
         {icon}

docs/components/card/style.module.css

@@ -27,12 +27,6 @@
   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;
 }

docs/components/table/index.tsx

@@ -3,19 +3,17 @@ export function OptionTable({ options }: { options: [string, string, any] }) {
     <div className="mt-6 mb-4 overflow-x-auto overscroll-x-contain pb-4">
       <table className="w-full border-collapse text-sm">
         <thead>
-          <tr className="dark:border-primary-100/10 border-b py-4 text-left">
+          <tr className="border-b py-4 text-left dark:border-neutral-700">
             <th className="py-2 font-semibold">Option</th>
             <th className="py-2 pl-6 font-semibold">Type</th>
-            <th className="py-2 px-6 font-semibold">
-              Description
-            </th>
+            <th className="py-2 px-6 font-semibold">Description</th>
           </tr>
         </thead>
         <tbody className="align-baseline text-gray-900 dark:text-gray-100">
           {options.map(([option, type, description]) => (
             <tr
               key={option}
-              className="border-b border-gray-100 dark:border-zinc-800/50"
+              className="border-b border-gray-100 dark:border-neutral-700/50"
             >
               <td className="whitespace-pre py-2 font-mono text-xs font-semibold leading-6 text-violet-600 dark:text-violet-500">
                 {option}

docs/pages/docs/docs-theme.mdx

@@ -3,28 +3,22 @@
 import { Card, Cards } from '@components/card'
 
 <Cards>
-  <Card icon={
-   <svg width="24" viewBox="0 0 20 20" fill="currentColor">
-  <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
-</svg>
-  } title="Get Started" href="/docs/docs-theme/start">
+  <Card icon={<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+  <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+</svg>} title="Get Started" href="/docs/docs-theme/start">
   </Card>
-  <Card icon={
-    <svg viewBox="0 0 24 24" fill="currentColor" width="24">
-      <path d="M19.5 21a3 3 0 003-3v-4.5a3 3 0 00-3-3h-15a3 3 0 00-3 3V18a3 3 0 003 3h15zM1.5 10.146V6a3 3 0 013-3h5.379a2.25 2.25 0 011.59.659l2.122 2.121c.14.141.331.22.53.22H19.5a3 3 0 013 3v1.146A4.483 4.483 0 0019.5 9h-15a4.483 4.483 0 00-3 1.146z" />
-    </svg>
-  } title="Page Configuration" href="/docs/docs-theme/page-configuration">
+  <Card icon={<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+      <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z" />
+    </svg>} 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" />
+  <Card icon={<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+  <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12a7.5 7.5 0 0015 0m-15 0a7.5 7.5 0 1115 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077l1.41-.513m14.095-5.13l1.41-.513M5.106 17.785l1.15-.964m11.49-9.642l1.149-.964M7.501 19.795l.75-1.3m7.5-12.99l.75-1.3m-6.063 16.658l.26-1.477m2.605-14.772l.26-1.477m0 17.726l-.26-1.477M10.698 4.614l-.26-1.477M16.5 19.794l-.75-1.299M7.5 4.205L12 12m6.894 5.785l-1.149-.964M6.256 7.178l-1.15-.964m15.352 8.864l-1.41-.513M4.954 9.435l-1.41-.514M12.002 12l-3.75 6.495" />
 </svg>
-  } title="Theme Configuration" href="/docs/docs-theme/theme-configuration">
+} title="Theme Configuration" href="/docs/docs-theme/theme-configuration">
   </Card>
-  <Card icon={
-    <svg width="24" viewBox="0 0 20 20" fill="currentColor">
-  <path d="M11 17a1 1 0 001.447.894l4-2A1 1 0 0017 15V9.236a1 1 0 00-1.447-.894l-4 2a1 1 0 00-.553.894V17zM15.211 6.276a1 1 0 000-1.788l-4.764-2.382a1 1 0 00-.894 0L4.789 4.488a1 1 0 000 1.788l4.764 2.382a1 1 0 00.894 0l4.764-2.382zM4.447 8.342A1 1 0 003 9.236V15a1 1 0 00.553.894l4 2A1 1 0 009 17v-5.764a1 1 0 00-.553-.894l-4-2z" />
+  <Card icon={<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+  <path strokeLinecap="round" strokeLinejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
 </svg>
-  } title="Components" href="/docs/docs-theme/components">
+  } title="Built-in Components" href="/docs/docs-theme/components">
   </Card>
 </Cards>

docs/pages/docs/docs-theme/_meta.json

@@ -4,5 +4,5 @@
     "title": "Page Configuration"
   },
   "theme-configuration": "Theme Configuration",
-  "api": "API"
+  "built-ins": "Built-ins"
 }

docs/pages/docs/docs-theme/built-ins.mdx

@@ -0,0 +1,18 @@
+# Built-ins
+
+import { Card, Cards } from '@components/card'
+
+The Docs Theme includes a couple of built-in components that you can use to better style your documentation:
+
+<Cards>
+  <Card icon={
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+  <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
+</svg>
+  } title="Callout" href="/docs/docs-theme/built-ins/callout">
+  </Card>
+  <Card icon={<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+  <path strokeLinecap="round" strokeLinejoin="round" d="M6 6.878V6a2.25 2.25 0 012.25-2.25h7.5A2.25 2.25 0 0118 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 004.5 9v.878m13.5-3A2.25 2.25 0 0119.5 9v.878m0 0a2.246 2.246 0 00-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0121 12v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6c0-.98.626-1.813 1.5-2.122" />
+</svg>} title="Tabs" href="/docs/docs-theme/built-ins/tabs">
+  </Card>
+</Cards>

docs/pages/docs/docs-theme/built-ins/tabs.mdx

@@ -0,0 +1,65 @@
+# Tab Component
+
+A built-in tab component of the Docs Theme.
+
+## Example
+
+import { Tab, Tabs } from 'nextra-theme-docs'
+
+<Tabs items={['pnpm', 'npm', 'yarn']}>
+  <Tab>
+    **pNPM**: Fast, disk space efficient package manager.
+  </Tab>
+  <Tab>
+    **npm** is a package manager for the JavaScript programming language.
+  </Tab>
+  <Tab>
+    **Yarn** is a software packaging system.
+  </Tab>
+</Tabs>
+
+## Usage
+
+### Default
+
+```mdx
+import { Tab, Tabs } from 'nextra-theme-docs'
+
+<Tabs items={['pnpm', 'npm', 'yarn']}>
+  <Tab>
+    **pNPM**: Fast, disk space efficient package manager.
+  </Tab>
+  <Tab>
+    **npm** is a package manager for the JavaScript programming language.
+  </Tab>
+  <Tab>
+    **Yarn** is a software packaging system.
+  </Tab>
+</Tabs>
+```
+
+### Default Selected Index
+
+You can use the `defaultIndex` prop to set the default tab index:
+
+```mdx /defaultIndex="1"/
+import { Tab, Tabs } from 'nextra-theme-docs'
+
+<Tabs items={['pnpm', 'npm', 'yarn']} defaultIndex="1">
+  ...
+</Tabs>
+```
+
+And you will have `npm` as the default tab:
+
+<Tabs items={['pnpm', 'npm', 'yarn']} defaultIndex="1">
+  <Tab>
+    **pNPM**: Fast, disk space efficient package manager.
+  </Tab>
+  <Tab>
+    **npm** is a package manager for the JavaScript programming language.
+  </Tab>
+  <Tab>
+    **Yarn** is a software packaging system.
+  </Tab>
+</Tabs>

docs/pages/docs/docs-theme/start.mdx

@@ -4,6 +4,8 @@ import { Callout, Tab, Tabs } from 'nextra-theme-docs'
 
 Nextra Docs Theme is a theme that includes almost everything you need to build a modern documentation website. It includes a top navigation bar, a search bar, a pages sidebar, a TOC sidebar, and other built-in components.
 
+This website itself is built with the Nextra Docs Theme.
+
 ## Quick Start from Template
 
 {/* You can start by creating your own Nextra site and deploying to Vercel by clicking the link: */}
@@ -44,18 +46,6 @@ To create a Nextra Docs site manually, you have to install **Next.js**, **React*
   </Tab>
 </Tabs>
 
-Like any Next.js projects, you need to also add the following scripts to your `package.json` file:
-
-```json filename="package.json"
-{
-  "scripts": {
-    "dev": "next",
-    "build": "next build",
-    "start": "next start"
-  }
-}
-```
-
 <Callout>
   If you already have Next.js installed in your project, you only need to install `nextra` and `nextra-theme-docs` as the add-ons.
 </Callout>
@@ -76,15 +66,7 @@ module.exports = withNextra()
 // module.exports = withNextra({ /* other next.js config */ })
 ```
 
-With the above configuration, Nextra can handle Markdown files in your Next.js project, with the specified theme. Full Nextra configurations can be found here:
-
-import { Card, Cards } from '@components/card'
-
-import switchIcon from '@components/icons/switch'
-
-<Cards>
-  <Card icon={switchIcon} title="Configure Nextra" href="/docs/docs-theme/theme-configuration"/>
-</Cards>
+With the above configuration, Nextra can handle Markdown files in your Next.js project, with the specified theme. Full Nextra configurations can be found [here](/docs/docs-theme/theme-configuration).
 
 ### Create Docs Theme Config
 
@@ -93,32 +75,45 @@ Lastly, create the corresponding `theme.config.jsx` file in your project’s roo
 ```jsx filename="theme.config.jsx"
 export default {
   logo: <span>My Nextra Documentation</span>,
+  project: {
+    link: 'https://github.com/shuding/nextra',
+  },
+  titleSuffix: ' – Nextra',
   // ...
 }
 ```
 
-More options for this theme can be found here:
-
-<Cards>
-  <Card icon={switchIcon} title="Configure Docs Theme" href="/docs/docs-theme/theme-configuration"/>
-</Cards>
+Full theme configurations can be found [here](/docs/docs-theme/theme-configuration).
 
 ### Ready to Go!
 
-Now, you can create your first MDX page in `pages/index.mdx`:
+Now, you can create your first MDX page as `pages/index.mdx`:
 
 ```mdx filename="pages/index.mdx"
 # Welcome to Nextra
 
 Hello, world!
 ```
 
-And run the `dev` command to start developing the project:
+And run the `pnpm next` command to start developing the project! 🎉
+</div>
 
-```bash
-pnpm dev
-```
+Next, check out the next section to learn about organizing the documentation structure and configuring the website theme:
 
-</div>
+import { Card, Cards } from '@components/card'
+
+<Cards>
+  <Card icon={<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+  <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z" />
+</svg>
+} title="Page Structure" href="/docs/docs-theme/page-configuration"/>
+  <Card icon={<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+  <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12a7.5 7.5 0 0015 0m-15 0a7.5 7.5 0 1115 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077l1.41-.513m14.095-5.13l1.41-.513M5.106 17.785l1.15-.964m11.49-9.642l1.149-.964M7.501 19.795l.75-1.3m7.5-12.99l.75-1.3m-6.063 16.658l.26-1.477m2.605-14.772l.26-1.477m0 17.726l-.26-1.477M10.698 4.614l-.26-1.477M16.5 19.794l-.75-1.299M7.5 4.205L12 12m6.894 5.785l-1.149-.964M6.256 7.178l-1.15-.964m15.352 8.864l-1.41-.513M4.954 9.435l-1.41-.514M12.002 12l-3.75 6.495" />
+</svg>
+} title="Theme Configuration" href="/docs/docs-theme/theme-configuration"/>
+  <Card icon={<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+  <path strokeLinecap="round" strokeLinejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
+</svg>
+} title="Built-in Components" href="/docs/docs-theme/built-ins"/>
+</Cards>
 
-Next step, check out the next section to learn about organizing your documentation pages.