zudoku 0.4.5-dev.0 → 0.4.5-dev.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.4.5-dev.0",
+  "version": "0.4.5-dev.2",
   "type": "module",
   "files": [
     "dist",

package/src/app/demo.tsx

@@ -35,6 +35,9 @@ if (!root) {
 const config = {
   page: {
     pageTitle: "",
+    banner: {
+      message: <DemoAnnouncement />,
+    },
   },
   topNavigation: [
     {
@@ -42,9 +45,6 @@ const config = {
       label: "API Reference",
     },
   ],
-  slotlets: {
-    "layout-before-head": <DemoAnnouncement />,
-  },
   plugins: [
     // Using the plugin directly because there's no config file to load in the virtual plugins
     openApiPlugin({

package/src/app/main.css

@@ -80,8 +80,11 @@
   :root {
     --top-header-height: 65px;
     --top-nav-height: 50px;
+    --banner-height: 48px;
     --side-nav-width: theme("spacing.72");
-    --header-height: calc(var(--top-header-height) + var(--top-nav-height));
+    --header-height: calc(
+      var(--top-header-height) + var(--top-nav-height) + var(--banner-height)
+    );
     --scroll-padding: calc(var(--header-height) + 10px);
     --padding-content-top: theme("spacing.12");
     --padding-content-bottom: theme("spacing.12");

package/src/lib/components/Header.tsx

@@ -60,6 +60,15 @@ export const Header = memo(function HeaderInner() {
 
   return (
     <header className="sticky lg:top-0 z-10 bg-background/80 backdrop-blur w-full">
+      <>
+        {page?.banner ? (
+          <div className="h-[--banner-height] bg-primary/90 text-primary-foreground text-center text-sm font-medium py-2 flex items-center justify-center">
+            <div>{page.banner.message}</div>
+          </div>
+        ) : (
+          <style>{`:root{--banner-height: 0}`}</style>
+        )}
+      </>
       <div className="max-w-screen-2xl mx-auto">
         <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">

package/src/lib/components/Layout.tsx

@@ -25,7 +25,7 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
 
   useEffect(() => {
     // Initialize the authentication plugin
-    authentication?.pageLoad ? authentication.pageLoad() : null;
+    authentication?.pageLoad?.();
   }, [authentication]);
 
   useEffect(() => {

package/src/lib/core/DevPortalContext.ts

@@ -1,4 +1,5 @@
 import { QueryClient } from "@tanstack/react-query";
+import { ReactNode } from "react";
 import type { SidebarConfig } from "../../config/validators/SidebarSchema.js";
 import { type AuthenticationProvider } from "../authentication/authentication.js";
 import type { ComponentsContextType } from "../components/context/ComponentsContext.js";
@@ -48,6 +49,9 @@ type Page = Partial<{
     width?: string;
     alt?: string;
   };
+  banner?: {
+    message: ReactNode;
+  };
 }>;
 
 export type ZudokuContextOptions = {

package/src/lib/demo/DemoAnnouncement.tsx

@@ -1,14 +1,17 @@
-export const DemoAnnouncement = () => (
-  <div className="h-12 w-full bg-pink-900 text-pink-100 text-center text-sm font-medium py-2 flex items-center justify-center ">
-    This demo hosting of your OpenAPI isn't as fast or flexible as self-hosting;{" "}
-    <a
-      href="https://github.com/zuplo/zudoku"
-      className="px-1 underline hover:white"
-    >
-      Get started here
-    </a>{" "}
-    to see Zudoku at full tilt.
-  </div>
-);
+export const DemoAnnouncement = () => {
+  return (
+    <>
+      This demo hosting of your OpenAPI isn't as fast or flexible as
+      self-hosting;{" "}
+      <a
+        href="https://github.com/zuplo/zudoku"
+        className="px-1 underline hover:white"
+      >
+        Get started here
+      </a>{" "}
+      to see Zudoku at full tilt.
+    </>
+  );
+};
 
 export default DemoAnnouncement;