load api subendpoints

mdx/rehype.mjs

@@ -102,6 +102,7 @@ function getSections(node) {
         title: ${JSON.stringify(toString(child))},
         id: ${JSON.stringify(child.properties.id)},
         tagName: ${JSON.stringify(child.tagName)},
+        tag: ${JSON.stringify(child.tag)}, 
         ...${child.properties.annotation}
       }`)
     } else if (child.children) {

src/components/Footer.jsx

@@ -4,7 +4,8 @@ import { useRouter } from 'next/router'
 import { Transition } from '@headlessui/react'
 
 import { Button } from '@/components/Button'
-import {apiNavigation, docsNavigation, navigation} from '@/components/NavigationAPI'
+import {apiNavigation} from '@/components/NavigationAPI'
+import {docsNavigation} from "@/components/NavigationDocs";
 
 function CheckIcon(props) {
   return (

src/components/LayoutDocs.jsx

@@ -79,50 +79,6 @@ function GitHubIcon(props) {
   )
 }
 
-// function Header({ navigation }) {
-//   let [isScrolled, setIsScrolled] = useState(false)
-//
-//   useEffect(() => {
-//     function onScroll() {
-//       setIsScrolled(window.scrollY > 0)
-//     }
-//     onScroll()
-//     window.addEventListener('scroll', onScroll, { passive: true })
-//     return () => {
-//       window.removeEventListener('scroll', onScroll)
-//     }
-//   }, [])
-//
-//   return (
-//     <header
-//       className={clsx(
-//         'sticky top-0 z-50 flex flex-wrap items-center justify-between bg-white px-4 py-5 shadow-md shadow-slate-900/5 transition duration-500 dark:shadow-none sm:px-6 lg:px-8',
-//         isScrolled
-//           ? 'dark:bg-slate-900/95 dark:backdrop-blur dark:[@supports(backdrop-filter:blur(0))]:bg-slate-900/75'
-//           : 'dark:bg-transparent'
-//       )}
-//     >
-//       <div className="mr-6 flex lg:hidden">
-//         <MobileNavigation navigation={navigation} />
-//       </div>
-//       <div className="relative flex flex-grow basis-0 items-center">
-//         <Link href="/" aria-label="Home page">
-//           <Logomark className="h-9 w-9 lg:hidden" />
-//           <Logo className="hidden h-9 w-auto fill-slate-700 dark:fill-sky-100 lg:block" />
-//         </Link>
-//       </div>
-//       <div className="-my-5 mr-6 sm:mr-8 md:mr-0">
-//         <Search />
-//       </div>
-//       <div className="relative flex basis-0 justify-end gap-6 sm:gap-8 md:flex-grow">
-//         <Link href="https://github.com" className="group" aria-label="GitHub">
-//           <GitHubIcon className="h-6 w-6 fill-slate-400 group-hover:fill-slate-500 dark:group-hover:fill-slate-300" />
-//         </Link>
-//       </div>
-//     </header>
-//   )
-// }
-
 function useTableOfContents(tableOfContents) {
   let [currentSection, setCurrentSection] = useState(tableOfContents[0]?.id)
 
@@ -176,7 +132,11 @@ export function LayoutDocs({ children, title, tableOfContents }) {
   let section = navigation.find((section) =>
     section.links.find((link) => link.href === router.pathname)
   )
-  let currentSection = useTableOfContents(tableOfContents)
+
+  let currentSection
+  if(!router.route.startsWith("/ipa")) {
+    currentSection = useTableOfContents(tableOfContents)
+  }
 
   function isActive(section) {
     if (section.id === currentSection) {
@@ -205,7 +165,8 @@ export function LayoutDocs({ children, title, tableOfContents }) {
               </Link>
             </div>
             <Header />
-            <NavigationDocs className="hidden lg:mt-10 lg:block" />
+            {router.route.startsWith("/ipa") ? <NavigationAPI tableOfContents={tableOfContents} className="hidden lg:mt-10 lg:block" /> :
+            <NavigationDocs className="hidden lg:mt-10 lg:block" />}
           </div>
         </motion.header>
         <div className="min-w-0 max-w-2xl flex-auto px-4 py-16 lg:max-w-none lg:pl-8 lg:pr-0 xl:px-16">
@@ -214,7 +175,7 @@ export function LayoutDocs({ children, title, tableOfContents }) {
           </main>
           <Footer />
         </div>
-        <div className="hidden xl:sticky xl:top-[4.5rem] xl:-mr-6 xl:block xl:h-[calc(100vh-4.5rem)] xl:flex-none xl:overflow-y-auto xl:py-16 xl:pr-6">
+        {!router.route.startsWith("/ipa/resources") && <div className="hidden xl:sticky xl:top-[4.5rem] xl:-mr-6 xl:block xl:h-[calc(100vh-4.5rem)] xl:flex-none xl:overflow-y-auto xl:py-16 xl:pr-6">
           <nav aria-labelledby="on-this-page-title" className="w-56">
             {tableOfContents.length > 0 && (
               <>
@@ -266,7 +227,7 @@ export function LayoutDocs({ children, title, tableOfContents }) {
               </>
             )}
           </nav>
-        </div>
+        </div>}
       </div>
     </>
   )

src/components/NavigationAPI.jsx

@@ -105,15 +105,16 @@ export function ActivePageMarker({ group, pathname }) {
   )
 }
 
-function NavigationGroup({ group, className }) {
+function NavigationGroup({ group, className, tableOfContents }) {
   // If this is the mobile navigation then we always render the initial
   // state, so that the state does not change during the close animation.
   // The state will still update when we re-open (re-render) the navigation.
-  let isInsideMobileNavigation = useIsInsideMobileNavigation()
-  let [router, sections] = useInitialValue(
-    [useRouter(), useSectionStore((s) => s.sections)],
-    isInsideMobileNavigation
-  )
+  // let isInsideMobileNavigation = useIsInsideMobileNavigation()
+  let router = useRouter()
+  // let [router, sections] = useInitialValue(
+  //   [useRouter(), useSectionStore((s) => s.sections)],
+  //   isInsideMobileNavigation
+  // )
 
   let isActiveGroup =
     group.links.findIndex((link) => link.href === router.pathname) !== -1
@@ -127,11 +128,11 @@ function NavigationGroup({ group, className }) {
         {group.title}
       </motion.h2>
       <div className="relative mt-3 pl-2">
-        <AnimatePresence initial={!isInsideMobileNavigation}>
-          {isActiveGroup && (
-            <VisibleSectionHighlight group={group} pathname={router.pathname} />
-          )}
-        </AnimatePresence>
+        {/*<AnimatePresence >*/}
+        {/*  {isActiveGroup && (*/}
+        {/*    <VisibleSectionHighlight group={group} pathname={router.pathname} />*/}
+        {/*  )}*/}
+        {/*</AnimatePresence>*/}
         <motion.div
           layout
           className="absolute inset-y-0 left-2 w-px bg-zinc-900/10 dark:bg-white/5"
@@ -147,8 +148,8 @@ function NavigationGroup({ group, className }) {
               <NavLink href={link.href} active={link.href === router.pathname}>
                 {link.title}
               </NavLink>
-              <AnimatePresence mode="popLayout" initial={false}>
-                {link.href === router.pathname && sections.length > 0 && (
+              {/*<AnimatePresence mode="popLayout" initial={false}>*/}
+                {link.href === router.pathname && (
                   <motion.ul
                     role="list"
                     initial={{ opacity: 0 }}
@@ -161,7 +162,8 @@ function NavigationGroup({ group, className }) {
                       transition: { duration: 0.15 },
                     }}
                   >
-                    {sections.map((section) => (
+                    {console.log(tableOfContents.tableOfContents)}
+                    {tableOfContents.tableOfContents.map((section) => (
                       <li key={section.id}>
                         <NavLink
                           href={`${link.href}#${section.id}`}
@@ -174,7 +176,7 @@ function NavigationGroup({ group, className }) {
                     ))}
                   </motion.ul>
                 )}
-              </AnimatePresence>
+              {/*</AnimatePresence>*/}
             </motion.li>
           ))}
         </ul>
@@ -183,73 +185,35 @@ function NavigationGroup({ group, className }) {
   )
 }
 
-export const docsNavigation = [
-  {
-    title: 'About NetBird',
-    links: [
-      { title: 'Why Wireguard with NetBird?', href: '/docs/about-netbird/why-wireguard-with-netbird' },
-      { title: 'How Netbird Works', href: '/docs/about-netbird/how-netbird-works' },
-      { title: 'NetBird vs. Traditional VPN', href: '/docs/about-netbird/netbird-vs-traditional-vpn' },
-      { title: 'Other', href: '/docs/about-netbird/other' },
-      { title: 'FAQ', href: '/docs/about-netbird/faq' },
-    ],
-  },
-  {
-    title: 'How-to',
-    links: [
-      { title: 'Getting Started', href: '/docs/how-to/getting-started' },
-      { title: 'Peers', href: '/docs/how-to/peers' },
-      { title: 'Setup Keys', href: '/docs/how-to/setup-keys' },
-      { title: 'Access Control', href: '/docs/how-to/access-control' },
-      { title: 'Network Routes', href: '/docs/how-to/network-routes' },
-      { title: 'DNS', href: '/docs/how-to/dns' },
-      { title: 'Users', href: '/docs/how-to/users' },
-      { title: 'Activity', href: '/docs/how-to/activity' },
-      { title: 'Settings', href: '/docs/how-to/settings' },
-      { title: 'Examples', href: '/docs/how-to/examples' },
-      { title: 'CLI', href: '/docs/how-to/cli' },
-    ],
-  },
-  {
-    title: 'Self-Hosted',
-    links: [
-      { title: 'Installation Guide', href: '/docs/selfhosted/selfhosted-guide' },
-      { title: 'Identity Providers', href: '/docs/selfhosted/identity-providers' },
-    ],
-  },
-
-]
-
 export const apiNavigation = [
   {
     title: 'Guides',
     links: [
-      { title: 'Quickstart', href: '/ipa/quickstart' },
-      { title: 'Authentication', href: '/ipa/authentication' },
-      { title: 'Errors', href: '/ipa/errors' },
+      { title: 'Quickstart', href: '/ipa/guides/quickstart' },
+      { title: 'Authentication', href: '/ipa/guides/authentication' },
+      { title: 'Errors', href: '/ipa/guides/errors' },
       // { title: 'Events', href: '/accounts' },
     ],
   },
   {
     title: 'Resources',
     links: [
-      { title: 'Accounts', href: '/ipa/accounts' },
-      { title: 'Users', href: '/ipa/users' },
-      { title: 'Tokens', href: '/ipa/tokens' },
-      { title: 'Peers', href: '/ipa/peers' },
-      { title: 'Setup Keys', href: '/ipa/setup-keys' },
-      { title: 'Groups', href: '/ipa/groups' },
-      { title: 'Rules', href: '/ipa/rules' },
-      { title: 'Policies', href: '/ipa/policies' },
-      { title: 'Routes', href: '/ipa/routes' },
-      { title: 'DNS', href: '/ipa/dns' },
-      { title: 'Events', href: '/ipa/events' },
+      { title: 'Accounts', href: '/ipa/resources/accounts' },
+      { title: 'Users', href: '/ipa/resources/users' },
+      { title: 'Tokens', href: '/ipa/resources/tokens' },
+      { title: 'Peers', href: '/ipa/resources/peers' },
+      { title: 'Setup Keys', href: '/ipa/resources/setup-keys' },
+      { title: 'Groups', href: '/ipa/resources/groups' },
+      { title: 'Rules', href: '/ipa/resources/rules' },
+      { title: 'Policies', href: '/ipa/resources/policies' },
+      { title: 'Routes', href: '/ipa/resources/routes' },
+      { title: 'DNS', href: '/ipa/resources/dns' },
+      { title: 'Events', href: '/ipa/resources/events' },
     ],
   },
 ]
 
-export function NavigationAPI(props) {
-  let router = useRouter()
+export function NavigationAPI(tableOfContents, props) {
   return (
     <nav {...props}>
       <ul role="list">
@@ -260,17 +224,11 @@ export function NavigationAPI(props) {
         <TopLevelNavItem href="https://github.com/netbirdio/netbird">Github</TopLevelNavItem>
         <TopLevelNavItem href="https://join.slack.com/t/netbirdio/shared_invite/zt-vrahf41g-ik1v7fV8du6t0RwxSrJ96A">Support</TopLevelNavItem>
         {
-          router.route.startsWith('/docs') && docsNavigation.map((group, groupIndex) => (
-          <NavigationGroup
-            key={group.title}
-            group={group}
-            className={groupIndex === 0 && 'md:mt-0'}
-          />
-          )) ||
-          router.route.startsWith('/ipa') && apiNavigation.map((group, groupIndex) => (
+          apiNavigation.map((group, groupIndex) => (
           <NavigationGroup
             key={group.title}
             group={group}
+            tableOfContents={tableOfContents}
             className={groupIndex === 0 && 'md:mt-0'}
           />
           ))

src/components/NavigationDocs.jsx

@@ -1,11 +1,45 @@
-import Link from 'next/link'
 import { useRouter } from 'next/router'
 import clsx from 'clsx'
-import {ActivePageMarker, docsNavigation, NavLink, TopLevelNavItem} from "@/components/NavigationAPI";
-import {useIsInsideMobileNavigation} from "@/components/MobileNavigation";
-import {useSectionStore} from "@/components/SectionProvider";
+import {ActivePageMarker, NavLink, TopLevelNavItem} from "@/components/NavigationAPI";
 import {AnimatePresence, motion} from "framer-motion";
 
+export const docsNavigation = [
+    {
+        title: 'About NetBird',
+        links: [
+            { title: 'Why Wireguard with NetBird?', href: '/docs/about-netbird/why-wireguard-with-netbird' },
+            { title: 'How Netbird Works', href: '/docs/about-netbird/how-netbird-works' },
+            { title: 'NetBird vs. Traditional VPN', href: '/docs/about-netbird/netbird-vs-traditional-vpn' },
+            { title: 'Other', href: '/docs/about-netbird/other' },
+            { title: 'FAQ', href: '/docs/about-netbird/faq' },
+        ],
+    },
+    {
+        title: 'How-to',
+        links: [
+            { title: 'Getting Started', href: '/docs/how-to/getting-started' },
+            { title: 'Peers', href: '/docs/how-to/peers' },
+            { title: 'Setup Keys', href: '/docs/how-to/setup-keys' },
+            { title: 'Access Control', href: '/docs/how-to/access-control' },
+            { title: 'Network Routes', href: '/docs/how-to/network-routes' },
+            { title: 'DNS', href: '/docs/how-to/dns' },
+            { title: 'Users', href: '/docs/how-to/users' },
+            { title: 'Activity', href: '/docs/how-to/activity' },
+            { title: 'Settings', href: '/docs/how-to/settings' },
+            { title: 'Examples', href: '/docs/how-to/examples' },
+            { title: 'CLI', href: '/docs/how-to/cli' },
+        ],
+    },
+    {
+        title: 'Self-Hosted',
+        links: [
+            { title: 'Installation Guide', href: '/docs/selfhosted/selfhosted-guide' },
+            { title: 'Identity Providers', href: '/docs/selfhosted/identity-providers' },
+        ],
+    },
+
+]
+
 export function NavigationDocs(props) {
   return (
     <nav {...props}>
@@ -28,32 +62,6 @@ export function NavigationDocs(props) {
   )
 }
 
-// <li key={section.title} className={clsx('relative mt-6', groupIndex === 0 && 'md:mt-0')}>
-//     <h2 className="font-display font-medium text-slate-900 dark:text-white">
-//         {section.title}
-//     </h2>
-//     <ul
-//         role="list"
-//         className="mt-2 space-y-2 border-l-2 border-slate-100 dark:border-slate-800 lg:mt-4 lg:space-y-4 lg:border-slate-200"
-//     >
-//         {section.links.map((link) => (
-//             <li key={link.href} className="relative">
-//                 <Link
-//                     href={link.href}
-//                     className={clsx(
-//                         'block w-full pl-3.5 before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full',
-//                         link.href === router.pathname
-//                             ? 'font-semibold text-sky-500 before:bg-sky-500'
-//                             : 'text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300'
-//                     )}
-//                 >
-//                     {link.title}
-//                 </Link>
-//             </li>
-//         ))}
-//     </ul>
-// </li>
-
 function NavigationGroup({ group, className }) {
     // If this is the mobile navigation then we always render the initial
     // state, so that the state does not change during the close animation.

src/pages/_app.jsx

@@ -33,16 +33,9 @@ export default function App({ Component, pageProps }) {
         <meta name="description" content={pageProps.description} />
       </Head>
       <MDXProvider components={mdxComponents}>
-
-          {router.pathname.startsWith("/docs") ? (
           <LayoutDocs title={pageProps.title.toString()} tableOfContents={tableOfContents} {...pageProps}>
               <Component {...pageProps} />
           </LayoutDocs>
-          ) : (
-              <LayoutAPI {...pageProps}>
-                  <Component {...pageProps} />
-              </LayoutAPI>
-          )}
       </MDXProvider>
     </>
   )