zudoku 0.0.0-f2fd45c → 0.0.0-f3786a4

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");
@@ -33,9 +29,10 @@ void import("prismjs/components/prism-javascript.min.js");
 // @ts-expect-error This is untyped
 void import("prismjs/components/prism-typescript.min.js");
 
+import { useTheme } from "next-themes";
 import { useState } from "react";
 import { cn } from "../util/cn.js";
-import { useTheme } from "./context/ThemeContext.js";
+import { ClientOnly } from "./ClientOnly.js";
 
 type SyntaxHighlightProps = {
   className?: string;
@@ -44,6 +41,7 @@ type SyntaxHighlightProps = {
   copyable?: boolean;
   showLanguageIndicator?: boolean;
   language?: string;
+  title?: string;
 } & Omit<HighlightProps, "children" | "language">;
 
 const remapLang = {
@@ -53,74 +51,121 @@ const remapLang = {
 export const SyntaxHighlight = ({
   copyable = true,
   language = "plain",
+  title,
   ...props
 }: SyntaxHighlightProps) => {
-  const [isDark] = useTheme();
+  const { resolvedTheme } = useTheme();
   const [isCopied, setIsCopied] = useState(false);
 
   if (!props.code) {
     return null;
   }
 
+  const highlightTheme =
+    resolvedTheme === "dark" ? themes.vsDark : themes.github;
+
+  // hardcoded values from the themes to avoid color flash in SSR
+  const themeColorClasses =
+    "bg-[#f6f8fa] text-[#393a34] dark:bg-[#1e1e1e] dark:text-[#9cdcfe]";
+
   return (
-    <Highlight
-      theme={isDark ? themes.vsDark : themes.github}
-      language={remapLang[language] ?? language}
-      {...props}
-    >
-      {({ className, style, tokens, getLineProps, getTokenProps }) => (
+    <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",
-              className,
               props.className,
-              props.noBackground && "!bg-transparent",
+              props.noBackground ? "!bg-transparent" : themeColorClasses,
               props.wrapLines && "whitespace-pre-wrap break-words",
+              title && "pt-10",
             )}
-            style={style}
           >
-            {tokens.map((line, i) => (
-              // eslint-disable-next-line react/no-array-index-key
-              <div key={i} {...getLineProps({ line })}>
-                {line.map((token, key) => (
-                  // eslint-disable-next-line react/no-array-index-key
-                  <span key={key} {...getTokenProps({ token })} />
-                ))}
-              </div>
-            ))}
+            {props.code}
           </pre>
           {props.showLanguageIndicator && (
             <span className="absolute top-1.5 right-3 text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0">
               {language}
             </span>
           )}
-          {copyable && (
-            <button
-              type="button"
-              aria-label="Copy code"
-              title="Copy code"
-              className="absolute top-2 right-2 p-2 opacity-0 group-hover:opacity-100 group-hover:bg-zinc-100 group-hover:dark:bg-zinc-700 hover:outline hover:outline-border/75 dark:hover:outline-border rounded-md text-sm text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-400 transition"
-              disabled={isCopied}
-              onClick={() => {
-                setIsCopied(true);
-                void navigator.clipboard.writeText(
-                  tokens
-                    .map((line) => line.map(({ content }) => content).join(""))
-                    .join("\n"),
-                );
-                setTimeout(() => setIsCopied(false), 2000);
-              }}
-            >
-              {isCopied ? (
-                <CheckIcon className="text-emerald-600" size={16} />
-              ) : (
-                <CopyIcon size={16} />
-              )}
-            </button>
-          )}
         </div>
-      )}
-    </Highlight>
+      }
+    >
+      <Highlight
+        theme={highlightTheme}
+        language={remapLang[language] ?? language}
+        {...props}
+      >
+        {({ 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",
+                className,
+                props.className,
+                props.noBackground && "!bg-transparent",
+                props.wrapLines && "whitespace-pre-wrap break-words",
+                title && "pt-10",
+              )}
+              style={style}
+            >
+              {tokens.map((line, i) => (
+                // eslint-disable-next-line react/no-array-index-key
+                <div key={i} {...getLineProps({ line })}>
+                  {line.map((token, key) => (
+                    // eslint-disable-next-line react/no-array-index-key
+                    <span key={key} {...getTokenProps({ token })} />
+                  ))}
+                </div>
+              ))}
+            </pre>
+            {props.showLanguageIndicator && (
+              <span className="absolute top-1.5 right-3 text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0">
+                {language}
+              </span>
+            )}
+            {copyable && (
+              <button
+                type="button"
+                aria-label="Copy code"
+                title="Copy code"
+                className="absolute top-2 right-2 p-2 opacity-0 group-hover:opacity-100 group-hover:bg-zinc-100 group-hover:dark:bg-zinc-700 hover:outline hover:outline-border/75 dark:hover:outline-border rounded-md text-sm text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-400 transition"
+                disabled={isCopied}
+                onClick={() => {
+                  setIsCopied(true);
+                  void navigator.clipboard.writeText(
+                    tokens
+                      .map((l) => l.map(({ content }) => content).join(""))
+                      .join("\n"),
+                  );
+                  setTimeout(() => setIsCopied(false), 2000);
+                }}
+              >
+                {isCopied ? (
+                  <CheckIcon
+                    className="text-emerald-600"
+                    size={16}
+                    strokeWidth={2.5}
+                    absoluteStrokeWidth
+                  />
+                ) : (
+                  <CopyIcon size={16} />
+                )}
+              </button>
+            )}
+          </div>
+        )}
+      </Highlight>
+    </ClientOnly>
   );
 };

package/src/lib/components/ThemeSwitch.tsx

@@ -0,0 +1,25 @@
+import { MoonStarIcon, SunIcon } from "lucide-react";
+import { useTheme } from "next-themes";
+import { Button } from "zudoku/ui/Button.js";
+import { cn } from "../util/cn.js";
+
+export const ThemeSwitch = () => {
+  const { resolvedTheme, setTheme } = useTheme();
+  const ThemeIcon = resolvedTheme === "dark" ? MoonStarIcon : SunIcon;
+
+  return (
+    <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>
+  );
+};