@canopy-iiif/app 0.10.4 → 0.10.6

package/ui/dist/server.mjs

@@ -179,13 +179,38 @@ var Image = (props) => {
     } catch (_) {
       json = "{}";
     }
-    return /* @__PURE__ */ React5.createElement("div", { "data-canopy-image": "1", className: "not-prose" }, /* @__PURE__ */ React5.createElement(
-      "script",
+    const {
+      height = `600px`,
+      backgroundColor = `var(--color-gray-200)`,
+      caption
+    } = props || {};
+    return /* @__PURE__ */ React5.createElement(
+      "figure",
       {
-        type: "application/json",
-        dangerouslySetInnerHTML: { __html: json }
-      }
-    ));
+        style: {
+          margin: `1.618rem 0 2.618rem`
+        }
+      },
+      /* @__PURE__ */ React5.createElement(
+        "div",
+        {
+          "data-canopy-image": "1",
+          style: {
+            height,
+            backgroundColor,
+            borderRadius: `0.25rem`
+          }
+        },
+        /* @__PURE__ */ React5.createElement(
+          "script",
+          {
+            type: "application/json",
+            dangerouslySetInnerHTML: { __html: json }
+          }
+        )
+      ),
+      caption && /* @__PURE__ */ React5.createElement("figcaption", null, caption)
+    );
   }
   return /* @__PURE__ */ React5.createElement(CloverImage, { ...props });
 };
@@ -866,32 +891,27 @@ function Layout({
   );
   const showLeftColumn = navigation !== false;
   const hasContentNavigation = navigation !== false && contentNavigation !== false && headingTree.length > 0;
-  const gridClass = (() => {
-    if (showLeftColumn && hasContentNavigation) {
-      return "md:grid md:grid-cols-[17rem_minmax(0,1fr)_14rem] md:items-start md:gap-10";
-    }
-    if (showLeftColumn) {
-      return "md:grid md:grid-cols-[17rem_minmax(0,1fr)] md:items-start md:gap-10";
-    }
-    if (hasContentNavigation) {
-      return "md:grid md:grid-cols-[minmax(0,1fr)_14rem] md:items-start md:gap-10";
-    }
-    return "";
+  const containerClassName = (() => {
+    const classes = ["getting-started-layout"];
+    classes.push(
+      fluid ? "getting-started-layout--fluid" : "getting-started-layout--fixed"
+    );
+    if (showLeftColumn) classes.push("getting-started-layout--with-sidebar");
+    if (hasContentNavigation)
+      classes.push("getting-started-layout--with-content-nav");
+    if (className) classes.push(className);
+    return classes.join(" ");
   })();
-  const containerClassName = [
-    "w-full py-6 getting-started-layout",
-    gridClass,
-    fluid ? "px-4 md:px-8 lg:px-12" : "mx-auto max-w-content px-4",
-    className
-  ].filter(Boolean).join(" ");
   const leftAsideClassName = [
-    "mt-8 md:mt-0 md:order-1 md:sticky md:top-24 md:max-h-[calc(100vh-6rem)] md:overflow-y-auto text-slate-600",
+    "getting-started-layout__sidebar",
     sidebarClassName
   ].filter(Boolean).join(" ");
-  const contentOrderClass = showLeftColumn ? "md:order-2" : hasContentNavigation ? "md:order-1" : "";
-  const contentClassNames = ["space-y-6", contentOrderClass, contentClassName].filter(Boolean).join(" ");
+  const contentClassNames = [
+    "getting-started-layout__content",
+    contentClassName
+  ].filter(Boolean).join(" ");
   const contentNavigationAsideClassName = [
-    "hidden md:block md:order-3 mt-8 md:mt-0 md:sticky md:top-24 md:max-h-[calc(100vh-6rem)] md:overflow-y-auto text-slate-600",
+    "getting-started-layout__content-nav",
     contentNavigationClassName
   ].filter(Boolean).join(" ");
   const sidebarNode = showLeftColumn ? buildNavigationAside(sidebar, sidebarClassName) : null;