mirror of
https://github.com/netbirdio/docs.git
synced 2026-04-16 07:26:35 +00:00
Style Consistency Changes and Element Improvements (#541)
Co-authored-by: braginini <bangvalo@gmail.com>
This commit is contained in:
Brandon Hopkins
211
README.md
211
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"
|
||||
|
||||
<Note>
|
||||
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).
|
||||
</Note>
|
||||
```
|
||||
|
||||
#### Warning
|
||||
Displays warning content with a red theme:
|
||||
|
||||
```mdx
|
||||
import {Warning} from "@/components/mdx"
|
||||
|
||||
<Warning>
|
||||
The API is still in Beta state so some errors might not be handled properly yet.
|
||||
</Warning>
|
||||
```
|
||||
|
||||
#### Success
|
||||
Displays success messages with a green theme:
|
||||
|
||||
```mdx
|
||||
import {Success} from "@/components/mdx"
|
||||
|
||||
<Success>
|
||||
Your configuration has been successfully applied.
|
||||
</Success>
|
||||
```
|
||||
|
||||
### Tiles Component
|
||||
|
||||
Displays a grid of clickable cards with hover effects. Perfect for listing related resources or guides:
|
||||
|
||||
```mdx
|
||||
import {Tiles} from "@/components/Tiles"
|
||||
|
||||
<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.',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
```
|
||||
|
||||
**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"
|
||||
|
||||
<YouTube videoId="CFa7SY4Up9k" />
|
||||
|
||||
// With custom parameters
|
||||
<YouTube
|
||||
videoId="CFa7SY4Up9k"
|
||||
title="Video Title"
|
||||
start={175}
|
||||
color="white"
|
||||
modestbranding={1}
|
||||
rel={1}
|
||||
/>
|
||||
|
||||
// Or use a URL instead of videoId
|
||||
<YouTube url="https://www.youtube.com/watch?v=CFa7SY4Up9k" />
|
||||
```
|
||||
|
||||
**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)
|
||||
<Button href="https://app.netbird.io/install" arrow="right">
|
||||
Get started
|
||||
</Button>
|
||||
|
||||
// Secondary button
|
||||
<Button href="/path" variant="secondary">
|
||||
Learn more
|
||||
</Button>
|
||||
|
||||
// Outline button
|
||||
<Button href="/path" variant="outline">
|
||||
Explore
|
||||
</Button>
|
||||
|
||||
// Text button
|
||||
<Button href="/path" variant="text" arrow="right">
|
||||
Read more
|
||||
</Button>
|
||||
|
||||
// With left arrow
|
||||
<Button href="/path" arrow="left">
|
||||
Back
|
||||
</Button>
|
||||
```
|
||||
|
||||
**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"
|
||||
|
||||
<Row>
|
||||
<Col>
|
||||
Left column content
|
||||
</Col>
|
||||
<Col sticky>
|
||||
Right column content (sticky on scroll)
|
||||
</Col>
|
||||
</Row>
|
||||
```
|
||||
|
||||
#### Properties and Property
|
||||
Define API properties or configuration options:
|
||||
|
||||
```mdx
|
||||
import {Properties, Property} from "@/components/mdx"
|
||||
|
||||
<Properties>
|
||||
<Property name="apiKey" type="string" required>
|
||||
Your API key for authentication.
|
||||
</Property>
|
||||
<Property name="timeout" type="number" min={0} max={300}>
|
||||
Request timeout in seconds (default: 30).
|
||||
</Property>
|
||||
</Properties>
|
||||
```
|
||||
|
||||
#### Badge
|
||||
Displays small status badges:
|
||||
|
||||
```mdx
|
||||
import {Badge} from "@/components/mdx"
|
||||
|
||||
<Badge>New</Badge>
|
||||
<Badge variant="secondary">Beta</Badge>
|
||||
```
|
||||
|
||||
#### Code Blocks
|
||||
Code syntax highlighting (automatically available):
|
||||
|
||||
```mdx
|
||||
\`\`\`bash
|
||||
npm install
|
||||
npm run dev
|
||||
\`\`\`
|
||||
|
||||
// Or use code groups for multiple languages
|
||||
<CodeGroup>
|
||||
```bash title="Installation"
|
||||
npm install
|
||||
```
|
||||
```yarn title="Installation"
|
||||
yarn install
|
||||
```
|
||||
</CodeGroup>
|
||||
```
|
||||
|
||||
## Thank you
|
||||
|
||||
NetBird thrives on community participation, and we appreciate your contributions to our website and our documentation!
|
||||
Reference in New Issue
Block a user