zudoku 0.4.4-dev.1 → 0.4.4-dev.10

package/lib/zudoku.plugin-api-keys.js

@@ -1,12 +1,12 @@
 import { j as e } from "./jsx-runtime-B6kdoens.js";
-import { S as p, R as g } from "./SlotletProvider-BOqq0WiS.js";
-import { u as j, a as u, I as k, S as v, b as w, c as b, d as K, e as N, f as y } from "./Input-C81a88Ux.js";
+import { S as p, R as g } from "./SlotletProvider-CRKX9y2Z.js";
+import { u as j, a as u, I as k, S as v, b as w, c as b, d as K, e as N, f as y } from "./Input-BtumfhQu.js";
 import { e as E, L as x, O as A } from "./index-ChhUJhLT.js";
 import { u as m, t as C, j as S } from "./ZudokuContext-BHNQL3XO.js";
-import { B as l, p as I } from "./Combination-B46-2_PR.js";
-import { D as P } from "./DeveloperHint-CCKk5wYF.js";
+import { B as l, p as I } from "./index-KUt-5Yzq.js";
+import { D as P } from "./DeveloperHint-Dim4dKeY.js";
 import { useState as h } from "react";
-import { c as d, a as D, C as R, g as q } from "./Markdown-DWiGXWrs.js";
+import { c as d, a as D, C as R, g as q } from "./Markdown-Bg4SS0au.js";
 /**
  * @license lucide-react v0.378.0 - ISC
  *

package/lib/zudoku.plugin-custom-page.js

@@ -1,5 +1,5 @@
 import { j as m } from "./jsx-runtime-B6kdoens.js";
-import { P as o } from "./Markdown-DWiGXWrs.js";
+import { P as o } from "./Markdown-Bg4SS0au.js";
 const l = (s) => ({
   getRoutes: () => s.map(({ path: e, element: t }) => ({
     path: e,

package/lib/zudoku.plugin-markdown.js

@@ -4,7 +4,7 @@ const i = (t, e) => Object.entries(t).flatMap(([a, s]) => {
   return o ? {
     path: o,
     lazy: async () => {
-      const { MdxPage: r } = await import("./MdxPage-BvyW3LcO.js"), { default: p, ...m } = await s();
+      const { MdxPage: r } = await import("./MdxPage-C3VDc6a7.js"), { default: p, ...m } = await s();
       return {
         element: /* @__PURE__ */ c.jsx(
           r,

package/lib/zudoku.plugin-openapi.js

@@ -1,11 +1,11 @@
 import "./jsx-runtime-B6kdoens.js";
-import { o as s } from "./index-CcnRjD7X.js";
+import { o as s } from "./index-BfLQd6h_.js";
 import "./urql-YhcsXYy8.js";
 import "./ZudokuContext-BHNQL3XO.js";
 import "zudoku/openapi-worker";
-import "./Combination-B46-2_PR.js";
-import "./ErrorPage-BUyRN_4w.js";
-import "./Markdown-DWiGXWrs.js";
+import "./index-KUt-5Yzq.js";
+import "./ErrorPage-XOZWbKDe.js";
+import "./Markdown-Bg4SS0au.js";
 import "./joinPath-B7kNnUX4.js";
 import "./router-BiRCp01d.js";
 import "./index-ChhUJhLT.js";

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "zudoku",
-  "version": "0.4.4-dev.1",
+  "version": "0.4.4-dev.10",
   "type": "module",
   "files": [
     "dist",
     "lib",
     "cli.js",
     "src/lib",
-    "src/app"
+    "src/app",
+    "client.d.ts"
   ],
   "bin": {
     "zudoku": "./cli.js"
@@ -17,6 +18,9 @@
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
+    "./client": {
+      "types": "./client.d.ts"
+    },
     "./internal": {
       "import": "./dist/internal.js"
     },
@@ -143,6 +147,7 @@
     "ulidx": "^2.3.0",
     "unist-util-visit": "5.0.0",
     "urql": "4.1.0",
+    "vaul": "0.9.1",
     "vite": "5.3.3",
     "yaml": "2.5.0",
     "yargs": "17.7.2",

package/src/app/main.css

@@ -96,7 +96,7 @@
   }
 
   #root {
-    @apply min-h-screen grid grid-rows-[var(--header-height)_1fr] w-full;
+    @apply min-h-screen w-full;
   }
   * {
     @apply border-border;

package/src/lib/components/Header.tsx

@@ -19,6 +19,7 @@ import {
 import { cn } from "../util/cn.js";
 import { useTheme } from "./context/ThemeContext.js";
 import { useZudoku } from "./context/ZudokuContext.js";
+import { MobileTopNavigation } from "./MobileTopNavigation.js";
 import { Search } from "./Search.js";
 import { Slotlet } from "./SlotletProvider.js";
 import { TopNavigation } from "./TopNavigation.js";
@@ -58,9 +59,9 @@ export const Header = memo(function HeaderInner() {
   const ThemeIcon = isDark ? MoonStarIcon : SunIcon;
 
   return (
-    <header className="sticky top-0 z-10 bg-background/80 backdrop-blur w-full">
+    <header className="sticky lg:top-0 z-10 bg-background/80 backdrop-blur w-full">
       <div className="max-w-screen-2xl mx-auto">
-        <div className="grid lg:grid-cols-[calc(var(--side-nav-width))_1fr] lg:gap-12 items-center border-b px-12 h-[--top-header-height]">
+        <div className="grid grid-cols-2 lg:grid-cols-[calc(var(--side-nav-width))_1fr] lg:gap-12 items-center border-b px-10 lg:px-12 h-[--top-header-height]">
           <div className="flex">
             <Link to="/">
               <div className="flex items-center gap-3.5">
@@ -88,12 +89,13 @@ export const Header = memo(function HeaderInner() {
               </div>
             </Link>
           </div>
-          <div className="grid grid-cols-[--sidecar-grid-cols] items-center gap-8">
+          <div className="grid grid-cols-2 md:grid-cols-[--sidecar-grid-cols] items-center gap-8">
             <div className="w-full justify-center flex">
               <Search />
             </div>
 
-            <div className="items-center justify-self-end text-sm hidden lg:flex gap-2">
+            <MobileTopNavigation />
+            <div className="hidden lg:flex items-center justify-self-end text-sm gap-2">
               <Slotlet name="head-navigation-start" />
               {isAuthEnabled && !isAuthenticated ? (
                 <Button variant="ghost" onClick={() => auth.login()}>
@@ -115,7 +117,6 @@ export const Header = memo(function HeaderInner() {
                   </DropdownMenu>
                 )
               )}
-
               <button
                 type="button"
                 aria-label={

package/src/lib/components/Layout.tsx

@@ -1,6 +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 { Drawer, DrawerTrigger } from "../ui/Drawer.js";
 import { cn } from "../util/cn.js";
 import { useScrollToAnchor } from "../util/useScrollToAnchor.js";
 import { useScrollToTop } from "../util/useScrollToTop.js";
@@ -56,20 +58,33 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
             </main>
           }
         >
-          <Sidebar />
-          <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 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",
+              )}
+            >
+              <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/MobileTopNavigation.tsx

@@ -0,0 +1,52 @@
+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 {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerTitle,
+  DrawerTrigger,
+} from "../ui/Drawer.js";
+import { useZudoku } from "./context/ZudokuContext.js";
+
+export const MobileTopNavigation = () => {
+  const { topNavigation } = useZudoku();
+  return (
+    <Drawer direction="right">
+      <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"
+        aria-describedby={undefined}
+      >
+        <VisuallyHidden>
+          <DrawerTitle>Navigation</DrawerTitle>
+        </VisuallyHidden>
+        <ul className="flex flex-col items-center gap-4 p-4">
+          {topNavigation.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>
+            </li>
+          ))}
+        </ul>
+      </DrawerContent>
+    </Drawer>
+  );
+};

package/src/lib/components/TopNavigation.tsx

@@ -12,7 +12,7 @@ export const TopNavigation = () => {
   }
 
   return (
-    <nav className="border-b text-sm px-12 h-[--top-nav-height]">
+    <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}>

package/src/lib/components/navigation/Sidebar.tsx

@@ -1,5 +1,7 @@
 import { useRef } from "react";
 
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import { DrawerContent, DrawerTitle } from "../../ui/Drawer.js";
 import { useNavigation } from "../context/ZudokuContext.js";
 import { Slotlet } from "../SlotletProvider.js";
 import { SidebarItem } from "./SidebarItem.js";
@@ -10,15 +12,28 @@ export const Sidebar = () => {
   const navigation = useNavigation();
 
   return (
-    <SidebarWrapper
-      ref={navRef}
-      pushMainContent={navigation.data.items.length > 0}
-    >
-      <Slotlet name="zudoku-before-navigation" />
-      {navigation.data.items.map((item) => (
-        <SidebarItem key={item.label} item={item} />
-      ))}
-      <Slotlet name="zudoku-after-navigation" />
-    </SidebarWrapper>
+    <>
+      <SidebarWrapper
+        ref={navRef}
+        pushMainContent={navigation.data.items.length > 0}
+      >
+        <Slotlet name="zudoku-before-navigation" />
+        {navigation.data.items.map((item) => (
+          <SidebarItem key={item.label} item={item} />
+        ))}
+        <Slotlet name="zudoku-after-navigation" />
+      </SidebarWrapper>
+      <DrawerContent
+        className="lg:hidden h-screen left-0 p-6 w-[320px] rounded-none"
+        aria-describedby={undefined}
+      >
+        <VisuallyHidden>
+          <DrawerTitle>Sidebar</DrawerTitle>
+        </VisuallyHidden>
+        {navigation.data.items.map((item) => (
+          <SidebarItem key={item.label} item={item} />
+        ))}
+      </DrawerContent>
+    </>
   );
 };

package/src/lib/plugins/markdown/MdxPage.tsx

@@ -85,7 +85,7 @@ export const MdxPage = ({
         {!hidePager && (
           <>
             <hr />
-            <div className="not-prose flex flex-wrap items-center justify-between gap-8">
+            <div className="not-prose flex flex-wrap items-center justify-between gap-2 lg:gap-8">
               {prev ? (
                 <Link
                   to={prev.id}

package/src/lib/ui/Callout.tsx

@@ -66,7 +66,7 @@ export const Callout = ({ type, children, title, className }: CalloutProps) => {
       className={cn(
         "not-prose grid grid-cols-[min-content_1fr] grid-rows-[fit-content_1fr] gap-x-4 gap-y-2 text-md rounded-md border p-4",
         "[&_a]:underline [&_a]:decoration-current [&_a]:decoration-from-font [&_a]:underline-offset-4 hover:[&_a]:decoration-1",
-        "[&_code]:!bg-gray-50 [&_code]:dark:!bg-gray-800 [&_code]:!border-none",
+        "[&_code]:!bg-gray-50 [&_code]:dark:!bg-gray-800 [&_code]:!border-none my-2",
         title && "items-center",
         border,
         bg,

package/src/lib/ui/Drawer.tsx

@@ -0,0 +1,119 @@
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+import { cn } from "../util/cn.js";
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+);
+Drawer.displayName = "Drawer";
+
+const DrawerTrigger = DrawerPrimitive.Trigger;
+
+const DrawerPortal = DrawerPrimitive.Portal;
+
+const DrawerClose = DrawerPrimitive.Close;
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props}
+  />
+));
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {
+    hideBar?: boolean;
+  }
+>(({ className, children, hideBar = true, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className,
+      )}
+      {...props}
+    >
+      {!hideBar && (
+        <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      )}
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+));
+DrawerContent.displayName = "DrawerContent";
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    {...props}
+  />
+);
+DrawerHeader.displayName = "DrawerHeader";
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    {...props}
+  />
+);
+DrawerFooter.displayName = "DrawerFooter";
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
+
+export {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerTrigger,
+};

package/src/lib/util/MdxComponents.tsx

@@ -77,8 +77,8 @@ export const MdxComponents = {
 
     return (
       <SyntaxHighlight
-        language={match?.[1] ?? "markup"}
-        className="rounded-xl overflow-x-auto p-4 border dark:!bg-foreground/10 dark:border-transparent"
+        language={match?.[1]}
+        className="rounded-xl p-4 border dark:!bg-foreground/10 dark:border-transparent"
         showLanguageIndicator
         code={String(children).trim()}
       />