mirror of
https://github.com/netbirdio/docs.git
synced 2026-08-25 09:11:26 +02:00
Restructure Troubleshooting into a hub with per-area pages (#814)
* Restructure Troubleshooting into a hub with per-area pages - Add a Troubleshooting hub (/help/troubleshooting) with icon/chip cards and a "Still stuck?" CTA - Split NetBird Client troubleshooting into an overview + per-OS pages (Linux, Windows, macOS, Android, iOS) - Split Self-hosted troubleshooting into an overview + per-area pages (installation, IdP, dashboard, certificates, connectivity, database) - Split "Report bugs and issues" into Community Support and NetBird Support pages - Add Troubleshooting resource connectivity and a NetBird Cloud pending-approval page - Add DNS troubleshooting Issue 8 (Windows NRPT rule blocked by a lingering GPO) - Cross-reference the new pages from networks, DNS, and reverse-proxy docs; update nav Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * Address review: client terminology, dead props, labels, cross-links - Use "client" instead of "agent" across the client troubleshooting pages (headings, prose, anchors) - Remove unused source: props from the Troubleshooting hub tiles - Relabel the "NetBird Cloud" grouping to "Cloud & identity" (SSO/provisioning also apply to self-hosted) - Add a Tiles title on the report-bug landing; add reverse-proxy -> resource-connectivity cross-link - Fix comma splices introduced by the em-dash cleanup in relayed-connections Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * Add client-side hash redirect for moved self-hosted anchors Old deep links like /selfhosted/troubleshooting#debugging-turn-connections now forward to the per-area page, since next.config redirects can't act on the URL fragment. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * Apply docs-skill review: conventions + reshape area pages - "open source" (no hyphen), expand NRPT on first use, descriptive alt text + captions on TURN images - Fix inherited "Netbird" casing in the client glossary - Reshape the six self-hosted area pages to Symptom -> likely causes (ordered) -> Fix -> Confirm, preserving anchored headings Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * Fix two typos in client glossary (CodeRabbit) - "nunning" -> "running" in the glossary - possessive "it's" -> "its" in the routing-table sentence Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * docs: fix two broken links in troubleshooting pages - database: point the "upgrade path" link at /selfhosted/maintenance/upgrade; selfhosted-quickstart has no #upgrade anchor so the old link landed at page top - client: add HashRedirect so old #net-bird-agent-status deep links forward to the renamed #net-bird-client-status section on the same page * docs: address review follow-ups (deep-link redirects + client casing) - self-hosted troubleshooting: extend the HashRedirect map with the per-issue (###-level) anchors from the old single page, so old deep links land on the exact sub-section of the new area page rather than just the page top - client glossary: lowercase "NetBird client" in the peer-a/peer-b entries (house convention) and fix "linux" -> "Linux" * docs: review polish — fix image class + first-use acronym glosses - connectivity: fix bad CSS class imagewrapper-nig -> imagewrapper on the TURN-test screenshot (the typo'd class matched no style and broke zoom) - gloss acronyms on first use: GPO (DNS Issue 8), IdP/SSO (identity-provider), ACME (certificates), CORS (dashboard) --------- Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com> Co-authored-by: Jack Carter <128555021+SunsetDrifter@users.noreply.github.com>
This commit is contained in:
Bruno Mercier Costa
committed by
GitHub
GitHub
parent
ffb72cfa34
commit
5729ad035e
96
src/components/TroubleshootingStart.jsx
Normal file
96
src/components/TroubleshootingStart.jsx
Normal file
@@ -0,0 +1,96 @@
|
||||
import Link from 'next/link'
|
||||
|
||||
/**
|
||||
* "Start here" diagnostics block: a highlighted panel with a short intro and a
|
||||
* row of numbered step cards. Each step can link to a section (href) and/or
|
||||
* show the relevant command.
|
||||
*
|
||||
* @param {string} [eyebrow='Start here'] - Small uppercase label
|
||||
* @param {string} title - Panel title (e.g. "Collect diagnostics first")
|
||||
* @param {string} [id] - Optional id for the title anchor
|
||||
* @param {string} [description] - Intro text below the title
|
||||
* @param {Array<{label: string, title: string, command?: string, href?: string, hint?: string}>} steps
|
||||
*/
|
||||
export function TroubleshootingStart({
|
||||
eyebrow = 'Start here',
|
||||
title,
|
||||
id,
|
||||
description,
|
||||
steps = [],
|
||||
}) {
|
||||
return (
|
||||
<div className="not-prose my-12 overflow-hidden rounded-2xl border-l-4 border-[#F28C28] bg-zinc-50 ring-1 ring-inset ring-zinc-900/7.5 dark:bg-white/2.5 dark:ring-white/10">
|
||||
<div className="p-6">
|
||||
<p className="text-xs font-semibold uppercase tracking-wider text-[#F28C28]">
|
||||
{eyebrow}
|
||||
</p>
|
||||
{title && (
|
||||
<h2
|
||||
id={id}
|
||||
className="mt-1 scroll-mt-24 text-xl font-semibold text-zinc-900 dark:text-white"
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
)}
|
||||
{description && (
|
||||
<p className="mt-2 max-w-3xl text-sm text-zinc-600 dark:text-zinc-400">
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{steps.length > 0 && (
|
||||
<div
|
||||
className={`mt-6 grid grid-cols-1 gap-4 ${
|
||||
steps.length === 2 ? 'sm:grid-cols-2' : 'sm:grid-cols-3'
|
||||
}`}
|
||||
>
|
||||
{steps.map((step) => {
|
||||
const content = (
|
||||
<>
|
||||
<p className="text-xs font-medium text-zinc-500 dark:text-zinc-400">
|
||||
{step.label}
|
||||
</p>
|
||||
<p className="mt-1 flex items-center gap-x-1 text-sm font-semibold text-zinc-900 dark:text-white">
|
||||
{step.title}
|
||||
{step.href && (
|
||||
<span aria-hidden="true" className="text-[#F28C28]">
|
||||
→
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
{step.command && (
|
||||
<code className="mt-3 block overflow-x-auto rounded-lg bg-zinc-900/5 px-3 py-2 font-mono text-sm text-zinc-800 ring-1 ring-inset ring-zinc-900/10 dark:bg-black/40 dark:text-zinc-200 dark:ring-white/10">
|
||||
{step.command}
|
||||
</code>
|
||||
)}
|
||||
{step.hint && (
|
||||
<p className="mt-2 text-xs text-zinc-500 dark:text-zinc-400">
|
||||
{step.hint}
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
|
||||
const base =
|
||||
'block rounded-xl bg-white p-4 ring-1 ring-inset ring-zinc-900/7.5 dark:bg-white/5 dark:ring-white/10'
|
||||
|
||||
return step.href ? (
|
||||
<Link
|
||||
key={step.title}
|
||||
href={step.href}
|
||||
className={`${base} transition hover:ring-zinc-900/15 hover:shadow-sm dark:hover:ring-white/20`}
|
||||
>
|
||||
{content}
|
||||
</Link>
|
||||
) : (
|
||||
<div key={step.title} className={base}>
|
||||
{content}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user