chore: Add a custom admonition for Tech Preview content

docs/docs-content/introduction/introduction.md

@@ -7,69 +7,62 @@ hide_table_of_contents: false
 slug: /
 ---
 
-
 Palette is a complete and integrated platform that enables organizations to effectively manage the entire lifecycle of any combination of new or existing, simple or complex, small or large Kubernetes environments, whether in a data center or the cloud.
- 
+
 With a unique approach to managing multiple clusters, Palette gives IT teams complete control, visibility, and production-scale efficiencies to provide developers with highly curated Kubernetes stacks and tools based on their specific needs, with granular governance and enterprise-grade security.
- 
- Palette VerteX edition is also available to meet the stringent requirements of regulated industries such as government and public sector organizations. Palette VerteX integrates Spectro Cloud’s Federal Information Processing Standards (FIPS) 140-2 cryptographic modules. To learn more about FIPS-enabled Palette, check out [Palette VerteX](../vertex/vertex.md). 
- 
+
+Palette VerteX edition is also available to meet the stringent requirements of regulated industries such as government and public sector organizations. Palette VerteX integrates Spectro Cloud’s Federal Information Processing Standards (FIPS) 140-2 cryptographic modules. To learn more about FIPS-enabled Palette, check out [Palette VerteX](../vertex/vertex.md).
+
 ![Palette product high level overview eager-load](/docs_introduction_product-overview.png)
- 
+
 ## What Makes Palette Different?
 
 <br />
 
-
 ### Full-Stack Management
 
 Unlike rigid and prepackaged Kubernetes solutions, Palette allows users to construct flexible stacks from OS, Kubernetes, container network interfaces (CNI), and container storage interfaces (CSI) to additional add-on application services. As a result, the entire stack - not just the infrastructure - of Kubernetes is deployed, updated, and managed as one unit, without split responsibility from virtual machines, base OS, Kubernetes infra, and add-ons.
- 
+
 ### End-to-End Declarative Lifecycle Management
 
 Palette offers the most comprehensive profile-based management for Kubernetes. It enables teams to drive consistency, repeatability, and operational efficiency across multiple clusters in multiple environments with comprehensive day 0 - day 2 management.
- 
+
 ### Any Environment
 
 Palette has the richest coverage in supported environments that includes:
+
 - Public Clouds: AWS, Azure, and Google Cloud (both IaaS and managed Kubernetes services EKS/AKS/GKE)
 - Data Centers: VMware, OpenStack
 - Bare Metal: Canonical MaaS
 - Edge
-
-
-
+
 ## What is Under the Hood?
 
 Palette uniquely extends and integrates the Cloud Native Computing Foundation (CNCF) open-source Cluster API project. Palette does this by providing comprehensive full-stack modeling and orchestration, governance, security, and day 0 - day 2 management capabilities.
- 
+
 With Palette’s Cluster Profiles, teams can define full-stack clusters that include both the Kubernetes infrastructure and any add-on application services. Cluster Profiles enable a repeatable way to deploy and reuse clusters across any environment. Palette also enables importing of existing Kubernetes environments and creating equivalent Cluster Profiles.
-
-
+
 ![2-what-is-sc](/docs_introduction_palette-components.png)
-
-## Who Can Benefit From Palette?
 
+## Who Can Benefit From Palette?
 
 <br />
-
 
 ### Developers
 
 Development teams will get the flexibility and freedom they are looking for to increase the speed of innovation, whether it is the cluster template with the add-on application services or choosing a Kubernetes version with integrations like logging, monitoring, and service mesh for your application development. They need not worry about Kubernetes configurations but focus on the stuff that matters.
- 
+
 ### IT Operations and SREs
- 
+
 Declarative management makes life easier for IT teams, with consistency, repeatability, and all the enterprise-grade controls and governance they need - especially when moving to production [Cluster Profiles](/glossary-all#clusterprofile) enable them to define and re-use full-stack clusters and support them across the entire lifecycle without having to write scripts, as well as integrate with existing tools and methodologies.
-
-
+
 ### IT Executives
-
-With an open and enterprise-grade platform, IT leaders can get peace of mind without being locked into proprietary orchestration technologies or one-size-fits-all solutions. This helps lower the total cost of ownership (TCO) and reduce operational risk.
 
+With an open and enterprise-grade platform, IT leaders can get peace of mind without being locked into proprietary orchestration technologies or one-size-fits-all solutions. This helps lower the total cost of ownership (TCO) and reduce operational risk.
 
 ## Next Steps
-Learn more about Palette and how it can improve your Kubernetes experience and those in your organization. Try [Palette](https://console.spectrocloud.com/) for free today and experience a better way of working with Kubernetes. 
+
+Learn more about Palette and how it can improve your Kubernetes experience and those in your organization. Try [Palette](https://console.spectrocloud.com/) for free today and experience a better way of working with Kubernetes.
 
 - [Try Palette for Free](../getting-started/palette-freemium.md)
 

docusaurus.config.js

@@ -1,17 +1,13 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 require("dotenv").config();
-const themes = require('prism-react-renderer').themes;
+const themes = require("prism-react-renderer").themes;
 const lightCodeTheme = themes.oceanicNext;
 const darkCodeTheme = themes.dracula;
 const redirects = require("./redirects");
-const ArchivedVersions = require('./archiveVersions.json');
-const {
-  pluginPacksAndIntegrationsData
-} = require("./plugins/packs-integrations");
-const {
-  pluginImportFontAwesomeIcons
-} = require("./plugins/font-awesome");
+const ArchivedVersions = require("./archiveVersions.json");
+const { pluginPacksAndIntegrationsData } = require("./plugins/packs-integrations");
+const { pluginImportFontAwesomeIcons } = require("./plugins/font-awesome");
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -102,6 +98,10 @@ const config = {
               label: "latest",
             },
           },
+          admonitions: {
+            keywords: ["preview"],
+            extendDefaults: true,
+          },
           // exclude: ["api/v1/palette-apis-3-4"],
 
           sidebarPath: require.resolve("./sidebars.js"),
@@ -116,12 +116,11 @@ const config = {
             });
             // This is an override to the default sidebar items generator.
             // This injects the "Privacy Settings" link at the bottom of the sidebar.
-            sidebarItems.push(
-              {
-                type: 'html',
-                value: '<a class="menu__link" href="#" onClick="UC_UI.showSecondLayer();"><svg style="margin-right: 16px;" focusable="false" data-icon="eye" class="svg-inline--fa fa-eye" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 576 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="#FFFFFF" d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"/></svg>Privacy Settings</a>',
-              },
-            );
+            sidebarItems.push({
+              type: "html",
+              value:
+                '<a class="menu__link" href="#" onClick="UC_UI.showSecondLayer();"><svg style="margin-right: 16px;" focusable="false" data-icon="eye" class="svg-inline--fa fa-eye" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 576 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="#FFFFFF" d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"/></svg>Privacy Settings</a>',
+            });
             return sidebarItems;
           },
           editUrl: "https://github.com/spectrocloud/librarium/blob/master",
@@ -151,7 +150,7 @@ const config = {
         includeCurrentVersion: true,
         versions: {
           current: {
-            label: "latest"
+            label: "latest",
           },
         },
         sidebarPath: require.resolve("./apisidebar.js"),
@@ -288,25 +287,21 @@ const config = {
             position: "left",
             docsPluginId: "default",
             dropdownItemsAfter: [
-              ...Object.entries(ArchivedVersions).map(
-                ([versionName, versionUrl]) => ({
-                  href: versionUrl,
-                  label: versionName,
-                })
-              ),
+              ...Object.entries(ArchivedVersions).map(([versionName, versionUrl]) => ({
+                href: versionUrl,
+                label: versionName,
+              })),
             ],
           },
           {
             type: "docsVersionDropdown",
             position: "left",
             docsPluginId: "api",
             dropdownItemsAfter: [
-              ...Object.entries(ArchivedVersions).map(
-                ([versionName, versionUrl]) => ({
-                  href: versionUrl,
-                  label: versionName,
-                })
-              ),
+              ...Object.entries(ArchivedVersions).map(([versionName, versionUrl]) => ({
+                href: versionUrl,
+                label: versionName,
+              })),
             ],
           },
         ],
@@ -396,4 +391,4 @@ const config = {
       },
     },
 };
-module.exports = config;
+module.exports = config;

src/css/custom.scss

@@ -208,3 +208,8 @@ p img.markdown-image {
   margin-right: auto;
   border-radius: 1vw;
 }
+
+.custom-admonition {
+  border: 1px solid var(--custom-important-color);
+  background-color: var(--custom-alert-bg-color);
+}

src/css/dark-mode.scss

@@ -29,6 +29,8 @@ html[data-theme="dark"] {
   --ifm-color-warning-dark: #ffc832;
   --ifm-alert-padding-horizontal: 1.5rem;
   --custom-table-header-color: #1c202b;
+  --custom-important-color: #7d77ca;
+  --custom-alert-bg-color: #1a173b;
 
   .theme-last-updated {
     color: var(--ifm-font-color-base);

src/css/light-mode.scss

@@ -26,6 +26,8 @@ html[data-theme="light"] {
   --ifm-color-warning-dark: #a8882f;
   --ifm-alert-padding-horizontal: 1.5rem;
   --custom-table-header-color: #f7f7f7;
+  --custom-important-color: #7d77ca;
+  --custom-alert-bg-color: #dcdaf9;
 
   .theme-doc-sidebar-item-category-level-1 .menu__list-item {
     .menu__link:hover {

src/theme/Admonition/Icon/TechPreview.js

@@ -0,0 +1,7 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faFlag } from "@fortawesome/free-solid-svg-icons";
+
+export default function IconTechPreview(props) {
+  return <FontAwesomeIcon icon={faFlag} />;
+}

src/theme/Admonition/Type/TechPreview.js

@@ -0,0 +1,31 @@
+import React from "react";
+import clsx from "clsx";
+import Translate from "@docusaurus/Translate";
+import AdmonitionLayout from "@theme/Admonition/Layout";
+import IconTechPreview from "../Icon/TechPreview";
+
+const infimaClassName = "alert custom-admonition";
+
+const defaultProps = {
+  icon: <IconTechPreview />,
+  title: (
+    <Translate
+      id="theme.admonition.review"
+      description="The default label used for the Tech Preview admonition (:::preview)"
+    >
+      tech preview
+    </Translate>
+  ),
+};
+
+export default function AdmonitionTypeTechPreview(props) {
+  return (
+    <AdmonitionLayout
+      {...defaultProps}
+      {...props}
+      className={clsx(infimaClassName, props.className)}
+    >
+      {props.children}
+    </AdmonitionLayout>
+  );
+}

src/theme/Admonition/Types.js

@@ -0,0 +1,9 @@
+import DefaultAdmonitionTypes from '@theme-original/Admonition/Types';
+import AdmonitionTypeTechPreview from '../Admonition/Type/TechPreview';
+
+const AdmonitionTypes = {
+  ...DefaultAdmonitionTypes,
+  preview: AdmonitionTypeTechPreview,
+};
+
+export default AdmonitionTypes;

src/theme/Admonition/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import Admonition from '@theme-original/Admonition';
+
+export default function AdmonitionWrapper(props) {
+  return (
+    <>
+      <Admonition {...props} />
+    </>
+  );
+}