@dev-vortex/nextra-theme-markdoc

v1.0.2

Published

5 months ago

To easily use full Markdoc capabilities with Nextra.

0High
0Medium
0Low

joaocorreia

MarkDoc Nextra Template

To easily use full Markdoc capabilities with Nextra.

Quick Start

For now the package allow you to use the structure:

<root>
|
+- app
|  +- [[...docPath]]
|  |  +- page.tsx
|  +- layout.tsx
+- content
|  +- <DOCUMENTS>
+- public
|  +- <PUBLIC FILES>
+- markdoc-components.tsx
+- markdoc-config.ts
+- next-env.d.ts
+- next.config.mjs
+- package.json
+- tsconfig.json

app/[[...docPath]]/page.tsx

import { notFound } from 'next/navigation'
import { getAllSlugs, docFileExists } from '@dev-vortex-nextra-theme-markdoc/page-map'
import { resolveDocPath, loadDocFile, getDocMetadata } from '@dev-vortex/nextra-theme-markdoc/markdoc'
import { useComponents as getComponents } from '@/markdoc-components'
import { markdocConfig } from '@/markdoc.config'

export const generateStaticParams = getAllSlugs
export const generateMetadata = getDocMetadata
const components = getComponents()
const Wrapper = components.wrapper || (({ children }) => <div>{children}</div>)

export default async function Page(props: {params: Promise<{ docPath: string[] }>}) {
    const params = await props.params
    const resolvedPath = await resolveDocPath(params.docPath || [])
    if (resolvedPath && !!docFileExists(resolvedPath)) {
        const markdocData = await loadDocFile(resolvedPath, { components, markdocConfig })
        if (markdocData) {
            return <Wrapper {...markdocData}></Wrapper>
        }
    } else {
        notFound()
    }
}

app/layout.tsx

import { Footer, Navbar } from '@dev-vortex/nextra-theme-markdoc/server/components'
import { Layout } from '@dev-vortex/nextra-theme-markdoc'
import { Banner, Head } from 'nextra/components'
import { getPageMap } from '@dev-vortex/nextra-theme-markdoc/page-map'
import '@dev-vortex/nextra-theme-markdoc/nextra-style.css'
import '@dev-vortex/nextra-theme-markdoc/style.css'

export const metadata = {
    // Define your metadata here
    // For more information on metadata API, see: https://nextjs.org/docs/app/building-your-application/optimizing/metadata
}

const banner = <Banner storageKey="some-key">Nextra 4.0 is released 🎉</Banner>
const navbar = <Navbar logo={<b>Nextra</b>}/>
const footer = <Footer>MIT {new Date().getFullYear()} © Nextra.</Footer>

export default async function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="en" dir="ltr" suppressHydrationWarning>
            <Head />
            <body>
                <Layout
                    banner={banner}
                    navbar={navbar}
                    pageMap={await getPageMap()}
                    docsRepositoryBase="https://github.com/repo"
                    footer={footer}
                >
                    {children}
                </Layout>
            </body>
        </html>
    )
}

markdoc-components.tsx

export { useMarkdocComponents } from '@dev-vortex/nextra-theme-markdoc'

export const useComponents = () =>
    useMarkdocComponents({
        // Register custom components
    })

markdoc-config.ts

import { getMarkdocConfig } from '@dev-vortex/nextra-theme-markdoc/markdoc'

export const markdocConfig = getMarkdocConfig({
    // Custom Configuration
})

next-env.d.ts

/// <reference types="next" />
/// <reference types="next/image-types/global" />
/// <reference path="./.next/types/routes.d.ts" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.mjs

import nextra from 'nextra'

// Set up Nextra with its configuration
const withNextra = nextra({
    // ... Add Nextra-specific options here
})

// Export the final Next.js config with Nextra included
export default (phase, { defaultConfig }) => {
    return withNextra({
        // ... Add regular Next.js options here
        ...defaultConfig,
        turbopack: {
            resolveAlias: {
                // Path to your `mdx-components` file with extension
                'next-mdx-import-source-file': './markdoc-components.ts',
            },
        },

        productionBrowserSourceMaps: false, // you can keep or drop this if you only want maps in dev

        webpack(config, { dev }) {
            if (dev) {
                // Only apply in dev mode
                config.module.rules.push({
                    test: /\.js$/,
                    enforce: 'pre',
                    use: ['source-map-loader'],
                    include: [/nextra-theme-markdoc/], // adjust for your package name
                })
            }

            return config
        },
    })
}

tsconfig.json

{
    "compilerOptions": {
        "target": "ESNext",
        "lib": ["ESNext"],
        "allowJs": true,
        "skipLibCheck": true,
        "strict": true,
        "noEmit": true,
        "incremental": true,
        "module": "Preserve",
        "moduleResolution": "bundler",
        "jsx": "preserve",
        "paths": {
            "@/*": ["./*"],
            "next-mdx-import-source-file": ["./markdoc-components"]
        },
        "plugins": [
            {
                "name": "next"
            }
        ],
        "isolatedModules": true
    },
    "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx"],
    "exclude": ["node_modules", "public"]
}

Install packages

npm install -D source-map-loader
npm install react react-dom next nextra @dev-vortex/nextra-theme-markdoc

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

MarkDoc Nextra Template

Quick Start

app/[[...docPath]]/page.tsx

app/layout.tsx

markdoc-components.tsx

markdoc-config.ts

next-env.d.ts

next.config.mjs

tsconfig.json

Install packages