Feature: OCI Package Composability

.gitignore

@@ -36,3 +36,4 @@ zarf-sbom/
 *.part*
 test-*.txt
 __debug_bin
+docs-website/static/zarf.schema.json

Makefile

@@ -130,19 +130,17 @@ build-examples: ## Build all of the example packages
 
 	@test -s ./build/zarf-package-variables-$(ARCH).tar.zst || $(ZARF_BIN) package create examples/variables --set NGINX_VERSION=1.23.3 -o build -a $(ARCH) --confirm
 
-	@test -s ./build/zarf-package-data-injection-demo-$(ARCH).tar || $(ZARF_BIN) package create examples/data-injection -o build -a $(ARCH) --confirm
+	@test -s ./build/zarf-package-data-injection-$(ARCH).tar || $(ZARF_BIN) package create examples/data-injection -o build -a $(ARCH) --confirm
 
 	@test -s ./build/zarf-package-git-data-$(ARCH)-v1.0.0.tar.zst || $(ZARF_BIN) package create examples/git-data -o build -a $(ARCH) --confirm
 
-	@test -s ./build/zarf-package-test-helm-releasename-$(ARCH).tar.zst || $(ZARF_BIN) package create examples/helm-alt-release-name -o build -a $(ARCH) --confirm
+	@test -s ./build/zarf-package-helm-alt-release-name-$(ARCH).tar.zst || $(ZARF_BIN) package create examples/helm-alt-release-name -o build -a $(ARCH) --confirm
 
-	@test -s ./build/zarf-package-test-helm-local-chart-$(ARCH).tar.zst || $(ZARF_BIN) package create examples/helm-local-chart -o build -a $(ARCH) --confirm
+	@test -s ./build/zarf-package-helm-local-chart-$(ARCH)-0.0.1.tar.zst || $(ZARF_BIN) package create examples/helm-local-chart -o build -a $(ARCH) --confirm
 
-	@test -s ./build/zarf-package-compose-example-$(ARCH).tar.zst || $(ZARF_BIN) package create examples/composable-packages -o build -a $(ARCH) --confirm
+	@test -s ./build/zarf-package-podinfo-flux-$(ARCH).tar.zst || $(ZARF_BIN) package create examples/podinfo-flux -o build -a $(ARCH) --confirm
 
-	@test -s ./build/zarf-package-flux-test-$(ARCH).tar.zst || $(ZARF_BIN) package create examples/flux-test -o build -a $(ARCH) --confirm
-
-	@test -s ./build/zarf-package-test-helm-wait-$(ARCH).tar.zst || $(ZARF_BIN) package create examples/helm-no-wait -o build -a $(ARCH) --confirm
+	@test -s ./build/zarf-package-helm-no-wait-$(ARCH).tar.zst || $(ZARF_BIN) package create examples/helm-no-wait -o build -a $(ARCH) --confirm
 
 	@test -s ./build/zarf-package-helm-oci-chart-$(ARCH)-0.0.1.tar.zst || $(ZARF_BIN) package create examples/helm-oci-chart -o build -a $(ARCH) --confirm
 
@@ -159,7 +157,7 @@ test-e2e: build-examples ## Run all of the core Zarf CLI E2E tests (builds any d
 test-external: ## Run the Zarf CLI E2E tests for an external registry and cluster
 	@test -s $(ZARF_BIN) || $(MAKE) build-cli
 	@test -s ./build/zarf-init-$(ARCH)-$(CLI_VERSION).tar.zst || $(MAKE) init-package
-	@test -s ./build/zarf-package-flux-test-$(ARCH).tar.zst || $(ZARF_BIN) package create examples/flux-test -o build -a $(ARCH) --confirm
+	@test -s ./build/zarf-package-podinfo-flux-$(ARCH).tar.zst || $(ZARF_BIN) package create examples/podinfo-flux -o build -a $(ARCH) --confirm
 	cd src/test/external-test && go test -failfast -v -timeout 30m
 
 ## NOTE: Requires an existing cluster and

docs-website/docusaurus.config.js

@@ -1,77 +1,79 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-const darkCodeTheme = require('prism-react-renderer/themes/dracula')
-const { SocialsBox } = require('./static-components/SocialsBox/SocialsBox')
+const darkCodeTheme = require("prism-react-renderer/themes/shadesOfPurple");
+const { SocialsBox } = require("./static-components/SocialsBox/SocialsBox");
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
-  title: 'Zarf Documentation',
-  tagline: 'Airgap is hard. Zarf makes it easy.',
-  url: 'https://zarf.dev',
-  baseUrl: '/',
-  onBrokenLinks: 'warn',
-  onBrokenMarkdownLinks: 'warn',
-  favicon: 'img/favicon.svg',
-  organizationName: 'Defense Unicorns', // Usually your GitHub org/user name.
-  projectName: 'Zarf', // Usually your repo name.
+  title: "Zarf Documentation",
+  tagline: "Airgap is hard. Zarf makes it easy.",
+  url: "https://zarf.dev",
+  baseUrl: "/",
+  onBrokenLinks: "warn",
+  onBrokenMarkdownLinks: "throw",
+  favicon: "img/favicon.svg",
+  organizationName: "Defense Unicorns", // Usually your GitHub org/user name.
+  projectName: "Zarf", // Usually your repo name.
   markdown: {
     mermaid: true,
   },
   themes: [
-    [require.resolve('@easyops-cn/docusaurus-search-local'), { hashed: true }],
-    [require.resolve('@docusaurus/theme-mermaid'), { hashed: true }],
+    [require.resolve("@easyops-cn/docusaurus-search-local"), { hashed: true }],
+    [require.resolve("@docusaurus/theme-mermaid"), { hashed: true }],
   ],
+  staticDirectories: ["static", "../examples", "../packages"],
   presets: [
     [
-      'classic',
+      "classic",
       /** @type {import('@docusaurus/preset-classic').Options} */
       ({
         docs: {
-          path: '..',
+          path: "..",
           include: [
-            'CONTRIBUTING.md',
-            'adr/**/*.{md,mdx}',
-            'docs/**/*.{md,mdx}',
-            'examples/**/*.{md,mdx}',
-            'packages/**/*.{md,mdx}',
+            "CONTRIBUTING.md",
+            "adr/**/*.{md,mdx}",
+            "docs/**/*.{md,mdx}",
+            "examples/**/*.{md,mdx}",
+            "packages/**/*.{md,mdx}",
           ],
-          sidebarPath: require.resolve('./src/sidebars.js'),
-          // The '/x/' at the end if the editUrl is patching a defect in the plugin URL rendering. Removing it will break the base path for editing the docs.
-          editUrl: 'https://github.com/defenseunicorns/zarf/tree/main/x/',
-          routeBasePath: '/',
-          async sidebarItemsGenerator({
-            defaultSidebarItemsGenerator,
-            ...args
-          }) {
-            const sidebarItems = await defaultSidebarItemsGenerator(args)
-            if (args.item.dirName === 'docs') {
+          showLastUpdateTime: true,
+          showLastUpdateAuthor: true,
+          sidebarPath: require.resolve("./src/sidebars.js"),
+          editUrl: ({ docPath }) => {
+            // TODO: (@RAZZLE) once examples have been fixed, change this url to edit: `https://github.com/defenseunicorns/zarf/edit/main/${docPath}`
+            return `https://github.com/defenseunicorns/zarf/tree/main/${docPath}`; // <-- to view
+          },
+          routeBasePath: "/",
+          async sidebarItemsGenerator({ defaultSidebarItemsGenerator, ...args }) {
+            const sidebarItems = await defaultSidebarItemsGenerator(args);
+            if (args.item.dirName === "docs") {
               // This hack places the examples tree at the 7th position in the sidebar
               sidebarItems.splice(6, 0, {
                 type: 'category',
                 label: 'Package Examples',
                 link: {
-                  type: 'doc',
-                  id: 'examples/README',
+                  type: "doc",
+                  id: "examples/README",
                 },
                 items: [
                   {
-                    type: 'autogenerated',
-                    dirName: 'examples',
+                    type: "autogenerated",
+                    dirName: "examples",
                   },
                 ],
-              })
+              });
             }
-            if (args.item.dirName === 'examples') {
+            if (args.item.dirName === "examples") {
               // This hack removes the "Overview" page from the sidebar on the examples page
-              return sidebarItems.slice(1)
+              return sidebarItems.slice(1);
             }
-            return sidebarItems
+            return sidebarItems;
           },
         },
         blog: false,
         theme: {
-          customCss: [require.resolve('./src/css/custom.css')],
+          customCss: [require.resolve("./src/css/custom.css")],
         },
       }),
     ],
@@ -81,51 +83,51 @@ const config = {
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
       colorMode: {
-        defaultMode: 'dark',
+        defaultMode: "dark",
         disableSwitch: true,
       },
       navbar: {
         logo: {
-          alt: 'Zarf',
-          src: 'img/zarf-logo-light.svg',
-          srcDark: 'img/zarf-logo-dark.svg',
-          href: 'https://zarf.dev/',
-          target: '_self',
+          alt: "Zarf",
+          src: "img/zarf-logo-light.svg",
+          srcDark: "img/zarf-logo-dark.svg",
+          href: "https://zarf.dev/",
+          target: "_self",
         },
         items: [
           {
-            type: 'search',
-            position: 'right',
+            type: "search",
+            position: "right",
           },
           {
-            type: 'doc',
-            docId: 'docs/zarf-overview',
-            position: 'left',
-            label: 'Docs',
+            type: "doc",
+            docId: "docs/zarf-overview",
+            position: "left",
+            label: "Docs",
           },
           {
-            position: 'left',
-            label: 'Product',
-            to: 'https://zarf.dev',
-            target: '_self',
+            position: "left",
+            label: "Product",
+            to: "https://zarf.dev",
+            target: "_self",
           },
           {
-            type: 'html',
-            position: 'right',
-            className: 'navbar__item--socials-box',
+            type: "html",
+            position: "right",
+            className: "navbar__item--socials-box",
             value: SocialsBox({
-              linkClass: 'menu__link',
+              linkClass: "menu__link",
             }),
           },
         ],
       },
       footer: {
-        style: 'dark',
+        style: "dark",
         logo: {
-          alt: 'Zarf',
-          src: 'img/zarf-logo-light.svg',
-          srcDark: 'img/zarf-logo-dark.svg',
-          href: 'https://zarf.dev/',
+          alt: "Zarf",
+          src: "img/zarf-logo-light.svg",
+          srcDark: "img/zarf-logo-dark.svg",
+          href: "https://zarf.dev/",
         },
         copyright: `<p class="p-copy">Copyright © ${new Date().getFullYear()} Zarf Project, All rights reserved.</p>`,
         links: [
@@ -139,6 +141,6 @@ const config = {
         darkTheme: darkCodeTheme,
       },
     }),
-}
+};
 
-module.exports = config
+module.exports = config;

docs-website/package.json

@@ -4,7 +4,9 @@
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
+    "prestart": "cp ../zarf.schema.json ./static/zarf.schema.json",
     "start": "docusaurus start",
+    "prebuild": "cp ../zarf.schema.json ./static/zarf.schema.json",
     "build": "docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",

docs-website/src/components/ExampleYAML.js

@@ -0,0 +1,46 @@
+import React from "react";
+import { useEffect, useState } from "react";
+import CodeBlock from "@theme/CodeBlock";
+
+const FetchExampleYAML = ({ example, component, raw, showLink = true, rootFolder = "examples" }) => {
+  const [content, setContent] = useState(null);
+  const url = `/${example}/zarf.yaml`;
+
+  useEffect(() => {
+    fetch(url)
+      .then((res) => res.text())
+      .then(async (text) => {
+        if (component) {
+          const lines = text.split("\n");
+          const start = lines.indexOf(`  - name: ${component}`);
+          const end = lines.findIndex((line, index) => index > start && line.startsWith("  - name: "));
+          setContent(lines.slice(start, end).join("\n"));
+        } else {
+          setContent(text);
+        }
+      });
+  }, []);
+
+  if (!content) {
+    console.log(`Unable to fetch example YAML ${url}`)
+    return <></>
+  }
+  if (raw) {
+    return <>{content}</>;
+  }
+  return (
+    <>
+      {showLink && (
+        <p>
+          This example's full <code>zarf.yaml</code> can be viewed at{" "}
+          <a href={`/${rootFolder}/${example}/#zarf.yaml`}>{rootFolder}/{example}</a>
+        </p>
+      )}
+      <CodeBlock copy={false} language="yaml">
+        {content}
+      </CodeBlock>
+    </>
+  );
+};
+
+export default FetchExampleYAML;

docs-website/src/components/SchemaItemProperties.js

@@ -0,0 +1,65 @@
+import React from "react";
+import { useEffect, useState } from "react";
+
+const SchemaItemProperties = ({ item, include, invert }) => {
+  const [itemSchema, setItemSchema] = useState(null);
+
+  useEffect(async () => {
+    const json = await import("@site/static/zarf.schema.json");
+    setItemSchema(json.definitions[item]);
+  }, []);
+
+  if (!itemSchema) {
+    return null;
+  }
+
+  return (
+    <>
+      <table>
+        <thead>
+          <tr>
+            <th>Field</th>
+            <th>Type</th>
+            <th>Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          {itemSchema &&
+            Object.keys(itemSchema.properties)
+              .filter((key) => {
+                if (!include) {
+                  return true;
+                } else if (invert) {
+                  return !include.includes(key);
+                } else {
+                  return include.includes(key);
+                }
+              })
+              .sort()
+              .sort((key) => (itemSchema.required.includes(key) ? -1 : 1))
+              .map((key) => {
+                return (
+                  <tr key={key}>
+                    <td>
+                      <code>{key}</code>
+                      {itemSchema.required.includes(key) && <em>*</em>}
+                    </td>
+                    <td>
+                      <em>{itemSchema.properties[key].type ?? "object"}</em>
+                    </td>
+                    <td>{itemSchema.properties[key].description}</td>
+                  </tr>
+                );
+              })}
+        </tbody>
+      </table>
+      {itemSchema && itemSchema.required && itemSchema.required.some((ele) => include.includes(ele)) && (
+        <small>
+          <em>* Required field</em>
+        </small>
+      )}
+    </>
+  );
+};
+
+export default SchemaItemProperties;

docs-website/src/theme/Footer/Layout/index.js

@@ -1,19 +1,14 @@
-import React from "react";
-import clsx from "clsx";
+import React from 'react';
 
 // Reorder and remove default styling from copyright, logo, and links.
-export default function FooterLayout({ style, links, logo, copyright }) {
-  return (
-    <footer
-      className={clsx("footer", {
-        "footer--dark": style === "dark",
-      })}
-    >
-      <div className="container container-fluid">
-        {logo}
-        {copyright}
-        {links}
-      </div>
-    </footer>
-  );
+export default function FooterLayout({ links, logo, copyright }) {
+	return (
+		<footer className="footer footer--dark">
+			<div className="container container-fluid">
+				{logo}
+				{copyright}
+				{links}
+			</div>
+		</footer>
+	);
 }