feat: Initial Separation of projects within docs

config/navbar.config.ts

@@ -11,12 +11,11 @@ const navbar: Omit<Navbar, "style" | "hideOnScroll"> = {
   },
   items: [
     {
-      type: "dropdown",
-      label: "Paper",
       to: "/paper",
+      label: "Paper",
       position: "left",
       activeBaseRegex: "\\/paper.*",
-      items: [
+      modules: [
         {
           label: "Administration",
           to: "/paper/admin",
@@ -35,12 +34,11 @@ const navbar: Omit<Navbar, "style" | "hideOnScroll"> = {
       ],
     },
     {
-      type: "dropdown",
-      label: "Folia",
       to: "/folia",
+      label: "Folia",
       position: "left",
       activeBaseRegex: "(\\/folia)(.+)?",
-      items: [
+      modules: [
         {
           label: "Administration",
           to: "/folia/admin",
@@ -54,12 +52,11 @@ const navbar: Omit<Navbar, "style" | "hideOnScroll"> = {
       ],
     },
     {
-      type: "dropdown",
-      label: "Velocity",
       to: "/velocity",
+      label: "Velocity",
       position: "left",
       activeBaseRegex: "\\/velocity.*",
-      items: [
+      modules: [
         {
           label: "Administration",
           to: "/velocity/admin",

config/sidebar.folia.ts

@@ -1,12 +1,12 @@
 import type { SidebarsConfig } from "@docusaurus/plugin-content-docs";
 
 const folia: SidebarsConfig = {
-  primary: [
-    "README",
+  primary: ["README", "admin/README", "dev/README"],
+  administration: [
     {
       type: "category",
       label: "Administration",
-      collapsed: true,
+      collapsible: false,
       link: {
         type: "doc",
         id: "admin/README",
@@ -35,10 +35,12 @@ const folia: SidebarsConfig = {
         },
       ],
     },
+  ],
+  development: [
     {
       type: "category",
       label: "Development",
-      collapsed: true,
+      collapsible: false,
       link: {
         type: "doc",
         id: "dev/README",

config/sidebar.paper.ts

@@ -1,12 +1,12 @@
 import type { SidebarsConfig } from "@docusaurus/plugin-content-docs";
 
 const paper: SidebarsConfig = {
-  primary: [
-    "README",
+  primary: ["README", "admin/README", "dev/README", "contributing/README"],
+  administration: [
     {
       type: "category",
       label: "Administration",
-      collapsed: true,
+      collapsible: false,
       link: {
         type: "doc",
         id: "admin/README",
@@ -80,10 +80,12 @@ const paper: SidebarsConfig = {
         },
       ],
     },
+  ],
+  development: [
     {
       type: "category",
       label: "Development",
-      collapsed: true,
+      collapsible: false,
       link: {
         type: "doc",
         id: "dev/README",
@@ -169,10 +171,12 @@ const paper: SidebarsConfig = {
         },
       ],
     },
+  ],
+  contributing: [
     {
       type: "category",
       label: "Contributing",
-      collapsed: true,
+      collapsible: false,
       link: {
         type: "doc",
         id: "contributing/README",

config/sidebar.velocity.ts

@@ -1,12 +1,12 @@
 import type { SidebarsConfig } from "@docusaurus/plugin-content-docs";
 
 const velocity: SidebarsConfig = {
-  primary: [
-    "README",
+  primary: ["README", "admin/README", "dev/README"],
+  administration: [
     {
       type: "category",
       label: "Administration",
-      collapsed: true,
+      collapsible: false,
       link: {
         type: "doc",
         id: "admin/README",
@@ -55,10 +55,12 @@ const velocity: SidebarsConfig = {
         },
       ],
     },
+  ],
+  development: [
     {
       type: "category",
       label: "Development",
-      collapsed: true,
+      collapsible: false,
       link: {
         type: "doc",
         id: "dev/README",

src/components/Projects.tsx

@@ -10,19 +10,29 @@ const projects: Project[] = [
     description:
       "High performance Minecraft server that aims to fix gameplay and mechanics inconsistencies.",
     repo: "PaperMC/Paper",
-    link: "/paper",
+    modules: [
+      { name: "Administration", link: "/paper/admin" },
+      { name: "Development", link: "/paper/dev" },
+      { name: "Contributing", link: "/paper/contributing" },
+    ],
   },
   {
     title: "Folia",
     description: "A fork of Paper which adds regionized multithreading to the dedicated server.",
     repo: "PaperMC/Folia",
-    link: "/folia",
+    modules: [
+      { name: "Administration", link: "/folia/admin" },
+      { name: "Development", link: "/folia/dev" },
+    ],
   },
   {
     title: "Velocity",
     description: "The modern, next-generation Minecraft server proxy.",
     repo: "PaperMC/Velocity",
-    link: "/velocity",
+    modules: [
+      { name: "Administration", link: "/velocity/admin" },
+      { name: "Development", link: "/velocity/dev" },
+    ],
   },
   {
     title: "Miscellaneous",
@@ -43,7 +53,7 @@ const projects: Project[] = [
 function Project(project: Project) {
   return (
     <div className={"project"}>
-      <div className={"flex"}>
+      <div>
         <Link
           className={clsx("projectGitHub", project.eol && "archivedProjectTitle")}
           to={`https://github.com/${project.repo}`}
@@ -54,12 +64,16 @@ function Project(project: Project) {
         <p>{project.description}</p>
       </div>
       <div>
-        <Link
-          className={clsx("button button--primary", project.eol && "archivedProjectButton")}
-          to={project.link}
-        >
-          Go
-        </Link>
+        {project.modules?.map((module, index) => (
+          <Link key={index} className={"button button--primary"} to={module.link}>
+            {module.name}
+          </Link>
+        ))}
+        {project.link && (
+          <Link className={"button button--primary"} to={project.link}>
+            Go
+          </Link>
+        )}
       </div>
     </div>
   );
@@ -81,6 +95,12 @@ interface Project {
   title: string;
   description: string;
   repo: string;
-  link: string;
+  link?: string;
+  modules?: Module[];
   eol?: boolean;
 }
+
+interface Module {
+  name: string;
+  link: string;
+}

src/css/projects.css

@@ -8,7 +8,7 @@
   border: 1px solid var(--ifm-color-emphasis-300);
   padding: var(--ifm-global-spacing);
   margin: 24px 0;
-  align-items: center;
+  justify-content: space-between;
 }
 
 .project p {
@@ -17,6 +17,16 @@
   margin: 0;
 }
 
+.project div {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+}
+
+.project a + a {
+  margin-top: 0.5em;
+}
+
 .projectGitHub {
   color: var(--ifm-link-color);
   font-size: 1rem;

src/theme/Navbar/Content/index.tsx

@@ -0,0 +1,104 @@
+import React, { type ReactNode } from "react";
+import { useThemeConfig, ErrorCauseBoundary } from "@docusaurus/theme-common";
+import { splitNavbarItems, useNavbarMobileSidebar } from "@docusaurus/theme-common/internal";
+import NavbarItem, { type Props as NavbarItemConfig } from "@theme/NavbarItem";
+import NavbarColorModeToggle from "@theme/Navbar/ColorModeToggle";
+import SearchBar from "@theme/SearchBar";
+import NavbarMobileSidebarToggle from "@theme/Navbar/MobileSidebar/Toggle";
+import NavbarLogo from "@theme/Navbar/Logo";
+import NavbarSearch from "@theme/Navbar/Search";
+
+import styles from "./styles.module.css";
+
+export type ExtendedNavbarItemConfig = NavbarItemConfig & {
+  activeBaseRegex?: string;
+  modules?: ExtendedNavbarItemConfig[];
+  label?: string;
+  to?: string;
+};
+
+function useNavbarItems() {
+  return useThemeConfig().navbar.items as ExtendedNavbarItemConfig[];
+}
+
+function NavbarItems({ items }: { items: ExtendedNavbarItemConfig[] }): JSX.Element {
+  return (
+    <>
+      {items.map((item, i) => (
+        <ErrorCauseBoundary
+          key={i}
+          onError={(error) =>
+            new Error(
+              `A theme navbar item failed to render.
+Please double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config:
+${JSON.stringify(item, null, 2)}`,
+              { cause: error }
+            )
+          }
+        >
+          <NavbarItem {...item} />
+        </ErrorCauseBoundary>
+      ))}
+    </>
+  );
+}
+
+function NavbarContentLayout({ left, right }: { left: ReactNode; right: ReactNode }) {
+  return (
+    <div className="navbar__inner">
+      <div className="navbar__items">{left}</div>
+      <div className="navbar__items navbar__items--right">{right}</div>
+    </div>
+  );
+}
+
+export default function NavbarContent(): JSX.Element {
+  const mobileSidebar = useNavbarMobileSidebar();
+
+  const items = useNavbarItems();
+  let [leftItems, rightItems] = splitNavbarItems(items);
+
+  // What we are doing here is going through each of the root level NavbarItems,
+  // and checking if the activeBaseRegex matches the current location. If it does
+  // we set the leftItems to the modules of that NavbarItem. This does not happen
+  // if that project does not have submodules.
+  if (typeof document !== "undefined") {
+    for (let item of items) {
+      if (
+        item.activeBaseRegex &&
+        item.modules &&
+        new RegExp(item.activeBaseRegex).test(document.location.pathname)
+      ) {
+        leftItems = item.modules;
+      }
+    }
+  }
+
+  const searchBarItem = items.find((item) => item.type === "search");
+
+  return (
+    <NavbarContentLayout
+      left={
+        // TODO stop hardcoding items?
+        <>
+          {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
+          <NavbarLogo />
+          <NavbarItems items={leftItems} />
+        </>
+      }
+      right={
+        // TODO stop hardcoding items?
+        // Ask the user to add the respective navbar items => more flexible
+        <>
+          <NavbarItems items={rightItems} />
+          <NavbarColorModeToggle className={styles.colorModeToggle} />
+          {!searchBarItem && (
+            <NavbarSearch>
+              <SearchBar />
+            </NavbarSearch>
+          )}
+        </>
+      }
+    />
+  );
+}

src/theme/Navbar/Content/styles.module.css

@@ -0,0 +1,8 @@
+/*
+Hide color mode toggle in small viewports
+ */
+@media (max-width: 996px) {
+  .colorModeToggle {
+    display: none;
+  }
+}

src/theme/Navbar/Logo/index.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import Logo from "@theme/Logo";
+import { useThemeConfig } from "@docusaurus/theme-common";
+import ThemedImage from "@theme/ThemedImage";
+import Link from "@docusaurus/Link";
+import clsx from "clsx";
+import "./styles.css";
+
+interface IconInfo {
+  light: string;
+  dark: string;
+}
+
+interface Icons {
+  [key: string]: IconInfo;
+}
+
+const ICONS: Icons = {
+  paper: {
+    light: "/img/platform-icons/paper_light.svg",
+    dark: "/img/platform-icons/paper_dark.svg",
+  },
+  folia: {
+    light: "/img/platform-icons/folia_light.svg",
+    dark: "/img/platform-icons/folia_dark.svg",
+  },
+  velocity: {
+    light: "/img/platform-icons/velocity_light.svg",
+    dark: "/img/platform-icons/velocity_dark.svg",
+  },
+};
+
+const renderIcon = (label: string, icon: IconInfo) => (
+  <Link to={"/"} className={"project-icon"}>
+    <ThemedImage sources={icon} className={clsx("navbar__logo navbar__brand", "project-icon")} />
+  </Link>
+);
+
+export default function NavbarLogo(): JSX.Element {
+  if (typeof document !== "undefined") {
+    for (let item of useThemeConfig().navbar.items) {
+      if (item.activeBaseRegex && new RegExp(item.activeBaseRegex).test(location.pathname)) {
+        switch (item.label) {
+          case "Paper":
+            return renderIcon(item.label, ICONS.paper);
+          case "Folia":
+            return renderIcon(item.label, ICONS.folia);
+          case "Velocity":
+            return renderIcon(item.label, ICONS.velocity);
+        }
+      }
+    }
+  }
+  return (
+    <Logo
+      className="navbar__brand"
+      imageClassName="navbar__logo"
+      titleClassName="navbar__title text--truncate"
+    />
+  );
+}

src/theme/Navbar/Logo/styles.css

@@ -0,0 +1,4 @@
+.project-icon {
+  height: 40px;
+  width: 40px;
+}