mirror of
https://github.com/netbirdio/docs.git
synced 2026-05-01 14:56:37 +00:00
add TOC
This commit is contained in:
@@ -2,12 +2,14 @@ import Head from 'next/head'
|
||||
import { Router, useRouter } from 'next/router'
|
||||
import { MDXProvider } from '@mdx-js/react'
|
||||
|
||||
import { Layout } from '@/components/Layout'
|
||||
import { LayoutAPI } from '@/components/LayoutAPI'
|
||||
import * as mdxComponents from '@/components/mdx'
|
||||
import { useMobileNavigationStore } from '@/components/MobileNavigation'
|
||||
|
||||
import '@/styles/tailwind.css'
|
||||
import 'focus-visible'
|
||||
import {LayoutDocs} from "@/components/LayoutDocs";
|
||||
import {slugifyWithCounter} from "@sindresorhus/slugify";
|
||||
|
||||
function onRouteChange() {
|
||||
useMobileNavigationStore.getState().close()
|
||||
@@ -18,7 +20,7 @@ Router.events.on('hashChangeStart', onRouteChange)
|
||||
|
||||
export default function App({ Component, pageProps }) {
|
||||
let router = useRouter()
|
||||
|
||||
let tableOfContents = collectHeadings(pageProps.sections)
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
@@ -31,10 +33,45 @@ export default function App({ Component, pageProps }) {
|
||||
<meta name="description" content={pageProps.description} />
|
||||
</Head>
|
||||
<MDXProvider components={mdxComponents}>
|
||||
<Layout {...pageProps}>
|
||||
<Component {...pageProps} />
|
||||
</Layout>
|
||||
|
||||
{router.pathname.startsWith("/docs") ? (
|
||||
<LayoutDocs title={pageProps.title.toString()} tableOfContents={tableOfContents} {...pageProps}>
|
||||
<Component {...pageProps} />
|
||||
</LayoutDocs>
|
||||
) : (
|
||||
<LayoutAPI {...pageProps}>
|
||||
<Component {...pageProps} />
|
||||
</LayoutAPI>
|
||||
)}
|
||||
</MDXProvider>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function collectHeadings(sections, slugify = slugifyWithCounter()) {
|
||||
let output = []
|
||||
|
||||
for (let section of sections) {
|
||||
if (section.tagName === 'h2' || section.tagName === 'h3') {
|
||||
let title = section.title
|
||||
let id = section.id
|
||||
if (section.tagName === 'h3') {
|
||||
if (!output[output.length - 1]) {
|
||||
throw new Error(
|
||||
'Cannot add `h3` to table of contents without a preceding `h2`'
|
||||
)
|
||||
}
|
||||
output[output.length - 1].children.push({
|
||||
id,
|
||||
title,
|
||||
})
|
||||
} else {
|
||||
output.push({ id, title, children: [] })
|
||||
}
|
||||
}
|
||||
|
||||
output.push(...collectHeadings(output.children ?? [], slugify))
|
||||
}
|
||||
|
||||
return output
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@ import {HeroPattern} from "@/components/HeroPattern";
|
||||
|
||||
# NetBird vs. Traditional VPN
|
||||
|
||||
### Traditional VPN challenges
|
||||
## Traditional VPN challenges
|
||||
In the traditional VPN model, everything converges on a centralized, protected network where all the clients are connecting to a central VPN server.
|
||||
|
||||
An increasing amount of connections can easily overload the VPN server.
|
||||
@@ -18,7 +18,7 @@ Configuring firewalls, setting up NATs, SSO integration, and managing access con
|
||||
Traditional centralized VPNs are often compared to a [castle-and-moat](https://en.wikipedia.org/wiki/Moat) model
|
||||
in which once accessed, user is trusted and can access critical infrastructure and resources without any restrictions.
|
||||
|
||||
### NetBird benefits
|
||||
## NetBird benefits
|
||||
|
||||
NetBird decentralizes networks using direct point-to-point connections, as opposed to traditional models.
|
||||
Consequently, network performance is increased since traffic flows directly between the machines bypassing VPN servers or gateways.
|
||||
|
||||
Reference in New Issue
Block a user