zudoku 0.0.0-ed94abf → 0.0.0-edd80c1

package/src/lib/components/Heading.tsx

@@ -1,7 +1,9 @@
-import React, { type ReactNode } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
 import { useRegisterAnchorElement } from "./context/ViewportAnchorContext.js";
 
 import { cva, type VariantProps } from "class-variance-authority";
+import { LinkIcon } from "lucide-react";
+import { cn } from "../util/cn.js";
 
 const heading = cva("group relative", {
   variants: {
@@ -38,7 +40,7 @@ const getComponent = (level: number) => {
   }
 };
 
-export type HeadingProps = React.HTMLAttributes<HTMLHeadingElement> &
+export type HeadingProps = HTMLAttributes<HTMLHeadingElement> &
   VariantProps<typeof heading> & {
     children: ReactNode;
     className?: string;
@@ -59,21 +61,23 @@ export const Heading = ({
 
   return (
     <Component
-      className={heading({ className, level })}
+      className={heading({
+        className: cn(className, "flex items-center gap-[0.33em]"),
+        level,
+      })}
       ref={registerSidebarAnchor ? ref : undefined}
       id={id}
     >
+      {children}
       {id && (
         <a
           href={`#${id}`}
-          className="before:content-['#'] no-underline absolute text-primary -left-[0.8em] pr-2.5 opacity-0 group-hover:opacity-50 hover:!opacity-100 transition-opacity duration-200"
+          className="rounded text-[0.8em] text-muted-foreground p-0.5 -m-0.5 opacity-0 group-hover:opacity-50 hover:text-primary hover:!opacity-100 transition-opacity duration-200"
           aria-label={`Link to ${id}`}
         >
-          {/* Zero width space */}
-          &#8203;
+          <LinkIcon className="size-[0.75em] min-w-4 min-h-4" />
         </a>
       )}
-      {children}
     </Component>
   );
 };

package/src/lib/components/InlineCode.tsx

@@ -16,7 +16,7 @@ export const InlineCode = ({
   <SelectOnClick asChild enabled={selectOnClick} onClick={onClick}>
     <code
       className={cn(
-        "font-mono border p-1 py-0.5 rounded bg-border/50 dark:bg-border/70 [overflow-wrap:anywhere]",
+        "font-mono border p-1 py-0.5 rounded-sm bg-border/50 dark:bg-border/70 [overflow-wrap:anywhere]",
         className,
       )}
     >

package/src/lib/components/Layout.tsx

@@ -9,7 +9,7 @@ import { useZudoku } from "./context/ZudokuContext.js";
 import { Footer } from "./Footer.js";
 import { Header } from "./Header.js";
 import { Main } from "./Main.js";
-import { Slotlet } from "./SlotletProvider.js";
+import { Slot } from "./Slot.js";
 import { Spinner } from "./Spinner.js";
 
 const LoadingFallback = () => (
@@ -32,9 +32,6 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
 
   return (
     <>
-      {import.meta.env.MODE === "standalone" && (
-        <style>{`:root { --top-nav-height: 0px; }`}</style>
-      )}
       <Helmet titleTemplate={meta?.title}>
         {options.canonicalUrlOrigin && (
           <link
@@ -51,14 +48,14 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
         )}
         {meta?.favicon && <link rel="icon" href={meta.favicon} />}
       </Helmet>
-      <Slotlet name="layout-before-head" />
+      <Slot.Target name="layout-before-head" />
       <Header />
-      <Slotlet name="layout-after-head" />
+      <Slot.Target name="layout-after-head" />
 
       <div
         className={cn(
           "grid max-w-screen-2xl w-full lg:mx-auto",
-          "has-[:only-child]:grid-rows-1 grid-rows-[0_min-content_1fr] lg:grid-rows-[min-content_1fr]",
+          "[&:has(>:only-child)]:grid-rows-1 grid-rows-[0_min-content_1fr] lg:grid-rows-[min-content_1fr]",
           "grid-cols-1 lg:grid-cols-[var(--side-nav-width)_1fr]",
         )}
       >

package/src/lib/components/Main.tsx

@@ -3,19 +3,20 @@ import { type PropsWithChildren, useState } from "react";
 import { useNavigation } from "react-router";
 import { Drawer, DrawerTrigger } from "zudoku/ui/Drawer.js";
 import { cn } from "../util/cn.js";
-import { useCurrentNavigation } from "./context/ZudokuContext.js";
+import { useCurrentNavigation, useZudoku } from "./context/ZudokuContext.js";
 import { Sidebar } from "./navigation/Sidebar.js";
-import { Slotlet } from "./SlotletProvider.js";
+import { Slot } from "./Slot.js";
 
 export const Main = ({ children }: PropsWithChildren) => {
   const [isDrawerOpen, setDrawerOpen] = useState(false);
   const { sidebar } = useCurrentNavigation();
   const hasSidebar = sidebar.length > 0;
   const isNavigating = useNavigation().state === "loading";
+  const { options } = useZudoku();
 
   return (
     <Drawer
-      direction="left"
+      direction={options.page?.dir === "rtl" ? "right" : "left"}
       open={isDrawerOpen}
       onOpenChange={(open) => setDrawerOpen(open)}
     >
@@ -26,7 +27,7 @@ export const Main = ({ children }: PropsWithChildren) => {
         />
       )}
       {hasSidebar && (
-        <div className="lg:hidden -mx-4 px-4 py-2 sticky bg-background/80 backdrop-blur z-10 top-0 left-0 right-0 border-b">
+        <div className="lg:hidden -mx-4 px-4 py-2 sticky bg-background/80 backdrop-blur-xs z-10 top-0 start-0 end-0 border-b">
           <DrawerTrigger className="flex items-center gap-2 px-4">
             <PanelLeftIcon size={16} strokeWidth={1.5} />
             <span className="text-sm">Menu</span>
@@ -41,9 +42,9 @@ export const Main = ({ children }: PropsWithChildren) => {
           isNavigating && "animate-pulse",
         )}
       >
-        <Slotlet name="zudoku-before-content" />
+        <Slot.Target name="content-before" />
         {children}
-        <Slotlet name="zudoku-after-content" />
+        <Slot.Target name="content-after" />
       </main>
     </Drawer>
   );

package/src/lib/components/Markdown.tsx

@@ -1,37 +1,52 @@
-import { memo } from "react";
+import { memo, useMemo } from "react";
+import { MarkdownHooks, type Components } from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
-import { visit } from "unist-util-visit";
+import { createConfiguredShikiRehypePlugins } from "../shiki.js";
 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
-const rehypeCodeBlockPlugin = () => (tree: any) => {
-  visit(tree, "element", (node, _index, parent) => {
-    if (node.tagName === "code") {
-      node.properties.inline = String(parent?.tagName !== "pre");
-    }
-  });
-};
+import { useZudoku } from "./context/ZudokuContext.js";
 
 const remarkPlugins = [remarkGfm];
-const rehypePlugins = [rehypeCodeBlockPlugin, rehypeRaw];
 
 // other styles are defined in main.css .prose
 export const ProseClasses = "prose dark:prose-invert prose-neutral";
 
 export const Markdown = memo(
-  ({ content, className }: { content: string; className?: string }) => (
-    <ReactMarkdown
-      remarkPlugins={remarkPlugins}
-      rehypePlugins={rehypePlugins}
-      components={MdxComponents}
-      className={className}
-    >
-      {content}
-    </ReactMarkdown>
-  ),
+  ({
+    content,
+    className,
+    components,
+  }: {
+    content: string;
+    className?: string;
+    components?: Components;
+  }) => {
+    const { syntaxHighlighting } = useZudoku().options;
+    const rehypePlugins = useMemo(
+      () => [
+        rehypeRaw,
+        ...createConfiguredShikiRehypePlugins(syntaxHighlighting?.themes),
+      ],
+      [syntaxHighlighting?.themes],
+    );
+
+    const mdComponents = useMemo(
+      () => ({ ...MdxComponents, ...components }),
+      [components],
+    );
+
+    return (
+      <div className={className}>
+        <MarkdownHooks
+          remarkPlugins={remarkPlugins}
+          rehypePlugins={rehypePlugins}
+          components={mdComponents}
+        >
+          {content}
+        </MarkdownHooks>
+      </div>
+    );
+  },
 );
 
 Markdown.displayName = "Markdown";

package/src/lib/components/MobileTopNavigation.tsx

@@ -10,9 +10,10 @@ import {
 } from "../ui/Drawer.js";
 import { useZudoku } from "./context/ZudokuContext.js";
 import { PoweredByZudoku } from "./navigation/PoweredByZudoku.js";
+import { isHiddenItem } from "./navigation/utils.js";
 import { Search } from "./Search.js";
 import { ThemeSwitch } from "./ThemeSwitch.js";
-import { isHiddenItem, PageProgress, TopNavItem } from "./TopNavigation.js";
+import { PageProgress, TopNavItem } from "./TopNavigation.js";
 
 export const MobileTopNavigation = () => {
   const { topNavigation, options } = useZudoku();
@@ -21,7 +22,7 @@ export const MobileTopNavigation = () => {
 
   return (
     <Drawer
-      direction="right"
+      direction={options.page?.dir === "rtl" ? "left" : "right"}
       open={drawerOpen}
       onOpenChange={(open) => setDrawerOpen(open)}
     >
@@ -32,7 +33,7 @@ export const MobileTopNavigation = () => {
         <PageProgress />
       </div>
       <DrawerContent
-        className="lg:hidden h-[100dvh] right-0 left-auto w-[320px] rounded-none"
+        className="lg:hidden h-[100dvh] end-0 start-auto w-[320px] rounded-none"
         aria-describedby={undefined}
       >
         <div className="p-4 overflow-y-auto overscroll-none h-full flex flex-col justify-between">
@@ -57,7 +58,7 @@ export const MobileTopNavigation = () => {
             </ul>
           </div>
           {options.page?.showPoweredBy !== false && (
-            <PoweredByZudoku className="flex-grow-0 justify-center gap-1" />
+            <PoweredByZudoku className="grow-0 justify-center gap-1" />
           )}
         </div>
       </DrawerContent>

package/src/lib/components/NotFoundPage.tsx

@@ -9,7 +9,7 @@ export const NotFoundPage = () => {
   const params = useParams();
 
   return (
-    <div className={ProseClasses + " h-full pt-[--padding-content-top]"}>
+    <div className={ProseClasses + " h-full pt-(--padding-content-top)"}>
       <CategoryHeading>404</CategoryHeading>
       <Heading level={1} className="flex gap-3.5 items-center">
         Page not found

package/src/lib/components/Pagination.tsx

@@ -13,7 +13,7 @@ export const Pagination = ({
   className?: string;
 }) => {
   const linkClass =
-    "group transition-all p-5 space-x-1 transition-all hover:text-foreground";
+    "group transition-all p-5 space-x-1 rtl:space-x-reverse transition-all hover:text-foreground";
 
   return (
     <div
@@ -26,10 +26,7 @@ export const Pagination = ({
       {prev && (
         <Button variant="ghost" asChild>
           <Link to={prev.to} relative="path" className={linkClass}>
-            <ArrowLeftIcon
-              className="group-hover:motion-safe:animate-bounce-x-start"
-              size={12}
-            />
+            <ArrowLeftIcon size={12} />
             <span className="truncate">{prev.label}</span>
           </Link>
         </Button>
@@ -37,11 +34,8 @@ export const Pagination = ({
       {next && (
         <Button variant="ghost" asChild>
           <Link to={next.to} relative="path" className={linkClass}>
-            <span className="truncate ">{next.label}</span>
-            <ArrowRightIcon
-              className="group-hover:motion-safe:animate-bounce-x-end"
-              size={12}
-            />
+            <span className="truncate">{next.label}</span>
+            <ArrowRightIcon size={12} />
           </Link>
         </Button>
       )}

package/src/lib/components/Search.tsx

@@ -43,7 +43,7 @@ export const Search = ({ className }: { className?: string }) => {
         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-full sm:w-72"
       >
-        <div className="flex items-center gap-2 flex-grow">
+        <div className="flex items-center gap-2 grow">
           <SearchIcon size={14} />
           Search
         </div>
@@ -64,7 +64,7 @@ export const Search = ({ className }: { className?: string }) => {
 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">
+    <kbd className="absolute end-1.5 hidden h-5 select-none items-center gap-1 rounded-sm border bg-muted px-1.5 font-mono text-[11px] font-medium opacity-100 sm:flex">
       {os === "macOS" ? "⌘" : "Ctrl"}+K
     </kbd>
   );