visulima
Visulima 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.
Visulima nextra-theme-doc is built on top of
Daniel Bannert's open source work is supported by the community on GitHub Sponsors
Install
If you have a Nextra project, you can install the theme with:
npm install @visulima/nextra-theme-docs zodyarn add @visulima/nextra-theme-docs zodpnpm add @visulima/nextra-theme-docs zodif you don't have a Nextra project, you can use the Next CLI to create one and install
npm install nextra @visulima/nextra-theme-docs zodyarn add nextra @visulima/nextra-theme-docs zodpnpm add nextra @visulima/nextra-theme-docs zodAdd Next.js Config
If not there create the following next.config.js file in your project’s root directory:
const withNextra = require("nextra")({
theme: "@visulima/nextra-theme-docs",
themeConfig: "./theme.config.jsx",
});
module.exports = withNextra();
// If you have other Next.js configurations, you can pass them as the parameter:
// module.exports = withNextra({ /* other next.js config */ })Add Css style to your pages/_app.{jsx,tsx,mdx} file
import "@visulima/nextra-theme-docs/style";
import type { AppProps } from "next/app";
import Head from "next/head";
import type { FC, ReactElement } from "react";
import React from "react";
const MyApp: FC<AppProps & { Component: AppProps["Component"] & { getLayout?: (component: ReactElement) => ReactElement } }> = ({ Component, pageProps }) => {
const getLayout: (component: ReactElement) => ReactElement = Component.getLayout ?? ((page) => page);
return (
<>
<Head>
<link as="font" crossOrigin="anonymous" href="/Inter.var.woff2" rel="preload" type="font/woff2" />
</Head>
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
{getLayout(<Component {...pageProps} />)}
</>
);
};
export default MyApp;
Add SkipNavLink component your pages/_document.{jsx,tsx,mdx} file
import { SkipNavLink } from "@visulima/nextra-theme-docs/components";
import Document, { Head, Html, Main, NextScript } from "next/document";
import type { ReactElement } from "react";
import React from "react";
class MyDocument extends Document {
public render(): ReactElement {
return (
<Html lang="en">
<Head />
<body className="relative">
<SkipNavLink />
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
Create Docs Theme Config
Lastly, create the corresponding theme.config.jsx file in your project’s root directory. This will be used to configure the Nextra Docs theme:
export default {
logo: <span>My Nextra Documentation</span>,
project: {
link: "https://github.com/shuding/nextra",
},
// ...
};Ready to Go!
Now, you can create your first MDX page as pages/index.mdx:
## Welcome to Nextra
Hello, world!For more information, check out the Nextra documentation. You can also check the example project here.
Supported Node.js Versions
Libraries in this ecosystem make the best effort to track Node.js’ release schedule. Here’s a post on why we think this is important.
Contributing
If you would like to help take a look at the list of issues and check our Contributing guild.
Note: please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.
Credits
License
The visulima nextra-theme-docs is open-sourced software licensed under the MIT