zudoku 0.0.0-ff3751f → 0.0.0-zuplo-api-keys.95df9e9

package/src/app/tailwind.ts

@@ -1,68 +0,0 @@
-import typographyPlugin from "@tailwindcss/typography";
-import type { Config } from "tailwindcss";
-import defaultTheme from "tailwindcss/defaultTheme.js";
-
-const content = [
-  "./src/**/*.{js,ts,jsx,tsx,md,mdx}",
-  "./node_modules/zudoku/dist/**/*.{js,ts,jsx,tsx,md,mdx}",
-];
-
-const config: Omit<Config, "content"> = {
-  darkMode: "selector",
-  content,
-  theme: {
-    extend: {
-      fontFamily: {
-        sans: [
-          ["Geist", ...defaultTheme.fontFamily.sans],
-          { fontFeatureSettings: '"rlig" 1, "calt" 0' },
-        ],
-      },
-      typography: () => ({
-        DEFAULT: {
-          css: {
-            blockquote: { quotes: "none" },
-          },
-        },
-      }),
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-    },
-  },
-  plugins: [typographyPlugin],
-};
-
-export default config;

package/src/lib/components/DevPortal.tsx

@@ -1,111 +0,0 @@
-import { MDXProvider } from "@mdx-js/react";
-import { QueryClientProvider } from "@tanstack/react-query";
-import { Helmet } from "@zudoku/react-helmet-async";
-import {
-  Fragment,
-  memo,
-  type PropsWithChildren,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
-import { ErrorBoundary } from "react-error-boundary";
-import { Outlet, useNavigation } from "react-router-dom";
-import {
-  DevPortalContext,
-  queryClient,
-  ZudokuContextOptions,
-} from "../core/DevPortalContext.js";
-import { hasHead, isMdxProviderPlugin } from "../core/plugins.js";
-import { TopLevelError } from "../errors/TopLevelError.js";
-import { StaggeredRenderContext } from "../plugins/openapi/StaggeredRender.js";
-import { MdxComponents } from "../util/MdxComponents.js";
-import "../util/requestIdleCallbackPolyfill.js";
-import {
-  ComponentsProvider,
-  DEFAULT_COMPONENTS,
-} from "./context/ComponentsContext.js";
-import { ThemeProvider } from "./context/ThemeProvider.js";
-import { ViewportAnchorProvider } from "./context/ViewportAnchorContext.js";
-import { ZudokuProvider } from "./context/ZudokuProvider.js";
-import { SlotletProvider } from "./SlotletProvider.js";
-
-const DevPortalInner = ({
-  children,
-  ...props
-}: PropsWithChildren<ZudokuContextOptions>) => {
-  const components = useMemo(
-    () => ({ ...DEFAULT_COMPONENTS, ...props.overrides }),
-    [props.overrides],
-  );
-
-  const mdxComponents = useMemo(() => {
-    const componentsFromPlugins = (props.plugins ?? [])
-      .filter(isMdxProviderPlugin)
-      .flatMap((plugin) =>
-        plugin.getMdxComponents ? [plugin.getMdxComponents()] : [],
-      );
-
-    return {
-      ...componentsFromPlugins.reduce((acc, curr) => ({ ...acc, ...curr }), {}),
-      ...MdxComponents,
-      ...props.mdx?.components,
-    };
-  }, [props.mdx?.components, props.plugins]);
-  const { stagger } = useContext(StaggeredRenderContext);
-  const [didNavigate, setDidNavigate] = useState(false);
-  const staggeredValue = useMemo(
-    () => (didNavigate ? { stagger: true } : { stagger }),
-    [stagger, didNavigate],
-  );
-  const navigation = useNavigation();
-
-  useEffect(() => {
-    if (didNavigate) {
-      return;
-    }
-    setDidNavigate(true);
-  }, [didNavigate, navigation.location]);
-
-  const [devPortalContext] = useState(() => new DevPortalContext(props));
-
-  const heads = props.plugins
-    ?.filter(hasHead)
-    // eslint-disable-next-line react/no-array-index-key
-    .map((plugin, i) => <Fragment key={i}>{plugin.getHead?.()}</Fragment>);
-
-  return (
-    <QueryClientProvider client={queryClient}>
-      <Helmet>{heads}</Helmet>
-      <StaggeredRenderContext.Provider value={staggeredValue}>
-        <ZudokuProvider context={devPortalContext}>
-          <MDXProvider components={mdxComponents}>
-            <ThemeProvider>
-              <ComponentsProvider value={components}>
-                <SlotletProvider slotlets={props.slotlets}>
-                  <ViewportAnchorProvider>
-                    {children ?? <Outlet />}
-                  </ViewportAnchorProvider>
-                </SlotletProvider>
-              </ComponentsProvider>
-            </ThemeProvider>
-          </MDXProvider>
-        </ZudokuProvider>
-      </StaggeredRenderContext.Provider>
-    </QueryClientProvider>
-  );
-};
-
-const Inner = memo(DevPortalInner);
-
-const DevPortal = (props: ZudokuContextOptions) => {
-  return (
-    <ErrorBoundary FallbackComponent={TopLevelError}>
-      <Inner {...props} />
-    </ErrorBoundary>
-  );
-};
-DevPortal.displayName = "DevPortal";
-
-export { DevPortal };

package/src/lib/components/SlotletProvider.tsx

@@ -1,55 +0,0 @@
-import React, {
-  type ComponentType,
-  type ReactElement,
-  ReactNode,
-  useContext,
-} from "react";
-import { isValidElementType } from "react-is";
-import {
-  type Location,
-  type NavigateFunction,
-  type Params,
-  type SetURLSearchParams,
-} from "react-router-dom";
-import { useExposedProps } from "../util/useExposedProps.js";
-
-export type Slotlets = Record<
-  string,
-  ReactNode | ReactElement | ComponentType<ExposedComponentProps>
->;
-
-const SlotletContext = React.createContext<Slotlets | undefined>({});
-
-export const SlotletProvider = ({
-  slotlets,
-  children,
-}: {
-  children: ReactNode;
-  slotlets?: Slotlets;
-}) => {
-  return (
-    <SlotletContext.Provider value={slotlets}>
-      {children}
-    </SlotletContext.Provider>
-  );
-};
-
-export type ExposedComponentProps = {
-  location: Location;
-  navigate: NavigateFunction;
-  searchParams: URLSearchParams;
-  setSearchParams: SetURLSearchParams;
-  params: Params;
-};
-
-export const Slotlet = ({ name }: { name: string }) => {
-  const context = useContext(SlotletContext);
-  const componentOrElement = context?.[name];
-  const slotletProps = useExposedProps();
-
-  if (isValidElementType(componentOrElement)) {
-    return React.createElement(componentOrElement, slotletProps);
-  }
-
-  return componentOrElement as ReactNode;
-};

package/src/lib/components/SyntaxHighlight.tsx

@@ -1,126 +0,0 @@
-import {
-  Highlight,
-  Prism,
-  themes,
-  type HighlightProps,
-} from "prism-react-renderer";
-
-import { CheckIcon, CopyIcon } from "lucide-react";
-
-globalThis.Prism = Prism;
-// @ts-expect-error This is untyped
-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");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-csharp.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-objectivec.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-markdown.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-javascript.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-typescript.min.js");
-
-import { useState } from "react";
-import { cn } from "../util/cn.js";
-import { useTheme } from "./context/ThemeContext.js";
-
-type SyntaxHighlightProps = {
-  className?: string;
-  noBackground?: boolean;
-  wrapLines?: boolean;
-  copyable?: boolean;
-  showLanguageIndicator?: boolean;
-  language?: string;
-} & Omit<HighlightProps, "children" | "language">;
-
-const remapLang = {
-  mdx: "md",
-} as Record<string, string>;
-
-export const SyntaxHighlight = ({
-  copyable = true,
-  language = "plain",
-  ...props
-}: SyntaxHighlightProps) => {
-  const [isDark] = useTheme();
-  const [isCopied, setIsCopied] = useState(false);
-
-  if (!props.code) {
-    return null;
-  }
-
-  return (
-    <Highlight
-      theme={isDark ? themes.vsDark : themes.github}
-      language={remapLang[language] ?? language}
-      {...props}
-    >
-      {({ className, style, tokens, getLineProps, getTokenProps }) => (
-        <div className="relative group">
-          <pre
-            className={cn(
-              "relative scrollbar overflow-x-auto",
-              className,
-              props.className,
-              props.noBackground && "!bg-transparent",
-              props.wrapLines && "whitespace-pre-wrap break-words",
-            )}
-            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((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>
-  );
-};

package/src/lib/components/context/ThemeContext.tsx

@@ -1,8 +0,0 @@
-import { createContext, useContext } from "react";
-
-export const ThemeContext = createContext<readonly [boolean, () => void]>([
-  false,
-  () => {},
-]);
-
-export const useTheme = () => useContext(ThemeContext);

package/src/lib/components/context/ThemeProvider.tsx

@@ -1,27 +0,0 @@
-import { ReactNode, useCallback, useEffect, useState } from "react";
-import { ThemeContext } from "./ThemeContext.js";
-
-export const ThemeProvider = (props: { children: ReactNode }) => {
-  const [dark, setDark] = useState(false);
-
-  // On mount, read the preferred theme from the persistence
-  useEffect(() => {
-    const theme = localStorage.getItem("theme");
-    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
-    const isDark = theme === "dark" || (!theme && prefersDark.matches);
-
-    setDark(isDark);
-  }, [dark]);
-
-  // To toggle between dark and light modes
-  const toggle = useCallback(() => {
-    const toggled = !dark;
-    document.documentElement.classList.toggle("dark", toggled);
-    localStorage.setItem("theme", toggled ? "dark" : "light");
-    setDark(toggled);
-  }, [dark]);
-
-  const value = [dark, toggle] as const;
-
-  return <ThemeContext.Provider value={value} {...props} />;
-};

package/src/lib/core/DevPortalContext.ts

@@ -1,136 +0,0 @@
-import { QueryClient } from "@tanstack/react-query";
-import { ReactNode } from "react";
-import type { SidebarConfig } from "../../config/validators/SidebarSchema.js";
-import { TopNavigationItem } from "../../config/validators/validate.js";
-import { type AuthenticationProvider } from "../authentication/authentication.js";
-import type { ComponentsContextType } from "../components/context/ComponentsContext.js";
-import { Slotlets } from "../components/SlotletProvider.js";
-import { joinPath } from "../util/joinPath.js";
-import type { MdxComponentsType } from "../util/MdxComponents.js";
-import {
-  type DevPortalPlugin,
-  isApiIdentityPlugin,
-  isNavigationPlugin,
-  type NavigationPlugin,
-  needsInitialization,
-} from "./plugins.js";
-
-export interface ApiIdentity {
-  authorizeRequest: (request: Request) => Request;
-  label: string;
-  id: string;
-}
-
-export const queryClient = new QueryClient();
-
-export type ApiKeyCache = "api-keys";
-export type DevPortalCacheKey = ApiKeyCache | string;
-
-type Metadata = Partial<{
-  title: string;
-  description: string;
-  logo: string;
-  favicon: string;
-  generator: string;
-  applicationName: string;
-  referrer: string;
-  keywords: string[];
-  authors: string[];
-  creator: string;
-  publisher: string;
-}>;
-
-type Page = Partial<{
-  pageTitle?: string;
-  logo?: {
-    src: {
-      light: string;
-      dark: string;
-    };
-    width?: string;
-    alt?: string;
-  };
-  banner?: {
-    message: ReactNode;
-    color?: "note" | "tip" | "info" | "caution" | "danger" | (string & {});
-    dismissible?: boolean;
-  };
-}>;
-
-export type ZudokuContextOptions = {
-  metadata?: Metadata;
-  page?: Page;
-  authentication?: AuthenticationProvider;
-  topNavigation?: TopNavigationItem[];
-  sidebars?: SidebarConfig;
-  plugins?: DevPortalPlugin[];
-  slotlets?: Slotlets;
-  mdx?: {
-    components?: MdxComponentsType;
-  };
-  overrides?: ComponentsContextType;
-};
-
-export class DevPortalContext {
-  public plugins: NonNullable<ZudokuContextOptions["plugins"]>;
-  public sidebars: SidebarConfig;
-  public topNavigation: NonNullable<ZudokuContextOptions["topNavigation"]>;
-  public meta: ZudokuContextOptions["metadata"];
-  public page: ZudokuContextOptions["page"];
-  public authentication?: ZudokuContextOptions["authentication"];
-  private navigationPlugins: NavigationPlugin[];
-
-  constructor(config: ZudokuContextOptions) {
-    this.plugins = config.plugins ?? [];
-    this.topNavigation = config.topNavigation ?? [];
-    this.sidebars = config.sidebars ?? {};
-    this.navigationPlugins = this.plugins.filter(isNavigationPlugin);
-    this.authentication = config.authentication;
-    this.meta = config.metadata;
-    this.page = config.page;
-  }
-
-  initialize = async (): Promise<void> => {
-    await Promise.all(
-      this.plugins
-        .filter(needsInitialization)
-        .map((plugin) => plugin.initialize?.(this)),
-    );
-  };
-
-  invalidateCache = async (key: DevPortalCacheKey[]) => {
-    await queryClient.invalidateQueries({ queryKey: key });
-  };
-
-  getApiIdentities = async () => {
-    const keys = await Promise.all(
-      this.plugins
-        .filter(isApiIdentityPlugin)
-        .map((plugin) => plugin.getIdentities(this)),
-    );
-
-    return keys.flat();
-  };
-
-  getPluginSidebar = async (path: string) => {
-    const navigations = await Promise.all(
-      this.navigationPlugins.map((plugin) =>
-        plugin.getSidebar?.(joinPath(path)),
-      ),
-    );
-
-    return navigations.flatMap((nav) => nav ?? []);
-  };
-
-  signRequest = async (request: Request) => {
-    if (!this.authentication) {
-      throw new Error("No authentication provider configured");
-    }
-
-    const accessToken = await this.authentication.getAccessToken();
-
-    request.headers.set("Authorization", `Bearer ${accessToken}`);
-
-    return request;
-  };
-}

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/openapi/Route.tsx

@@ -1,20 +0,0 @@
-import { Outlet } from "react-router-dom";
-import { Provider, Client as UrqlClient } from "urql";
-import { OasConfigProvider } from "./context.js";
-import { OasPluginConfig } from "./interfaces.js";
-
-export function OpenApiRoute({
-  config,
-  client,
-}: {
-  config: OasPluginConfig;
-  client: typeof UrqlClient;
-}) {
-  return (
-    <Provider value={client}>
-      <OasConfigProvider value={{ config }}>
-        <Outlet />
-      </OasConfigProvider>
-    </Provider>
-  );
-}