From 84f9c986b23ae0c263d173025ef72854510c4dab Mon Sep 17 00:00:00 2001 From: Shu Ding Date: Mon, 30 Jan 2023 13:00:00 +0100 Subject: [PATCH] docs work --- docs/components/features/style.module.css | 9 ++--- docs/package.json | 1 + docs/pages/_app.tsx | 17 ++++++++- docs/pages/docs/guide.mdx | 8 ++++ docs/pages/docs/guide/_meta.json | 2 + docs/pages/docs/guide/custom-css.mdx | 28 ++++++++++++++ docs/pages/docs/guide/latex.mdx | 2 +- docs/pages/docs/guide/markdown.mdx | 2 +- docs/pages/docs/guide/ssg.mdx | 14 +++---- docs/pages/docs/guide/tailwind-css.mdx | 22 +++++++++++ docs/pages/docs/index.mdx | 28 +++++++++++++- docs/pages/index.mdx | 10 +++-- docs/public/Inter-Italic.var.woff2 | Bin 0 -> 297268 bytes docs/public/Inter.var.woff2 | Bin 0 -> 264236 bytes docs/style.css | 35 +++++++++++++++++- .../src/components/breadcrumb.tsx | 2 +- .../src/components/collapse.tsx | 10 ++--- .../src/components/sidebar.tsx | 24 ++++++------ .../nextra-theme-docs/src/components/toc.tsx | 2 +- .../nextra-theme-docs/src/mdx-components.tsx | 17 ++++++--- packages/nextra/src/components/pre.tsx | 4 +- pnpm-lock.yaml | 6 +++ 22 files changed, 197 insertions(+), 46 deletions(-) create mode 100644 docs/pages/docs/guide/custom-css.mdx create mode 100644 docs/pages/docs/guide/tailwind-css.mdx create mode 100644 docs/public/Inter-Italic.var.woff2 create mode 100644 docs/public/Inter.var.woff2 diff --git a/docs/components/features/style.module.css b/docs/components/features/style.module.css index cb90e7767c..2381ec855a 100644 --- 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,16 +59,16 @@ 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%); } } @@ -76,7 +76,6 @@ 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 index af38499776..0cccb0a097 100644 --- 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 index 9c9713f2fd..a1c14bc071 100644 --- 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 + return ( + <> + + + + + + ) } diff --git a/docs/pages/docs/guide.mdx b/docs/pages/docs/guide.mdx index 4c3a48a270..f25a0e52e8 100644 --- 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 } title="Syntax Highlighting" href="/docs/guide/syntax-highlighting"/> + + + +} title="Custom CSS" href="/docs/guide/custom-css"/> @@ -36,6 +40,10 @@ The following features are configured via the Next.js configuration and are avai } title="LaTeX" href="/docs/guide/latex"/> + + + +} title="Tailwind CSS" href="/docs/guide/tailwind-css"/> } title="Advanced" href="/docs/guide/advanced"/> diff --git a/docs/pages/docs/guide/_meta.json b/docs/pages/docs/guide/_meta.json index 6cc0d6759b..b7413b3f1b 100644 --- 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 new file mode 100644 index 0000000000..29a888602e --- /dev/null +++ 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 +} +``` + +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 index cefe44eefc..5075d3f3ea 100644 --- 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: -
+
The **Pythagorean equation**: $a=\sqrt{b^2 + c^2}$.
diff --git a/docs/pages/docs/guide/markdown.mdx b/docs/pages/docs/guide/markdown.mdx index 1e3478d907..9fb3d6cca4 100644 --- a/docs/pages/docs/guide/markdown.mdx +++ b/docs/pages/docs/guide/markdown.mdx @@ -32,7 +32,7 @@ export function Counter({ children }) { return } -
+

Hello MDX

**Clicks**: diff --git a/docs/pages/docs/guide/ssg.mdx b/docs/pages/docs/guide/ssg.mdx index 0744f9f0d9..42d38d9f0a 100644 --- a/docs/pages/docs/guide/ssg.mdx +++ b/docs/pages/docs/guide/ssg.mdx @@ -4,7 +4,7 @@ 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`) @@ -12,7 +12,7 @@ export const getStaticProps = ({ params }) => { .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 {stars} } -
+
Nextra has stars on GitHub!
@@ -39,7 +39,7 @@ 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`) @@ -47,7 +47,7 @@ export const getStaticProps = ({ params }) => { .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 {stars} } diff --git a/docs/pages/docs/guide/tailwind-css.mdx b/docs/pages/docs/guide/tailwind-css.mdx new file mode 100644 index 0000000000..0ef1457229 --- /dev/null +++ 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 index 7919ab54a5..e6e5b0e258 100644 --- 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: -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
+ {title} +
+ {children} +
+
+} + + + 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) + + + + 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. + + diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx index e7808fabef..34d1053b5e 100644 --- a/docs/pages/index.mdx +++ b/docs/pages/index.mdx @@ -60,6 +60,12 @@ import docsCardDark from '../public/assets/card-1.dark.png'