mirror of
https://github.com/MacRimi/ProxMenux.git
synced 2026-06-11 11:06:24 +00:00
5ca3463bf6
Full rewrite of the docs site under app/[locale]/ with next-intl in localePrefix:"always" mode. Every page now exists at both /en/<path> and /es/<path>; the root / shows a meta-refresh + JS redirect to /<defaultLocale>/ so GitHub Pages serves something on the apex URL. Highlights: - 107 doc pages migrated to file-per-page JSON namespaces under messages/en/ and messages/es/. Spanish content is fully translated (no copy-of-English placeholders). - New documentation for the Active Suppressions section in the Settings tab and the per-event Dismiss dropdown in the Health Monitor modal. - New screenshots: dismiss-duration-dropdown.png and an updated health-suppression-settings.png. - Pagefind integrated for client-side search; index is built on every CI deploy (not committed). - RSS feeds: per-locale at /<locale>/rss.xml plus root /rss.xml for backward compat. - Removed the dead app/[locale]/guides/[slug]/ route — every guide now has its own static page and no markdown source remains. - Fixed orphan link /guides/nvidia -> /guides/nvidia-manual in docs/hardware/nvidia-host. - Removed obsolete components (footer2, calendar, drawer). Verified locally with `npm ci && npm run build`: 2804 files in out/, 231 pages indexed by pagefind, root redirect intact, both locale roots and the new Active Suppressions docs render OK.
428 lines
20 KiB
TypeScript
428 lines
20 KiB
TypeScript
"use client"
|
|
|
|
import Image from "next/image"
|
|
import { Link } from "@/i18n/navigation"
|
|
import { useState } from "react"
|
|
import { Github, ExternalLink } from "lucide-react"
|
|
import { useTranslations, useMessages } from "next-intl"
|
|
import { DocHeader } from "@/components/ui/doc-header"
|
|
import { Callout } from "@/components/ui/callout"
|
|
|
|
type LoaderKey = "arc" | "rr" | "tinycore"
|
|
|
|
type LoaderLink = { name: string; url: string }
|
|
type DefaultRow = { param: string; valueRich: string }
|
|
type AdvancedRow = { param: string; optionsRich: string }
|
|
type ItemAltCaption = { alt: string; caption: string }
|
|
type DocLink = { label: string; url: string }
|
|
type RelatedItem = { href: string; label: string; tail: string }
|
|
|
|
export default function SynologyPage() {
|
|
const [activeLoader, setActiveLoader] = useState<LoaderKey>("arc")
|
|
const t = useTranslations("docs.createVm.systemNas.synology")
|
|
const messages = useMessages() as unknown as {
|
|
docs: {
|
|
createVm: {
|
|
systemNas: {
|
|
synology: {
|
|
supportedLoaders: { loaders: LoaderLink[] }
|
|
config: { defaultRowsRich: DefaultRow[]; advancedRowsRich: AdvancedRow[] }
|
|
storagePlan: { virtualItemsRich: string[]; importItemsRich: string[]; pciItemsRich: string[] }
|
|
vmCreation: { itemsRich: string[] }
|
|
step3: { arc: ItemAltCaption[]; rr: ItemAltCaption[]; tinycore: ItemAltCaption[] }
|
|
step4: { rr: ItemAltCaption[]; tinycore: ItemAltCaption[] }
|
|
tips: { docLinks: DocLink[] }
|
|
related: { itemsRich: RelatedItem[] }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
const s = messages.docs.createVm.systemNas.synology
|
|
const loaders = s.supportedLoaders.loaders
|
|
const defaultRows = s.config.defaultRowsRich
|
|
const advancedRows = s.config.advancedRowsRich
|
|
const virtualItems = s.storagePlan.virtualItemsRich
|
|
const importItems = s.storagePlan.importItemsRich
|
|
const pciItems = s.storagePlan.pciItemsRich
|
|
const vmCreationItems = s.vmCreation.itemsRich
|
|
const step3Arc = s.step3.arc
|
|
const step3Rr = s.step3.rr
|
|
const step3Tc = s.step3.tinycore
|
|
const step4Rr = s.step4.rr
|
|
const step4Tc = s.step4.tinycore
|
|
const docLinks = s.tips.docLinks
|
|
const relatedItems = s.related.itemsRich
|
|
|
|
const code = (chunks: React.ReactNode) => <code>{chunks}</code>
|
|
const strong = (chunks: React.ReactNode) => <strong>{chunks}</strong>
|
|
const em = (chunks: React.ReactNode) => <em>{chunks}</em>
|
|
const gpuLink = (chunks: React.ReactNode) => (
|
|
<a href="/docs/hardware/gpu-vm-passthrough" className="text-blue-600 hover:underline">
|
|
{chunks}
|
|
</a>
|
|
)
|
|
|
|
return (
|
|
<div>
|
|
<DocHeader
|
|
title={t("header.title")}
|
|
description={t("header.description")}
|
|
section={t("header.section")}
|
|
estimatedMinutes={30}
|
|
scriptPath="vm/synology.sh"
|
|
/>
|
|
|
|
<Callout variant="info" title={t("whatThisDoes.title")}>
|
|
{t.rich("whatThisDoes.bodyRich", { strong })}
|
|
</Callout>
|
|
|
|
<h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("supportedLoaders.heading")}</h2>
|
|
<p className="mb-4 text-gray-800 leading-relaxed">{t("supportedLoaders.intro")}</p>
|
|
<ul className="list-disc pl-6 mb-4 text-gray-800 leading-relaxed space-y-1">
|
|
{loaders.map((l) => (
|
|
<li key={l.url}>
|
|
<a
|
|
href={l.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-blue-600 hover:underline inline-flex items-center gap-1"
|
|
>
|
|
{l.name} <ExternalLink className="h-3 w-3" />
|
|
</a>
|
|
</li>
|
|
))}
|
|
<li>{t.rich("supportedLoaders.customRich", { strong, code })}</li>
|
|
</ul>
|
|
|
|
<h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("config.heading")}</h2>
|
|
<p className="mb-4 text-gray-800 leading-relaxed">{t("config.intro")}</p>
|
|
|
|
<h3 className="text-xl font-semibold mt-6 mb-3 text-gray-900">{t("config.defaultHeading")}</h3>
|
|
<div className="overflow-x-auto mb-4 rounded-md border border-gray-200">
|
|
<table className="min-w-full text-sm">
|
|
<thead className="bg-gray-50 text-left text-gray-700">
|
|
<tr>
|
|
<th className="px-4 py-2 font-semibold">{t("config.headerParam")}</th>
|
|
<th className="px-4 py-2 font-semibold">{t("config.headerValue")}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-200 text-gray-800">
|
|
{defaultRows.map((row, idx) => (
|
|
<tr key={row.param}>
|
|
<td className="px-4 py-2">{row.param}</td>
|
|
<td className="px-4 py-2">{t.rich(`config.defaultRowsRich.${idx}.valueRich`, { code })}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h3 className="text-xl font-semibold mt-8 mb-3 text-gray-900">{t("config.advancedHeading")}</h3>
|
|
<p className="mb-3 text-gray-800 leading-relaxed">{t("config.advancedIntro")}</p>
|
|
<div className="overflow-x-auto mb-4 rounded-md border border-gray-200">
|
|
<table className="min-w-full text-sm">
|
|
<thead className="bg-gray-50 text-left text-gray-700">
|
|
<tr>
|
|
<th className="px-4 py-2 font-semibold">{t("config.headerParam")}</th>
|
|
<th className="px-4 py-2 font-semibold">{t("config.headerOptions")}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-200 text-gray-800">
|
|
{advancedRows.map((row, idx) => (
|
|
<tr key={row.param}>
|
|
<td className="px-4 py-2">{row.param}</td>
|
|
<td className="px-4 py-2">{t.rich(`config.advancedRowsRich.${idx}.optionsRich`, { code })}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("storagePlan.heading")}</h2>
|
|
<p className="mb-4 text-gray-800 leading-relaxed">{t.rich("storagePlan.introRich", { strong })}</p>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-6">
|
|
<div className="rounded-lg border border-gray-200 bg-white p-4">
|
|
<h3 className="text-base font-semibold text-gray-900 mb-2">{t("storagePlan.virtualHeading")}</h3>
|
|
<ul className="list-disc pl-5 text-sm text-gray-700 leading-relaxed space-y-1">
|
|
{virtualItems.map((_, idx) => (
|
|
<li key={idx}>{t.rich(`storagePlan.virtualItemsRich.${idx}`, { code })}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div className="rounded-lg border border-gray-200 bg-white p-4">
|
|
<h3 className="text-base font-semibold text-gray-900 mb-2">{t("storagePlan.importHeading")}</h3>
|
|
<ul className="list-disc pl-5 text-sm text-gray-700 leading-relaxed space-y-1">
|
|
{importItems.map((_, idx) => (
|
|
<li key={idx}>{t.rich(`storagePlan.importItemsRich.${idx}`, { code })}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div className="rounded-lg border border-gray-200 bg-white p-4 md:col-span-2">
|
|
<h3 className="text-base font-semibold text-gray-900 mb-2">{t("storagePlan.pciHeading")}</h3>
|
|
<ul className="list-disc pl-5 text-sm text-gray-700 leading-relaxed space-y-1">
|
|
{pciItems.map((_, idx) => (
|
|
<li key={idx}>{t.rich(`storagePlan.pciItemsRich.${idx}`, { code, em })}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<Callout variant="info" title={t("storagePlan.resetCalloutTitle")}>
|
|
{t.rich("storagePlan.resetCalloutBodyRich", { strong })}
|
|
</Callout>
|
|
|
|
<h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("gpu.heading")}</h2>
|
|
<p className="mb-4 text-gray-800 leading-relaxed">{t.rich("gpu.bodyRich", { link: gpuLink })}</p>
|
|
|
|
<h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("loaderInstall.heading")}</h2>
|
|
<p className="mb-4 text-gray-800 leading-relaxed">{t.rich("loaderInstall.intro1Rich", { strong })}</p>
|
|
<p className="mb-4 text-gray-800 leading-relaxed">{t.rich("loaderInstall.intro2Rich", { strong, code })}</p>
|
|
<p className="mb-2 text-gray-800 leading-relaxed">{t("loaderInstall.uploadIntro")}</p>
|
|
<ImageCaption src="/vm/synology/add_loader.png" alt={t("loaderInstall.imageAlt")} caption={t("loaderInstall.imageCaption")} />
|
|
|
|
<h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("vmCreation.heading")}</h2>
|
|
<p className="mb-3 text-gray-800 leading-relaxed">{t.rich("vmCreation.introRich", { code })}</p>
|
|
<ul className="list-disc pl-6 mb-4 text-gray-800 leading-relaxed space-y-1">
|
|
{vmCreationItems.map((_, idx) => (
|
|
<li key={idx}>{t.rich(`vmCreation.itemsRich.${idx}`, { code, strong })}</li>
|
|
))}
|
|
</ul>
|
|
|
|
<h2 className="text-2xl font-semibold mt-12 mb-4 text-gray-900">{t("stepByStep.heading")}</h2>
|
|
<p className="mb-4 text-gray-800 leading-relaxed">{t("stepByStep.intro")}</p>
|
|
|
|
<Callout variant="warning" title={t("stepByStep.warnCalloutTitle")}>
|
|
{t("stepByStep.warnCalloutBody")}
|
|
</Callout>
|
|
|
|
<div className="flex flex-wrap gap-2 my-6">
|
|
{(["arc", "rr", "tinycore"] as LoaderKey[]).map((k) => (
|
|
<button
|
|
key={k}
|
|
onClick={() => setActiveLoader(k)}
|
|
className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
|
|
activeLoader === k
|
|
? "bg-blue-600 text-white"
|
|
: "bg-white border border-gray-300 text-gray-700 hover:bg-gray-50"
|
|
}`}
|
|
>
|
|
{t(`loaderLabels.${k}`)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<StepSection n={1} title={t("step1.title")} stepLabel={t("stepBadge")}>
|
|
<p className="mb-4 text-gray-800 leading-relaxed">{t("step1.intro")}</p>
|
|
|
|
{activeLoader === "arc" && (
|
|
<div className="flex flex-col space-y-8">
|
|
<p className="text-gray-800 leading-relaxed">{t.rich("step1.arc.webRich", { strong, code })}</p>
|
|
<ImageCaption src="/vm/synology/arc/arc_1_0_1.png" alt={t("step1.arc.webAlt")} caption={t("step1.arc.webCaption")} />
|
|
<p className="text-gray-800 leading-relaxed">{t.rich("step1.arc.termRich", { strong })}</p>
|
|
<ImageCaption src="/vm/synology/arc/arc_1_1_1.png" alt={t("step1.arc.termAlt")} caption={t("step1.arc.termCaption")} />
|
|
</div>
|
|
)}
|
|
|
|
{activeLoader === "rr" && (
|
|
<div className="flex flex-col space-y-8">
|
|
<p className="text-gray-800 leading-relaxed">{t.rich("step1.rr.webRich", { strong, code })}</p>
|
|
<ImageCaption src="/vm/synology/rr/rr_2_0_2.png" alt={t("step1.rr.webAlt")} caption={t("step1.rr.webCaption")} />
|
|
<p className="text-gray-800 leading-relaxed">{t.rich("step1.rr.termRich", { strong, code })}</p>
|
|
<ImageCaption src="/vm/synology/rr/rr_2_1_1.png" alt={t("step1.rr.termAlt")} caption={t("step1.rr.termCaption")} />
|
|
</div>
|
|
)}
|
|
|
|
{activeLoader === "tinycore" && (
|
|
<div className="flex flex-col space-y-8">
|
|
<p className="text-gray-800 leading-relaxed">{t.rich("step1.tinycore.webRich", { strong, code })}</p>
|
|
<ImageCaption src="/vm/synology/tinycore/tinycore_3_0_1.png" alt={t("step1.tinycore.webAlt")} caption={t("step1.tinycore.webCaption")} />
|
|
<p className="text-gray-800 leading-relaxed">{t.rich("step1.tinycore.termRich", { strong })}</p>
|
|
<ImageCaption src="/vm/synology/tinycore/tinycore_3_1_1.png" alt={t("step1.tinycore.termAlt")} caption={t("step1.tinycore.termCaption")} />
|
|
</div>
|
|
)}
|
|
</StepSection>
|
|
|
|
<StepSection n={2} title={t("step2.title")} stepLabel={t("stepBadge")}>
|
|
<p className="mb-4 text-gray-800 leading-relaxed">{t.rich("step2.introRich", { strong })}</p>
|
|
{activeLoader === "arc" && (
|
|
<ImageCaption src="/vm/synology/arc/arc_1_2_1.png" alt={t("step2.arc.alt")} caption={t("step2.arc.caption")} />
|
|
)}
|
|
{activeLoader === "rr" && (
|
|
<ImageCaption src="/vm/synology/rr/rr_2_2_1.png" alt={t("step2.rr.alt")} caption={t("step2.rr.caption")} />
|
|
)}
|
|
{activeLoader === "tinycore" && (
|
|
<ImageCaption src="/vm/synology/tinycore/tinycore_3_2_1.png" alt={t("step2.tinycore.alt")} caption={t("step2.tinycore.caption")} />
|
|
)}
|
|
</StepSection>
|
|
|
|
<StepSection n={3} title={t("step3.title")} stepLabel={t("stepBadge")}>
|
|
<p className="mb-4 text-gray-800 leading-relaxed">{t("step3.intro")}</p>
|
|
{activeLoader === "arc" && (
|
|
<div className="flex flex-col space-y-10">
|
|
<ImageCaption src="/vm/synology/arc/arc_1_3_1.png" alt={step3Arc[0].alt} caption={step3Arc[0].caption} />
|
|
<ImageCaption src="/vm/synology/arc/arc_1_3_2.png" alt={step3Arc[1].alt} caption={step3Arc[1].caption} />
|
|
</div>
|
|
)}
|
|
{activeLoader === "rr" && (
|
|
<div className="flex flex-col space-y-10">
|
|
<ImageCaption src="/vm/synology/rr/rr_2_3_1.png" alt={step3Rr[0].alt} caption={step3Rr[0].caption} />
|
|
<ImageCaption src="/vm/synology/rr/rr_2_3_2.png" alt={step3Rr[1].alt} caption={step3Rr[1].caption} />
|
|
<ImageCaption src="/vm/synology/rr/rr_2_3_3.png" alt={step3Rr[2].alt} caption={step3Rr[2].caption} />
|
|
</div>
|
|
)}
|
|
{activeLoader === "tinycore" && (
|
|
<div className="flex flex-col space-y-10">
|
|
<ImageCaption src="/vm/synology/tinycore/tinycore_3_3_1.png" alt={step3Tc[0].alt} caption={step3Tc[0].caption} />
|
|
<ImageCaption src="/vm/synology/tinycore/tinycore_3_3_2.png" alt={step3Tc[1].alt} caption={step3Tc[1].caption} />
|
|
</div>
|
|
)}
|
|
</StepSection>
|
|
|
|
<StepSection n={4} title={t("step4.title")} stepLabel={t("stepBadge")}>
|
|
<p className="mb-4 text-gray-800 leading-relaxed">{t("step4.intro")}</p>
|
|
{activeLoader === "arc" && (
|
|
<div className="flex flex-col space-y-10">
|
|
<p className="text-gray-800 leading-relaxed">{t.rich("step4.arc.autoRich", { strong })}</p>
|
|
<ImageCaption src="/vm/synology/arc/arc_1_4_1.png" alt={t("step4.arc.autoAlt")} caption={t("step4.arc.autoCaption")} />
|
|
<p className="text-gray-800 leading-relaxed">{t("step4.arc.manualRich")}</p>
|
|
<ImageCaption src="/vm/synology/arc/arc_1_4_2.png" alt={t("step4.arc.manualAlt")} caption={t("step4.arc.manualCaption")} />
|
|
<ImageCaption src="/vm/synology/arc/arc_1_4_3.png" alt={t("step4.arc.snMacAlt")} caption={t("step4.arc.snMacCaption")} />
|
|
<ImageCaption src="/vm/synology/arc/arc_1_4_4.png" alt={t("step4.arc.portmapAlt")} caption={t("step4.arc.portmapCaption")} />
|
|
<ImageCaption src="/vm/synology/arc/arc_1_4_5.png" alt={t("step4.arc.addonsAlt")} caption={t("step4.arc.addonsCaption")} />
|
|
</div>
|
|
)}
|
|
{activeLoader === "rr" && (
|
|
<div className="flex flex-col space-y-10">
|
|
<ImageCaption src="/vm/synology/rr/rr_2_4_1.png" alt={step4Rr[0].alt} caption={step4Rr[0].caption} />
|
|
<ImageCaption src="/vm/synology/rr/rr_2_4_2.png" alt={step4Rr[1].alt} caption={step4Rr[1].caption} />
|
|
<ImageCaption src="/vm/synology/rr/rr_2_4_3.png" alt={step4Rr[2].alt} caption={step4Rr[2].caption} />
|
|
</div>
|
|
)}
|
|
{activeLoader === "tinycore" && (
|
|
<div className="flex flex-col space-y-10">
|
|
<ImageCaption src="/vm/synology/tinycore/tinycore_3_4_1.png" alt={step4Tc[0].alt} caption={step4Tc[0].caption} />
|
|
<ImageCaption src="/vm/synology/tinycore/tinycore_3_4_2.png" alt={step4Tc[1].alt} caption={step4Tc[1].caption} />
|
|
<ImageCaption src="/vm/synology/tinycore/tinycore_3_4_3.png" alt={step4Tc[2].alt} caption={step4Tc[2].caption} />
|
|
<ImageCaption src="/vm/synology/tinycore/tinycore_3_4_4.png" alt={step4Tc[3].alt} caption={step4Tc[3].caption} />
|
|
</div>
|
|
)}
|
|
</StepSection>
|
|
|
|
<StepSection n={5} title={t("step5.title")} stepLabel={t("stepBadge")}>
|
|
<p className="mb-4 text-gray-800 leading-relaxed">{t.rich("step5.introRich", { strong })}</p>
|
|
{activeLoader === "arc" && (
|
|
<ImageCaption src="/vm/synology/arc/arc_1_5_1.png" alt={t("step5.arc.alt")} caption={t("step5.arc.caption")} />
|
|
)}
|
|
{activeLoader === "rr" && (
|
|
<ImageCaption src="/vm/synology/rr/rr_2_5_1.png" alt={t("step5.rr.alt")} caption={t("step5.rr.caption")} />
|
|
)}
|
|
{activeLoader === "tinycore" && (
|
|
<ImageCaption src="/vm/synology/tinycore/tinycore_3_5_1.png" alt={t("step5.tinycore.alt")} caption={t("step5.tinycore.caption")} />
|
|
)}
|
|
</StepSection>
|
|
|
|
<StepSection n={6} title={t("step6.title")} stepLabel={t("stepBadge")}>
|
|
<p className="mb-4 text-gray-800 leading-relaxed">{t("step6.intro")}</p>
|
|
{activeLoader === "arc" && (
|
|
<ImageCaption src="/vm/synology/arc/arc_1_6_1.png" alt={t("step6.arc.alt")} caption={t("step6.arc.caption")} />
|
|
)}
|
|
{activeLoader === "rr" && (
|
|
<ImageCaption src="/vm/synology/rr/rr_2_6_1.png" alt={t("step6.rr.alt")} caption={t("step6.rr.caption")} />
|
|
)}
|
|
{activeLoader === "tinycore" && (
|
|
<ImageCaption src="/vm/synology/tinycore/tinycore_3_6_1.png" alt={t("step6.tinycore.alt")} caption={t("step6.tinycore.caption")} />
|
|
)}
|
|
</StepSection>
|
|
|
|
<h2 className="text-2xl font-semibold mt-12 mb-4 text-gray-900">{t("dsmInstall.heading")}</h2>
|
|
<p className="mb-3 text-gray-800 leading-relaxed">{t("dsmInstall.intro")}</p>
|
|
<pre className="bg-gray-100 p-3 rounded-md overflow-x-auto text-sm font-mono mb-4">
|
|
<code>https://finds.synology.com</code>
|
|
</pre>
|
|
<p className="mb-6 text-gray-800 leading-relaxed">{t("dsmInstall.afterCode")}</p>
|
|
<div className="flex flex-col space-y-10">
|
|
<ImageCaption src="/vm/synology/install_DSM.png" alt={t("dsmInstall.setupAlt")} caption={t("dsmInstall.setupCaption")} />
|
|
<p className="text-gray-800 leading-relaxed">{t("dsmInstall.patience")}</p>
|
|
<ImageCaption src="/vm/synology/finish_install_DSM.png" alt={t("dsmInstall.finishAlt")} caption={t("dsmInstall.finishCaption")} />
|
|
</div>
|
|
|
|
<h2 className="text-2xl font-semibold mt-12 mb-4 text-gray-900">{t("tips.heading")}</h2>
|
|
|
|
<Callout variant="tip" title={t("tips.recentTitle")}>
|
|
{t("tips.recentBody")}
|
|
</Callout>
|
|
|
|
<Callout variant="info" title={t("tips.updateTitle")}>
|
|
{t("tips.updateBody")}
|
|
</Callout>
|
|
|
|
<Callout variant="warning" title={t("tips.warnTitle")}>
|
|
{t("tips.warnBody")}
|
|
</Callout>
|
|
|
|
<h3 className="text-lg font-semibold mt-8 mb-3 text-gray-900">{t("tips.docsHeading")}</h3>
|
|
<div className="flex flex-wrap gap-2">
|
|
{docLinks.map((dl) => (
|
|
<a
|
|
key={dl.url}
|
|
href={dl.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md bg-gray-100 text-gray-800 hover:bg-gray-200 transition-colors"
|
|
>
|
|
<Github className="h-4 w-4 mr-2" />
|
|
{dl.label}
|
|
</a>
|
|
))}
|
|
</div>
|
|
|
|
<h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("related.heading")}</h2>
|
|
<ul className="list-disc pl-6 text-gray-800 leading-relaxed space-y-1">
|
|
{relatedItems.map((item) => (
|
|
<li key={item.href}>
|
|
<Link href={item.href} className="text-blue-600 hover:underline">
|
|
{item.label}
|
|
</Link>
|
|
{item.tail}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function ImageCaption({ src, alt, caption }: { src: string; alt: string; caption: string }) {
|
|
return (
|
|
<div className="flex flex-col items-center w-full max-w-[768px] mx-auto my-4">
|
|
<div className="w-full overflow-hidden rounded-md border border-gray-200">
|
|
<Image
|
|
src={src}
|
|
alt={alt}
|
|
width={768}
|
|
height={0}
|
|
style={{ height: "auto" }}
|
|
className="w-full object-contain"
|
|
sizes="(max-width: 768px) 100vw, 768px"
|
|
/>
|
|
</div>
|
|
<span className="mt-2 text-sm text-gray-600">{caption}</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function StepSection({ n, title, stepLabel, children }: { n: number; title: string; stepLabel: string; children: React.ReactNode }) {
|
|
return (
|
|
<section className="mt-10 border-b border-gray-200 pb-8">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<span className="inline-flex items-center rounded-full border border-blue-200 bg-blue-50 px-2.5 py-0.5 text-xs font-semibold text-blue-800">
|
|
{stepLabel} {n}
|
|
</span>
|
|
<h3 className="text-xl font-semibold text-gray-900 m-0">{title}</h3>
|
|
</div>
|
|
{children}
|
|
</section>
|
|
)
|
|
}
|