zudoku 0.0.0-fb7d300 → 0.0.0-fc93837

package/src/lib/components/Layout.tsx

@@ -1,7 +1,7 @@
 import { Helmet } from "@zudoku/react-helmet-async";
 import { PanelLeftIcon } from "lucide-react";
-import { Suspense, useEffect, useRef, type ReactNode } from "react";
-import { Outlet, useLocation, useNavigation } 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";
@@ -49,6 +49,7 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
     delay: 300,
     minDuration: 500,
   });
+  const [isDrawerOpen, setDrawerOpen] = useState(false);
 
   return (
     <>
@@ -65,13 +66,17 @@ 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">
+      <div className="w-full max-w-screen-2xl mx-auto px-4 lg:px-12 border-l border-r">
         {showSpinner ? (
           <LoadingFallback />
         ) : (
           <Suspense fallback={<LoadingFallback />}>
-            <Drawer direction="left">
-              <Sidebar />
+            <Drawer
+              direction="left"
+              open={isDrawerOpen}
+              onOpenChange={(open) => setDrawerOpen(open)}
+            >
+              <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",

package/src/lib/components/Markdown.tsx

@@ -1,8 +1,9 @@
-import ReactMarkdown from "react-markdown";
+import { memo } from "react";
 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
@@ -20,19 +21,17 @@ const rehypePlugins = [rehypeCodeBlockPlugin, rehypeRaw];
 // other styles are defined in main.css .prose
 export const ProseClasses = "prose dark:prose-invert prose-neutral";
 
-export const Markdown = ({
-  content,
-  className,
-}: {
-  content: string;
-  className?: string;
-}) => (
-  <ReactMarkdown
-    remarkPlugins={remarkPlugins}
-    rehypePlugins={rehypePlugins}
-    components={MdxComponents}
-    className={className}
-  >
-    {content}
-  </ReactMarkdown>
+export const Markdown = memo(
+  ({ content, className }: { content: string; className?: string }) => (
+    <ReactMarkdown
+      remarkPlugins={remarkPlugins}
+      rehypePlugins={rehypePlugins}
+      components={MdxComponents}
+      className={className}
+    >
+      {content}
+    </ReactMarkdown>
+  ),
 );
+
+Markdown.displayName = "Markdown";

package/src/lib/components/MobileTopNavigation.tsx

@@ -30,27 +30,27 @@ export const MobileTopNavigation = () => {
         </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}>
-              <button onClick={() => setDrawerOpen(false)}>
-                <TopNavItem {...item} />
-              </button>
+        <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/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/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");
@@ -45,6 +41,7 @@ type SyntaxHighlightProps = {
   copyable?: boolean;
   showLanguageIndicator?: boolean;
   language?: string;
+  title?: string;
 } & Omit<HighlightProps, "children" | "language">;
 
 const remapLang = {
@@ -54,6 +51,7 @@ const remapLang = {
 export const SyntaxHighlight = ({
   copyable = true,
   language = "plain",
+  title,
   ...props
 }: SyntaxHighlightProps) => {
   const { resolvedTheme } = useTheme();
@@ -74,12 +72,18 @@ export const SyntaxHighlight = ({
     <ClientOnly
       fallback={
         <div className="relative group">
+          {title && (
+            <div className="text-xs text-muted-foreground absolute top-2 font-mono border-b w-full pb-2 px-4 ">
+              {title}
+            </div>
+          )}
           <pre
             className={cn(
               "relative scrollbar overflow-x-auto",
               props.className,
               props.noBackground ? "!bg-transparent" : themeColorClasses,
               props.wrapLines && "whitespace-pre-wrap break-words",
+              title && "pt-10",
             )}
           >
             {props.code}
@@ -99,6 +103,11 @@ export const SyntaxHighlight = ({
       >
         {({ className, style, tokens, getLineProps, getTokenProps }) => (
           <div className="relative group">
+            {title && (
+              <div className="text-xs text-muted-foreground absolute top-2 font-mono border-b w-full pb-2 px-4 ">
+                {title}
+              </div>
+            )}
             <pre
               className={cn(
                 "relative scrollbar overflow-x-auto",
@@ -106,6 +115,7 @@ export const SyntaxHighlight = ({
                 props.className,
                 props.noBackground && "!bg-transparent",
                 props.wrapLines && "whitespace-pre-wrap break-words",
+                title && "pt-10",
               )}
               style={style}
             >

package/src/lib/components/ThemeSwitch.tsx

@@ -1,26 +1,25 @@
 import { MoonStarIcon, SunIcon } from "lucide-react";
 import { useTheme } from "next-themes";
 import { Button } from "zudoku/ui/Button.js";
-import { ClientOnly } from "./ClientOnly.js";
+import { cn } from "../util/cn.js";
 
 export const ThemeSwitch = () => {
   const { resolvedTheme, setTheme } = useTheme();
   const ThemeIcon = resolvedTheme === "dark" ? MoonStarIcon : SunIcon;
 
   return (
-    <ClientOnly>
-      <Button
-        variant="ghost"
-        aria-label={
-          resolvedTheme === "dark"
-            ? "Switch to light mode"
-            : "Switch to dark mode"
-        }
-        className="p-2.5 -m-2.5 rounded-full"
-        onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
-      >
-        <ThemeIcon size={18} />
-      </Button>
-    </ClientOnly>
+    <Button
+      variant="ghost"
+      size="icon"
+      aria-label={
+        resolvedTheme === "dark"
+          ? "Switch to light mode"
+          : "Switch to dark mode"
+      }
+      className={cn(resolvedTheme ? "opacity-100" : "opacity-0")}
+      onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
+    >
+      <ThemeIcon size={18} />
+    </Button>
   );
 };