zudoku 0.0.0-fd8f8ad → 0.0.0-fdf886de

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

@@ -1,43 +0,0 @@
-import { cn } from "../../util/cn.js";
-
-export const TextColorMap = {
-  green: "text-green-600",
-  blue: "text-sky-600",
-  yellow: "text-yellow-600",
-  red: "text-red-600",
-  purple: "text-purple-600",
-  indigo: "text-indigo-600",
-  gray: "text-gray-600",
-};
-
-export const ColorMap = {
-  green: "bg-green-400 dark:bg-green-800",
-  blue: "bg-sky-400 dark:bg-sky-800",
-  yellow: "bg-yellow-400 dark:bg-yellow-800",
-  red: "bg-red-400 dark:bg-red-800",
-  purple: "bg-purple-400 dark:bg-purple-600",
-  indigo: "bg-indigo-400 dark:bg-indigo-600",
-  gray: "bg-gray-400 dark:bg-gray-600",
-};
-
-export const SidebarBadge = ({
-  color,
-  label,
-  className,
-}: {
-  color: keyof typeof ColorMap;
-  label: string;
-  className?: string;
-}) => {
-  return (
-    <span
-      className={cn(
-        "mt-0.5 flex items-center duration-200 transition-opacity text-center uppercase font-mono text-[0.65rem] font-bold rounded text-background dark:text-zinc-50 h-4 px-1",
-        ColorMap[color],
-        className,
-      )}
-    >
-      {label}
-    </span>
-  );
-};

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

@@ -1,137 +0,0 @@
-import * as Collapsible from "@radix-ui/react-collapsible";
-import { ChevronRightIcon } from "lucide-react";
-import { useEffect, useState } from "react";
-import { NavLink, useMatch } from "react-router-dom";
-import type { SidebarItemCategory } from "../../../config/validators/SidebarSchema.js";
-import { cn } from "../../util/cn.js";
-import { joinPath } from "../../util/joinPath.js";
-import { navigationListItem, SidebarItem } from "./SidebarItem.js";
-import { useIsCategoryOpen } from "./utils.js";
-
-export const SidebarCategory = ({
-  category,
-  level,
-}: {
-  category: SidebarItemCategory;
-  level: number;
-}) => {
-  const isCategoryOpen = useIsCategoryOpen(category);
-  const [hasInteracted, setHasInteracted] = useState(false);
-
-  const isCollapsible = category.collapsible ?? true;
-  const isCollapsed = category.collapsed ?? true;
-  const isDefaultOpen = Boolean(
-    !isCollapsible || !isCollapsed || isCategoryOpen,
-  );
-  const [open, setOpen] = useState(isDefaultOpen);
-  const isActive = useMatch(category.link?.id ?? "");
-
-  useEffect(() => {
-    // this is triggered when an item from the sidebar is clicked
-    // and the sidebar, enclosing this item, is not opened
-    if (isCategoryOpen) {
-      setOpen(true);
-    }
-  }, [isCategoryOpen]);
-
-  const ToggleButton = isCollapsible && (
-    <button
-      type="button"
-      onClick={(e) => {
-        e.preventDefault();
-        setOpen((prev) => !prev);
-        setHasInteracted(true);
-      }}
-    >
-      <ChevronRightIcon
-        size={16}
-        className={cn(
-          hasInteracted && "transition",
-          "shrink-0 group-data-[state=open]:rotate-90",
-        )}
-      />
-    </button>
-  );
-
-  return (
-    <Collapsible.Root
-      className="flex flex-col"
-      defaultOpen={isDefaultOpen}
-      open={open}
-      onOpenChange={() => setOpen(true)}
-    >
-      <Collapsible.Trigger className="group" asChild disabled={!isCollapsible}>
-        <div
-          onClick={() => setHasInteracted(true)}
-          className={navigationListItem({
-            isActive: false,
-            isTopLevel: level === 0,
-            className: [
-              "text-start",
-              isCollapsible
-                ? "cursor-pointer"
-                : "cursor-default hover:bg-transparent",
-            ],
-          })}
-        >
-          {category.icon && (
-            <category.icon
-              size={16}
-              className={cn(
-                "align-[-0.125em] -translate-x-1",
-                isActive && "text-primary",
-              )}
-            />
-          )}
-          {category.link?.type === "doc" ? (
-            <NavLink
-              to={joinPath(category.link.id)}
-              className="flex-1"
-              onClick={() => {
-                // if it is the current path and closed then open it because there's no path change to trigger the open
-                if (isActive && !open) {
-                  setOpen(true);
-                }
-              }}
-            >
-              <div
-                className={cn(
-                  "flex items-center gap-2 justify-between w-full",
-                  isActive ? "text-primary" : "text-foreground/80",
-                )}
-              >
-                <div className="truncate">{category.label}</div>
-                {ToggleButton}
-              </div>
-            </NavLink>
-          ) : (
-            <div className="flex items-center justify-between w-full">
-              <div className="flex gap-2 truncate w-full">{category.label}</div>
-              {ToggleButton}
-            </div>
-          )}
-        </div>
-      </Collapsible.Trigger>
-      <Collapsible.Content
-        className={cn(
-          // CollapsibleContent class is used to animate and it should only be applied when the user has triggered the toggle
-          hasInteracted && "CollapsibleContent",
-        )}
-      >
-        <ul className="mt-1 border-l ms-0.5">
-          {category.items.map((item) => (
-            <SidebarItem
-              key={
-                ("id" in item ? item.id : "") +
-                ("href" in item ? item.href : "") +
-                item.label
-              }
-              level={level + 1}
-              item={item}
-            />
-          ))}
-        </ul>
-      </Collapsible.Content>
-    </Collapsible.Root>
-  );
-};

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

@@ -1,127 +0,0 @@
-import { cva } from "class-variance-authority";
-import { ExternalLinkIcon } from "lucide-react";
-import { NavLink, useSearchParams } from "react-router-dom";
-
-import type { SidebarItem as SidebarItemType } from "../../../config/validators/SidebarSchema.js";
-import { joinPath } from "../../util/joinPath.js";
-import { AnchorLink } from "../AnchorLink.js";
-import { useViewportAnchor } from "../context/ViewportAnchorContext.js";
-import { SidebarBadge } from "./SidebarBadge.js";
-import { SidebarCategory } from "./SidebarCategory.js";
-
-export const navigationListItem = cva(
-  "flex items-center gap-2 px-[--padding-nav-item] py-1.5 rounded-lg hover:bg-accent transition-colors duration-300",
-  {
-    variants: {
-      isTopLevel: {
-        true: "font-medium -mx-[--padding-nav-item]",
-        false: "-mr-[--padding-nav-item] ml-[--padding-nav-item]",
-      },
-      isActive: {
-        true: "text-primary font-medium",
-        false: "text-foreground/80",
-      },
-      isMuted: {
-        true: "text-foreground/30",
-        false: "",
-      },
-    },
-    defaultVariants: {
-      isActive: false,
-    },
-  },
-);
-
-export const DATA_ANCHOR_ATTR = "data-anchor";
-
-export const SidebarItem = ({
-  item,
-  level = 0,
-}: {
-  item: SidebarItemType;
-  basePath?: string;
-  level?: number;
-}) => {
-  const { activeAnchor } = useViewportAnchor();
-  const [searchParams] = useSearchParams();
-
-  switch (item.type) {
-    case "category":
-      return <SidebarCategory category={item} level={level} />;
-    case "doc":
-      return (
-        <NavLink
-          className={({ isActive }) =>
-            navigationListItem({ isActive, isTopLevel: level === 0 })
-          }
-          to={joinPath(item.id)}
-        >
-          {item.icon && <item.icon size={16} className="align-[-0.125em]" />}
-          {item.badge ? (
-            <>
-              <span className="truncate flex-1" title={item.label}>
-                {item.label}
-              </span>
-              <SidebarBadge {...item.badge} />
-            </>
-          ) : (
-            item.label
-          )}
-        </NavLink>
-      );
-    case "link":
-      return item.href.startsWith("#") ? (
-        <AnchorLink
-          to={{ hash: item.href, search: searchParams.toString() }}
-          {...{ [DATA_ANCHOR_ATTR]: item.href.slice(1) }}
-          className={navigationListItem({
-            isActive: item.href.slice(1) === activeAnchor,
-            isTopLevel: level === 0,
-            className: item.badge?.placement !== "start" && "justify-between",
-          })}
-        >
-          {item.badge ? (
-            <>
-              <span className="truncate" title={item.label}>
-                {item.label}
-              </span>
-              <SidebarBadge {...item.badge} />
-            </>
-          ) : (
-            <span className="break-all">{item.label}</span>
-          )}
-        </AnchorLink>
-      ) : !item.href.startsWith("http") ? (
-        <NavLink
-          className={navigationListItem({
-            className: item.badge?.placement !== "start" && "justify-between",
-          })}
-          to={item.href}
-        >
-          {item.badge ? (
-            <>
-              <span className="truncate" title={item.label}>
-                {item.label}
-              </span>
-              <SidebarBadge {...item.badge} />
-            </>
-          ) : (
-            <span className="break-all">{item.label}</span>
-          )}
-        </NavLink>
-      ) : (
-        <a
-          className={navigationListItem({ isTopLevel: level === 0 })}
-          href={item.href}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <span className="whitespace-normal">{item.label}</span>
-          {/* This prevents that the icon would be positioned in its own line if the text fills a line entirely */}
-          <span className="whitespace-nowrap">
-            <ExternalLinkIcon className="inline -translate-y-0.5" size={12} />
-          </span>
-        </a>
-      );
-  }
-};

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

@@ -1,26 +0,0 @@
-import { forwardRef, type PropsWithChildren } from "react";
-import { cn } from "../../util/cn.js";
-
-export const SidebarWrapper = forwardRef<
-  HTMLDivElement,
-  PropsWithChildren<{ pushMainContent?: boolean; className?: string }>
->(({ children, className, pushMainContent }, ref) => (
-  <nav
-    // this data attribute is used in `Layout.tsx` to determine if side navigation
-    // is present for the current page so the main content is pushed to the right
-    // it's also important to set `peer` class here.
-    // maybe this could be simplified by adjusting the layout
-    data-navigation={String(pushMainContent)}
-    className={cn(
-      "scrollbar peer hidden lg:flex flex-col fixed text-sm overflow-y-auto shrink-0",
-      "px-[--padding-nav-item] -mx-[--padding-nav-item] pb-20 mt-[--padding-content-top]",
-      "w-[--side-nav-width] h-[calc(100%-var(--header-height))] scroll-pt-2 gap-2",
-      className,
-    )}
-    ref={ref}
-  >
-    {children}
-  </nav>
-));
-
-SidebarWrapper.displayName = "SidebarWrapper";

package/src/lib/plugins/custom-pages/CustomPage.tsx

@@ -1,18 +0,0 @@
-import React from "react";
-import { ProseClasses } from "../../components/Markdown.js";
-import { cn } from "../../util/cn.js";
-import { useExposedProps } from "../../util/useExposedProps.js";
-import type { CustomPageConfig } from "./index.js";
-
-export const CustomPage = ({
-  element,
-  render,
-  prose = true,
-}: Omit<CustomPageConfig, "path">) => {
-  const exposedProps = useExposedProps();
-  const content = render ? React.createElement(render, exposedProps) : element;
-
-  return (
-    <div className={cn(prose && ProseClasses, "max-w-full")}>{content}</div>
-  );
-};

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

@@ -1,135 +0,0 @@
-import type { TocEntry } from "@stefanprobst/rehype-extract-toc";
-import { ListTreeIcon } from "lucide-react";
-import {
-  useEffect,
-  useRef,
-  useState,
-  type CSSProperties,
-  type PropsWithChildren,
-} from "react";
-import { AnchorLink } from "../../components/AnchorLink.js";
-import { useViewportAnchor } from "../../components/context/ViewportAnchorContext.js";
-import { cn } from "../../util/cn.js";
-
-const DATA_ANCHOR_ATTR = "data-active";
-
-const TocItem = ({
-  item,
-  children,
-  className,
-  isActive,
-}: PropsWithChildren<{
-  item: TocEntry;
-  isActive: boolean;
-  className?: string;
-}>) => {
-  return (
-    <li
-      className={cn(
-        "truncate",
-        isActive
-          ? "text-primary"
-          : "text-foreground/65 dark:text-foreground/75",
-        className,
-      )}
-      title={item.value}
-    >
-      <AnchorLink
-        to={`#${item.id}`}
-        {...{ [DATA_ANCHOR_ATTR]: item.id }}
-        className={cn(
-          isActive
-            ? "text-primary"
-            : "text-foreground/65 dark:text-foreground/75 hover:text-foreground",
-        )}
-      >
-        {item.value}
-      </AnchorLink>
-      {children}
-    </li>
-  );
-};
-
-export const Toc = ({ entries }: { entries: TocEntry[] }) => {
-  const { activeAnchor } = useViewportAnchor();
-  const listWrapperRef = useRef<HTMLUListElement>(null);
-  const paintedOnce = useRef(false);
-  const [indicatorStyle, setIndicatorStyles] = useState<CSSProperties>({
-    top: 0,
-    opacity: 0,
-  });
-
-  // synchronize active anchor indicator with the scroll position
-  useEffect(() => {
-    if (!listWrapperRef.current) return;
-
-    const activeElement = listWrapperRef.current.querySelector(
-      `[${DATA_ANCHOR_ATTR}='${activeAnchor}']`,
-    );
-
-    if (!activeElement) {
-      setIndicatorStyles({ top: 0, opacity: 0 });
-      return;
-    }
-
-    const topParent = listWrapperRef.current.getBoundingClientRect().top;
-    const topElement = activeElement.getBoundingClientRect().top;
-
-    setIndicatorStyles({
-      opacity: 1,
-      top: `${topElement - topParent}px`,
-    });
-
-    if (paintedOnce.current) return;
-
-    // after all is painted, the indicator should animate
-    requestIdleCallback(() => {
-      paintedOnce.current = true;
-    });
-  }, [activeAnchor]);
-
-  return (
-    <aside className="sticky scrollbar top-[--header-height] h-[calc(100vh-var(--header-height))] pt-[--padding-content-top] pb-[--padding-content-bottom] overflow-y-auto ps-1 text-sm">
-      <div className="flex items-center gap-2 font-medium mb-2">
-        <ListTreeIcon size={16} />
-        On this page
-      </div>
-      <div className="relative ms-2 ps-4">
-        <div className="absolute inset-0 right-auto bg-border w-[2px]" />
-        <div
-          className={cn(
-            "absolute -left-px -translate-y-1 h-6 w-[4px] rounded bg-primary",
-            paintedOnce.current &&
-              "ease-out [transition:top_150ms,opacity_325ms]",
-          )}
-          style={indicatorStyle}
-        />
-        <ul
-          ref={listWrapperRef}
-          className="relative font-medium list-none space-y-2"
-        >
-          {entries.map((item) => (
-            <TocItem
-              isActive={item.id === activeAnchor}
-              key={item.id}
-              item={item}
-              className="pl-0"
-            >
-              {item.children && (
-                <ul className="list-none pl-4 pt-2 space-y-2">
-                  {item.children.map((child) => (
-                    <TocItem
-                      item={child}
-                      isActive={child.id === activeAnchor}
-                      key={child.id}
-                    />
-                  ))}
-                </ul>
-              )}
-            </TocItem>
-          ))}
-        </ul>
-      </div>
-    </aside>
-  );
-};

package/src/lib/plugins/markdown/resolver.ts

@@ -1,92 +0,0 @@
-import fs from "fs";
-import path from "path";
-import {
-  ZudokuConfig,
-  ZudokuDocsConfig,
-} from "../../../config/validators/validate.js";
-
-const DEFAULT_DOCS_FILES = "/pages/**/*.{md,mdx}";
-
-// TODO: This should be dynamic based on the glob selector
-const SUPPORTED_EXTENSIONS = [".md", ".mdx"];
-
-/**
- * Utilities for resolving markdown file paths and routes
- */
-export class DocResolver {
-  constructor(private config: ZudokuConfig) {}
-
-  fileMap = new Map<string, string>();
-
-  /**
-   * Gets the default docs config from the zudoku config
-   */
-  getDocsConfigs() {
-    const docsConfigs: ZudokuDocsConfig[] = this.config.docs
-      ? Array.isArray(this.config.docs)
-        ? this.config.docs
-        : [this.config.docs]
-      : [{ files: DEFAULT_DOCS_FILES }];
-
-    return docsConfigs;
-  }
-
-  /**
-   * Resolves the first matching file system path for a given docId
-   * @param docId - The docId to resolve
-   * @returns
-   */
-  resolveFilePath(docId: string) {
-    const docsConfigs = this.getDocsConfigs();
-    let fsPath: string | undefined;
-
-    docsConfigs.forEach(({ files: fileGlob }) => {
-      if (fsPath) {
-        return;
-      }
-      const rootDir = DocResolver.getRootDir(fileGlob);
-      for (const ext of SUPPORTED_EXTENSIONS) {
-        if (fsPath) {
-          return;
-        }
-        const checkPath = path.join(rootDir, `${docId}${ext}`);
-        if (fs.existsSync(checkPath)) {
-          fsPath = checkPath;
-        }
-      }
-    });
-
-    return fsPath;
-  }
-
-  /**
-   * Gets the root directory from a files glob
-   */
-  private static getRootDir(filesGlob: string) {
-    let rootDir = filesGlob.split("**")[0];
-    if (!rootDir) {
-      throw new Error("Invalid files glob. Must have '**' in the path.");
-    }
-    rootDir = rootDir.replace("/**", "/");
-    return rootDir;
-  }
-
-  /**
-   * Resolves the route path for a given file system path
-   * @param options - The options to resolve the route path
-   * @returns The string route path
-   */
-  static resolveRoutePath({
-    filesGlob,
-    fsPath,
-  }: {
-    filesGlob: string;
-    fsPath: string;
-  }) {
-    const rootDir = this.getRootDir(filesGlob);
-    const re = new RegExp(`^${rootDir}(.*).mdx?`);
-    const match = fsPath.match(re);
-    const routePath = match?.at(1);
-    return routePath;
-  }
-}

package/src/lib/plugins/openapi/Route.tsx

@@ -1,19 +0,0 @@
-import { Outlet } from "react-router-dom";
-import type { GraphQLClient } from "./client/GraphQLClient.js";
-import { GraphQLProvider } from "./client/GraphQLContext.js";
-import { OasConfigProvider } from "./context.js";
-import { OasPluginConfig } from "./interfaces.js";
-
-export const OpenApiRoute = ({
-  config,
-  client,
-}: {
-  config: OasPluginConfig;
-  client: GraphQLClient;
-}) => (
-  <OasConfigProvider value={{ config }}>
-    <GraphQLProvider client={client}>
-      <Outlet />
-    </GraphQLProvider>
-  </OasConfigProvider>
-);

package/src/lib/plugins/openapi/client/worker.ts

@@ -1,44 +0,0 @@
-import { createServer } from "./createServer.js";
-
-export type WorkerGraphQLMessage = { id: string; body: string };
-
-const localServer = createServer();
-
-const worker = self as unknown as SharedWorkerGlobalScope;
-
-worker.addEventListener("connect", (event) => {
-  const mainPort = event.ports[0];
-
-  mainPort!.onmessage = (e) => {
-    if (e.data.port) {
-      const clientPort = e.data.port as MessagePort;
-
-      clientPort.onmessage = async (
-        event: MessageEvent<{ id: string; body: string }>,
-      ) => {
-        const { id, body } = event.data;
-
-        const response = await localServer.fetch(
-          new Request("/__z/graphql", {
-            method: "POST",
-            body,
-            headers: {
-              "Content-Type": "application/json",
-            },
-          }),
-        );
-
-        const responseBody = await response.text();
-
-        clientPort.postMessage({
-          id,
-          body: responseBody,
-        } as WorkerGraphQLMessage);
-      };
-
-      clientPort.start();
-    }
-  };
-
-  mainPort!.start();
-});