zudoku 0.0.0-f9d5b02 → 0.0.0-fabd0c1

package/src/lib/components/Layout.tsx

@@ -1,7 +1,8 @@
 import { Helmet } from "@zudoku/react-helmet-async";
 import { PanelLeftIcon } from "lucide-react";
-import { Suspense, useEffect, useRef, type ReactNode } from "react";
-import { Outlet, useLocation } from "react-router-dom";
+import { Suspense, useEffect, useRef, useState, type ReactNode } from "react";
+import { Outlet, useLocation, useNavigation } from "react-router";
+import { useSpinDelay } from "spin-delay";
 import { Drawer, DrawerTrigger } from "../ui/Drawer.js";
 import { cn } from "../util/cn.js";
 import { useScrollToAnchor } from "../util/useScrollToAnchor.js";
@@ -13,6 +14,12 @@ import { Sidebar } from "./navigation/Sidebar.js";
 import { Slotlet } from "./SlotletProvider.js";
 import { Spinner } from "./Spinner.js";
 
+const LoadingFallback = () => (
+  <main className="grid h-[calc(100vh-var(--header-height))] place-items-center">
+    <Spinner />
+  </main>
+);
+
 export const Layout = ({ children }: { children?: ReactNode }) => {
   const location = useLocation();
   const { setActiveAnchor } = useViewportAnchor();
@@ -25,7 +32,7 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
 
   useEffect(() => {
     // Initialize the authentication plugin
-    authentication?.pageLoad?.();
+    authentication?.onPageLoad?.();
   }, [authentication]);
 
   useEffect(() => {
@@ -36,6 +43,14 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
     previousLocationPath.current = location.pathname;
   }, [location.pathname, setActiveAnchor]);
 
+  // Page transition is happening: https://reactrouter.com/start/framework/pending-ui#global-pending-navigation
+  const isNavigating = Boolean(useNavigation().location);
+  const showSpinner = useSpinDelay(isNavigating, {
+    delay: 300,
+    minDuration: 500,
+  });
+  const [isDrawerOpen, setDrawerOpen] = useState(false);
+
   return (
     <>
       {import.meta.env.MODE === "standalone" && (
@@ -51,42 +66,44 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
       <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-[calc(100vh-var(--header-height))] place-items-center">
-              <Spinner />
-            </main>
-          }
-        >
-          <Drawer direction="left">
-            <Sidebar />
-            <div
-              className={cn(
-                "lg:hidden -mx-10 px-10 py-2 sticky bg-background/80 backdrop-blur z-10 top-0 left-0 right-0 border-b",
-                "peer-data-[navigation=false]:hidden",
-              )}
+      <div className="w-full max-w-screen-2xl mx-auto px-4 lg:px-12">
+        {showSpinner ? (
+          <LoadingFallback />
+        ) : (
+          <Suspense fallback={<LoadingFallback />}>
+            <Drawer
+              direction="left"
+              open={isDrawerOpen}
+              onOpenChange={(open) => setDrawerOpen(open)}
             >
-              <DrawerTrigger className="flex items-center gap-2">
-                <PanelLeftIcon size={16} strokeWidth={1.5} />
-                <span className="text-sm">Menu</span>
-              </DrawerTrigger>
-            </div>
-            <main
-              className={cn(
-                "h-full dark:border-white/10 translate-x-0",
-                "lg:overflow-visible",
-                // This works in tandem with the `SidebarWrapper` component
-                "lg:peer-data-[navigation=true]:w-[calc(100%-var(--side-nav-width))]",
-                "lg:peer-data-[navigation=true]:translate-x-[--side-nav-width] lg:peer-data-[navigation=true]:pl-12",
-              )}
-            >
-              <Slotlet name="zudoku-before-content" />
-              {children ?? <Outlet />}
-              <Slotlet name="zudoku-after-content" />
-            </main>
-          </Drawer>
-        </Suspense>
+              <Sidebar onRequestClose={() => setDrawerOpen(false)} />
+              <div
+                className={cn(
+                  "lg:hidden -mx-10 px-10 py-2 sticky bg-background/80 backdrop-blur z-10 top-0 left-0 right-0 border-b",
+                  "peer-data-[navigation=false]:hidden",
+                )}
+              >
+                <DrawerTrigger className="flex items-center gap-2">
+                  <PanelLeftIcon size={16} strokeWidth={1.5} />
+                  <span className="text-sm">Menu</span>
+                </DrawerTrigger>
+              </div>
+              <main
+                className={cn(
+                  "h-full dark:border-white/10 translate-x-0",
+                  "lg:overflow-visible",
+                  // This works in tandem with the `SidebarWrapper` component
+                  "lg:peer-data-[navigation=true]:w-[calc(100%-var(--side-nav-width))]",
+                  "lg:peer-data-[navigation=true]:translate-x-[--side-nav-width] lg:peer-data-[navigation=true]:pl-12",
+                )}
+              >
+                <Slotlet name="zudoku-before-content" />
+                {children ?? <Outlet />}
+                <Slotlet name="zudoku-after-content" />
+              </main>
+            </Drawer>
+          </Suspense>
+        )}
       </div>
     </>
   );

package/src/lib/components/Markdown.tsx

@@ -1,8 +1,8 @@
-import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 import { visit } from "unist-util-visit";
 import { MdxComponents } from "../util/MdxComponents.js";
+import { ReactMarkdown } from "./ReactMarkdown.js";
 
 // same as in packages/dev-portal/framework/vite.ts
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/src/lib/components/MobileTopNavigation.tsx

@@ -1,11 +1,9 @@
 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 { useState } from "react";
 import { useAuth } from "../authentication/hook.js";
 import {
   Drawer,
-  DrawerClose,
   DrawerContent,
   DrawerTitle,
   DrawerTrigger,
@@ -13,51 +11,46 @@ import {
 import { useZudoku } from "./context/ZudokuContext.js";
 import { Search } from "./Search.js";
 import { ThemeSwitch } from "./ThemeSwitch.js";
-import { isHiddenItem } from "./TopNavigation.js";
+import { isHiddenItem, TopNavItem } from "./TopNavigation.js";
 
 export const MobileTopNavigation = () => {
   const { topNavigation } = useZudoku();
   const { isAuthenticated } = useAuth();
+  const [drawerOpen, setDrawerOpen] = useState(false);
 
   return (
-    <Drawer direction="right">
+    <Drawer
+      direction="right"
+      open={drawerOpen}
+      onOpenChange={(open) => setDrawerOpen(open)}
+    >
       <div className="flex lg:hidden justify-self-end">
         <DrawerTrigger className="lg:hidden">
           <MenuIcon size={22} />
         </DrawerTrigger>
       </div>
       <DrawerContent
-        className="lg:hidden h-screen right-0 left-auto w-[320px] rounded-none overflow-auto"
+        className="lg:hidden h-[100dvh] right-0 left-auto w-[320px] rounded-none"
         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">
-          <li>
-            <ThemeSwitch />
-          </li>
-          {topNavigation.filter(isHiddenItem(isAuthenticated)).map((item) => (
-            <li key={item.label}>
-              <NavLink
-                className={({ isActive }) =>
-                  cx(
-                    "block font-medium border-b-2",
-                    isActive
-                      ? "border-primary text-foreground"
-                      : "border-transparent text-foreground/75 hover:text-foreground hover:border-accent-foreground/25",
-                  )
-                }
-                to={item.id}
-              >
-                <DrawerClose>{item.label}</DrawerClose>
-              </NavLink>
+        <div className="p-4 overflow-y-auto overscroll-none">
+          <VisuallyHidden>
+            <DrawerTitle>Navigation</DrawerTitle>
+          </VisuallyHidden>
+          <Search className="flex p-4" />
+          <ul className="flex flex-col items-center gap-4 p-4">
+            <li>
+              <ThemeSwitch />
             </li>
-          ))}
-        </ul>
+            {topNavigation.filter(isHiddenItem(isAuthenticated)).map((item) => (
+              <li key={item.label}>
+                <button onClick={() => setDrawerOpen(false)}>
+                  <TopNavItem {...item} />
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
       </DrawerContent>
     </Drawer>
   );

package/src/lib/components/NotFoundPage.tsx

@@ -1,5 +1,5 @@
 import { UnlinkIcon } from "lucide-react";
-import { Link, useParams } from "react-router-dom";
+import { Link, useParams } from "react-router";
 import { CategoryHeading } from "./CategoryHeading.js";
 import { DeveloperHint } from "./DeveloperHint.js";
 import { Heading } from "./Heading.js";

package/src/lib/components/ReactMarkdown.license.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) Espen Hovlandsdal
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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

@@ -3,7 +3,7 @@ import { Suspense, useCallback, useEffect, useState } from "react";
 import { isSearchPlugin } from "../core/plugins.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,7 +35,7 @@ export const Search = () => {
   }
 
   return (
-    <>
+    <div className={className}>
       <button
         type="button"
         onClick={() => setIsOpen(true)}
@@ -55,6 +55,6 @@ export const Search = () => {
           onClose,
         })}
       </Suspense>
-    </>
+    </div>
   );
 };

package/src/lib/components/SlotletProvider.tsx

@@ -10,7 +10,7 @@ import {
   type NavigateFunction,
   type Params,
   type SetURLSearchParams,
-} from "react-router-dom";
+} from "react-router";
 import { useExposedProps } from "../util/useExposedProps.js";
 
 export type Slotlets = Record<

package/src/lib/components/SyntaxHighlight.tsx

@@ -13,12 +13,8 @@ void import("prismjs/components/prism-bash.min.js");
 // @ts-expect-error This is untyped
 void import("prismjs/components/prism-ruby.min.js");
 // @ts-expect-error This is untyped
-void import("prismjs/components/prism-markup-templating.js");
-// @ts-expect-error This is untyped
 void import("prismjs/components/prism-markup.js");
 // @ts-expect-error This is untyped
-void import("prismjs/components/prism-php.min.js");
-// @ts-expect-error This is untyped
 void import("prismjs/components/prism-json.min.js");
 // @ts-expect-error This is untyped
 void import("prismjs/components/prism-java.min.js");
@@ -56,14 +52,15 @@ export const SyntaxHighlight = ({
   language = "plain",
   ...props
 }: SyntaxHighlightProps) => {
-  const { theme } = useTheme();
+  const { resolvedTheme } = useTheme();
   const [isCopied, setIsCopied] = useState(false);
 
   if (!props.code) {
     return null;
   }
 
-  const highlightTheme = theme === "dark" ? themes.vsDark : themes.github;
+  const highlightTheme =
+    resolvedTheme === "dark" ? themes.vsDark : themes.github;
 
   // hardcoded values from the themes to avoid color flash in SSR
   const themeColorClasses =

package/src/lib/components/ThemeSwitch.tsx

@@ -4,18 +4,20 @@ import { Button } from "zudoku/ui/Button.js";
 import { ClientOnly } from "./ClientOnly.js";
 
 export const ThemeSwitch = () => {
-  const { theme, setTheme } = useTheme();
-  const ThemeIcon = theme === "dark" ? MoonStarIcon : SunIcon;
+  const { resolvedTheme, setTheme } = useTheme();
+  const ThemeIcon = resolvedTheme === "dark" ? MoonStarIcon : SunIcon;
 
   return (
     <ClientOnly>
       <Button
         variant="ghost"
         aria-label={
-          theme === "dark" ? "Switch to light mode" : "Switch to dark mode"
+          resolvedTheme === "dark"
+            ? "Switch to light mode"
+            : "Switch to dark mode"
         }
         className="p-2.5 -m-2.5 rounded-full"
-        onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+        onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
       >
         <ThemeIcon size={18} />
       </Button>