General Docs Improvements

next.config.mjs

@@ -130,6 +130,11 @@ const nextConfig = {
                 destination: '/manage/access-control/endpoint-detection-and-response/sentinelone-edr',
                 permanent: true,
             },
+            {
+                source: '/how-to/huntress-edr',
+                destination: '/manage/access-control/endpoint-detection-and-response/huntress-edr',
+                permanent: true,
+            },
             {
                 source: '/how-to/intune-mdm',
                 destination: '/manage/access-control/endpoint-detection-and-response/intune-mdm',

src/components/ImageZoom.jsx

@@ -20,8 +20,10 @@ export function ImageZoom() {
         target.tagName === 'IMG' &&
         (target.classList.contains('imagewrapper') ||
           target.classList.contains('imagewrapper-big') ||
+          target.classList.contains('imagewrapper-medium') ||
           target.closest('.imagewrapper') ||
-          target.closest('.imagewrapper-big'))
+          target.closest('.imagewrapper-big') ||
+          target.closest('.imagewrapper-medium'))
       ) {
         e.preventDefault()
         setZoomedImage(target.src)

src/components/Layout.jsx

@@ -85,6 +85,7 @@ function GitHubIcon(props) {
 
 function useTableOfContents(tableOfContents) {
   let [currentSection, setCurrentSection] = useState(tableOfContents[0]?.id)
+  let [showJumpToTop, setShowJumpToTop] = useState(false)
 
   let getHeadings = useCallback((tableOfContents) => {
     return tableOfContents
@@ -105,7 +106,10 @@ function useTableOfContents(tableOfContents) {
     if (tableOfContents.length === 0) return
     let headings = getHeadings(tableOfContents)
     function onScroll() {
-      let top = window.scrollY + 10;
+      let scrollTop = window.scrollY
+      setShowJumpToTop(scrollTop > 400)
+
+      let top = scrollTop + 10;
       let current = headings[0]?.id
       for (let heading of headings) {
         if (top >= heading?.top) {
@@ -123,7 +127,7 @@ function useTableOfContents(tableOfContents) {
     }
   }, [getHeadings, tableOfContents])
 
-  return currentSection
+  return { currentSection, showJumpToTop }
 }
 
 export function Layout({ children, title, tableOfContents }) {
@@ -156,7 +160,12 @@ export function Layout({ children, title, tableOfContents }) {
       position: toast.POSITION.BOTTOM_RIGHT,
     });
   };
-  let currentSection = useTableOfContents(tableOfContents)
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+
+  let { currentSection, showJumpToTop } = useTableOfContents(tableOfContents)
 
   function isActive(section) {
     if (section.id === currentSection) {
@@ -183,7 +192,7 @@ export function Layout({ children, title, tableOfContents }) {
             className="contents lg:pointer-events-none lg:fixed lg:inset-0 lg:z-40 lg:flex"
             style={{ top: bannerHeight }}
         >
-          <div className="contents lg:pointer-events-auto lg:block lg:w-72 lg:overflow-y-auto lg:border-r lg:border-zinc-900/10 lg:dark:border-neutral-700/50 lg:px-6 lg:pb-8 lg:pt-4 lg:bg-white/70 lg:dark:bg-[#181A1D]/95 lg:backdrop-blur-lg xl:w-80 lg:overflow-x-visible">
+          <div className="contents lg:pointer-events-auto lg:block lg:w-72 lg:overflow-y-auto lg:border-r lg:border-zinc-900/10 lg:dark:border-neutral-700/50 lg:px-6 lg:pb-8 lg:pt-4 lg:bg-white/70 lg:dark:bg-[#181A1D]/95 lg:backdrop-blur-lg xl:w-80 lg:overflow-x-visible sidebar-scroll">
             <div className="hidden lg:flex">
               <Link href="/" aria-label="Home">
                 <Logo className="h-6" />
@@ -228,12 +237,26 @@ export function Layout({ children, title, tableOfContents }) {
           <nav aria-labelledby="on-this-page-title" className="w-80">
             {tableOfContents.length > 0 && (
               <>
-                <h2
-                  id="on-this-page-title"
-                  className="font-display text-sm font-medium text-slate-900 dark:text-white"
-                >
-                  On this page
-                </h2>
+                <div className="flex items-center justify-between mb-4">
+                  <h2
+                    id="on-this-page-title"
+                    className="font-display text-sm font-medium text-slate-900 dark:text-white"
+                  >
+                    On this page
+                  </h2>
+                  {showJumpToTop && (
+                    <button
+                      onClick={scrollToTop}
+                      className="text-xs text-slate-500 hover:text-orange-500 dark:text-slate-400 dark:hover:text-orange-400 transition-colors flex items-center gap-1"
+                      aria-label="Jump to top"
+                    >
+                      <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 10l7-7m0 0l7 7m-7-7v18" />
+                      </svg>
+                      Top
+                    </button>
+                  )}
+                </div>
                 <ol role="list" className="mt-4 space-y-3 text-sm">
                   {tableOfContents.map((section) => (
                     <li key={section.id}>

src/pages/_app.jsx

@@ -6,7 +6,6 @@ import * as mdxComponents from '@/components/mdx'
 import { useMobileNavigationStore } from '@/components/MobileNavigation'
 
 import '@/styles/tailwind.css'
-import '@/styles/global.css';
 import 'focus-visible'
 import {Layout} from "@/components/Layout";
 import {slugifyWithCounter} from "@sindresorhus/slugify";

src/pages/about-netbird/faq.mdx

@@ -1,6 +1,6 @@
 import {Note} from "@/components/mdx";
 
-export const title = 'FAQ'
+# FAQ
 
 ## What firewall ports should I open to use NetBird (Network Firewalls)?
 

src/pages/about-netbird/how-netbird-works.mdx

@@ -1,10 +1,7 @@
 import {Note} from "@/components/mdx";
 
-export const title = 'How NetBird Works'
+# How NetBird Works
 
-## Architecture
-
-### Overview
 NetBird is an open source platform consisting of a collection of components, responsible for handling peer-to-peer
 connections, tunneling, authentication, and network management (IPs, keys, ACLs, etc).
 
@@ -35,7 +32,7 @@ In this case, [groups and access controls](/manage/access-control/manage-network
 
 Let's now take a closer look at each of NetBird's components.
 
-### Management Service
+## Management Service
 
 The Management service is the central coordination component for NetBird with a UI dashboard.
 It keeps the network state, public WireGuard keys of the peers, authenticates and distributes network changes to peers.
@@ -61,7 +58,7 @@ The Management service runs in the cloud NetBird-managed. It can also be self-ho
     <img src="/docs-static/img/about-netbird/management.png" alt="management-dia" className="imagewrapper-big"/>
 </p>
 
-### Client Application
+## Client Application
 
 The NetBird Client application (or agent) is a software that is installed on the machines within a NetBird network.
 It is an entry point to your private network that makes it possible for machines to communicate with each other.
@@ -88,7 +85,7 @@ The client also applies other DNS settings that are received from the Management
 The **private key**, generated by the NetBird client, **never leaves the machine**, ensuring that only the machine that owns the key can decrypt traffic addressed to it.
 </Note>
 
-### Signal Service
+## Signal Service
 
 The Signal Service, or simply Signal, is a lightweight piece of software that helps peers to negotiate direct connections.
 It does not store any data and no traffic passes through it.
@@ -109,7 +106,7 @@ This is done through Signal. After a connection has been established, Signal ste
 NetBird Signal is very similar to the signaling servers used in [WebRTC](https://developer.mozilla.org/en-US/Web/API/WebRTC_API/Signaling_and_video_calling#the_signaling_server).
 It runs in the cloud NetBird-managed and can be self-hosted.
 
-### Relay Service
+## Relay Service
 
 The Relay service is a [TURN server](https://webrtc.org/getting-started/turn-server) in WebRTC terminology.
 In fact, we use an open-source implementation called [Coturn](https://github.com/coturn/coturn).

src/pages/get-started/index.mdx

@@ -1,6 +1,6 @@
 import {Note} from "@/components/mdx";
 
-export const title = 'Getting Started'
+# Getting Started
 
 ## Quickstart Guide
 

src/pages/use-cases/examples.mdx

@@ -1,5 +1,5 @@
 
-export const title = 'Examples'
+# Examples
 
 ## NetBird Client on AWS ECS (Terraform)
 

src/styles/tailwind.css

@@ -39,6 +39,28 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  html {
+    scroll-behavior: smooth;
+  }
+}
+
+@layer components {
+  .custom-details li {
+    margin-left: 50px !important;
+  }
+
+  /* Hide scrollbar for sidebar navigation */
+  .sidebar-scroll {
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+  }
+
+  .sidebar-scroll::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, Opera */
+  }
+}
+
 .imagewrapper {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   border-radius: 4px;
@@ -57,6 +79,9 @@
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   border-radius: 4px;
   overflow:hidden;
+  max-width: 100%;
+  width: 100%;
+  height: auto;
 }
 
 .spacer-sm {
@@ -69,7 +94,8 @@
 
 /* Image Zoom / Lightbox Styles */
 .imagewrapper,
-.imagewrapper-big {
+.imagewrapper-big,
+.imagewrapper-medium {
   cursor: zoom-in;
 }