zudoku 0.1.1-dev.9 → 0.3.0-dev.100

package/src/app/main.css

@@ -2,6 +2,80 @@
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-Thin.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-UltraLight.woff2")
+    format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-Light.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-Regular.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-Medium.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-SemiBold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-Bold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-Black.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-UltraBlack.woff2")
+    format("woff2");
+}
+
 @layer base {
   :root {
     --top-header-height: 65px;
@@ -20,13 +94,20 @@
   #root {
     @apply h-full min-h-screen;
   }
+  * {
+    @apply border-border;
+  }
 
   html {
     scroll-padding-block: var(--scroll-padding);
+    scrollbar-gutter: stable;
   }
 
   body {
     @apply antialiased bg-background text-foreground;
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1;
   }
 
   .dark {
@@ -34,7 +115,7 @@
   }
 
   .prose.prose {
-    @apply prose-a:decoration-primary/60 hover:prose-a:decoration-primary prose-a:underline-offset-4 hover:prose-a:decoration-2;
+    @apply prose-a:underline-offset-4 hover:prose-a:text-primary;
     @apply prose-blockquote:not-italic prose-blockquote:text-neutral-500/75 prose-blockquote:dark:text-neutral-400;
     @apply prose-headings:prose-code:mx-2;
     @apply prose-code:before:content-none prose-code:after:content-none;
@@ -109,7 +190,7 @@
     --destructive-foreground: 210 40% 98%;
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
-    --ring: 221.2 83.2% 53.3%;
+    --ring: var(--primary);
     --radius: 0.5rem;
   }
 
@@ -132,6 +213,6 @@
     --destructive-foreground: 210 40% 98%;
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
-    --ring: 224.3 76.3% 48%;
+    --ring: var(--primary);
   }
 }

package/src/app/main.tsx

@@ -1,9 +1,95 @@
-import React from "react";
-import { createRoot } from "react-dom/client";
-import App from "./App.js";
-
-createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-);
+import { type RouteObject } from "react-router-dom";
+import { configuredApiKeysPlugin } from "virtual:zudoku-api-keys-plugin";
+import { configuredApiPlugins } from "virtual:zudoku-api-plugins";
+import { configuredAuthProvider } from "virtual:zudoku-auth";
+import { configuredDocsPlugins } from "virtual:zudoku-docs-plugins";
+import { configuredRedirectPlugin } from "virtual:zudoku-redirect-plugin";
+import { configuredSidebar } from "virtual:zudoku-sidebar";
+import "virtual:zudoku-theme.css";
+import { DevPortal, Layout, RouterError } from "zudoku/components";
+import { isNavigationPlugin } from "zudoku/internal";
+import { customPagePlugin } from "zudoku/plugins/custom-page";
+import type { ZudokuConfig } from "../config/config.js";
+import type { ZudokuContextOptions } from "../lib/core/DevPortalContext.js";
+import { inkeepSearchPlugin } from "../lib/plugins/search-inkeep/index.js";
+
+export const convertZudokuConfigToOptions = (
+  config: ZudokuConfig,
+): ZudokuContextOptions => {
+  const fallbackLogo =
+    config.page?.logoUrl ?? "https://cdn.zudoku.dev/logos/icon.svg";
+
+  return {
+    page: {
+      pageTitle: "Developer Portal",
+      ...config.page,
+      logo: {
+        ...config.page?.logo,
+        src: {
+          light: config.page?.logo?.src?.light ?? fallbackLogo,
+          dark: config.page?.logo?.src?.dark ?? fallbackLogo,
+        },
+      },
+    },
+    slotlets: config.slotlets,
+    metadata: {
+      favicon: "https://cdn.zudoku.dev/logos/icon.svg",
+      title: "%s | Developer Portal",
+      ...config.metadata,
+    },
+    sidebars: configuredSidebar,
+    topNavigation: config.topNavigation,
+    mdx: config.mdx,
+    authentication: configuredAuthProvider,
+    plugins: [
+      ...(config.search?.type === "inkeep"
+        ? [inkeepSearchPlugin(config.search)]
+        : []),
+      ...configuredDocsPlugins,
+      ...configuredApiPlugins,
+      ...(configuredRedirectPlugin ? [configuredRedirectPlugin] : []),
+      ...(configuredApiKeysPlugin ? [configuredApiKeysPlugin] : []),
+      ...(config.customPages ? [customPagePlugin(config.customPages)] : []),
+      ...(configuredAuthProvider?.getAuthenticationPlugin
+        ? [configuredAuthProvider.getAuthenticationPlugin()]
+        : []),
+      ...(config.plugins ?? []),
+    ],
+  };
+};
+
+export const getRoutesByConfig = (config: ZudokuConfig): RouteObject[] => {
+  const options = convertZudokuConfigToOptions(config);
+
+  const allPlugins = [
+    ...(options.plugins ? options.plugins : []),
+    ...(options.authentication?.getAuthenticationPlugin
+      ? [options.authentication.getAuthenticationPlugin()]
+      : []),
+  ];
+
+  const routes = allPlugins
+    .flatMap((plugin) => (isNavigationPlugin(plugin) ? plugin.getRoutes() : []))
+    .concat({
+      path: "*",
+      loader: () => {
+        throw new Response("Not Found", { status: 404 });
+      },
+    });
+
+  return [
+    {
+      element: (
+        <DevPortal {...options}>
+          <Layout />
+        </DevPortal>
+      ),
+      children: [
+        {
+          errorElement: <RouterError />,
+          children: routes,
+        },
+      ],
+    },
+  ];
+};

package/src/app/standalone.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="https://cdn.zudoku.dev/logos/icon.svg"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dev Portal</title>
+    <script type="module" crossorigin src="./main.js"></script>
+    <link rel="stylesheet" crossorigin href="./style.css" />
+  </head>
+  <body>
+    <div
+      data-api-url="https://blue-sloth-main-afc3428.d2.zuplo.dev/schemas/rewiring-america"
+    ></div>
+  </body>
+</html>

package/src/app/standalone.tsx

@@ -0,0 +1,53 @@
+import { createRoot } from "react-dom/client";
+import { createBrowserRouter } from "react-router-dom";
+import { Bootstrap } from "zudoku/components";
+import type { ZudokuConfig } from "../config/validators/validate.js";
+import { openApiPlugin } from "../lib/plugins/openapi/index.js";
+import "../lib/util/logInit.js";
+import "./main.css";
+import { getRoutesByConfig } from "./main.js";
+
+const root = document.querySelector("div[data-api-url]");
+if (!root) {
+  throw new Error("No div found with attribute data-api-url");
+}
+
+const apiUrl = root.getAttribute("data-api-url");
+const pageTitle = document.getElementsByTagName("title")[0].innerText;
+const logoUrl = root.getAttribute("data-logo-url");
+
+// IMPORTANT: This component must not contain tailwind classes
+// This directory is not processed by the tailwind plugin
+
+const config = {
+  page: {
+    logo: {
+      src: {
+        light: logoUrl ?? "https://cdn.zudoku.dev/logos/icon.svg",
+        dark: logoUrl ?? "https://cdn.zudoku.dev/logos/icon.svg",
+      },
+    },
+    pageTitle: pageTitle ?? "Developer Portal",
+  },
+  topNavigation: [
+    {
+      id: "/",
+      label: "API Reference",
+    },
+  ],
+  plugins: [
+    // Using the plugin directly because there's no config file to load in the virtual plugins
+    openApiPlugin({
+      type: "url",
+      input: apiUrl!,
+      navigationId: "/",
+      inMemory: true,
+    }),
+  ],
+} satisfies ZudokuConfig;
+
+const routes = getRoutesByConfig(config);
+const router = createBrowserRouter(routes, {
+  basename: "/standalone",
+});
+createRoot(root).render(<Bootstrap router={router} />);

package/src/app/tailwind.ts

@@ -1,17 +1,13 @@
 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}",
 ];
 
-//   ,
-// if (process.env.NODE_ENV === "development") {
-//   content.push("../../plugins/*/src/**/*.{js,ts,jsx,tsx}");
-// }
-
-const config: Config = {
+const config: Omit<Config, "content"> = {
   darkMode: "selector",
   content,
   theme: {

package/src/lib/authentication/AuthenticationPlugin.tsx

@@ -0,0 +1,38 @@
+import {
+  CommonPlugin,
+  NavigationPlugin,
+  ProfileMenuPlugin,
+} from "../core/plugins.js";
+import { SignIn } from "./components/SignIn.js";
+import { SignOut } from "./components/SignOut.js";
+import { SignUp } from "./components/SignUp.js";
+
+type PluginInterface = NavigationPlugin & CommonPlugin & ProfileMenuPlugin;
+
+export class AuthenticationPlugin implements PluginInterface {
+  getRoutes() {
+    return [
+      {
+        path: "/signout",
+        element: <SignOut />,
+      },
+      {
+        path: "/signin",
+        element: <SignIn />,
+      },
+      {
+        path: "/signup",
+        element: <SignUp />,
+      },
+    ];
+  }
+
+  getProfileMenuItems() {
+    return [
+      {
+        label: "Logout",
+        path: "/signout",
+      },
+    ];
+  }
+}

package/src/lib/authentication/authentication.ts

@@ -0,0 +1,13 @@
+import { DevPortalPlugin } from "../core/plugins.js";
+
+export interface AuthenticationProvider {
+  signUp(options?: { redirectTo?: string }): Promise<void>;
+  signIn(options?: { redirectTo?: string }): Promise<void>;
+  signOut(): Promise<void>;
+  getAccessToken(): Promise<string>;
+  getAuthenticationPlugin?(): DevPortalPlugin;
+}
+
+export interface AuthenticationProviderInitializer<TConfig> {
+  (config: TConfig): AuthenticationProvider;
+}

package/src/lib/authentication/components/SignIn.tsx

@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+import { useSearchParams } from "react-router-dom";
+import { useZudoku } from "../../components/context/ZudokuContext.js";
+
+export const SignIn = () => {
+  const context = useZudoku();
+  const [search] = useSearchParams();
+  useEffect(() => {
+    void context.authentication?.signIn({
+      redirectTo: search.get("redirect") ?? undefined,
+    });
+  }, [context.authentication, search]);
+
+  return null;
+};

package/src/lib/authentication/components/SignOut.tsx

@@ -0,0 +1,13 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { useZudoku } from "../../components/context/ZudokuContext.js";
+
+export const SignOut = () => {
+  const context = useZudoku();
+  const navigate = useNavigate();
+  useEffect(() => {
+    void context.authentication?.signOut().then(() => navigate("/"));
+  }, [navigate, context.authentication]);
+
+  return null;
+};

package/src/lib/authentication/components/SignUp.tsx

@@ -0,0 +1,11 @@
+import { useEffect } from "react";
+import { useZudoku } from "../../components/context/ZudokuContext.js";
+
+export const SignUp = () => {
+  const context = useZudoku();
+  useEffect(() => {
+    void (context.authentication?.signUp() ?? context.authentication?.signIn());
+  }, [context.authentication]);
+
+  return null;
+};

package/src/lib/authentication/errors.ts

@@ -0,0 +1,21 @@
+export class AuthorizationError extends Error {}
+
+interface OAuthError {
+  readonly error: string;
+  readonly error_description?: string;
+  readonly error_uri?: string;
+  readonly algs?: string;
+  readonly scope?: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  readonly [parameter: string]: any | undefined;
+}
+
+export class OAuthAuthorizationError extends AuthorizationError {
+  constructor(
+    message: string,
+    public error: OAuthError,
+    options?: ErrorOptions,
+  ) {
+    super(message, options);
+  }
+}

package/src/lib/authentication/hook.ts

@@ -0,0 +1,34 @@
+import { useZudoku } from "../components/context/ZudokuContext.js";
+import { useAuthState } from "./state.js";
+
+export const useAuth = () => {
+  const { authentication } = useZudoku();
+  const authState = useAuthState();
+  const isAuthEnabled = typeof authentication !== "undefined";
+
+  return {
+    isAuthEnabled,
+    isPending: authState.isPending,
+    profile: authState.profile,
+    isAuthenticated: authState.profile,
+
+    login: async () => {
+      if (!isAuthEnabled) {
+        throw new Error("Authentication is not enabled.");
+      }
+      // TODO: Should handle errors/state
+      await authentication.signIn();
+    },
+
+    logout: async () => {
+      if (!isAuthEnabled) {
+        throw new Error("Authentication is not enabled.");
+      }
+      // TODO: Should handle errors/state
+      await authentication.signOut();
+
+      // Redirect to home
+      window.location.href = "/";
+    },
+  };
+};

package/src/lib/authentication/providers/auth0.tsx

@@ -0,0 +1,63 @@
+import { Auth0AuthenticationConfig } from "../../../config/config.js";
+import { AuthenticationProviderInitializer } from "../authentication.js";
+import { useAuthState } from "../state.js";
+import { OpenIDAuthenticationProvider } from "./openid.js";
+
+class Auth0AuthenticationProvider extends OpenIDAuthenticationProvider {
+  onAuthorizationUrl = async (
+    url: URL,
+    { isSignUp }: { isSignUp: boolean },
+  ) => {
+    if (isSignUp) {
+      url.searchParams.set("screen_hint", "signup");
+    }
+  };
+  signOut = async (): Promise<void> => {
+    useAuthState.setState({
+      isAuthenticated: false,
+      isPending: false,
+      profile: undefined,
+    });
+    localStorage.removeItem("auto-login");
+    const as = await this.getAuthServer();
+
+    const redirectUrl = new URL(
+      window.location.origin + this.logoutRedirectUrlPath,
+    );
+    redirectUrl.pathname = this.logoutRedirectUrlPath;
+
+    // SEE: https://auth0.com/docs/authenticate/login/logout/log-users-out-of-auth0
+    // For Auth0 tenants created on or after 14 November 2023, RP-Initiated
+    // Logout End Session Endpoint Discovery is enabled by default.
+    // Otherwise we fallback to the old non-compliant logout
+
+    let logoutUrl: URL;
+    // The endSessionEndpoint is set, the IdP supports some form of logout,
+    // so we use the IdP logout. Otherwise, just redirect the user to home
+    if (as.end_session_endpoint) {
+      logoutUrl = new URL(as.end_session_endpoint);
+      // TODO: get id_token and set hint
+      // const { id_token } = session;
+      // if (id_token) {
+      //   logoutUrl.searchParams.set("id_token_hint", id_token);
+      // }
+      logoutUrl.searchParams.set(
+        "post_logout_redirect_uri",
+        redirectUrl.toString(),
+      );
+    } else {
+      logoutUrl = new URL(`${this.issuer}oidc/logout`);
+    }
+  };
+}
+
+const auth0Auth: AuthenticationProviderInitializer<
+  Auth0AuthenticationConfig
+> = ({ domain, ...options }) =>
+  new Auth0AuthenticationProvider({
+    ...options,
+    type: "openid",
+    issuer: `https://${domain}`,
+  });
+
+export default auth0Auth;

package/src/lib/authentication/providers/clerk.tsx

@@ -0,0 +1,98 @@
+import type { Clerk } from "@clerk/clerk-js";
+import { ClerkAuthenticationConfig } from "../../../config/config.js";
+import { AuthenticationProviderInitializer } from "../authentication.js";
+import { AuthenticationPlugin } from "../AuthenticationPlugin.js";
+import { useAuthState } from "../state.js";
+
+class ClerkAuthPlugin extends AuthenticationPlugin {
+  constructor(private clerk: Promise<Clerk | undefined>) {
+    super();
+  }
+  initialize = async () => {
+    const clerk = await this.clerk;
+
+    if (!clerk) {
+      return;
+    }
+
+    if (clerk.session) {
+      useAuthState.setState({
+        isAuthenticated: true,
+        isPending: false,
+        profile: {
+          sub: clerk.session.user.id,
+          name: clerk.session.user.fullName ?? undefined,
+          email: clerk.session.user.emailAddresses[0]?.emailAddress,
+          emailVerified: false, // TODO: Check this
+          pictureUrl: clerk.session.user.imageUrl,
+        },
+      });
+    } else {
+      useAuthState.setState({
+        isAuthenticated: false,
+        isPending: false,
+        profile: undefined,
+      });
+    }
+  };
+}
+
+const clerkAuth: AuthenticationProviderInitializer<
+  ClerkAuthenticationConfig
+> = ({
+  clerkPubKey,
+  redirectToAfterSignOut = "/",
+  redirectToAfterSignUp = "/",
+  redirectToAfterSignIn = "/",
+}) => {
+  let clerkApi: Clerk;
+  const ensureLoaded = (async () => {
+    if (typeof window === "undefined") return;
+    const { Clerk } = await import("@clerk/clerk-js");
+    clerkApi = new Clerk(clerkPubKey);
+
+    await clerkApi.load();
+    return clerkApi;
+  })();
+
+  async function getAccessToken() {
+    await ensureLoaded;
+    if (!clerkApi.session) {
+      throw new Error("No session available");
+    }
+    const response = await clerkApi.session.getToken();
+    if (!response) {
+      throw new Error("Could not get access token from Clerk");
+    }
+    return response;
+  }
+
+  return {
+    getAccessToken,
+    signOut: async () => {
+      await ensureLoaded;
+      await clerkApi.signOut({
+        redirectUrl: window.location.origin + redirectToAfterSignOut,
+      });
+    },
+    signIn: async () => {
+      await ensureLoaded;
+      await clerkApi.redirectToSignIn({
+        signInForceRedirectUrl: window.location.origin + redirectToAfterSignIn,
+        signUpForceRedirectUrl: window.location.origin + redirectToAfterSignUp,
+      });
+    },
+    signUp: async () => {
+      await ensureLoaded;
+      await clerkApi.redirectToSignUp({
+        signInForceRedirectUrl: window.location.origin + redirectToAfterSignIn,
+        signUpForceRedirectUrl: window.location.origin + redirectToAfterSignUp,
+      });
+    },
+    getAuthenticationPlugin() {
+      return new ClerkAuthPlugin(ensureLoaded);
+    },
+  };
+};
+
+export default clerkAuth;