shuding · shuding · Jan 30, 2023
diff --git a/docs/components/features/style.module.css b/docs/components/features/style.module.css
@@ -47,7 +47,7 @@
   justify-content: center;
   align-items: center;
   color: rgba(255, 255, 255, 0.9);
-  box-shadow: 0 0 0 2px rgb(154 154 154 / 56%), 0 0 30px rgb(0 0 0 / 10%);
+  box-shadow: 0px 0px 0 1.5px rgb(154 154 154 / 56%), 0 0 30px rgb(0 0 0 / 10%);
   transition: all 0.2s ease;
   -webkit-user-drag: none;
 }
@@ -59,24 +59,23 @@
     opacity: 1;
   }
   .feature .link:hover {
-    transform: scale(1.05);
+    transform: scale(1.05) rotate(-45deg);
     color: rgba(255, 255, 255, 1);
     background-color: rgba(64, 64, 64, 0.39);
-    box-shadow: 0 0 0 2px rgba(220, 220, 220, 0.56), 0 0 30px rgb(0 0 0 / 10%);
+    box-shadow: 0 0 0 1.5px rgba(220, 220, 220, 0.56), 0 0 30px rgb(0 0 0 / 10%);
   }
   .feature .link:active {
     transform: scale(1);
     color: rgba(255, 255, 255, 0.8);
     background-color: rgba(22, 22, 22, 0.39);
-    box-shadow: 0 0 0 2px rgba(178, 178, 178, 0.56), 0 0 30px rgb(0 0 0 / 10%);
+    box-shadow: 0 0 0 1.5px rgba(178, 178, 178, 0.56), 0 0 30px rgb(0 0 0 / 10%);
   }
 }
 
 .features {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-gap: 2em;
-  font-feature-settings: initial;
 }
 
 .feature :global(.show-on-mobile) {

diff --git a/docs/package.json b/docs/package.json
@@ -9,6 +9,7 @@
   "author": "Shu Ding",
   "license": "MIT",
   "dependencies": {
+    "@next/font": "^13.1.6",
     "@vercel/og": "^0.0.27",
     "clsx": "^1.2.1",
     "framer-motion": "^8.0.0",

diff --git a/docs/pages/_app.tsx b/docs/pages/_app.tsx
@@ -1,11 +1,26 @@
 import type { ReactElement } from 'react'
 import type { AppProps } from 'next/app'
 
+import Head from 'next/head'
+
 import '../style.css'
 
 export default function Nextra({
   Component,
   pageProps
 }: AppProps): ReactElement {
-  return <Component {...pageProps} />
+  return (
+    <>
+      <Head>
+        <link
+          rel="preload"
+          href="/Inter.var.woff2"
+          as="font"
+          type="font/woff2"
+          crossOrigin="anonymous"
+        />
+      </Head>
+      <Component {...pageProps} />
+    </>
+  )
 }
diff --git a/docs/pages/docs/guide.mdx b/docs/pages/docs/guide.mdx
@@ -16,6 +16,10 @@ The following features are configured via the Next.js configuration and are avai
   <path strokeLinecap="round" strokeLinejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" />
 </svg>
 } title="Syntax Highlighting" href="/docs/guide/syntax-highlighting"/>
+<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="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42" />
+</svg>
+} title="Custom CSS" href="/docs/guide/custom-css"/>
   <Card icon={<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
   <path fillRule="evenodd" d="M14.615 1.595a.75.75 0 01.359.852L12.982 9.75h7.268a.75.75 0 01.548 1.262l-10.5 11.25a.75.75 0 01-1.272-.71l1.992-7.302H3.75a.75.75 0 01-.548-1.262l10.5-11.25a.75.75 0 01.913-.143z" clipRule="evenodd" />
 </svg>
@@ -36,6 +40,10 @@ The following features are configured via the Next.js configuration and are avai
   <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.745 3A23.933 23.933 0 003 12c0 3.183.62 6.22 1.745 9M19.5 3c.967 2.78 1.5 5.817 1.5 9s-.533 6.22-1.5 9M8.25 8.885l1.444-.89a.75.75 0 011.105.402l2.402 7.206a.75.75 0 001.104.401l1.445-.889m-8.25.75l.213.09a1.687 1.687 0 002.062-.617l4.45-6.676a1.688 1.688 0 012.062-.618l.213.09" />
 </svg>} title="LaTeX" href="/docs/guide/latex"/>
+  <Card icon={<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 52 25" strokeWidth={3.25} stroke="currentColor" className="w-6 h-6">
+  <path strokeLinecap="round" strokeLinejoin="round" d="M25.517 0C18.712 0 14.46 3.382 12.758 10.146c2.552-3.382 5.529-4.65 8.931-3.805 1.941.482 3.329 1.882 4.864 3.432 2.502 2.524 5.398 5.445 11.722 5.445 6.804 0 11.057-3.382 12.758-10.145-2.551 3.382-5.528 4.65-8.93 3.804-1.942-.482-3.33-1.882-4.865-3.431C34.736 2.92 31.841 0 25.517 0zM12.758 15.218C5.954 15.218 1.701 18.6 0 25.364c2.552-3.382 5.529-4.65 8.93-3.805 1.942.482 3.33 1.882 4.865 3.432 2.502 2.524 5.397 5.445 11.722 5.445 6.804 0 11.057-3.381 12.758-10.145-2.552 3.382-5.529 4.65-8.931 3.805-1.941-.483-3.329-1.883-4.864-3.432-2.502-2.524-5.398-5.446-11.722-5.446z"/>
+</svg>
+} title="Tailwind CSS" href="/docs/guide/tailwind-css"/>
   <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="M15 11.25l1.5 1.5.75-.75V8.758l2.276-.61a3 3 0 10-3.675-3.675l-.61 2.277H12l-.75.75 1.5 1.5M15 11.25l-8.47 8.47c-.34.34-.8.53-1.28.53s-.94.19-1.28.53l-.97.97-.75-.75.97-.97c.34-.34.53-.8.53-1.28s.19-.94.53-1.28L12.75 9M15 11.25L12.75 9" />
 </svg>} title="Advanced" href="/docs/guide/advanced"/>

diff --git a/docs/pages/docs/guide/_meta.json b/docs/pages/docs/guide/_meta.json
@@ -2,11 +2,13 @@
   "organize-files": "",
   "markdown": "",
   "syntax-highlighting": "",
+  "custom-css": "",
   "ssg": "Next.js SSG",
   "i18n": "Next.js I18n",
   "image": "Next.js Image",
   "link": "Next.js Link",
   "latex": "LaTeX",
   "typescript": "",
+  "tailwind-css": "Tailwind CSS",
   "advanced": ""
 }
diff --git a/docs/pages/docs/guide/custom-css.mdx b/docs/pages/docs/guide/custom-css.mdx
@@ -0,0 +1,28 @@
+# Custom CSS Support
+
+Nextra is 100% compatible with the [butil-in CSS support of Next.js](https://nextjs.org/docs/basic-features/built-in-css-support), including `.css`, `.module.css`, and Sass (`.scss`, `.sass`, `.module.scss`, `.module.sass`) files.
+
+For example, consider the following stylesheet named `styles.css`:
+
+```css filename="styles.css"
+body {
+  font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
+    'Arial', sans-serif;
+  padding: 20px 20px 60px;
+  max-width: 680px;
+  margin: 0 auto;
+}
+```
+
+You can create a `pages/_app.js`` file and import your CSS files there:
+
+```js filename="pages/_app.js"
+import '../styles.css'
+
+// This default export is required in a new `pages/_app.js` file.
+export default function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+```
+
+To learn more about CSS support in Next.js, check out the [Next.js documentation](https://nextjs.org/docs/basic-features/built-in-css-support).
diff --git a/docs/pages/docs/guide/latex.mdx b/docs/pages/docs/guide/latex.mdx
@@ -21,7 +21,7 @@ The **Pythagorean equation**: $a=\sqrt{b^2 + c^2}$.
 
 will be rendered as:
 
-<div className="p-4 border border-gray-200 dark:border-gray-900 rounded mt-6">
+<div className="p-4 border border-gray-200 dark:border-gray-900 rounded-xl mt-6">
   The **Pythagorean equation**: $a=\sqrt{b^2 + c^2}$.
 </div>
 

diff --git a/docs/pages/docs/guide/markdown.mdx b/docs/pages/docs/guide/markdown.mdx
@@ -32,7 +32,7 @@ export function Counter({ children }) {
   return <button onClick={() => setCount(count + 1)}>{children}{count}</button>
 }
 
-<div className="p-4 border border-gray-200 dark:border-gray-900 rounded mt-6">
+<div className="p-4 border border-gray-200 dark:border-gray-900 rounded-xl mt-6">
   <Shadow mode="open">
     <h2>Hello MDX</h2>
     <Counter>**Clicks**: </Counter>

diff --git a/docs/pages/docs/guide/ssg.mdx b/docs/pages/docs/guide/ssg.mdx
@@ -4,15 +4,15 @@ With Next.js, you can pre-render your page using [Static Generation (SSG)](https
 
 This is supported by Nextra too. Here's an example:
 
-import { useSSG } from 'nextra/ssg'
+import { useData } from 'nextra/data'
 
 export const getStaticProps = ({ params }) => {
   return fetch(`https://api.github.com/repos/shuding/nextra`)
     .then(res => res.json())
     .then(repo => ({
       props: {
         // We add an `ssg` field to the page props,
-        // which will be provided to the Nextra `useSSG` hook.
+        // which will be provided to the Nextra `useData` hook.
         ssg: {
           stars: repo.stargazers_count
         }
@@ -24,11 +24,11 @@ export const getStaticProps = ({ params }) => {
 
 export const Stars = () => {
   // Get the data from SSG, and render it as a component.
-  const { stars } = useSSG()
+  const { stars } = useData()
   return <strong>{stars}</strong>
 }
 
-<div className="p-4 border border-gray-200 dark:border-gray-900 rounded mt-6">
+<div className="p-4 border border-gray-200 dark:border-gray-900 rounded-xl mt-6">
   Nextra has <Stars /> stars on GitHub!
 </div>
 
@@ -39,15 +39,15 @@ The number above was generated at build time via `getStaticProps`. With [Increme
 Here's the MDX code for the example above:
 
 ```mdx
-import { useSSG } from 'nextra/ssg'
+import { useData } from 'nextra/data'
 
 export const getStaticProps = ({ params }) => {
   return fetch(`https://api.github.com/repos/shuding/nextra`)
     .then(res => res.json())
     .then(repo => ({
       props: {
         // We add an `ssg` field to the page props,
-        // which will be provided to the Nextra `useSSG` hook.
+        // which will be provided to the Nextra `useData` hook.
         ssg: {
           stars: repo.stargazers_count
         }
@@ -59,7 +59,7 @@ export const getStaticProps = ({ params }) => {
 
 export const Stars = () => {
   // Get the data from SSG, and render it as a component.
-  const { stars } = useSSG()
+  const { stars } = useData()
   return <strong>{stars}</strong>
 }
 

diff --git a/docs/pages/docs/guide/tailwind-css.mdx b/docs/pages/docs/guide/tailwind-css.mdx
@@ -0,0 +1,22 @@
+# Tailwind CSS
+
+Tailwind CSS is a CSS framework that provides a set of pre-defined CSS classes to quickly style elements. You can follow the official [Tailwind CSS documentation for Next.js](https://tailwindcss.com/docs/guides/nextjs) to set up Tailwind CSS for your Nextra project.
+
+To use Tailwind classes in your Markdown files, you will also need to add `.md` and `.mdx` files to the `content` list in `tailwind.config.js`:
+
+```js filename="tailwind.config.js" /md,mdx/
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,md,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,md,mdx}",
+
+    // Or if using `src` directory:
+    "./src/**/*.{js,ts,jsx,tsx,md,mdx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+```
diff --git a/docs/pages/docs/index.mdx b/docs/pages/docs/index.mdx
@@ -25,4 +25,30 @@ To start using Nextra, you need to select a theme first:
   </Card>
 </Cards>
 
-If you want to use Nextra without a preset theme, or build your own theme, you can follow the [Custom Theme](/docs/custom-theme) docs.
+If you want to use Nextra without using these built-in themes, you can follow the [Custom Theme](/docs/custom-theme) docs.
+
+## Nextra FAQ
+
+The Nextra FAQ is a collection of useful questions and answers about the project. If you have a question that isn't answered here, please [open a discussion](https://github.com/shuding/nextra/discussions).
+
+export function FAQBox({ title, children }) {
+  return <details open className="last-of-type:mb-0 rounded-lg bg-neutral-50 dark:bg-neutral-800 p-2 mt-4">
+    <summary><strong className="text-lg">{title}</strong></summary>
+    <div className="nx-p-2">
+      {children}
+    </div>
+  </details>
+}
+
+<FAQBox title="Can I use X with Nextra?">
+  The answer is “yes” for most things. Since Nextra is just a Next.js plugin, almost all the things that can be done with React can be done with Nextra. Here are some examples and guides:
+
+  - [Use Tailwind CSS](/docs/guide/tailwind-css)
+  - [Use custom CSS and Sass](/docs/guide/custom-css)
+  - [Use custom fonts](https://nextjs.org/docs/basic-features/font-optimization)
+</FAQBox>
+
+<FAQBox title="How can I add a live coding component in Nextra?">
+  There are libraries like [Sandpack](https://sandpack.codesandbox.io) and [react-live](https://github.com/FormidableLabs/react-live) that can help you add live coding components to your MDX.
+</FAQBox>
+
diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx
@@ -60,6 +60,12 @@ import docsCardDark from '../public/assets/card-1.dark.png'
   </div>
 
   <style jsx>{`
+    .home-content {
+      color: rgba(51,65,85);
+    }
+    .dark .home-content {
+      color: rgba(226,232,240);
+    }
     .content-container {
       max-width: 90rem;
       padding-left: max(env(safe-area-inset-left),1.5rem);
@@ -84,11 +90,10 @@ import docsCardDark from '../public/assets/card-1.dark.png'
       font-size: 3.125rem;
       font-size: min(4.375rem, max(8vw, 2.5rem));
       font-weight: 700;
-      font-feature-settings: initial;
       letter-spacing: -.12rem;
       margin-left: -0.2rem;
       margin-top: 3.4rem;
-      line-height: 1.1;
+      line-height: 1.15;
       background-image: linear-gradient(146deg,#000,#757a7d);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
@@ -100,7 +105,6 @@ import docsCardDark from '../public/assets/card-1.dark.png'
     .subtitle {
       font-size: 1.3rem;
       font-size: min(1.3rem, max(3.5vw, 1.2rem));
-      font-feature-settings: initial;
       line-height: 1.6;
     }
     .nextjs-link {

diff --git a/docs/public/Inter-Italic.var.woff2 b/docs/public/Inter-Italic.var.woff2
diff --git a/docs/public/Inter.var.woff2 b/docs/public/Inter.var.woff2
diff --git a/docs/style.css b/docs/style.css
@@ -2,8 +2,41 @@
 @tailwind components;
 @tailwind utilities;
 
+@supports (font-variation-settings: normal) {
+  :root {
+    font-family: 'InterVar', sans-serif;
+    font-optical-sizing: auto;
+  }
+}
+@font-face {
+  font-family: 'InterVar';
+  font-weight: 100 900;
+  font-display: block;
+  font-style: normal;
+  src: url('/Inter.var.woff2') format('woff2-variations'),
+    url('/Inter.var.woff2') format('woff2');
+  src: url('/Inter.var.woff2') format('woff2') tech('variations');
+}
+@font-face {
+  font-family: 'InterVar';
+  font-weight: 100 900;
+  font-display: block;
+  font-style: italic;
+  src: url('/Inter-Italic.var.woff2') format('woff2-variations'),
+    url('/Inter-Italic.var.woff2') format('woff2');
+  src: url('/Inter-Italic.var.woff2') format('woff2') tech('variations');
+}
+
 body {
-  font-feature-settings: 'rlig' 1, 'calt' 1;
+  font-family: 'InterVar', system-ui, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
+    sans-serif;
+  font-optical-sizing: auto;
+  font-feature-settings: 'rlig' 1, 'ss01', 'cv10', 'cv11';
+}
+
+p {
+  letter-spacing: -0.01em;
 }
 
 .home-content p {

diff --git a/packages/nextra-theme-docs/src/components/breadcrumb.tsx b/packages/nextra-theme-docs/src/components/breadcrumb.tsx
@@ -25,7 +25,7 @@ export function Breadcrumb({
                 isActive
                   ? 'nx-font-medium nx-text-gray-700 contrast-more:nx-font-bold contrast-more:nx-text-current dark:nx-text-gray-400 contrast-more:dark:nx-text-current'
                   : [
-                      'nx-min-w-[24px] nx-overflow-hidden nx-text-ellipsis',
+                      'nx-min-w-[24px] nx-overflow-hidden nx-text-ellipsis nx-px-1 -nx-mx-1',
                       isLink &&
                         'hover:nx-text-gray-900 dark:hover:nx-text-gray-200'
                     ]

diff --git a/packages/nextra-theme-docs/src/components/collapse.tsx b/packages/nextra-theme-docs/src/components/collapse.tsx
@@ -1,4 +1,4 @@
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react'
 import { useRef, useEffect } from 'react'
 import cn from 'clsx'
 
@@ -47,9 +47,9 @@ export function Collapse({
     } else {
       setTimeout(() => {
         if (horizontal) {
-          container.style.width = '0px'
+          container.style.width = '.5rem'
         } else {
-          container.style.height = '0px'
+          container.style.height = '.5rem'
         }
       }, 0)
     }
@@ -62,13 +62,13 @@ export function Collapse({
   return (
     <div
       ref={containerRef}
-      className="nx-transform-gpu nx-overflow-hidden nx-transition-all nx-ease-in-out motion-reduce:nx-transition-none"
+      className="nx-transform-gpu nx-overflow-hidden nx-transition-all nx-ease-in-out motion-reduce:nx-transition-none -nx-m-1"
       style={initialOpen.current || horizontal ? undefined : { height: 0 }}
     >
       <div
         ref={innerRef}
         className={cn(
-          'nx-transition-opacity nx-duration-500 nx-ease-in-out motion-reduce:nx-transition-none',
+          'nx-transition-opacity nx-duration-500 nx-ease-in-out motion-reduce:nx-transition-none nx-p-1',
           isOpen ? 'nx-opacity-100' : 'nx-opacity-0',
           className
         )}