Style Consistency Changes and Element Improvements (#541)

Co-authored-by: braginini <bangvalo@gmail.com>
This commit is contained in:
Brandon Hopkins
2026-01-11 00:27:56 -08:00
committed by GitHub
parent aef978f63d
commit becf4bd6e4
30 changed files with 645 additions and 283 deletions

View File

@@ -44,7 +44,7 @@ export default function Document() {
<script dangerouslySetInnerHTML={{ __html: modeScript }} />
<link rel="shortcut icon" href="/docs-static/img/favicon.ico" />
</Head>
<body className="bg-white antialiased dark:bg-zinc-900">
<body className="bg-white antialiased dark:bg-[#181A1D]">
<GoogleTageManagerBodyScript />
<Main />
<NextScript />

View File

@@ -7,9 +7,7 @@ export const title = 'Getting Started'
Welcome to NetBird! This guide will walk you through our new onboarding process to create your account, connect your first devices,
and build a secure peer-to-peer overlay network in less than ten minutes.
<div className="videowrapper">
<iframe src="https://www.youtube.com/embed/dr0u-u9uD84" allow="fullscreen;"></iframe>
</div>
<YouTube videoId="dr0u-u9uD84" />
## Create Your Account

View File

@@ -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.
<div className="videowrapper">
<iframe src="https://www.youtube.com/embed/AK0Ct-ULFKg?start=669" allow="fullscreen;"></iframe>
</div>
<YouTube videoId="AK0Ct-ULFKg" start={669} />
<Note>
The NetBird package is officially included starting from OPNsense `25.7.3`.

View File

@@ -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.
</Note>
<div className="videowrapper">
<iframe src="https://www.youtube.com/embed/Kgrcquyeohc" allow="fullscreen;"></iframe>
</div>
<YouTube videoId="Kgrcquyeohc" />
## Prerequisites
- Shell/SSH access to pfSense (via Web UI shell or remote SSH)

View File

@@ -110,9 +110,7 @@ Now you should see a successful connection message and you're good to go! Now if
## Proxmox Setup Tutorial
<div className="videowrapper">
<iframe src="https://www.youtube.com/embed/KMNS_JoHFhg" allow="fullscreen;"></iframe>
</div>
<YouTube videoId="KMNS_JoHFhg" />
## Additional Resources

View File

@@ -2,9 +2,7 @@ import {Note} from "@/components/mdx";
# Install NetBird on the Raspberry Pi
<div className="videowrapper">
<iframe src="https://www.youtube.com/embed/P0aAdYnex80" allow="fullscreen;"></iframe>
</div>
<YouTube videoId="P0aAdYnex80" />
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.

View File

@@ -120,9 +120,7 @@ For a complete cleanup, you should also remove the Synology NAS as a peer from y
## Video Walkthrough
<div className="videowrapper">
<iframe src="https://www.youtube.com/embed/9VKOAe_T038" allow="fullscreen;"></iframe>
</div>
<YouTube videoId="9VKOAe_T038" />
## Support Us

View File

@@ -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
<div className="videowrapper">
<iframe src="https://www.youtube.com/embed/CFa7SY4Up9k?si=FVdoVW0ClxsJgd4t" allow="fullscreen;"></iframe>
</div>
<YouTube videoId="CFa7SY4Up9k" />
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
<Button href="https://github.com/netbirdio/netbird" variant="outline" children="Explore Github" />
</div>
<AboutNetbird />
<Tiles
title="About NetBird"
id="about-netbird"
items={[
{
href: '/about-netbird/how-netbird-works',
name: 'How NetBird Works',
description: 'Learn about NetBird concepts, architecture, protocols, and how it creates secure networks.',
},
{
href: '/about-netbird/netbird-vs-traditional-vpn',
name: 'NetBird vs. Traditional VPN',
description:
'Discover how NetBird compares to traditional VPNs and understand the advantages of Zero Trust networking.',
},
{
href: '/about-netbird/why-wireguard-with-netbird',
name: 'Why WireGuard with NetBird',
description:
'Explore why NetBird uses WireGuard and how it provides fast, secure, and modern networking.',
},
{
href: '/about-netbird/browser-client-architecture',
name: 'Browser Client Architecture',
description:
'Understand how the Browser Client enables secure remote access directly from web browsers using WebAssembly.',
},
]}
/>
<HowToGuides />
<Tiles
title="Guides"
id="guides"
items={[
{
href: '/get-started',
name: 'Quickstart Guide',
description: 'Get started with NetBird in under 5 minutes. Learn the basics of installation and setup.',
},
{
href: '/selfhosted/selfhosted-quickstart',
name: 'Self-Hosted Quickstart',
description: 'Get started with self-hosted NetBird in 5 minutes. Learn how to deploy and configure your own NetBird instance.',
},
{
href: '/manage/access-control/manage-network-access',
name: 'Manage Network Access',
description:
'Learn how to use access control policies to manage and secure access to your machines and resources.',
},
{
href: '/manage/team/add-users-to-your-network',
name: 'Add Users to Your Network',
description: 'Discover how to add team members to your NetBird network and manage user access.',
},
{
href: '/manage/network-routes/routing-traffic-to-private-networks',
name: 'Route Traffic to Private Networks',
description:
'Learn how to provide secure access to LANs, VPS instances, and corporate private networks.',
},
{
href: '/manage/network-routes/configuring-default-routes-for-internet-traffic',
name: 'Configure Default Routes',
description: 'Set up default routes for internet traffic and configure exit nodes for your network.',
},
{
href: '/manage/activity/traffic-events-logging',
name: 'Log and Monitor Network Activity',
description:
'Learn how to track and monitor system and network activities in your NetBird account.',
},
{
href: '/manage/dns',
name: 'Manage DNS in Your Network',
description:
'Configure custom name servers and DNS settings for your private network.',
},
]}
/>

View File

@@ -1,8 +1,6 @@
# Allow Only Intune-Managed Devices to Access Your Network
<div className="videowrapper">
<iframe src="https://www.youtube.com/embed/W4DaE4Dj04o" allow="fullscreen;"></iframe>
</div>
<YouTube videoId="W4DaE4Dj04o" />
<Note>
TLDR: Devices marked as "Non-compliant" in Intune will automatically lose access, ensuring strict adherence to your security policies.

View File

@@ -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.
<div className="videowrapper">
<iframe src="https://www.youtube.com/embed/QVs0RhprVYM" allow="fullscreen;"></iframe>
</div>
<YouTube videoId="QVs0RhprVYM" />
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.

View File

@@ -8,9 +8,7 @@ your environment.
Watch our Access Control video on YouTube:
<div className="videowrapper">
<iframe src="https://www.youtube.com/embed/WtZD_q-g_Jc" allow="fullscreen;"></iframe>
</div>
<YouTube videoId="WtZD_q-g_Jc" />
<Note>
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.

View File

@@ -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:
<div className="videowrapperadjusted" >
<iframe src="https://www.youtube.com/embed/-KlJUBuZrpo" allow="fullscreen;"></iframe>
</div>
<YouTube videoId="-KlJUBuZrpo" />
Or follow the guide with other examples below:

View File

@@ -8,7 +8,7 @@ and many other key network events.
To get started with event logging in NetBird, watch this introductory video:
<iframe width="560" height="315" src="https://www.youtube.com/embed/UlnMo1KYXPU?si=JdzEr9v2EZHlP7lc" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<YouTube videoId="UlnMo1KYXPU" />
## Access the Audit Events Logging View

View File

@@ -1,9 +1,7 @@
# Routing Traffic to Private Networks
<div className="videowrapper">
<iframe src="https://www.youtube.com/embed/VQuPuBOAknQ" allow="fullscreen;"></iframe>
</div>
<YouTube videoId="VQuPuBOAknQ" />
<br/><br/>

View File

@@ -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:
<iframe width="560" height="315" src="https://www.youtube.com/embed/JRCZy4rLi-c?start=34" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<YouTube videoId="JRCZy4rLi-c" start={34} />
## Use NetBird web UI to add new peers

View File

@@ -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:
<iframe width="560" height="315" src="https://www.youtube.com/embed/JRCZy4rLi-c?start=335" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<YouTube videoId="JRCZy4rLi-c" start={335} />
## Enable peer approval
To enable peer approval, navigate to [Settings &raquo; Authentication](https://app.netbird.io/settings) and enable 'Peer approval'.

View File

@@ -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:
<iframe width="560" height="315" src="https://www.youtube.com/embed/JRCZy4rLi-c?start=175" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<YouTube videoId="JRCZy4rLi-c" start={175} />
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.

View File

@@ -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:
<div className="videowrapper">
<iframe src="https://www.youtube.com/embed/RxYWTpf7cgY" allow="fullscreen;"></iframe>
</div>
<YouTube videoId="RxYWTpf7cgY" />
## Supported Identity Providers