mirror of
https://github.com/netbirdio/docs.git
synced 2026-04-19 00:46:35 +00:00
split docs into different groups and start landing page
This commit is contained in:
Pascal Fischer
@@ -17,16 +17,13 @@ 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-full bg-zinc-900 py-1 px-3 text-white hover:bg-zinc-700 dark:bg-emerald-400/10 dark:text-emerald-400 dark:ring-1 dark:ring-inset dark:ring-emerald-400/20 dark:hover:bg-emerald-400/10 dark:hover:text-emerald-300 dark:hover:ring-emerald-300',
|
||||
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-emerald-500 dark:text-white dark:hover:bg-emerald-400',
|
||||
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-emerald-500 hover:text-emerald-600 dark:text-emerald-400 dark:hover:text-emerald-500',
|
||||
}
|
||||
|
||||
export function Button({
|
||||
|
||||
167
src/components/Clients.jsx
Normal file
167
src/components/Clients.jsx
Normal file
@@ -0,0 +1,167 @@
|
||||
import Link from 'next/link'
|
||||
import { motion, useMotionTemplate, useMotionValue } from 'framer-motion'
|
||||
|
||||
import { GridPattern } from '@/components/GridPattern'
|
||||
import { Heading } from '@/components/Heading'
|
||||
import { ChatBubbleIcon } from '@/components/icons/ChatBubbleIcon'
|
||||
import { EnvelopeIcon } from '@/components/icons/EnvelopeIcon'
|
||||
import { UserIcon } from '@/components/icons/UserIcon'
|
||||
import { UsersIcon } from '@/components/icons/UsersIcon'
|
||||
|
||||
const clients = [
|
||||
{
|
||||
href: '/docs/client-installation#linux',
|
||||
name: 'Linux',
|
||||
description:
|
||||
'Learn how to install the NetBird client on Linux devices.',
|
||||
icon: UserIcon,
|
||||
pattern: {
|
||||
y: 16,
|
||||
squares: [
|
||||
[0, 1],
|
||||
[1, 3],
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
href: '/docs/client-installation#mac-os',
|
||||
name: 'MacOS',
|
||||
description:
|
||||
'Learn how to install the NetBird client on MacOS devices.',
|
||||
icon: ChatBubbleIcon,
|
||||
pattern: {
|
||||
y: -6,
|
||||
squares: [
|
||||
[-1, 2],
|
||||
[1, 3],
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
href: '/docs/client-installation#windows',
|
||||
name: 'Windows',
|
||||
description:
|
||||
'Learn how to install the NetBird client on Windows devices.',
|
||||
icon: EnvelopeIcon,
|
||||
pattern: {
|
||||
y: 32,
|
||||
squares: [
|
||||
[0, 2],
|
||||
[1, 4],
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
href: '/docs/client-installation#android',
|
||||
name: 'Android',
|
||||
description:
|
||||
'Learn how to install the NetBird client on Android devices.',
|
||||
icon: UsersIcon,
|
||||
pattern: {
|
||||
y: 22,
|
||||
squares: [[0, 1]],
|
||||
},
|
||||
},
|
||||
{
|
||||
href: '/docs/client-installation#ios',
|
||||
name: 'iOS',
|
||||
description:
|
||||
'Learn how to install the NetBird client on OS devices.',
|
||||
icon: UsersIcon,
|
||||
pattern: {
|
||||
y: 22,
|
||||
squares: [[0, 1]],
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
function ClientIcon({ icon: Icon }) {
|
||||
return (
|
||||
<div className="flex h-7 w-7 items-center justify-center rounded-full bg-zinc-900/5 ring-1 ring-zinc-900/25 backdrop-blur-[2px] transition duration-300 group-hover:bg-white/50 group-hover:ring-zinc-900/25 dark:bg-white/7.5 dark:ring-white/15 dark:group-hover:bg-orange-300/10 dark:group-hover:ring-orange-400">
|
||||
<Icon className="h-5 w-5 fill-zinc-700/10 stroke-zinc-700 transition-colors duration-300 group-hover:stroke-zinc-900 dark:fill-white/10 dark:stroke-zinc-400 dark:group-hover:fill-orange-300/10 dark:group-hover:stroke-orange-400" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ClientPattern({ mouseX, mouseY, ...gridProps }) {
|
||||
let maskImage = useMotionTemplate`radial-gradient(180px at ${mouseX}px ${mouseY}px, white, transparent)`
|
||||
let style = { maskImage, WebkitMaskImage: maskImage }
|
||||
|
||||
return (
|
||||
<div className="pointer-events-none">
|
||||
<div className="absolute inset-0 rounded-2xl transition duration-300 [mask-image:linear-gradient(white,transparent)] group-hover:opacity-50">
|
||||
<GridPattern
|
||||
width={72}
|
||||
height={56}
|
||||
x="50%"
|
||||
className="absolute inset-x-0 inset-y-[-30%] h-[160%] w-full skew-y-[-18deg] fill-black/[0.02] stroke-black/5 dark:fill-white/1 dark:stroke-white/2.5"
|
||||
{...gridProps}
|
||||
/>
|
||||
</div>
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-2xl bg-gradient-to-r from-[#D7EDEA] to-[#F4FBDF] opacity-0 transition duration-300 group-hover:opacity-100 dark:from-[#202D2E] dark:to-[#303428]"
|
||||
style={style}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-2xl opacity-0 mix-blend-overlay transition duration-300 group-hover:opacity-100"
|
||||
style={style}
|
||||
>
|
||||
<GridPattern
|
||||
width={72}
|
||||
height={56}
|
||||
x="50%"
|
||||
className="absolute inset-x-0 inset-y-[-30%] h-[160%] w-full skew-y-[-18deg] fill-black/50 stroke-black/70 dark:fill-white/2.5 dark:stroke-white/10"
|
||||
{...gridProps}
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Client({ client }) {
|
||||
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 (
|
||||
<div
|
||||
key={client.href}
|
||||
onMouseMove={onMouseMove}
|
||||
className="group relative flex rounded-2xl bg-zinc-50 transition-shadow hover:shadow-md hover:shadow-zinc-900/5 dark:bg-white/2.5 dark:hover:shadow-black/5"
|
||||
>
|
||||
<ClientPattern {...client.pattern} mouseX={mouseX} mouseY={mouseY} />
|
||||
<div className="absolute inset-0 rounded-2xl ring-1 ring-inset ring-zinc-900/7.5 group-hover:ring-zinc-900/10 dark:ring-white/10 dark:group-hover:ring-white/20" />
|
||||
<div className="relative rounded-2xl px-4 pb-4 pt-16">
|
||||
<h3 className="mt-4 text-sm font-semibold leading-7 text-zinc-900 dark:text-white">
|
||||
<Link href={client.href}>
|
||||
<span className="absolute inset-0 rounded-2xl" />
|
||||
{client.name}
|
||||
</Link>
|
||||
</h3>
|
||||
<p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
|
||||
{client.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function Clients() {
|
||||
return (
|
||||
<div className="my-16 xl:max-w-none">
|
||||
<Heading level={2} id="clients">
|
||||
Clients
|
||||
</Heading>
|
||||
<div className="not-prose mt-4 grid grid-cols-1 gap-8 border-t border-zinc-900/5 pt-10 dark:border-white/5 sm:grid-cols-2 xl:grid-cols-4">
|
||||
{clients.map((client) => (
|
||||
<Client key={client.href} client={client} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -64,7 +64,6 @@ function CopyButton({ code }) {
|
||||
'group/button absolute right-4 top-3.5 overflow-hidden rounded-full py-1 pl-2 pr-3 text-2xs font-medium opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100',
|
||||
copied
|
||||
? 'bg-orange-400/10 ring-1 ring-inset ring-orange-400/20'
|
||||
// ? 'bg-emerald-400/10 ring-1 ring-inset ring-emerald-400/20'
|
||||
: 'bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5'
|
||||
)}
|
||||
onClick={() => {
|
||||
@@ -156,7 +155,6 @@ function CodeGroupHeader({ title, children, selectedIndex }) {
|
||||
className={clsx(
|
||||
'border-b py-3 transition focus:[&:not(:focus-visible)]:outline-none',
|
||||
childIndex === selectedIndex
|
||||
// ? 'border-emerald-500 text-emerald-400'
|
||||
? 'border-orange-500 text-orange-400'
|
||||
: 'border-transparent text-zinc-400 hover:text-zinc-300'
|
||||
)}
|
||||
|
||||
@@ -57,9 +57,7 @@ const FeedbackThanks = forwardRef(function FeedbackThanks(_props, ref) {
|
||||
className="absolute inset-0 flex justify-center md:justify-start"
|
||||
>
|
||||
<div className="flex items-center gap-3 rounded-full bg-orange-50/50 py-1 pl-1.5 pr-3 text-sm text-orange-900 ring-1 ring-inset ring-orange-500/20 dark:bg-orange-500/5 dark:text-orange-200 dark:ring-orange-500/30">
|
||||
{/*<div className="flex items-center gap-3 rounded-full bg-emerald-50/50 py-1 pl-1.5 pr-3 text-sm text-emerald-900 ring-1 ring-inset ring-emerald-500/20 dark:bg-emerald-500/5 dark:text-emerald-200 dark:ring-emerald-500/30">*/}
|
||||
<CheckIcon className="h-5 w-5 flex-none fill-orange-500 stroke-white dark:fill-orange-200/20 dark:stroke-orange-200" />
|
||||
{/*<CheckIcon className="h-5 w-5 flex-none fill-emerald-500 stroke-white dark:fill-emerald-200/20 dark:stroke-emerald-200" />*/}
|
||||
Thanks for your feedback!
|
||||
</div>
|
||||
</div>
|
||||
|
||||
54
src/components/How-To-Guides.jsx
Normal file
54
src/components/How-To-Guides.jsx
Normal file
@@ -0,0 +1,54 @@
|
||||
import { Button } from '@/components/Button'
|
||||
import { Heading } from '@/components/Heading'
|
||||
|
||||
const howToGuides = [
|
||||
{
|
||||
href: '/docs/getting-started',
|
||||
name: 'Getting Started',
|
||||
description: 'Learn how to start using NetBird.',
|
||||
},
|
||||
{
|
||||
href: '/docs/managing-your-network',
|
||||
name: 'Managing your Network',
|
||||
description: 'Learn everything you need to know about managing your network.',
|
||||
},
|
||||
{
|
||||
href: '/docs/examples',
|
||||
name: 'Examples',
|
||||
description:
|
||||
'Read some examples of how to use NetBird.',
|
||||
},
|
||||
{
|
||||
href: '/docs/cli',
|
||||
name: 'CLI',
|
||||
description:
|
||||
'Learn how to use the CLI of the NetBird client.',
|
||||
},
|
||||
]
|
||||
|
||||
export function HowToGuides() {
|
||||
return (
|
||||
<div className="my-16 xl:max-w-none">
|
||||
<Heading level={2} id="guides">
|
||||
How-To Guides
|
||||
</Heading>
|
||||
<div className="not-prose mt-4 grid grid-cols-1 gap-8 border-t border-zinc-900/5 pt-10 dark:border-white/5 sm:grid-cols-2 xl:grid-cols-4">
|
||||
{howToGuides.map((guide) => (
|
||||
<div key={guide.href}>
|
||||
<h3 className="text-sm font-semibold text-zinc-900 dark:text-white">
|
||||
{guide.name}
|
||||
</h3>
|
||||
<p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
|
||||
{guide.description}
|
||||
</p>
|
||||
<p className="mt-4">
|
||||
<Button href={guide.href} variant="text" arrow="right">
|
||||
Read more
|
||||
</Button>
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -97,7 +97,6 @@ function ActivePageMarker({ group, pathname }) {
|
||||
<motion.div
|
||||
layout
|
||||
className="absolute left-2 h-6 w-px bg-orange-500"
|
||||
// className="absolute left-2 h-6 w-px bg-emerald-500"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1, transition: { delay: 0.2 } }}
|
||||
exit={{ opacity: 0 }}
|
||||
@@ -186,181 +185,33 @@ function NavigationGroup({ group, className }) {
|
||||
|
||||
export const docsNavigation = [
|
||||
{
|
||||
title: 'Guides',
|
||||
title: 'About NetBird',
|
||||
links: [
|
||||
{ title: 'Introduction', href: '/docs/introduction' },
|
||||
{ title: 'How Netbird Works', href: '/docs/how-netbird-works' },
|
||||
{ title: 'How-to Guides', href: '/docs/how-to-guides' },
|
||||
{ title: 'Getting Started', href: '/docs/getting-started' },
|
||||
{ title: 'Integrations', href: '/docs/integrations' },
|
||||
{ title: 'Examples', href: '/docs/examples' },
|
||||
{ title: 'NetBird vs. Traditional VPN', href: '/docs/netbird-vs-traditional-vpn' },
|
||||
{ title: 'Reference', href: '/docs/reference' },
|
||||
{ title: 'Why Wireguard with NetBird?', href: '/docs/why-wireguard-with-netbird' },
|
||||
{ title: 'How Netbird Works', href: '/docs/how-netbird-works' },
|
||||
{ title: 'NetBird vs. Traditional VPN', href: '/docs/netbird-vs-traditional-vpn' },
|
||||
{ title: 'Other', href: '/docs/other' },
|
||||
{ title: 'FAQ', href: '/docs/faq' },
|
||||
],
|
||||
},
|
||||
// {
|
||||
// title: 'Introduction',
|
||||
// links: [
|
||||
// { title: 'Introduction', href: '/docs/introduction' },
|
||||
// { title: 'How Netbird Works', href: '/docs/how-netbird-works' },
|
||||
// { title: 'How-to Guides', href: '/docs/how-to-guides' },
|
||||
// { title: 'Getting Started', href: '/docs/getting-started' },
|
||||
// { title: 'Integrations', href: '/docs/integrations' },
|
||||
// { title: 'Examples', href: '/docs/examples' },
|
||||
// { title: 'NetBird vs. Traditional VPN', href: '/docs/netbird-vs-traditional-vpn' },
|
||||
// { title: 'Reference', href: '/docs/reference' },
|
||||
// { title: 'Why Wireguard with NetBird?', href: '/docs/why-wireguard-with-netbird' },
|
||||
// { title: 'Other', href: '/docs/other' },
|
||||
// { title: 'FAQ', href: '/docs/faq' },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// title: 'How Netbird Works',
|
||||
// links: [
|
||||
// { title: 'Introduction', href: '/docs/introduction' },
|
||||
// { title: 'How Netbird Works', href: '/docs/how-netbird-works' },
|
||||
// { title: 'How-to Guides', href: '/docs/how-to-guides' },
|
||||
// { title: 'Getting Started', href: '/docs/getting-started' },
|
||||
// { title: 'Integrations', href: '/docs/integrations' },
|
||||
// { title: 'Examples', href: '/docs/examples' },
|
||||
// { title: 'NetBird vs. Traditional VPN', href: '/docs/netbird-vs-traditional-vpn' },
|
||||
// { title: 'Reference', href: '/docs/reference' },
|
||||
// { title: 'Why Wireguard with NetBird?', href: '/docs/why-wireguard-with-netbird' },
|
||||
// { title: 'Other', href: '/docs/other' },
|
||||
// { title: 'FAQ', href: '/docs/faq' },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// title: 'How-to Guides',
|
||||
// links: [
|
||||
// { title: 'Introduction', href: '/docs/introduction' },
|
||||
// { title: 'How Netbird Works', href: '/docs/how-netbird-works' },
|
||||
// { title: 'How-to Guides', href: '/docs/how-to-guides' },
|
||||
// { title: 'Getting Started', href: '/docs/getting-started' },
|
||||
// { title: 'Integrations', href: '/docs/integrations' },
|
||||
// { title: 'Examples', href: '/docs/examples' },
|
||||
// { title: 'NetBird vs. Traditional VPN', href: '/docs/netbird-vs-traditional-vpn' },
|
||||
// { title: 'Reference', href: '/docs/reference' },
|
||||
// { title: 'Why Wireguard with NetBird?', href: '/docs/why-wireguard-with-netbird' },
|
||||
// { title: 'Other', href: '/docs/other' },
|
||||
// { title: 'FAQ', href: '/docs/faq' },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// title: 'Getting Started',
|
||||
// links: [
|
||||
// { title: 'Introduction', href: '/docs/introduction' },
|
||||
// { title: 'How Netbird Works', href: '/docs/how-netbird-works' },
|
||||
// { title: 'How-to Guides', href: '/docs/how-to-guides' },
|
||||
// { title: 'Getting Started', href: '/docs/getting-started' },
|
||||
// { title: 'Integrations', href: '/docs/integrations' },
|
||||
// { title: 'Examples', href: '/docs/examples' },
|
||||
// { title: 'NetBird vs. Traditional VPN', href: '/docs/netbird-vs-traditional-vpn' },
|
||||
// { title: 'Reference', href: '/docs/reference' },
|
||||
// { title: 'Why Wireguard with NetBird?', href: '/docs/why-wireguard-with-netbird' },
|
||||
// { title: 'Other', href: '/docs/other' },
|
||||
// { title: 'FAQ', href: '/docs/faq' },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// title: 'Integrations',
|
||||
// links: [
|
||||
// { title: 'Introduction', href: '/docs/introduction' },
|
||||
// { title: 'How Netbird Works', href: '/docs/how-netbird-works' },
|
||||
// { title: 'How-to Guides', href: '/docs/how-to-guides' },
|
||||
// { title: 'Getting Started', href: '/docs/getting-started' },
|
||||
// { title: 'Integrations', href: '/docs/integrations' },
|
||||
// { title: 'Examples', href: '/docs/examples' },
|
||||
// { title: 'NetBird vs. Traditional VPN', href: '/docs/netbird-vs-traditional-vpn' },
|
||||
// { title: 'Reference', href: '/docs/reference' },
|
||||
// { title: 'Why Wireguard with NetBird?', href: '/docs/why-wireguard-with-netbird' },
|
||||
// { title: 'Other', href: '/docs/other' },
|
||||
// { title: 'FAQ', href: '/docs/faq' },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// title: 'NetBird vs. Traditional VPN',
|
||||
// links: [
|
||||
// { title: 'Introduction', href: '/docs/introduction' },
|
||||
// { title: 'How Netbird Works', href: '/docs/how-netbird-works' },
|
||||
// { title: 'How-to Guides', href: '/docs/how-to-guides' },
|
||||
// { title: 'Getting Started', href: '/docs/getting-started' },
|
||||
// { title: 'Integrations', href: '/docs/integrations' },
|
||||
// { title: 'Examples', href: '/docs/examples' },
|
||||
// { title: 'NetBird vs. Traditional VPN', href: '/docs/netbird-vs-traditional-vpn' },
|
||||
// { title: 'Reference', href: '/docs/reference' },
|
||||
// { title: 'Why Wireguard with NetBird?', href: '/docs/why-wireguard-with-netbird' },
|
||||
// { title: 'Other', href: '/docs/other' },
|
||||
// { title: 'FAQ', href: '/docs/faq' },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// title: 'Reference',
|
||||
// links: [
|
||||
// { title: 'Introduction', href: '/docs/introduction' },
|
||||
// { title: 'How Netbird Works', href: '/docs/how-netbird-works' },
|
||||
// { title: 'How-to Guides', href: '/docs/how-to-guides' },
|
||||
// { title: 'Getting Started', href: '/docs/getting-started' },
|
||||
// { title: 'Integrations', href: '/docs/integrations' },
|
||||
// { title: 'Examples', href: '/docs/examples' },
|
||||
// { title: 'NetBird vs. Traditional VPN', href: '/docs/netbird-vs-traditional-vpn' },
|
||||
// { title: 'Reference', href: '/docs/reference' },
|
||||
// { title: 'Why Wireguard with NetBird?', href: '/docs/why-wireguard-with-netbird' },
|
||||
// { title: 'Other', href: '/docs/other' },
|
||||
// { title: 'FAQ', href: '/docs/faq' },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// title: 'Why Wireguard with NetBird?',
|
||||
// links: [
|
||||
// { title: 'Introduction', href: '/docs/introduction' },
|
||||
// { title: 'How Netbird Works', href: '/docs/how-netbird-works' },
|
||||
// { title: 'How-to Guides', href: '/docs/how-to-guides' },
|
||||
// { title: 'Getting Started', href: '/docs/getting-started' },
|
||||
// { title: 'Integrations', href: '/docs/integrations' },
|
||||
// { title: 'Examples', href: '/docs/examples' },
|
||||
// { title: 'NetBird vs. Traditional VPN', href: '/docs/netbird-vs-traditional-vpn' },
|
||||
// { title: 'Reference', href: '/docs/reference' },
|
||||
// { title: 'Why Wireguard with NetBird?', href: '/docs/why-wireguard-with-netbird' },
|
||||
// { title: 'Other', href: '/docs/other' },
|
||||
// { title: 'FAQ', href: '/docs/faq' },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// title: 'Other',
|
||||
// links: [
|
||||
// { title: 'Introduction', href: '/docs/introduction' },
|
||||
// { title: 'How Netbird Works', href: '/docs/how-netbird-works' },
|
||||
// { title: 'How-to Guides', href: '/docs/how-to-guides' },
|
||||
// { title: 'Getting Started', href: '/docs/getting-started' },
|
||||
// { title: 'Integrations', href: '/docs/integrations' },
|
||||
// { title: 'Examples', href: '/docs/examples' },
|
||||
// { title: 'NetBird vs. Traditional VPN', href: '/docs/netbird-vs-traditional-vpn' },
|
||||
// { title: 'Reference', href: '/docs/reference' },
|
||||
// { title: 'Why Wireguard with NetBird?', href: '/docs/why-wireguard-with-netbird' },
|
||||
// { title: 'Other', href: '/docs/other' },
|
||||
// { title: 'FAQ', href: '/docs/faq' },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// title: 'FAQ',
|
||||
// links: [
|
||||
// { title: 'Introduction', href: '/docs/introduction' },
|
||||
// { title: 'How Netbird Works', href: '/docs/how-netbird-works' },
|
||||
// { title: 'How-to Guides', href: '/docs/how-to-guides' },
|
||||
// { title: 'Getting Started', href: '/docs/getting-started' },
|
||||
// { title: 'Integrations', href: '/docs/integrations' },
|
||||
// { title: 'Examples', href: '/docs/examples' },
|
||||
// { title: 'NetBird vs. Traditional VPN', href: '/docs/netbird-vs-traditional-vpn' },
|
||||
// { title: 'Reference', href: '/docs/reference' },
|
||||
// { title: 'Why Wireguard with NetBird?', href: '/docs/why-wireguard-with-netbird' },
|
||||
// { title: 'Other', href: '/docs/other' },
|
||||
// { title: 'FAQ', href: '/docs/faq' },
|
||||
// ],
|
||||
// },
|
||||
{
|
||||
title: 'How-to Guides',
|
||||
links: [
|
||||
{ title: 'Getting Started', href: '/docs/getting-started' },
|
||||
{ title: 'Client Installation', href: '/docs/client-installation' },
|
||||
{ title: 'Managing your Network', href: '/docs/managing-your-network' },
|
||||
{ title: 'Examples', href: '/docs/examples' },
|
||||
{ title: 'CLI', href: '/docs/cli' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Self-Hosted',
|
||||
links: [
|
||||
{ title: 'Installation Guide', href: '/docs/selfhosted-guide' },
|
||||
{ title: 'Identity Providers', href: '/docs/identity-providers' },
|
||||
],
|
||||
},
|
||||
|
||||
]
|
||||
|
||||
export const apiNavigation = [
|
||||
|
||||
@@ -10,8 +10,8 @@ import { UsersIcon } from '@/components/icons/UsersIcon'
|
||||
|
||||
const resources = [
|
||||
{
|
||||
href: '/contacts',
|
||||
name: 'Contacts',
|
||||
href: '/accounts',
|
||||
name: 'Accounts',
|
||||
description:
|
||||
'Learn about the contact model and how to create, retrieve, update, delete, and list contacts.',
|
||||
icon: UserIcon,
|
||||
@@ -24,8 +24,8 @@ const resources = [
|
||||
},
|
||||
},
|
||||
{
|
||||
href: '/conversations',
|
||||
name: 'Conversations',
|
||||
href: '/users',
|
||||
name: 'Users',
|
||||
description:
|
||||
'Learn about the conversation model and how to create, retrieve, update, delete, and list conversations.',
|
||||
icon: ChatBubbleIcon,
|
||||
@@ -38,8 +38,8 @@ const resources = [
|
||||
},
|
||||
},
|
||||
{
|
||||
href: '/messages',
|
||||
name: 'Messages',
|
||||
href: '/peers',
|
||||
name: 'Peers',
|
||||
description:
|
||||
'Learn about the message model and how to create, retrieve, update, delete, and list messages.',
|
||||
icon: EnvelopeIcon,
|
||||
@@ -51,6 +51,17 @@ const resources = [
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
href: '/setup-keys',
|
||||
name: 'Setup Keys',
|
||||
description:
|
||||
'Learn about the group model and how to create, retrieve, update, delete, and list groups.',
|
||||
icon: UsersIcon,
|
||||
pattern: {
|
||||
y: 22,
|
||||
squares: [[0, 1]],
|
||||
},
|
||||
},
|
||||
{
|
||||
href: '/groups',
|
||||
name: 'Groups',
|
||||
@@ -62,14 +73,67 @@ const resources = [
|
||||
squares: [[0, 1]],
|
||||
},
|
||||
},
|
||||
{
|
||||
href: '/rules',
|
||||
name: 'rules',
|
||||
description:
|
||||
'Learn about the group model and how to create, retrieve, update, delete, and list groups.',
|
||||
icon: UsersIcon,
|
||||
pattern: {
|
||||
y: 22,
|
||||
squares: [[0, 1]],
|
||||
},
|
||||
},
|
||||
{
|
||||
href: '/policies',
|
||||
name: 'Policies',
|
||||
description:
|
||||
'Learn about the group model and how to create, retrieve, update, delete, and list groups.',
|
||||
icon: UsersIcon,
|
||||
pattern: {
|
||||
y: 22,
|
||||
squares: [[0, 1]],
|
||||
},
|
||||
},
|
||||
{
|
||||
href: '/routes',
|
||||
name: 'Routes',
|
||||
description:
|
||||
'Learn about the group model and how to create, retrieve, update, delete, and list groups.',
|
||||
icon: UsersIcon,
|
||||
pattern: {
|
||||
y: 22,
|
||||
squares: [[0, 1]],
|
||||
},
|
||||
},
|
||||
{
|
||||
href: '/dns',
|
||||
name: 'DNS',
|
||||
description:
|
||||
'Learn about the group model and how to create, retrieve, update, delete, and list groups.',
|
||||
icon: UsersIcon,
|
||||
pattern: {
|
||||
y: 22,
|
||||
squares: [[0, 1]],
|
||||
},
|
||||
},
|
||||
{
|
||||
href: '/events',
|
||||
name: 'Events',
|
||||
description:
|
||||
'Learn about the group model and how to create, retrieve, update, delete, and list groups.',
|
||||
icon: UsersIcon,
|
||||
pattern: {
|
||||
y: 22,
|
||||
squares: [[0, 1]],
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
function ResourceIcon({ icon: Icon }) {
|
||||
return (
|
||||
<div className="flex h-7 w-7 items-center justify-center rounded-full bg-zinc-900/5 ring-1 ring-zinc-900/25 backdrop-blur-[2px] transition duration-300 group-hover:bg-white/50 group-hover:ring-zinc-900/25 dark:bg-white/7.5 dark:ring-white/15 dark:group-hover:bg-orange-300/10 dark:group-hover:ring-orange-400">
|
||||
{/*<div className="flex h-7 w-7 items-center justify-center rounded-full bg-zinc-900/5 ring-1 ring-zinc-900/25 backdrop-blur-[2px] transition duration-300 group-hover:bg-white/50 group-hover:ring-zinc-900/25 dark:bg-white/7.5 dark:ring-white/15 dark:group-hover:bg-emerald-300/10 dark:group-hover:ring-emerald-400">*/}
|
||||
<Icon className="h-5 w-5 fill-zinc-700/10 stroke-zinc-700 transition-colors duration-300 group-hover:stroke-zinc-900 dark:fill-white/10 dark:stroke-zinc-400 dark:group-hover:fill-orange-300/10 dark:group-hover:stroke-orange-400" />
|
||||
{/*<Icon className="h-5 w-5 fill-zinc-700/10 stroke-zinc-700 transition-colors duration-300 group-hover:stroke-zinc-900 dark:fill-white/10 dark:stroke-zinc-400 dark:group-hover:fill-emerald-300/10 dark:group-hover:stroke-emerald-400" />*/}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -128,7 +192,6 @@ function Resource({ resource }) {
|
||||
<ResourcePattern {...resource.pattern} mouseX={mouseX} mouseY={mouseY} />
|
||||
<div className="absolute inset-0 rounded-2xl ring-1 ring-inset ring-zinc-900/7.5 group-hover:ring-zinc-900/10 dark:ring-white/10 dark:group-hover:ring-white/20" />
|
||||
<div className="relative rounded-2xl px-4 pb-4 pt-16">
|
||||
<ResourceIcon icon={resource.icon} />
|
||||
<h3 className="mt-4 text-sm font-semibold leading-7 text-zinc-900 dark:text-white">
|
||||
<Link href={resource.href}>
|
||||
<span className="absolute inset-0 rounded-2xl" />
|
||||
|
||||
@@ -171,7 +171,6 @@ function SearchResult({ result, resultIndex, autocomplete, collection }) {
|
||||
id={`${id}-title`}
|
||||
aria-hidden="true"
|
||||
className="text-sm font-medium text-zinc-900 group-aria-selected:text-orange-500 dark:text-white"
|
||||
// className="text-sm font-medium text-zinc-900 group-aria-selected:text-emerald-500 dark:text-white"
|
||||
dangerouslySetInnerHTML={{ __html: titleHtml }}
|
||||
/>
|
||||
{hierarchyHtml.length > 0 && (
|
||||
@@ -266,7 +265,6 @@ const SearchInput = forwardRef(function SearchInput(
|
||||
{autocompleteState.status === 'stalled' && (
|
||||
<div className="absolute inset-y-0 right-3 flex items-center">
|
||||
<LoadingIcon className="h-5 w-5 animate-spin stroke-zinc-200 text-zinc-900 dark:stroke-zinc-800 dark:text-orange-400" />
|
||||
{/*<LoadingIcon className="h-5 w-5 animate-spin stroke-zinc-200 text-zinc-900 dark:stroke-zinc-800 dark:text-emerald-400" />*/}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user