Fix: Use sidebar from top navigation if no other matches (zuplo#838)

Author: dan-lee

packages/zudoku/package.json

@@ -230,6 +230,7 @@
     "loglevel": "1.9.2",
     "lru-cache": "11.0.2",
     "lucide-react": "0.475.0",
+    "minimatch": "10.0.1",
     "nanoevents": "^9.1.0",
     "next-themes": "0.4.4",
     "oauth4webapi": "2.17.0",

packages/zudoku/src/config/validators/common.ts

@@ -192,7 +192,10 @@ const TopNavigationItemSchema = z.object({
   label: z.string(),
   id: z.string(),
   default: z.string().optional(),
-  display: z.enum(["auth", "anon", "always"]).default("always").optional(),
+  display: z
+    .enum(["auth", "anon", "always", "hide"])
+    .default("always")
+    .optional(),
 });
 
 type BannerColorType = ZodOptional<

packages/zudoku/src/lib/components/MobileTopNavigation.tsx

@@ -44,7 +44,7 @@ export const MobileTopNavigation = () => {
             </li>
             {topNavigation.filter(isHiddenItem(isAuthenticated)).map((item) => (
               <li key={item.label}>
-                <button onClick={() => setDrawerOpen(false)}>
+                <button type="button" onClick={() => setDrawerOpen(false)}>
                   <TopNavItem {...item} />
                 </button>
               </li>

packages/zudoku/src/lib/components/TopNavigation.tsx

@@ -1,17 +1,17 @@
 import { cx } from "class-variance-authority";
 import { Suspense } from "react";
 import { NavLink, useNavigation } from "react-router";
-import { TopNavigationItem } from "../../config/validators/common.js";
+import type { TopNavigationItem } from "../../config/validators/common.js";
 import { useAuth } from "../authentication/hook.js";
-import { ZudokuError } from "../util/invariant.js";
-import { joinPath } from "../util/joinPath.js";
+import { joinUrl } from "../util/joinUrl.js";
 import { useCurrentNavigation, useZudoku } from "./context/ZudokuContext.js";
 import { traverseSidebar } from "./navigation/utils.js";
 import { Slotlet } from "./SlotletProvider.js";
 
 export const isHiddenItem =
   (isAuthenticated?: boolean) =>
-  (item: { display?: "auth" | "anon" | "always" }) => {
+  (item: { display?: "auth" | "anon" | "always" | "hide" }): boolean => {
+    if (item.display === "hide") return false;
     return (
       (item.display === "auth" && isAuthenticated) ||
       (item.display === "anon" && !isAuthenticated) ||
@@ -24,17 +24,18 @@ export const TopNavigation = () => {
   const { topNavigation } = useZudoku();
   const { isAuthenticated } = useAuth();
 
-  // Hide top nav if there is only one item
-  if (topNavigation.length <= 1) {
+  const filteredItems = topNavigation.filter(isHiddenItem(isAuthenticated));
+
+  if (filteredItems.length === 0) {
     return <style>{`:root { --top-nav-height: 0px; }`}</style>;
   }
 
   return (
     <Suspense>
-      <div className=" items-center justify-between px-8 h-[--top-nav-height] hidden lg:flex text-sm">
+      <div className="items-center justify-between px-8 h-[--top-nav-height] hidden lg:flex text-sm">
         <nav className="text-sm">
           <ul className="flex flex-row items-center gap-8">
-            {topNavigation.filter(isHiddenItem(isAuthenticated)).map((item) => (
+            {filteredItems.map((item) => (
               <li key={item.id}>
                 <TopNavItem {...item} />
               </li>
@@ -66,15 +67,10 @@ export const TopNavItem = ({
     defaultLink ??
     (currentSidebar
       ? traverseSidebar(currentSidebar, (item) => {
-          if (item.type === "doc") return joinPath(item.id);
+          if (item.type === "doc") return joinUrl(item.id);
         })
-      : joinPath(id));
-
-  if (!first) {
-    throw new ZudokuError("Page not found.", {
-      developerHint: `No links found in top navigation for '${id}'. Check that the sidebar isn't empty or that a default link is set.`,
-    });
-  }
+      : joinUrl(id)) ??
+    joinUrl(id);
 
   return (
     // We don't use isActive here because it has to be inside the sidebar,

packages/zudoku/src/lib/components/context/ZudokuContext.ts

@@ -3,7 +3,7 @@ import { createContext, useContext } from "react";
 import { matchPath, useLocation } from "react-router";
 import { useAuth } from "../../authentication/hook.js";
 import type { ZudokuContext } from "../../core/ZudokuContext.js";
-import { joinPath } from "../../util/joinPath.js";
+import { joinUrl } from "../../util/joinUrl.js";
 import { CACHE_KEYS, NO_DEHYDRATE } from "../cache.js";
 import { traverseSidebar } from "../navigation/utils.js";
 
@@ -39,13 +39,13 @@ export const useCurrentNavigation = () => {
     matchPath(route, location.pathname),
   );
 
-  const currentSidebarItem = Object.entries(sidebars).find(([, sidebar]) => {
+  let currentSidebarItem = Object.entries(sidebars).find(([, sidebar]) => {
     return traverseSidebar(sidebar, (item) => {
       const itemId =
         item.type === "doc"
-          ? joinPath(item.id)
+          ? joinUrl(item.id)
           : item.type === "category" && item.link
-            ? joinPath(item.link.id)
+            ? joinUrl(item.link.id)
             : undefined;
 
       if (itemId === location.pathname) {
@@ -57,6 +57,14 @@ export const useCurrentNavigation = () => {
     topNavigation.find((t) => t.id === currentSidebarItem?.[0]) ??
     topNavigation.find((item) => matchPath(item.id, location.pathname));
 
+  if (
+    currentTopNavItem &&
+    !currentSidebarItem &&
+    currentTopNavItem.id in sidebars
+  ) {
+    currentSidebarItem = ["", sidebars[currentTopNavItem.id]!];
+  }
+
   const { data } = useSuspenseQuery({
     queryFn: () => getPluginSidebar(location.pathname),
     // We just want to suspend here and don't store in SSR dehydrated state

packages/zudoku/src/lib/util/joinPath.tsx

@@ -1,3 +1,6 @@
+/**
+ * @deprecated Use `joinUrl` instead.
+ */
 export const joinPath = (
   ...parts: Array<string | null | undefined | boolean>
 ) => {

packages/zudoku/src/vite/plugin-docs.ts

@@ -1,24 +1,47 @@
 import { glob } from "glob";
+import { minimatch } from "minimatch";
 import path from "node:path";
-import { type Plugin } from "vite";
+import type { Plugin, ViteDevServer } from "vite";
 import type { LoadedConfig } from "../config/config.js";
 import { DocResolver } from "../lib/plugins/markdown/resolver.js";
+import { joinUrl } from "../lib/util/joinUrl.js";
 import { writePluginDebugCode } from "./debug.js";
+import { reload } from "./plugin-config-reload.js";
 
-const ensureLeadingSlash = (str: string) =>
-  str.startsWith("/") ? str : `/${str}`;
+const ensureLeadingSlash = joinUrl;
 
 const viteDocsPlugin = (getConfig: () => LoadedConfig): Plugin => {
   const virtualModuleId = "virtual:zudoku-docs-plugins";
   const resolvedVirtualModuleId = "\0" + virtualModuleId;
 
+  let server: ViteDevServer;
+
   return {
     name: "zudoku-docs-plugin",
     resolveId(id) {
       if (id === virtualModuleId) {
         return resolvedVirtualModuleId;
       }
     },
+    configureServer(srv) {
+      server = srv;
+    },
+    watchChange(id, change) {
+      if (change.event !== "delete" && change.event !== "create") return;
+
+      const config = getConfig();
+      const resolver = new DocResolver(config);
+      const docsConfigs = resolver.getDocsConfigs();
+
+      const matches = docsConfigs.some((docConfig) =>
+        minimatch(
+          ensureLeadingSlash(path.relative(config.__meta.rootDir, id)),
+          docConfig.files,
+        ),
+      );
+
+      if (matches) reload(server);
+    },
     async load(id) {
       if (id === resolvedVirtualModuleId) {
         const config = getConfig();