zudoku 0.0.0-fed343e → 0.0.0-feda542

package/src/lib/components/ReactMarkdown.tsx

@@ -0,0 +1,264 @@
+/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
+
+/**
+ * This is a fork of `react-markdown` converted to typescript.
+ * The reason we fork it is because react-markdown is comptaible with
+ * unified 11, but references the unified 10 and related packages causing
+ * type errors and a bunch of extra imports
+ *
+ * Source: https://github.com/remarkjs/react-markdown/blob/main/index.js
+ */
+
+import { unreachable } from "devlop";
+import type { Element, ElementContent, Nodes, Parents } from "hast";
+import {
+  Components as JsxRuntimeComponents,
+  toJsxRuntime,
+} from "hast-util-to-jsx-runtime";
+import { urlAttributes } from "html-url-attributes";
+import { ReactElement } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import remarkParse from "remark-parse";
+import remarkRehype, { Options as RemarkRehypeOptions } from "remark-rehype";
+import { PluggableList, unified } from "unified";
+import { visit } from "unist-util-visit";
+import { VFile } from "vfile";
+
+const changelog =
+  "https://github.com/remarkjs/react-markdown/blob/main/changelog.md";
+
+const emptyPlugins: PluggableList = [];
+const emptyRemarkRehypeOptions: Readonly<RemarkRehypeOptions> = {
+  allowDangerousHtml: true,
+};
+const safeProtocol = /^(https?|ircs?|mailto|xmpp)$/i;
+
+interface Deprecation {
+  from: string;
+  id: string;
+  to?: keyof Options;
+}
+
+interface AllowElement {
+  (
+    element: Readonly<Element>,
+    index: number,
+    parent: Readonly<Parents> | undefined,
+  ): boolean | null | undefined;
+}
+
+interface UrlTransform {
+  (
+    url: string,
+    key: string,
+    node: Readonly<Element>,
+  ): string | null | undefined;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+interface Components extends Partial<JsxRuntimeComponents> {}
+
+interface Options {
+  allowElement?: AllowElement | null;
+  allowedElements?: ReadonlyArray<string> | null;
+  children?: string | null;
+  className?: string | null;
+  components?: Components | null;
+  disallowedElements?: ReadonlyArray<string> | null;
+  rehypePlugins?: PluggableList | null;
+  remarkPlugins?: PluggableList | null;
+  remarkRehypeOptions?: Readonly<RemarkRehypeOptions> | null;
+  skipHtml?: boolean | null;
+  unwrapDisallowed?: boolean | null;
+  urlTransform?: UrlTransform | null;
+}
+
+const deprecations: ReadonlyArray<Readonly<Deprecation>> = [
+  { from: "astPlugins", id: "remove-buggy-html-in-markdown-parser" },
+  { from: "allowDangerousHtml", id: "remove-buggy-html-in-markdown-parser" },
+  {
+    from: "allowNode",
+    id: "replace-allownode-allowedtypes-and-disallowedtypes",
+    to: "allowElement",
+  },
+  {
+    from: "allowedTypes",
+    id: "replace-allownode-allowedtypes-and-disallowedtypes",
+    to: "allowedElements",
+  },
+  {
+    from: "disallowedTypes",
+    id: "replace-allownode-allowedtypes-and-disallowedtypes",
+    to: "disallowedElements",
+  },
+  { from: "escapeHtml", id: "remove-buggy-html-in-markdown-parser" },
+  { from: "includeElementIndex", id: "#remove-includeelementindex" },
+  {
+    from: "includeNodeIndex",
+    id: "change-includenodeindex-to-includeelementindex",
+  },
+  { from: "linkTarget", id: "remove-linktarget" },
+  {
+    from: "plugins",
+    id: "change-plugins-to-remarkplugins",
+    to: "remarkPlugins",
+  },
+  { from: "rawSourcePos", id: "#remove-rawsourcepos" },
+  { from: "renderers", id: "change-renderers-to-components", to: "components" },
+  { from: "source", id: "change-source-to-children", to: "children" },
+  { from: "sourcePos", id: "#remove-sourcepos" },
+  { from: "transformImageUri", id: "#add-urltransform", to: "urlTransform" },
+  { from: "transformLinkUri", id: "#add-urltransform", to: "urlTransform" },
+];
+
+export function ReactMarkdown(options: Readonly<Options>): ReactElement {
+  const allowedElements = options.allowedElements;
+  const allowElement = options.allowElement;
+  const children = options.children || "";
+  const className = options.className;
+  const components = options.components;
+  const disallowedElements = options.disallowedElements;
+  const rehypePlugins = options.rehypePlugins || emptyPlugins;
+  const remarkPlugins = options.remarkPlugins || emptyPlugins;
+  const remarkRehypeOptions = options.remarkRehypeOptions
+    ? { ...options.remarkRehypeOptions, ...emptyRemarkRehypeOptions }
+    : emptyRemarkRehypeOptions;
+  const skipHtml = options.skipHtml;
+  const unwrapDisallowed = options.unwrapDisallowed;
+  const urlTransform = options.urlTransform || defaultUrlTransform;
+
+  const processor = unified()
+    .use(remarkParse)
+    .use(remarkPlugins)
+    .use(remarkRehype, remarkRehypeOptions)
+    .use(rehypePlugins);
+
+  const file = new VFile();
+
+  if (typeof children === "string") {
+    file.value = children;
+  } else {
+    unreachable(
+      `Unexpected value '${children}' for 'children' prop, expected 'string'`,
+    );
+  }
+
+  if (allowedElements && disallowedElements) {
+    unreachable(
+      "Unexpected combined `allowedElements` and `disallowedElements`, expected one or the other",
+    );
+  }
+
+  for (const deprecation of deprecations) {
+    if (Object.prototype.hasOwnProperty.call(options, deprecation.from)) {
+      unreachable(
+        `Unexpected '${deprecation.from}' prop, ` +
+          (deprecation.to ? `use '${deprecation.to}' instead` : "remove it") +
+          ` (see <${changelog}#${deprecation.id}> for more info)`,
+      );
+    }
+  }
+
+  const mdastTree = processor.parse(file);
+  let hastTree: Nodes = processor.runSync(mdastTree, file);
+
+  if (className) {
+    hastTree = {
+      type: "element",
+      tagName: "div",
+      properties: { className },
+      children:
+        hastTree.type === "root"
+          ? (hastTree.children as ElementContent[])
+          : [hastTree],
+    };
+  }
+
+  // Nodes type is slightly off, different versions of `hast` have different types
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  visit(hastTree, transform);
+
+  return toJsxRuntime(hastTree, {
+    Fragment,
+    components,
+    ignoreInvalidStyle: true,
+    jsx,
+    jsxs,
+    passKeys: true,
+    passNode: true,
+  });
+
+  function transform(
+    node: Nodes,
+    index: number | null,
+    parent: Parents | undefined,
+  ): number | void {
+    if (node.type === "raw" && parent && typeof index === "number") {
+      if (skipHtml) {
+        parent.children.splice(index, 1);
+      } else {
+        parent.children[index] = { type: "text", value: node.value };
+      }
+      return index;
+    }
+
+    if (node.type === "element") {
+      for (const key in urlAttributes) {
+        if (
+          Object.prototype.hasOwnProperty.call(urlAttributes, key) &&
+          Object.prototype.hasOwnProperty.call(node.properties, key)
+        ) {
+          const value = node.properties[key];
+          const test = urlAttributes[key];
+          if (
+            test === null ||
+            test === undefined ||
+            test.includes(node.tagName)
+          ) {
+            node.properties[key] = urlTransform(String(value || ""), key, node);
+          }
+        }
+      }
+
+      let remove = allowedElements
+        ? !allowedElements.includes(node.tagName)
+        : disallowedElements
+          ? disallowedElements.includes(node.tagName)
+          : false;
+
+      if (!remove && allowElement && typeof index === "number") {
+        remove = !allowElement(node, index, parent);
+      }
+
+      if (remove && parent && typeof index === "number") {
+        if (unwrapDisallowed && node.children) {
+          parent.children.splice(index, 1, ...node.children);
+        } else {
+          parent.children.splice(index, 1);
+        }
+        return index;
+      }
+    }
+  }
+}
+
+function defaultUrlTransform(value: string): string {
+  const colon = value.indexOf(":");
+  const questionMark = value.indexOf("?");
+  const numberSign = value.indexOf("#");
+  const slash = value.indexOf("/");
+
+  if (
+    colon < 0 ||
+    (slash > -1 && colon > slash) ||
+    (questionMark > -1 && colon > questionMark) ||
+    (numberSign > -1 && colon > numberSign) ||
+    safeProtocol.test(value.slice(0, colon))
+  ) {
+    return value;
+  }
+
+  return "";
+}

package/src/lib/components/Search.tsx

@@ -1,9 +1,11 @@
 import { SearchIcon } from "lucide-react";
 import { Suspense, useCallback, useEffect, useState } from "react";
 import { isSearchPlugin } from "../core/plugins.js";
+import { detectOS } from "../util/detectOS.js";
+import { ClientOnly } from "./ClientOnly.js";
 import { useZudoku } from "./context/ZudokuContext.js";
 
-export const Search = () => {
+export const Search = ({ className }: { className?: string }) => {
   const ctx = useZudoku();
   const [isOpen, setIsOpen] = useState(false);
 
@@ -35,19 +37,19 @@ export const Search = () => {
   }
 
   return (
-    <>
+    <div className={className}>
       <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} />
           Search
         </div>
-        <kbd className="absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[11px] font-medium opacity-100 sm:flex">
-          ⌘K
-        </kbd>
+        <ClientOnly>
+          <KbdShortcut />
+        </ClientOnly>
       </button>
       <Suspense fallback={null}>
         {searchPlugin.renderSearch({
@@ -55,6 +57,15 @@ export const Search = () => {
           onClose,
         })}
       </Suspense>
-    </>
+    </div>
+  );
+};
+
+const KbdShortcut = () => {
+  const os = detectOS();
+  return (
+    <kbd className="absolute right-[0.3rem] top-[0.35rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[11px] font-medium opacity-100 sm:flex">
+      {os === "macOS" ? "⌘" : "Ctrl"}+K
+    </kbd>
   );
 };

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";
+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/StatusPage.tsx

@@ -0,0 +1,91 @@
+import type { ReactNode } from "react";
+import { ErrorPage } from "./ErrorPage.js";
+
+type StatusPageProps = {
+  statusCode: number;
+  message?: ReactNode;
+};
+
+const getDefaultContent = (
+  statusCode: number,
+): { title: string; message: string } => {
+  switch (statusCode) {
+    case 400:
+      return {
+        title: "Bad Request",
+        message:
+          "The request could not be understood by the server due to malformed syntax.",
+      };
+    case 403:
+      return {
+        title: "Forbidden",
+        message: "You don't have permission to access this resource.",
+      };
+    case 404:
+      return {
+        title: "Not Found",
+        message: "The requested resource could not be found.",
+      };
+    case 405:
+      return {
+        title: "Method Not Allowed",
+        message:
+          "The request method is not supported for the requested resource.",
+      };
+    case 414:
+      return {
+        title: "Request URI Too Large",
+        message: "The request URI is too large.",
+      };
+    case 416:
+      return {
+        title: "Range Not Satisfiable",
+        message: "The server cannot satisfy the request range.",
+      };
+    case 500:
+      return {
+        title: "Internal Server Error",
+        message: "An unexpected error occurred while processing your request.",
+      };
+    case 501:
+      return {
+        title: "Not Implemented",
+        message:
+          "The server does not support the functionality required to fulfill the request.",
+      };
+    case 502:
+      return {
+        title: "Bad Gateway",
+        message:
+          "The server received an invalid response from the upstream server.",
+      };
+    case 503:
+      return {
+        title: "Service Unavailable",
+        message: "The server is temporarily unable to handle the request.",
+      };
+    case 504:
+      return {
+        title: "Gateway Timeout",
+        message:
+          "The server did not receive a timely response from the upstream server.",
+      };
+    default:
+      return {
+        title: "An error occurred",
+        message: "Something went wrong while processing your request.",
+      };
+  }
+};
+
+export const StatusPage = ({ statusCode, message }: StatusPageProps) => {
+  const defaultContent = getDefaultContent(statusCode);
+
+  return (
+    <ErrorPage
+      title={defaultContent.title}
+      message={message ?? defaultContent.message}
+      category={statusCode}
+    />
+  );
+};

package/src/lib/components/ThemeSwitch.tsx

@@ -0,0 +1,46 @@
+import { MoonIcon, SunIcon } from "lucide-react";
+import { useTheme } from "next-themes";
+import { Button } from "zudoku/ui/Button.js";
+import { cn } from "../util/cn.js";
+import { ClientOnly } from "./ClientOnly.js";
+
+export const ThemeSwitch = () => {
+  const { resolvedTheme, setTheme } = useTheme();
+
+  return (
+    <ClientOnly fallback={<Button variant="ghost" size="icon" />}>
+      <button
+        type="button"
+        className="flex rounded-full border p-0.5 gap-0.5 group"
+        onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
+        aria-label={
+          resolvedTheme === "dark"
+            ? "Switch to light mode"
+            : "Switch to dark mode"
+        }
+      >
+        <div
+          className={cn(
+            "border border-transparent rounded-full p-0.5 [&>svg>circle]:transition-colors [&>svg>path]:transition-transform transition-all [&>svg>path]:duration-200 [&>svg>circle]:duration-500 [&>svg>circle]:fill-transparent",
+            resolvedTheme === "light" && "border-border bg-muted",
+            resolvedTheme === "dark" &&
+              "group-hover:[&>svg>path]:scale-110 group-hover:[&>svg>path]:-translate-x-[1px] group-hover:[&>svg>path]:-translate-y-[1px] group-hover:rotate-[15deg] ",
+          )}
+        >
+          <SunIcon size={16} />
+        </div>
+        <div
+          className={cn(
+            "border border-transparent rounded-full p-0.5 transition-transform transform-gpu duration-500",
+            resolvedTheme === "dark" &&
+              "border-border bg-muted [&>svg>path]:fill-white [&>svg>path]:stroke-transparent",
+            resolvedTheme === "light" &&
+              "group-hover:rotate-[-10deg] [&>svg>path]:stroke-currentColor",
+          )}
+        >
+          <MoonIcon size={16} />
+        </div>
+      </button>
+    </ClientOnly>
+  );
+};

package/src/lib/components/TopNavigation.tsx

@@ -1,37 +1,119 @@
+import { useNProgress } from "@tanem/react-nprogress";
 import { cx } from "class-variance-authority";
-import { NavLink } from "react-router-dom";
+import { Suspense, useEffect, useState } from "react";
+import { NavLink, useNavigation } from "react-router";
+import type { TopNavigationItem } from "../../config/validators/common.js";
+import { useAuth } from "../authentication/hook.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";
 
-import { useZudoku } from "./context/ZudokuContext.js";
+export const isHiddenItem =
+  (isAuthenticated?: boolean) =>
+  (item: { display?: "auth" | "anon" | "always" | "hide" }): boolean => {
+    if (item.display === "hide") return false;
+    return (
+      (item.display === "auth" && isAuthenticated) ||
+      (item.display === "anon" && !isAuthenticated) ||
+      !item.display ||
+      item.display === "always"
+    );
+  };
+
+export const PageProgress = () => {
+  const navigation = useNavigation();
+  const isNavigating = navigation.state === "loading";
+  // delay the animation to avoid flickering
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setIsAnimating(isNavigating), 100);
+
+    return () => clearTimeout(timer);
+  }, [isNavigating]);
+
+  const { isFinished, progress } = useNProgress({ isAnimating });
+
+  return (
+    <div
+      className="absolute w-0 left-0 right-0 bottom-[-1px] h-[2px] bg-primary transition-all duration-300 ease-in-out"
+      style={{
+        opacity: isFinished ? 0 : 1,
+        width: isFinished ? 0 : `${progress * 100}%`,
+      }}
+    />
+  );
+};
 
 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 (
-    <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>
+      <div className="items-center justify-between px-8 h-[--top-nav-height] hidden lg:flex text-sm relative">
+        <nav className="text-sm">
+          <ul className="flex flex-row items-center gap-8">
+            {filteredItems.map((item) => (
+              <li key={item.id}>
+                <TopNavItem {...item} />
+              </li>
+            ))}
+          </ul>
+        </nav>
+        <Slotlet name="top-navigation-side" />
+      </div>
+      <PageProgress />
+    </Suspense>
+  );
+};
+
+export const TopNavItem = ({
+  id,
+  label,
+  default: defaultLink,
+}: TopNavigationItem) => {
+  const { sidebars } = useZudoku();
+  const currentSidebar = sidebars[id];
+  const currentNav = useCurrentNavigation();
+  const isNavigating = Boolean(useNavigation().location);
+  const isActive = currentNav.topNavItem?.id === id && !isNavigating;
+
+  // 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 joinUrl(item.id);
+        })
+      : joinUrl(id)) ??
+    joinUrl(id);
+
+  return (
+    // We don't use isActive here because it has to be inside the sidebar,
+    // the top nav id doesn't necessarily start with the sidebar id
+    <NavLink
+      className={({ isPending }) =>
+        cx(
+          "block lg:py-3.5 font-medium -mb-px",
+          isActive || isPending
+            ? "border-primary text-foreground"
+            : "border-transparent text-foreground/75 hover:text-foreground hover:border-accent-foreground/25",
+        )
+      }
+      to={first}
+    >
+      {label}
+    </NavLink>
   );
 };