zudoku 0.3.0-dev.14 → 0.3.0-dev.140

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,6 +94,9 @@
   #root {
     @apply h-full min-h-screen;
   }
+  * {
+    @apply border-border;
+  }
 
   html {
     scroll-padding-block: var(--scroll-padding);
@@ -28,6 +105,9 @@
 
   body {
     @apply antialiased bg-background text-foreground;
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1;
   }
 
   .dark {
@@ -35,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;
@@ -90,6 +170,28 @@
     }
   }
 
+  .scrollbar::-webkit-scrollbar {
+    padding: 2px;
+    width: 12px;
+    height: 12px;
+    background: transparent;
+  }
+
+  .scrollbar:hover::-webkit-scrollbar-thumb {
+    background: hsla(var(--border));
+    border-radius: 12px;
+    border: 2px solid transparent;
+    background-clip: content-box;
+  }
+
+  .scrollbar::-webkit-scrollbar-thumb {
+    background: transparent;
+  }
+
+  .scrollbar::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
   /* Theme */
   :root {
     --background: 0 0% 100%;
@@ -110,7 +212,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;
   }
 
@@ -133,6 +235,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,18 +1,98 @@
-import log from "loglevel";
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import App from "./App.js";
+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 { inkeepSearchPlugin } from "zudoku/plugins/search-inkeep";
+import type { ZudokuConfig } from "../config/config.js";
+import type { ZudokuContextOptions } from "../lib/core/DevPortalContext.js";
 
-log.setDefaultLevel("silent");
+export const convertZudokuConfigToOptions = (
+  config: ZudokuConfig,
+): ZudokuContextOptions => {
+  const fallbackLogoLight =
+    config.page?.logoUrl ??
+    "https://cdn.zudoku.dev/logos/zudoku-logo-full-light.svg";
+  const fallbackLogoDark =
+    config.page?.logoUrl ??
+    "https://cdn.zudoku.dev/logos/zudoku-logo-full-dark.svg";
 
-if (import.meta.env.DEV) {
-  log.setLevel("debug");
-} else if (localStorage.getItem("ENABLE_DEBUG_LOGS")) {
-  log.setLevel("debug");
-}
+  return {
+    page: {
+      ...config.page,
+      logo: {
+        ...config.page?.logo,
+        src: {
+          light: config.page?.logo?.src?.light ?? fallbackLogoLight,
+          dark: config.page?.logo?.src?.dark ?? fallbackLogoDark,
+        },
+      },
+    },
+    slotlets: config.slotlets,
+    metadata: {
+      favicon: "https://cdn.zudoku.dev/logos/favicon.svg",
+      title: "%s - Zudoku",
+      ...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 ?? []),
+    ],
+  };
+};
 
-createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-);
+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/favicon.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,58 @@
+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 { themeToggle } from "../lib/themeToggle.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");
+}
+
+themeToggle();
+
+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: logoUrl
+      ? {
+          src: {
+            light: logoUrl,
+            dark: logoUrl,
+          },
+        }
+      : undefined,
+    pageTitle,
+  },
+  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: window.location.pathname,
+});
+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

@@ -1,16 +1,13 @@
-import { CommonPlugin, NavigationPlugin } from "../../lib/core/plugins.js";
+import { DevPortalPlugin } from "../core/plugins.js";
 
-type AuthenticationPlugin = NavigationPlugin & CommonPlugin;
-
-export interface AuthenticationProvider extends AuthenticationPlugin {
-  login(): Promise<void>;
+export interface AuthenticationProvider {
+  signUp(options?: { redirectTo?: string }): Promise<void>;
+  signIn(options?: { redirectTo?: string }): Promise<void>;
+  signOut(): Promise<void>;
   getAccessToken(): Promise<string>;
-  logout(): Promise<void>;
+  getAuthenticationPlugin?(): DevPortalPlugin;
 }
 
-/**
- * Function to get an initialized AuthenticationProvider
- */
 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/hook.ts

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

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

@@ -4,15 +4,26 @@ import { useAuthState } from "../state.js";
 import { OpenIDAuthenticationProvider } from "./openid.js";
 
 class Auth0AuthenticationProvider extends OpenIDAuthenticationProvider {
-  override async logout(): Promise<void> {
+  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.href);
+    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
@@ -37,17 +48,16 @@ class Auth0AuthenticationProvider extends OpenIDAuthenticationProvider {
     } else {
       logoutUrl = new URL(`${this.issuer}oidc/logout`);
     }
-  }
+  };
 }
 
 const auth0Auth: AuthenticationProviderInitializer<
   Auth0AuthenticationConfig
-> = ({ domain, clientId, audience }) =>
+> = ({ domain, ...options }) =>
   new Auth0AuthenticationProvider({
+    ...options,
     type: "openid",
     issuer: `https://${domain}`,
-    clientId: clientId,
-    audience: audience,
   });
 
 export default auth0Auth;

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

@@ -1,18 +1,58 @@
 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 }) => {
+> = ({
+  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({});
+    await clerkApi.load();
+    return clerkApi;
   })();
 
   async function getAccessToken() {
@@ -28,38 +68,30 @@ const clerkAuth: AuthenticationProviderInitializer<
   }
 
   return {
-    initialize: async () => {
+    getAccessToken,
+    signOut: async () => {
       await ensureLoaded;
-
-      if (clerkApi.session) {
-        useAuthState.setState({
-          isAuthenticated: true,
-          isPending: false,
-          profile: {
-            sub: clerkApi.session.user.id,
-            name: clerkApi.session.user.fullName ?? undefined,
-            email: clerkApi.session.user.emailAddresses[0]?.emailAddress,
-            emailVerified: false, // TODO: Check this
-            // emailVerified: clerkApi.session.user.hasVerifiedEmailAddress,
-            pictureUrl: clerkApi.session.user.imageUrl,
-          },
-        });
-      } else {
-        useAuthState.setState({
-          isAuthenticated: false,
-          isPending: false,
-          profile: undefined,
-        });
-      }
+      await clerkApi.signOut({
+        redirectUrl: window.location.origin + redirectToAfterSignOut,
+      });
     },
-    getAccessToken,
-    logout: async () => {
-      await clerkApi.signOut();
+    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,
+      });
     },
-    login: async () => {
-      await clerkApi.redirectToSignIn();
+    getAuthenticationPlugin() {
+      return new ClerkAuthPlugin(ensureLoaded);
     },
-    getRoutes: () => [],
   };
 };