zudoku 0.0.0-fed343e → 0.0.0-ff3751f

package/src/lib/authentication/hook.ts

@@ -10,7 +10,7 @@ export const useAuth = () => {
     isAuthEnabled,
     isPending: authState.isPending,
     profile: authState.profile,
-    isAuthenticated: authState.profile,
+    isAuthenticated: Boolean(authState.profile),
 
     login: async () => {
       if (!isAuthEnabled) {

package/src/lib/authentication/state.ts

@@ -1,4 +1,5 @@
 import { create } from "zustand";
+import { persist } from "zustand/middleware";
 
 export const useAuthState = create<AuthState>(() => ({
   isPending: false,
@@ -19,3 +20,19 @@ export interface UserProfile {
   pictureUrl: string | undefined;
   [key: string]: string | boolean | undefined;
 }
+
+interface SelectedServerState {
+  selectedServer?: string;
+  setSelectedServer: (newServer: string) => void;
+}
+
+export const useSelectedServerStore = create<SelectedServerState>()(
+  persist(
+    (set) => ({
+      selectedServer: undefined,
+      setSelectedServer: (newServer: string) =>
+        set({ selectedServer: newServer }),
+    }),
+    { name: "zudoku-selected-server" },
+  ),
+);

package/src/lib/components/Banner.tsx

@@ -9,7 +9,7 @@ const COLOR_MAP = {
   tip: "bg-green-600",
   caution: "bg-orange-500",
   danger: "bg-rose-500",
-};
+} as const;
 
 export const Banner = () => {
   const { page } = useZudoku();
@@ -19,12 +19,22 @@ export const Banner = () => {
     return <style>{`:root { --banner-height: 0px; }`}</style>;
   }
 
+  const mappedColor =
+    page.banner.color && page.banner.color in COLOR_MAP
+      ? COLOR_MAP[page.banner.color as keyof typeof COLOR_MAP]
+      : !page.banner.color
+        ? "bg-primary"
+        : undefined;
+
+  const style = !mappedColor ? { backgroundColor: page.banner.color } : {};
+
   return (
     <div
       className={cn(
         "relative text-primary-foreground text-sm font-medium px-4 py-2 flex gap-2 items-center",
-        page.banner.color ? COLOR_MAP[page.banner.color] : "bg-primary",
+        mappedColor,
       )}
+      style={style}
     >
       <div className="w-full">{page.banner.message}</div>
       {page.banner.dismissible && (

package/src/lib/components/ErrorPage.tsx

@@ -1,5 +1,4 @@
 import type { ReactNode } from "react";
-import { Link } from "react-router-dom";
 import { CategoryHeading } from "./CategoryHeading.js";
 import { Heading } from "./Heading.js";
 import { ProseClasses } from "./Markdown.js";
@@ -22,7 +21,6 @@ export const ErrorPage = ({
         </Heading>
       )}
       <p>{message}</p>
-      <Link to="/">Go back home</Link>
     </div>
   );
 };

package/src/lib/components/Header.tsx

@@ -17,6 +17,7 @@ import {
   DropdownMenuTrigger,
 } from "../ui/DropdownMenu.js";
 import { cn } from "../util/cn.js";
+import { joinPath } from "../util/joinPath.js";
 import { Banner } from "./Banner.js";
 import { useTheme } from "./context/ThemeContext.js";
 import { useZudoku } from "./context/ZudokuContext.js";
@@ -70,14 +71,28 @@ export const Header = memo(function HeaderInner() {
                 {page?.logo && (
                   <>
                     <img
-                      src={page.logo.src.light}
+                      src={
+                        /https?:\/\//.test(page.logo.src.light)
+                          ? page.logo.src.light
+                          : joinPath(
+                              import.meta.env.BASE_URL,
+                              page.logo.src.light,
+                            )
+                      }
                       alt={page.logo.alt ?? page.pageTitle}
                       style={{ width: page.logo.width }}
                       className={cn("h-10", isDark && "hidden")}
                       loading="lazy"
                     />
                     <img
-                      src={page.logo.src.dark}
+                      src={
+                        /https?:\/\//.test(page.logo.src.dark)
+                          ? page.logo.src.dark
+                          : joinPath(
+                              import.meta.env.BASE_URL,
+                              page.logo.src.dark,
+                            )
+                      }
                       alt={page.logo.alt ?? page.pageTitle}
                       style={{ width: page.logo.width }}
                       className={cn("h-10", !isDark && "hidden")}
@@ -91,8 +106,8 @@ export const Header = memo(function HeaderInner() {
               </div>
             </Link>
           </div>
-          <div className="grid grid-cols-2 md:grid-cols-[--sidecar-grid-cols] items-center gap-8">
-            <div className="w-full justify-center flex">
+          <div className="grid grid-cols-1 lg:grid-cols-[--sidecar-grid-cols] items-center gap-8">
+            <div className="w-full justify-center hidden lg:flex">
               <Search />
             </div>
 
@@ -133,7 +148,9 @@ export const Header = memo(function HeaderInner() {
             </div>
           </div>
         </div>
+        <Slotlet name="top-navigation-before" />
         <TopNavigation />
+        <Slotlet name="top-navigation-after" />
       </div>
     </header>
   );

package/src/lib/components/InlineCode.tsx

@@ -4,11 +4,21 @@ import { cn } from "../util/cn.js";
 export const InlineCode = ({
   className,
   children,
+  selectOnClick,
 }: {
   className?: string;
   children: ReactNode;
+  selectOnClick?: boolean;
 }) => (
   <code
+    onClick={(e) => {
+      if (!selectOnClick) return;
+      const selection = window.getSelection();
+      const range = document.createRange();
+      range.selectNodeContents(e.currentTarget);
+      selection?.removeAllRanges();
+      selection?.addRange(range);
+    }}
     className={cn(
       "font-mono border p-1 py-0.5 rounded bg-border/50 dark:bg-border/70 whitespace-nowrap",
       className,

package/src/lib/components/Layout.tsx

@@ -49,11 +49,12 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
       </Helmet>
       <Slotlet name="layout-before-head" />
       <Header />
+      <Slotlet name="layout-after-head" />
 
       <div className="w-full max-w-screen-2xl mx-auto px-10 lg:px-12">
         <Suspense
           fallback={
-            <main className="grid h-full place-items-center">
+            <main className="grid h-[calc(100vh-var(--header-height))] place-items-center">
               <Spinner />
             </main>
           }

package/src/lib/components/MobileTopNavigation.tsx

@@ -2,6 +2,7 @@ import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { cx } from "class-variance-authority";
 import { MenuIcon } from "lucide-react";
 import { NavLink } from "react-router-dom";
+import { useAuth } from "../authentication/hook.js";
 import {
   Drawer,
   DrawerClose,
@@ -10,9 +11,13 @@ import {
   DrawerTrigger,
 } from "../ui/Drawer.js";
 import { useZudoku } from "./context/ZudokuContext.js";
+import { Search } from "./Search.js";
+import { isHiddenItem } from "./TopNavigation.js";
 
 export const MobileTopNavigation = () => {
   const { topNavigation } = useZudoku();
+  const { isAuthenticated } = useAuth();
+
   return (
     <Drawer direction="right">
       <div className="flex lg:hidden justify-self-end">
@@ -21,14 +26,17 @@ export const MobileTopNavigation = () => {
         </DrawerTrigger>
       </div>
       <DrawerContent
-        className="lg:hidden h-screen right-0 left-auto w-[320px] rounded-none"
+        className="lg:hidden h-screen right-0 left-auto w-[320px] rounded-none overflow-auto"
         aria-describedby={undefined}
       >
         <VisuallyHidden>
           <DrawerTitle>Navigation</DrawerTitle>
         </VisuallyHidden>
+        <div className="flex p-4">
+          <Search />
+        </div>
         <ul className="flex flex-col items-center gap-4 p-4">
-          {topNavigation.map((item) => (
+          {topNavigation.filter(isHiddenItem(isAuthenticated)).map((item) => (
             <li key={item.label}>
               <NavLink
                 className={({ isActive }) =>

package/src/lib/components/Search.tsx

@@ -39,7 +39,7 @@ export const Search = () => {
       <button
         type="button"
         onClick={() => setIsOpen(true)}
-        className="flex items-center border border-input hover:bg-accent hover:text-accent-foreground p-4 relative h-8 justify-start rounded-lg bg-background text-sm text-muted-foreground shadow-none w-40 sm:w-72"
+        className="flex items-center border border-input hover:bg-accent hover:text-accent-foreground p-4 relative h-8 justify-start rounded-lg bg-background text-sm text-muted-foreground shadow-none w-full sm:w-72"
       >
         <div className="flex items-center gap-2 flex-grow">
           <SearchIcon size={14} />

package/src/lib/components/SlotletProvider.tsx

@@ -1,6 +1,22 @@
-import React, { type ReactElement, ReactNode, useContext } from "react";
+import React, {
+  type ComponentType,
+  type ReactElement,
+  ReactNode,
+  useContext,
+} from "react";
 import { isValidElementType } from "react-is";
-export type Slotlets = Record<string, ReactNode | ReactElement>;
+import {
+  type Location,
+  type NavigateFunction,
+  type Params,
+  type SetURLSearchParams,
+} from "react-router-dom";
+import { useExposedProps } from "../util/useExposedProps.js";
+
+export type Slotlets = Record<
+  string,
+  ReactNode | ReactElement | ComponentType<ExposedComponentProps>
+>;
 
 const SlotletContext = React.createContext<Slotlets | undefined>({});
 
@@ -18,13 +34,22 @@ export const SlotletProvider = ({
   );
 };
 
+export type ExposedComponentProps = {
+  location: Location;
+  navigate: NavigateFunction;
+  searchParams: URLSearchParams;
+  setSearchParams: SetURLSearchParams;
+  params: Params;
+};
+
 export const Slotlet = ({ name }: { name: string }) => {
   const context = useContext(SlotletContext);
   const componentOrElement = context?.[name];
+  const slotletProps = useExposedProps();
 
   if (isValidElementType(componentOrElement)) {
-    return React.createElement(componentOrElement);
+    return React.createElement(componentOrElement, slotletProps);
   }
 
-  return componentOrElement;
+  return componentOrElement as ReactNode;
 };

package/src/lib/components/SyntaxHighlight.tsx

@@ -46,6 +46,10 @@ type SyntaxHighlightProps = {
   language?: string;
 } & Omit<HighlightProps, "children" | "language">;
 
+const remapLang = {
+  mdx: "md",
+} as Record<string, string>;
+
 export const SyntaxHighlight = ({
   copyable = true,
   language = "plain",
@@ -61,7 +65,7 @@ export const SyntaxHighlight = ({
   return (
     <Highlight
       theme={isDark ? themes.vsDark : themes.github}
-      language={language}
+      language={remapLang[language] ?? language}
       {...props}
     >
       {({ className, style, tokens, getLineProps, getTokenProps }) => (

package/src/lib/components/TopNavigation.tsx

@@ -1,10 +1,26 @@
 import { cx } from "class-variance-authority";
-import { NavLink } from "react-router-dom";
+import { Suspense } from "react";
+import { Link } from "react-router-dom";
+import { useAuth } from "../authentication/hook.js";
+import { TopNavigationItem } from "../../config/validators/validate.js";
+import { joinPath } from "../util/joinPath.js";
+import { useCurrentNavigation, useZudoku } from "./context/ZudokuContext.js";
+import { traverseSidebar } from "./navigation/utils.js";
 
-import { useZudoku } from "./context/ZudokuContext.js";
+export const isHiddenItem =
+  (isAuthenticated?: boolean) =>
+  (item: { display?: "auth" | "anon" | "always" }) => {
+    return (
+      (item.display === "auth" && isAuthenticated) ||
+      (item.display === "anon" && !isAuthenticated) ||
+      !item.display ||
+      item.display === "always"
+    );
+  };
 
 export const TopNavigation = () => {
   const { topNavigation } = useZudoku();
+  const { isAuthenticated } = useAuth();
 
   // Hide top nav if there is only one item
   if (topNavigation.length <= 1) {
@@ -12,26 +28,57 @@ export const TopNavigation = () => {
   }
 
   return (
-    <nav className="hidden lg:block border-b text-sm px-12 h-[--top-nav-height]">
-      <ul className="flex flex-row items-center gap-8">
-        {topNavigation.map((item) => (
-          <li key={item.label}>
-            <NavLink
-              className={({ isActive }) =>
-                cx(
-                  "block py-3.5 font-medium -mb-px border-b-2",
-                  isActive
-                    ? "border-primary text-foreground"
-                    : "border-transparent text-foreground/75 hover:text-foreground hover:border-accent-foreground/25",
-                )
-              }
-              to={item.id}
-            >
-              {item.label}
-            </NavLink>
-          </li>
-        ))}
-      </ul>
-    </nav>
+    <Suspense>
+      <nav className="hidden lg:block border-b text-sm px-12 h-[--top-nav-height]">
+        <ul className="flex flex-row items-center gap-8">
+          {topNavigation.filter(isHiddenItem(isAuthenticated)).map((item) => (
+          <li key={item.id}>
+              <TopNavItem {...item} />
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </Suspense>
+  );
+};
+
+const TopNavItem = ({ id, label, default: defaultLink }: TopNavigationItem) => {
+  const { sidebars } = useZudoku();
+  const nav = useCurrentNavigation();
+  const currentSidebar = sidebars[id];
+
+  // TODO: This is a bit of a hack to get the first link in the sidebar
+  // We should really process this when we load the config so we can validate
+  // that the sidebar is actually set. In this case we just fall back to linking
+  // to the id if we can't resolve a sidebar.
+  const first =
+    defaultLink ??
+    (currentSidebar
+      ? traverseSidebar(currentSidebar, (item) => {
+          if (item.type === "doc") return joinPath(item.id);
+        })
+      : joinPath(id));
+
+  if (!first) {
+    throw new Error(
+      `No links found in top navigation for top navigation '${id}'. Check that the sidebar isn't empty or that a default link set.`,
+    );
+  }
+
+  // Manually set the active sidebar based on our logic of what is active
+  const isActive = nav.data.topNavItem?.id === id;
+
+  return (
+    <Link
+      className={cx(
+        "block py-3.5 font-medium -mb-px border-b-2",
+        isActive
+          ? "border-primary text-foreground"
+          : "border-transparent text-foreground/75 hover:text-foreground hover:border-accent-foreground/25",
+      )}
+      to={first}
+    >
+      {label}
+    </Link>
   );
 };

package/src/lib/components/context/ZudokuContext.ts

@@ -1,7 +1,9 @@
 import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
 import { createContext, useContext } from "react";
-import { useLocation } from "react-router-dom";
+import { matchPath, useLocation } from "react-router-dom";
 import { DevPortalContext } from "../../core/DevPortalContext.js";
+import { joinPath } from "../../util/joinPath.js";
+import { traverseSidebar } from "../navigation/utils.js";
 
 export const ZudokuReactContext = createContext<DevPortalContext | undefined>(
   undefined,
@@ -25,34 +27,40 @@ export const useApiIdentities = () => {
   });
 };
 
-export const useTopNavigationItem = () => {
-  const { topNavigation } = useZudoku();
+export const useCurrentNavigation = () => {
+  const { getPluginSidebar, sidebars, topNavigation } = useZudoku();
   const location = useLocation();
 
-  const firstPart = location.pathname.split("/").at(1);
-  if (!firstPart) return;
+  const currentSidebarItem = Object.entries(sidebars).find(([, sidebar]) => {
+    return traverseSidebar(sidebar, (item) => {
+      const itemId =
+        item.type === "doc"
+          ? joinPath(item.id)
+          : item.type === "category" && item.link
+            ? joinPath(item.link.id)
+            : undefined;
 
-  return topNavigation.find((item) => item.id === firstPart);
-};
-
-export const useNavigation = () => {
-  const { getPluginSidebar, sidebars } = useZudoku();
-  const navItem = useTopNavigationItem();
-  const path = navItem?.id;
-  const currentSidebar = path ? (sidebars[path] ?? []) : [];
-  const location = useLocation();
+      if (itemId === location.pathname) {
+        return item;
+      }
+    });
+  });
+  const currentTopNavItem =
+    topNavigation.find((t) => t.id === currentSidebarItem?.[0]) ??
+    topNavigation.find((item) => matchPath(item.id, location.pathname));
 
   return useSuspenseQuery({
     queryFn: async () => {
-      const pluginSidebar = path
-        ? await getPluginSidebar(path)
-        : await getPluginSidebar(location.pathname);
+      const pluginSidebar = await getPluginSidebar(location.pathname);
 
       return {
-        items: [...currentSidebar, ...pluginSidebar],
-        currentTopNavItem: navItem,
+        sidebar: [
+          ...(currentSidebarItem ? currentSidebarItem[1] : []),
+          ...pluginSidebar,
+        ],
+        topNavItem: currentTopNavItem,
       };
     },
-    queryKey: ["navigation", path],
+    queryKey: ["navigation", location.pathname],
   });
 };

package/src/lib/components/index.ts

@@ -1,6 +1,7 @@
 import { useMDXComponents as useMDXComponentsImport } from "@mdx-js/react";
 import { Helmet } from "@zudoku/react-helmet-async";
 import { Link as LinkImport } from "react-router-dom";
+import { useAuthState } from "../authentication/state.js";
 import { RouterError as RouterErrorImport } from "../errors/RouterError.js";
 import { ServerError as ServerErrorImport } from "../errors/ServerError.js";
 import { Button as ButtonImport } from "../ui/Button.js";
@@ -9,17 +10,25 @@ import {
   Bootstrap as BootstrapImport,
   BootstrapStatic as BootstrapStaticImport,
 } from "./Bootstrap.js";
+import { ClientOnly as ClientOnlyImport } from "./ClientOnly.js";
 import { DevPortal as DevPortalImport } from "./DevPortal.js";
 import { Layout as LayoutImport } from "./Layout.js";
-
+import { useZudoku as useZudokuImport } from "./context/ZudokuContext.js";
 export const useMDXComponents = /*@__PURE__*/ useMDXComponentsImport;
-export const Callout = /*@__PURE__*/ CalloutImport;
 export const DevPortal = /*@__PURE__*/ DevPortalImport;
 export const Layout = /*@__PURE__*/ LayoutImport;
-export const Link = /*@__PURE__*/ LinkImport;
 export const RouterError = /*@__PURE__*/ RouterErrorImport;
 export const ServerError = /*@__PURE__*/ ServerErrorImport;
 export const Bootstrap = /*@__PURE__*/ BootstrapImport;
 export const BootstrapStatic = /*@__PURE__*/ BootstrapStaticImport;
-export const Button = /*@__PURE__*/ ButtonImport;
+
 export const Head = /*@__PURE__*/ Helmet;
+
+export const useZudoku = /*@__PURE__*/ useZudokuImport;
+export const useAuth = /*@__PURE__*/ useAuthState;
+export const Zudoku = /*@__PURE__*/ DevPortalImport;
+
+export const Callout = /*@__PURE__*/ CalloutImport;
+export const ClientOnly = /*@__PURE__*/ ClientOnlyImport;
+export const Button = /*@__PURE__*/ ButtonImport;
+export const Link: typeof LinkImport = /*@__PURE__*/ LinkImport;

package/src/lib/components/navigation/Sidebar.tsx

@@ -2,35 +2,35 @@ import { useRef } from "react";
 
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { DrawerContent, DrawerTitle } from "../../ui/Drawer.js";
-import { useNavigation } from "../context/ZudokuContext.js";
+import { useCurrentNavigation } from "../context/ZudokuContext.js";
 import { Slotlet } from "../SlotletProvider.js";
 import { SidebarItem } from "./SidebarItem.js";
 import { SidebarWrapper } from "./SidebarWrapper.js";
 
 export const Sidebar = () => {
   const navRef = useRef<HTMLDivElement | null>(null);
-  const navigation = useNavigation();
+  const navigation = useCurrentNavigation();
 
   return (
     <>
       <SidebarWrapper
         ref={navRef}
-        pushMainContent={navigation.data.items.length > 0}
+        pushMainContent={navigation.data.sidebar.length > 0}
       >
         <Slotlet name="zudoku-before-navigation" />
-        {navigation.data.items.map((item) => (
+        {navigation.data.sidebar.map((item) => (
           <SidebarItem key={item.label} item={item} />
         ))}
         <Slotlet name="zudoku-after-navigation" />
       </SidebarWrapper>
       <DrawerContent
-        className="lg:hidden h-screen left-0 p-6 w-[320px] rounded-none"
+        className="lg:hidden h-screen left-0 p-6 w-[320px] rounded-none overflow-auto"
         aria-describedby={undefined}
       >
         <VisuallyHidden>
           <DrawerTitle>Sidebar</DrawerTitle>
         </VisuallyHidden>
-        {navigation.data.items.map((item) => (
+        {navigation.data.sidebar.map((item) => (
           <SidebarItem key={item.label} item={item} />
         ))}
       </DrawerContent>