From becf4bd6e424ab8bab6327da6e99535250817202 Mon Sep 17 00:00:00 2001 From: Brandon Hopkins <76761586+TechHutTV@users.noreply.github.com> Date: Sun, 11 Jan 2026 00:27:56 -0800 Subject: [PATCH] Style Consistency Changes and Element Improvements (#541) Co-authored-by: braginini --- README.md | 211 +++++++++++++++++- src/components/AboutNetbird.jsx | 49 ---- src/components/Button.jsx | 24 +- src/components/Header.jsx | 44 ++-- src/components/HeroPattern.jsx | 37 +-- src/components/How-To-Guides.jsx | 71 ------ src/components/Layout.jsx | 4 +- src/components/MobileNavigation.jsx | 4 +- src/components/Tiles.jsx | 90 ++++++++ src/components/YouTube.jsx | 123 ++++++++++ src/components/mdx.jsx | 61 +++++ src/pages/_document.jsx | 2 +- src/pages/get-started/index.mdx | 4 +- src/pages/get-started/install/opnsense.mdx | 4 +- src/pages/get-started/install/pfsense.mdx | 4 +- src/pages/get-started/install/proxmox-ve.mdx | 4 +- src/pages/get-started/install/raspberrypi.mdx | 4 +- src/pages/get-started/install/synology.mdx | 4 +- src/pages/introduction.mdx | 90 +++++++- .../intune-mdm.mdx | 4 +- .../sentinelone-edr.mdx | 4 +- .../access-control/manage-network-access.mdx | 4 +- .../access-control/posture-checks/index.mdx | 4 +- src/pages/manage/activity/index.mdx | 2 +- .../routing-traffic-to-private-networks.mdx | 4 +- .../peers/add-machines-to-your-network.mdx | 2 +- src/pages/manage/peers/approve-peers.mdx | 2 +- .../register-machines-using-setup-keys.mdx | 2 +- src/pages/manage/team/idp-sync/index.mdx | 4 +- src/styles/tailwind.css | 62 ----- 30 files changed, 645 insertions(+), 283 deletions(-) delete mode 100644 src/components/AboutNetbird.jsx delete mode 100644 src/components/How-To-Guides.jsx create mode 100644 src/components/Tiles.jsx create mode 100644 src/components/YouTube.jsx diff --git a/README.md b/README.md index fc97d354..d7b4ffc6 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # The NetBird documentation -This repository contains assets required to build the [documentation website for NetBird](https://netbird.io/docs/). It is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator. +This repository contains assets required to build the [documentation website for NetBird](https://netbird.io/docs/). It is built using [Next.js](https://nextjs.org/) with MDX support, a modern React framework for building static and dynamic websites. We're glad that you want to contribute! @@ -38,6 +38,215 @@ Furthermore, in some cases, one of your reviewers might ask for a technical revi Participation in the NetBird community is governed by the [NetBirds' Code of Conduct](https://github.com/netbirdio/netbird/blob/main/CODE_OF_CONDUCT.md). +## Components and Use + +This documentation uses several custom MDX components. Here's a guide to the most commonly used components: + +### Alert Components + +Use these components to highlight important information: + +#### Note +Displays informational content with an orange theme: + +```mdx +import {Note} from "@/components/mdx" + + + NetBird is an **[open-source](https://github.com/netbirdio/netbird)** project and can be self-hosted. + See a comparison between the self-hosted and cloud-hosted versions [here](/selfhosted/self-hosted-vs-cloud-netbird). + +``` + +#### Warning +Displays warning content with a red theme: + +```mdx +import {Warning} from "@/components/mdx" + + + The API is still in Beta state so some errors might not be handled properly yet. + +``` + +#### Success +Displays success messages with a green theme: + +```mdx +import {Success} from "@/components/mdx" + + + Your configuration has been successfully applied. + +``` + +### Tiles Component + +Displays a grid of clickable cards with hover effects. Perfect for listing related resources or guides: + +```mdx +import {Tiles} from "@/components/Tiles" + + +``` + +**Props:** +- `title` (string, required): The heading title for the tiles section +- `id` (string, optional): Optional id for the heading anchor +- `items` (array, required): Array of objects with `href`, `name`, and `description` +- `buttonText` (string, optional): Button text (defaults to "Read more" - currently unused as cards are fully clickable) + +### YouTube Component + +Embeds YouTube videos with customizable parameters: + +```mdx +import {YouTube} from "@/components/YouTube" + + + +// With custom parameters + + +// Or use a URL instead of videoId + +``` + +**Props:** +- `videoId` (string): YouTube video ID +- `url` (string): YouTube URL (alternative to videoId) +- `title` (string, optional): Video title +- `start` (number, optional): Start time in seconds +- `color` (string, optional): Progress bar color - `'white'` or `'red'` (default: `'white'`) +- `modestbranding` (number, optional): Reduces YouTube branding - `0` or `1` (default: `1`) +- `controls` (number, optional): Show/hide controls - `0`, `1`, or `2` (default: `1`) +- `rel` (number, optional): Show related videos - `0` or `1` (default: `1`) + +### Button Component + +Creates styled buttons with multiple variants: + +```mdx +import {Button} from "@/components/Button" + +// Primary button (default) + + +// Secondary button + + +// Outline button + + +// Text button + + +// With left arrow + +``` + +**Props:** +- `variant` (string, optional): Button style - `'primary'`, `'secondary'`, `'filled'`, `'outline'`, or `'text'` (default: `'primary'`) +- `href` (string, optional): Link URL (creates a link if provided, otherwise renders as button) +- `arrow` (string, optional): Arrow icon - `'left'` or `'right'` +- `children` (required): Button text content + +### Other Common Components + +#### Row and Col +Create two-column layouts: + +```mdx +import {Row, Col} from "@/components/mdx" + + + + Left column content + + + Right column content (sticky on scroll) + + +``` + +#### Properties and Property +Define API properties or configuration options: + +```mdx +import {Properties, Property} from "@/components/mdx" + + + + Your API key for authentication. + + + Request timeout in seconds (default: 30). + + +``` + +#### Badge +Displays small status badges: + +```mdx +import {Badge} from "@/components/mdx" + +New +Beta +``` + +#### Code Blocks +Code syntax highlighting (automatically available): + +```mdx +\`\`\`bash +npm install +npm run dev +\`\`\` + +// Or use code groups for multiple languages + + ```bash title="Installation" + npm install + ``` + ```yarn title="Installation" + yarn install + ``` + +``` + ## Thank you NetBird thrives on community participation, and we appreciate your contributions to our website and our documentation! \ No newline at end of file diff --git a/src/components/AboutNetbird.jsx b/src/components/AboutNetbird.jsx deleted file mode 100644 index 40103bc3..00000000 --- a/src/components/AboutNetbird.jsx +++ /dev/null @@ -1,49 +0,0 @@ -import { Button } from '@/components/Button' -import { Heading } from '@/components/Heading' - -const aboutNetbird = [ - { - href: '/about-netbird/how-netbird-works', - name: 'How NetBird works', - description: 'Concepts, architecture, protocols, and more.', - }, - { - href: '/about-netbird/netbird-vs-traditional-vpn', - name: 'NetBird vs. traditional VPN', - description: - 'Learn how NetBird compares to traditional VPNs and why it is better.', - }, - { - href: '/about-netbird/why-wireguard-with-netbird', - name: 'Why WireGuard with NetBird', - description: - 'Learn why and how NetBird uses WireGuard.', - }, -] - -export function AboutNetbird() { - return ( -
- - About NetBird - -
- {aboutNetbird.map((guide) => ( -
-

- {guide.name} -

-

- {guide.description} -

-

- -

-
- ))} -
-
- ) -} diff --git a/src/components/Button.jsx b/src/components/Button.jsx index 7827a8da..0ab7c3bb 100644 --- a/src/components/Button.jsx +++ b/src/components/Button.jsx @@ -16,14 +16,14 @@ function ArrowIcon(props) { const variantStyles = { primary: - 'rounded-full bg-zinc-900 py-1 px-3 text-white hover:bg-zinc-700 dark:bg-orange-400/10 dark:text-orange-400 dark:ring-1 dark:ring-inset dark:ring-orange-400/20 dark:hover:bg-orange-400/10 dark:hover:text-orange-300 dark:hover:ring-orange-300', + 'rounded-[5px] bg-netbird text-white border-0 border-transparent duration-300 relative overflow-hidden group', secondary: 'rounded-full bg-zinc-100 py-1 px-3 text-zinc-900 hover:bg-zinc-200 dark:bg-zinc-800/40 dark:text-zinc-400 dark:ring-1 dark:ring-inset dark:ring-zinc-800 dark:hover:bg-zinc-800 dark:hover:text-zinc-300', filled: - 'rounded-full bg-zinc-900 py-1 px-3 text-white hover:bg-zinc-700 dark:bg-orange-500 dark:text-white dark:hover:bg-orange-400', + 'rounded-full bg-zinc-900 py-1 px-3 text-white hover:bg-zinc-700 dark:bg-netbird dark:text-white dark:hover:bg-netbird-dark', outline: 'rounded-full py-1 px-3 text-zinc-700 ring-1 ring-inset ring-zinc-900/10 hover:bg-zinc-900/2.5 hover:text-zinc-900 dark:text-zinc-400 dark:ring-white/10 dark:hover:bg-white/5 dark:hover:text-white', - text: 'text-orange-500 hover:text-orange-600 dark:text-orange-400 dark:hover:text-orange-500', + text: 'text-netbird hover:text-netbird-dark dark:text-netbird dark:hover:text-netbird-light', } export function Button({ @@ -36,7 +36,7 @@ export function Button({ let Component = props.href ? Link : 'button' className = clsx( - 'inline-flex gap-0.5 justify-center overflow-hidden text-sm font-medium transition whitespace-nowrap', + 'inline-flex gap-0.5 justify-center text-[12px] md:text-xs px-3 py-2 md:px-3 md:py-2 lg:px-4 lg:py-2.5 font-medium transition whitespace-nowrap items-center', variantStyles[variant], className ) @@ -52,6 +52,22 @@ export function Button({ /> ) + if (variant === 'primary') { + return ( +
+ + + + + {arrow === 'left' && arrowIcon} + {children} + {arrow === 'right' && arrowIcon} + + +
+ ) + } + return ( {arrow === 'left' && arrowIcon} diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 042951b0..00cb84ec 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -1,7 +1,7 @@ import { forwardRef } from 'react' import Link from 'next/link' import clsx from 'clsx' -import { motion, useScroll, useTransform } from 'framer-motion' +import { motion } from 'framer-motion' import { Button } from '@/components/Button' import { Logo } from '@/components/Logo' @@ -16,10 +16,10 @@ import { useAnnouncements } from '@/components/announcement-banner/AnnouncementB function TopLevelNavItem({ href, children }) { return ( -
  • +
  • {children} @@ -32,45 +32,37 @@ export const Header = forwardRef(function Header({ className }, ref) { let isInsideMobileNavigation = useIsInsideMobileNavigation() let { bannerHeight } = useAnnouncements() - let { scrollY } = useScroll() - let bgOpacityLight = useTransform(scrollY, [0, 72], [0.5, 0.9]) - let bgOpacityDark = useTransform(scrollY, [0, 72], [0.2, 0.8]) - return (
    -
    +
    -
    +
    -
    -
    +
    +
    diff --git a/src/components/HeroPattern.jsx b/src/components/HeroPattern.jsx index c1b5b086..fabc5ae0 100644 --- a/src/components/HeroPattern.jsx +++ b/src/components/HeroPattern.jsx @@ -3,30 +3,31 @@ import { GridPattern } from '@/components/GridPattern' export function HeroPattern() { return (
    -
    -
    - -
    +
    + +
    +
    ) -} +} \ No newline at end of file diff --git a/src/components/How-To-Guides.jsx b/src/components/How-To-Guides.jsx deleted file mode 100644 index 701e8be5..00000000 --- a/src/components/How-To-Guides.jsx +++ /dev/null @@ -1,71 +0,0 @@ -import { Button } from '@/components/Button' -import { Heading } from '@/components/Heading' - -const howToGuides = [ - { - href: '/get-started', - name: 'Quickstart guide', - description: 'Start using NetBird in under 5 minutes.', - }, - { - href: '/manage/access-control/manage-network-access', - name: 'Manage network access', - description: - 'Learn how to use access controls to manage access to your machines.', - }, - { - href: '/manage/team/add-users-to-your-network', - name: 'Add users to your network', - description: 'Learn how to add team members to your NetBird network.', - }, - { - href: '/manage/network-routes/routing-traffic-to-private-networks', - name: 'Route traffic to private networks', - description: - 'Learn how to provide access to LANs, VPS, and corporate private networks.', - }, - { - href: '/manage/network-routes/configuring-default-routes-for-internet-traffic', - name: 'Configure default routes and traffic for the Internet', - description: 'Understand how to set up your network for accessing the internet through default routes, also known as "exit nodes".', - }, - { - href: '/manage/activity/traffic-events-logging', - name: 'Log and monitor network activity', - description: - 'Learn how to keep track of system and network activities in your account.', - }, - { - href: '/manage/dns', - name: 'Manage DNS in your network', - description: - 'Learn how to configure name servers in your private network.', - }, -] - -export function HowToGuides() { - return ( -
    - - How-To Guides - -
    - {howToGuides.map((guide) => ( -
    -

    - {guide.name} -

    -

    - {guide.description} -

    -

    - -

    -
    - ))} -
    -
    - ) -} diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx index 808953d0..87579fd3 100644 --- a/src/components/Layout.jsx +++ b/src/components/Layout.jsx @@ -183,15 +183,15 @@ 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 }} > -
    +
    -
    {router.route.startsWith("/ipa") ? : }
    +
    diff --git a/src/components/MobileNavigation.jsx b/src/components/MobileNavigation.jsx index 15539b50..54c531be 100644 --- a/src/components/MobileNavigation.jsx +++ b/src/components/MobileNavigation.jsx @@ -78,7 +78,7 @@ export function MobileNavigation() { leaveFrom="opacity-100" leaveTo="opacity-0" > -
    +
    @@ -105,7 +105,7 @@ export function MobileNavigation() { > {router.route.startsWith("/ipa") ? : } diff --git a/src/components/Tiles.jsx b/src/components/Tiles.jsx new file mode 100644 index 00000000..d2fa3a89 --- /dev/null +++ b/src/components/Tiles.jsx @@ -0,0 +1,90 @@ +import Link from 'next/link' +import { motion, useMotionTemplate, useMotionValue } from 'framer-motion' + +import { GridPattern } from '@/components/GridPattern' +import { Heading } from '@/components/Heading' + +function TilePattern({ mouseX, mouseY }) { + let maskImage = useMotionTemplate`radial-gradient(180px at ${mouseX}px ${mouseY}px, white, transparent)` + let style = { maskImage, WebkitMaskImage: maskImage } + + return ( +
    +
    + +
    + + + + +
    + ) +} + +/** + * Generic Tiles component for displaying a grid of tile items + * + * @param {string} title - The heading title for the tiles section + * @param {string} [id] - Optional id for the heading anchor + * @param {Array<{href: string, name: string, description: string}>} items - Array of tile items + * @param {string} [buttonText='Read more'] - Optional button text (defaults to "Read more") + */ +export function Tiles({ title, id, items, buttonText = 'Read more' }) { + return ( +
    + + {title} + +
    + {items.map((item) => { + let mouseX = useMotionValue(0) + let mouseY = useMotionValue(0) + + function onMouseMove({ currentTarget, clientX, clientY }) { + let { left, top } = currentTarget.getBoundingClientRect() + mouseX.set(clientX - left) + mouseY.set(clientY - top) + } + + return ( +
    + +
    +
    +

    + + + {item.name} + +

    +

    + {item.description} +

    +
    +
    + ) + })} +
    +
    + ) +} \ No newline at end of file diff --git a/src/components/YouTube.jsx b/src/components/YouTube.jsx new file mode 100644 index 00000000..d0ba333c --- /dev/null +++ b/src/components/YouTube.jsx @@ -0,0 +1,123 @@ +import clsx from 'clsx' + +/** + * Extracts YouTube video ID from various YouTube URL formats + */ +function extractYouTubeId(url) { + if (!url) return null + + // If it's already just an ID, return it + if (!url.includes('youtube.com') && !url.includes('youtu.be') && !url.includes('/')) { + return url + } + + // Handle youtu.be short links + if (url.includes('youtu.be/')) { + const match = url.match(/youtu\.be\/([a-zA-Z0-9_-]+)/) + return match ? match[1] : null + } + + // Handle youtube.com/watch?v=... + if (url.includes('youtube.com/watch')) { + const match = url.match(/[?&]v=([a-zA-Z0-9_-]+)/) + return match ? match[1] : null + } + + // Handle youtube.com/embed/... + if (url.includes('youtube.com/embed/')) { + const match = url.match(/embed\/([a-zA-Z0-9_-]+)/) + return match ? match[1] : null + } + + return null +} + +/** + * YouTube video embed component + * + * Usage: + * + * + * + * + * + */ +export function YouTube({ + videoId, + url, + title, + start, + color = 'white', // 'red' | 'white' - controls progress bar color (default: white) + modestbranding = 1, // 0 | 1 - reduces YouTube branding (1 = minimal, default: 1 = minimal) + controls, // 0 | 1 | 2 - show/hide player controls (0 = hide, 1 = show, 2 = delayed) + rel = 1, // 0 | 1 - show related videos from same channel (0 = hide, 1 = show, default: 1 = show) + className, + ...props +}) { + // Extract video ID from URL if provided + const id = videoId || extractYouTubeId(url) + + if (!id) { + console.warn('YouTube component: No valid video ID or URL provided') + return null + } + + // Extract start time from URL if present + let startTime = start + if (!startTime && url) { + const startMatch = url.match(/[?&]start=(\d+)/) + if (startMatch) { + startTime = parseInt(startMatch[1], 10) + } + } + + // Build embed URL with parameters + let embedUrl = `https://www.youtube.com/embed/${id}` + const params = new URLSearchParams() + + if (startTime) { + params.append('start', startTime.toString()) + } + + // Add color parameter - YouTube defaults to 'red', so we need to set 'white' explicitly + if (color === 'white') { + params.append('color', 'white') + } + if (modestbranding === 1) { + params.append('modestbranding', '1') + } + if (controls !== undefined && controls !== 1) { + params.append('controls', controls.toString()) + } + // Only add rel parameter if explicitly set to 0 to hide related videos + // YouTube's default is 1 (show), so we don't need to add it when rel === 1 + if (rel === 0) { + params.append('rel', '0') + } + + const queryString = params.toString() + if (queryString) { + embedUrl += `?${queryString}` + } + + return ( +
    + -
    + ## Create Your Account diff --git a/src/pages/get-started/install/opnsense.mdx b/src/pages/get-started/install/opnsense.mdx index 33e031dc..fdb334ac 100644 --- a/src/pages/get-started/install/opnsense.mdx +++ b/src/pages/get-started/install/opnsense.mdx @@ -4,9 +4,7 @@ The NetBird client (agent) allows a peer to join a pre-existing NetBird deployme there are both managed and [self-hosted](https://docs.netbird.io/selfhosted/selfhosted-quickstart) options available. -
    - -
    + The NetBird package is officially included starting from OPNsense `25.7.3`. diff --git a/src/pages/get-started/install/pfsense.mdx b/src/pages/get-started/install/pfsense.mdx index 34ecb4cc..01d46ca5 100644 --- a/src/pages/get-started/install/pfsense.mdx +++ b/src/pages/get-started/install/pfsense.mdx @@ -7,9 +7,7 @@ there are both managed and [self-hosted](https://docs.netbird.io/selfhosted/self This installation is intended for early adopters while the pfSense package is under review and not yet available in the pfSense package manager. -
    - -
    + ## Prerequisites - Shell/SSH access to pfSense (via Web UI shell or remote SSH) diff --git a/src/pages/get-started/install/proxmox-ve.mdx b/src/pages/get-started/install/proxmox-ve.mdx index 1bd267c2..d20a1dae 100644 --- a/src/pages/get-started/install/proxmox-ve.mdx +++ b/src/pages/get-started/install/proxmox-ve.mdx @@ -110,9 +110,7 @@ Now you should see a successful connection message and you're good to go! Now if ## Proxmox Setup Tutorial -
    - -
    + ## Additional Resources diff --git a/src/pages/get-started/install/raspberrypi.mdx b/src/pages/get-started/install/raspberrypi.mdx index 06cc6319..52e2ca89 100644 --- a/src/pages/get-started/install/raspberrypi.mdx +++ b/src/pages/get-started/install/raspberrypi.mdx @@ -2,9 +2,7 @@ import {Note} from "@/components/mdx"; # Install NetBird on the Raspberry Pi -
    - -
    + Start by downloading [Raspberry Pi Imager](https://www.raspberrypi.com/software/) for your operating system and inserting a microSD card with at least 8GB of capacity, though 32GB is recommended for breathing room. diff --git a/src/pages/get-started/install/synology.mdx b/src/pages/get-started/install/synology.mdx index 2154e781..e9483f74 100644 --- a/src/pages/get-started/install/synology.mdx +++ b/src/pages/get-started/install/synology.mdx @@ -120,9 +120,7 @@ For a complete cleanup, you should also remove the Synology NAS as a peer from y ## Video Walkthrough -
    - -
    + ## Support Us diff --git a/src/pages/introduction.mdx b/src/pages/introduction.mdx index 73acdaba..5c3c5f25 100644 --- a/src/pages/introduction.mdx +++ b/src/pages/introduction.mdx @@ -1,15 +1,14 @@ import {Note} from "@/components/mdx" -import {HowToGuides} from "@/components/How-To-Guides" -import {AboutNetbird} from "@/components/AboutNetbird" +import {Tiles} from "@/components/Tiles" +import {YouTube} from "@/components/YouTube" +import {Button} from "@/components/Button" export const description = 'Learn everything there is to know about NetBird.' # Introduction to NetBird -
    - -
    + NetBird is an Open Source Zero Trust Networking platform that allows you to create secure private networks for your organization or home. We designed NetBird to be simple and fast, requiring near-zero configuration effort and leaving @@ -30,8 +29,85 @@ It literally takes less than 5 minutes to deploy a secure point-to-point VPN wit
    - + - + diff --git a/src/pages/manage/access-control/endpoint-detection-and-response/intune-mdm.mdx b/src/pages/manage/access-control/endpoint-detection-and-response/intune-mdm.mdx index c3fe958c..08f72f59 100644 --- a/src/pages/manage/access-control/endpoint-detection-and-response/intune-mdm.mdx +++ b/src/pages/manage/access-control/endpoint-detection-and-response/intune-mdm.mdx @@ -1,8 +1,6 @@ # Allow Only Intune-Managed Devices to Access Your Network -
    - -
    + TLDR: Devices marked as "Non-compliant" in Intune will automatically lose access, ensuring strict adherence to your security policies. diff --git a/src/pages/manage/access-control/endpoint-detection-and-response/sentinelone-edr.mdx b/src/pages/manage/access-control/endpoint-detection-and-response/sentinelone-edr.mdx index 4c258d59..c7c66141 100644 --- a/src/pages/manage/access-control/endpoint-detection-and-response/sentinelone-edr.mdx +++ b/src/pages/manage/access-control/endpoint-detection-and-response/sentinelone-edr.mdx @@ -10,9 +10,7 @@ The integration of NetBird with SentinelOne provides organizations with robust s only IT-managed devices running SentinelOne to access the network. Additionally, the integration uses SentinelOne's threat detection capabilities, enabling administrators to further limit network access based on the security posture of each device. -
    - -
    + SentinelOne's endpoint protection provides real-time threat detection and automated response capabilities. By integrating with SentinelOne Singularity, NetBird can ensure that only devices with active security monitoring and protection can access the network. diff --git a/src/pages/manage/access-control/manage-network-access.mdx b/src/pages/manage/access-control/manage-network-access.mdx index dbb25514..bdbbedb6 100644 --- a/src/pages/manage/access-control/manage-network-access.mdx +++ b/src/pages/manage/access-control/manage-network-access.mdx @@ -8,9 +8,7 @@ your environment. Watch our Access Control video on YouTube: -
    - -
    + For a visual overview of your access policies and network topology, check out the [Control Center](/manage/control-center), which provides an interactive graph view of peers, groups, and their access relationships. diff --git a/src/pages/manage/access-control/posture-checks/index.mdx b/src/pages/manage/access-control/posture-checks/index.mdx index f119d822..9612ea8e 100644 --- a/src/pages/manage/access-control/posture-checks/index.mdx +++ b/src/pages/manage/access-control/posture-checks/index.mdx @@ -10,9 +10,7 @@ By using these diverse checking capabilities, NetBird empowers you to create a r ## Setting Up Posture Checks Setting up posture checks in NetBird is straightforward, you can follow the example in the video below: -
    - -
    + Or follow the guide with other examples below: diff --git a/src/pages/manage/activity/index.mdx b/src/pages/manage/activity/index.mdx index 336c0cf8..eb7183ea 100644 --- a/src/pages/manage/activity/index.mdx +++ b/src/pages/manage/activity/index.mdx @@ -8,7 +8,7 @@ and many other key network events. To get started with event logging in NetBird, watch this introductory video: - + ## Access the Audit Events Logging View diff --git a/src/pages/manage/network-routes/routing-traffic-to-private-networks.mdx b/src/pages/manage/network-routes/routing-traffic-to-private-networks.mdx index 086feafe..f1e2c1e4 100644 --- a/src/pages/manage/network-routes/routing-traffic-to-private-networks.mdx +++ b/src/pages/manage/network-routes/routing-traffic-to-private-networks.mdx @@ -1,9 +1,7 @@ # Routing Traffic to Private Networks -
    - -
    +

    diff --git a/src/pages/manage/peers/add-machines-to-your-network.mdx b/src/pages/manage/peers/add-machines-to-your-network.mdx index c404b2a2..b61735b3 100644 --- a/src/pages/manage/peers/add-machines-to-your-network.mdx +++ b/src/pages/manage/peers/add-machines-to-your-network.mdx @@ -10,7 +10,7 @@ an Android or iOS device, a personal laptop, a single-board computer like Raspbe ## Related Video Content For details on adding machines to your network, part of our "Getting started with NetBird" video covers this topic: - + ## Use NetBird web UI to add new peers diff --git a/src/pages/manage/peers/approve-peers.mdx b/src/pages/manage/peers/approve-peers.mdx index 95d9412b..3b86e662 100644 --- a/src/pages/manage/peers/approve-peers.mdx +++ b/src/pages/manage/peers/approve-peers.mdx @@ -14,7 +14,7 @@ Administrators then can assess whether the peer is eligible to join the network. For details on the peer approval feature, part of our "Getting started with NetBird" video covers this topic: - + ## Enable peer approval To enable peer approval, navigate to [Settings » Authentication](https://app.netbird.io/settings) and enable 'Peer approval'. diff --git a/src/pages/manage/peers/register-machines-using-setup-keys.mdx b/src/pages/manage/peers/register-machines-using-setup-keys.mdx index 2c866d19..e715cf8d 100644 --- a/src/pages/manage/peers/register-machines-using-setup-keys.mdx +++ b/src/pages/manage/peers/register-machines-using-setup-keys.mdx @@ -6,7 +6,7 @@ It simply associates a machine with an account on a first run. ## Related Video Content For a comprehensive guide, part of our "Getting started with NetBird" video specifically covers setup keys: - + The setup key can be provided as a parameter to the ```netbird up``` command. This makes it possible to run automated deployments with infrastructure-as-code software like Ansible, Cloudformation or Terraform. diff --git a/src/pages/manage/team/idp-sync/index.mdx b/src/pages/manage/team/idp-sync/index.mdx index cb1d7cdc..7401fe77 100644 --- a/src/pages/manage/team/idp-sync/index.mdx +++ b/src/pages/manage/team/idp-sync/index.mdx @@ -26,9 +26,7 @@ eliminating the need for manual grouping. This video guide walks you through an example integration with Microsoft Entra ID, covering both user onboarding and offboarding scenarios: -
    - -
    + ## Supported Identity Providers diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css index af0cb75a..b7265505 100644 --- a/src/styles/tailwind.css +++ b/src/styles/tailwind.css @@ -59,68 +59,6 @@ overflow:hidden; } -.videowrapper { - position: relative; - width: 100%; - aspect-ratio: 16 / 9; - overflow: hidden; - margin-left: 10px; - margin-right: auto; -} - -@media (max-width: 1024px) { - .videowrapper { - max-width: 40rem; /* matches prose max-width-2xl */ - } -} - -@media (min-width: 1024px) { - .videowrapper { - max-width: 50rem; /* matches prose max-width-3xl */ - } -} - -.videowrapper iframe { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border-radius: 4px; - border: 0; -} - -.videowrapperadjusted { - position: relative; - width: 100%; - aspect-ratio: 16 / 9; - overflow: hidden; - margin-left: 10px; - margin-right: auto; -} - -@media (max-width: 1024px) { - .videowrapperadjusted { - max-width: 40rem; /* matches prose max-width-2xl */ - } -} - -@media (min-width: 1024px) { - .videowrapperadjusted { - max-width: 50rem; /* matches prose max-width-3xl */ - } -} - -.videowrapperadjusted iframe { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border-radius: 4px; - border: 0; -} - .spacer-sm { height: 5px; }