From b070580609a3ce4c1704892ada3a129b0a25fcdd Mon Sep 17 00:00:00 2001 From: sulu5890 Date: Fri, 8 Apr 2022 18:11:58 -0500 Subject: [PATCH] Breadcrumb links to all pages, category indexes (#42) --- config/navbar.config.ts | 6 +- config/sidebars.config.ts | 55 +++++++++++++- docusaurus.config.ts | 1 + src/theme/DocBreadcrumbs/index.tsx | 87 ++++++++++++++++++++++ src/theme/DocBreadcrumbs/styles.module.css | 4 + 5 files changed, 147 insertions(+), 6 deletions(-) create mode 100644 src/theme/DocBreadcrumbs/index.tsx create mode 100644 src/theme/DocBreadcrumbs/styles.module.css diff --git a/config/navbar.config.ts b/config/navbar.config.ts index 605b5c87a..3a48cc505 100644 --- a/config/navbar.config.ts +++ b/config/navbar.config.ts @@ -1,8 +1,8 @@ -import {Navbar} from "@docusaurus/theme-common"; +import { Navbar } from "@docusaurus/theme-common"; -const navbar: Omit = { // don't specify style here, we want it to be dynamic +// don't specify style or hideOnScroll here, we want it to be dynamic +const navbar: Omit = { title: "PaperMC Docs", - hideOnScroll: true, logo: { src: "img/logo.svg", alt: "PaperMC Logo", diff --git a/config/sidebars.config.ts b/config/sidebars.config.ts index 94d90e1a1..03d48dc45 100644 --- a/config/sidebars.config.ts +++ b/config/sidebars.config.ts @@ -3,9 +3,20 @@ import type { SidebarsConfig } from "@docusaurus/plugin-content-docs"; const sidebars: SidebarsConfig = { docs: [ { - type: "link", - label: "Support Discord", - href: "https://discord.gg/papermc", + type: "category", + label: "Getting Help", + items: [ + { + type: "link", + label: "Discord", + href: "https://discord.gg/papermc", + }, + { + type: "link", + label: "Forums", + href: "https://forums.papermc.io", + }, + ], }, "README", { @@ -32,6 +43,10 @@ const sidebars: SidebarsConfig = { { type: "category", label: "How-to Guides", + link: { + type: "generated-index", + slug: "/category/paper/how-to-guides", + }, items: [ "paper/how-to/per-world-configuration", "paper/how-to/anti-xray", @@ -42,6 +57,10 @@ const sidebars: SidebarsConfig = { { type: "category", label: "Reference", + link: { + type: "generated-index", + slug: "/category/paper/reference", + }, items: [ "paper/reference/paper-global-configuration", "paper/reference/paper-per-world-configuration", @@ -74,6 +93,10 @@ const sidebars: SidebarsConfig = { { type: "category", label: "How-to Guides", + link: { + type: "generated-index", + slug: "/category/velocity/how-to-guides", + }, items: [ "velocity/how-to/security", "velocity/how-to/tuning", @@ -83,6 +106,10 @@ const sidebars: SidebarsConfig = { { type: "category", label: "Reference", + link: { + type: "generated-index", + slug: "/category/velocity/reference", + }, items: [ "velocity/reference/configuration", "velocity/reference/commands", @@ -103,6 +130,10 @@ const sidebars: SidebarsConfig = { { type: "category", label: "Getting Started", + link: { + type: "generated-index", + slug: "/category/velocity/developers/getting-started", + }, items: [ "velocity/developers/getting-started/creating-your-first-plugin", "velocity/developers/getting-started/api-basics", @@ -112,6 +143,10 @@ const sidebars: SidebarsConfig = { { type: "category", label: "How-to Guides", + link: { + type: "generated-index", + slug: "/category/velocity/developers/how-to-guides", + }, items: [ "velocity/developers/how-to/dependencies", "velocity/developers/how-to/porting-from-velocity-1", @@ -120,6 +155,10 @@ const sidebars: SidebarsConfig = { { type: "category", label: "API", + link: { + type: "generated-index", + slug: "/category/velocity/developers/api", + }, items: [ "velocity/developers/api/event", "velocity/developers/api/command", @@ -142,11 +181,21 @@ const sidebars: SidebarsConfig = { { type: "category", label: "Common", + link: { + type: "generated-index", + slug: "/category/common", + description: "Documentation relevant to all PaperMC projects.", + }, items: ["common/java-install"], }, { type: "category", label: "PaperMC", + link: { + type: "generated-index", + slug: "/category/papermc", + description: "Information about the PaperMC Organization.", + }, items: ["papermc/downloads-api", "papermc/assets", "papermc/contact"], }, ], diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 7a4ce33d9..1e1b50d61 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -28,6 +28,7 @@ const config: Config = { projectName: "docs", trailingSlash: false, noIndex: isPreview, + baseUrlIssueBanner: false, webpack: { jsLoader: (isServer) => ({ diff --git a/src/theme/DocBreadcrumbs/index.tsx b/src/theme/DocBreadcrumbs/index.tsx new file mode 100644 index 000000000..c814c7494 --- /dev/null +++ b/src/theme/DocBreadcrumbs/index.tsx @@ -0,0 +1,87 @@ +import React, { type ReactNode } from "react"; +import { ThemeClassNames, useSidebarBreadcrumbs, useHomePageRoute } from "@docusaurus/theme-common"; +import styles from "./styles.module.css"; +import clsx from "clsx"; +import Link from "@docusaurus/Link"; +import useBaseUrl from "@docusaurus/useBaseUrl"; + +// TODO move to design system folder +function BreadcrumbsItemLink({ + children, + href, +}: { + children: ReactNode; + href?: string; +}): JSX.Element { + const className = "breadcrumbs__link"; + return href ? ( + + {children} + + ) : ( + + {children} + + ); +} + +// TODO move to design system folder +function BreadcrumbsItem({ + children, + active, + index, +}: { + children: ReactNode; + active?: boolean; + index: number; +}): JSX.Element { + return ( +
  • + {children} + +
  • + ); +} + +function HomeBreadcrumbItem() { + const homeHref = useBaseUrl("/"); + return ( +
  • + + 🏠 + +
  • + ); +} + +export default function DocBreadcrumbs(): JSX.Element | null { + const breadcrumbs = useSidebarBreadcrumbs(); + const homePageRoute = useHomePageRoute(); + + if (!breadcrumbs) { + return null; + } + + return ( + + ); +} diff --git a/src/theme/DocBreadcrumbs/styles.module.css b/src/theme/DocBreadcrumbs/styles.module.css new file mode 100644 index 000000000..72da4671a --- /dev/null +++ b/src/theme/DocBreadcrumbs/styles.module.css @@ -0,0 +1,4 @@ +.breadcrumbsContainer { + --ifm-breadcrumb-size-multiplier: 0.8; + margin-bottom: 0.8rem; +}