[version-3-4] Add the Further Guidance admonition + link to the VMwar…

…e PCG tutorial (#3379) (#3385) * Add the Further Guidance admonition + link to the VMware PCG tutorial (#3379) * chore: Add the Further Guidance admonition * docs: Link to the VMware PCG tutorial * chore: Fix spelling * chore: Implement peer review * chore: Remove the TP admonition * chore: Add the TP admonition
spectrocloud · Jul 16, 2024 · 3fc06ee · 3fc06ee
1 parent 4bc1dc8
commit 3fc06ee
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 6 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -101,6 +101,10 @@ const config = {
               label: "v3.4.x",
             },
           },
+          admonitions: {
+            keywords: ["preview", "further"],
+            extendDefaults: true,
+          },
           // exclude: ["api/v1/palette-apis-3-4"],
 
           sidebarPath: require.resolve("./sidebars.js"),
@@ -140,6 +144,10 @@ const config = {
         docItemComponent: "@theme/ApiItem",
         lastVersion: "current",
         includeCurrentVersion: true,
+        admonitions: {
+          keywords: ["preview", "further"],
+          extendDefaults: true,
+        },
         versions: {
           current: {
             label: "3.4.x",

diff --git a/src/css/custom.scss b/src/css/custom.scss
@@ -39,6 +39,8 @@ html {
   --openapi-demo-font-size-code: 10px;
   --openapi-demo-font-size-input: 10px;
   --custom-sidebar-item-color: #aeb1be;
+  --custom-purple-border-color: #7d77ca;
+  --custom-byzantine-border-color: #b54aa1;
 }
 
 .markdown h1:first-child {
@@ -212,10 +214,15 @@ p img.markdown-image {
 }
 
 .admonition-tech-preview {
-  border: 1px solid var(--custom-purple-important-color);
+  border: 1px solid var(--custom-purple-border-color);
   background-color: var(--custom-purple-alert-bg-color);
 }
 
+.admonition-further-guidance {
+  border: 1px solid var(--custom-byzantine-border-color);
+  background-color: var(--custom-byzantine-alert-bg-color);
+}
+
 .desktop-only-display {
   @media (max-width: 768px) {
     display: none;

diff --git a/src/css/dark-mode.scss b/src/css/dark-mode.scss
@@ -28,23 +28,23 @@ html[data-theme="dark"] {
   --ifm-color-warning-contrast-foreground: #b5bdd4;
   --ifm-color-warning-dark: #ffc832;
   --ifm-alert-padding-horizontal: 1.5rem;
-  --custom-table-header-color: #1c202b;
-  --custom-purple-important-color: #7d77ca;
-  --custom-purple-alert-bg-color: #1a173b;
   --simpleCardPrimary: #72a8f5;
   --simpleCardPrimaryHover: #9cc2f8;
   --simpleCardSecondary: #192c47;
   --simpleCardSecondaryHover: #213e67;
   --simpleCardSubtle: #b5bdd4;
   --simpleCardButtonIcon: #818ba9;
   --simpleCardBorder: #1f263c;
+  --custom-table-header-color: #1c202b;
   --custom-release-notes-background-color: #2b323c;
   --custom-release-notes-background-font-color: var(--ifm-dropdown-link-color);
   --custom-release-notes-active-option-hover: var(--ifm-dropdown-hover-background-color);
   --custom-release-notes-selected-background: #2b323c;
   --custom-release-notes-option-font-color: white;
   --custom-release-notes-menu-padding: #2b323c;
   --custom-sidebar-icon-color: #aeb1be;
+  --custom-purple-alert-bg-color: #1a173b;
+  --custom-byzantine-alert-bg-color: #4a1e42;
 
   .theme-last-updated {
     color: var(--ifm-font-color-base);

diff --git a/src/css/light-mode.scss b/src/css/light-mode.scss
@@ -26,8 +26,6 @@ html[data-theme="light"] {
   --ifm-color-warning-dark: #a8882f;
   --ifm-alert-padding-horizontal: 1.5rem;
   --custom-table-header-color: #f7f7f7;
-  --custom-purple-important-color: #7d77ca;
-  --custom-purple-alert-bg-color: #dcdaf9;
   --simpleCardPrimary: #4a8ff1;
   --simpleCardPrimaryHover: #3f74be;
   --simpleCardSecondary: #dbecff;
@@ -41,6 +39,8 @@ html[data-theme="light"] {
   --custom-release-notes-selected-background: #bec0c4;
   --custom-release-notes-option-font-color: black;
   --custom-release-notes-menu-padding: white;
+  --custom-purple-alert-bg-color: #dcdaf9;
+  --custom-byzantine-alert-bg-color: #f8d6f2;
 
   .theme-doc-sidebar-item-category-level-1 .menu__list-item {
     .menu__link:hover {

diff --git a/src/theme/Admonition/Icon/FurtherGuidance.js b/src/theme/Admonition/Icon/FurtherGuidance.js
@@ -0,0 +1,7 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faGraduationCap } from "@fortawesome/free-solid-svg-icons";
+
+export default function IconFurtherGuidance() {
+  return <FontAwesomeIcon icon={faGraduationCap} />;
+}
diff --git a/src/theme/Admonition/Icon/TechPreview.js b/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() {
+  return <FontAwesomeIcon icon={faFlag} />;
+}
diff --git a/src/theme/Admonition/Type/FurtherGuidance.js b/src/theme/Admonition/Type/FurtherGuidance.js
@@ -0,0 +1,29 @@
+import React from "react";
+import clsx from "clsx";
+import Translate from "@docusaurus/Translate";
+import AdmonitionLayout from "@theme/Admonition/Layout";
+import IconFurtherGuidance from "../Icon/FurtherGuidance";
+
+const infimaClassName = "alert admonition-further-guidance";
+
+const defaultProps = {
+  icon: <IconFurtherGuidance />,
+  title: (
+    <Translate
+      id="theme.admonition.review"
+      description="The default label used for the Further Guidance admonition (:::further)"
+    >
+      further guidance
+    </Translate>
+  ),
+  defaultText: "",
+};
+
+export default function AdmonitionTypeFurtherGuidance(props) {
+  const text = props.children || defaultProps.defaultText;
+  return (
+    <AdmonitionLayout {...defaultProps} className={clsx(infimaClassName, props.className)}>
+      {text}
+    </AdmonitionLayout>
+  );
+}
diff --git a/src/theme/Admonition/Type/TechPreview.js b/src/theme/Admonition/Type/TechPreview.js
@@ -0,0 +1,30 @@
+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 admonition-tech-preview";
+
+const defaultProps = {
+  icon: <IconTechPreview />,
+  title: (
+    <Translate
+      id="theme.admonition.review"
+      description="The default label used for the Tech Preview admonition (:::preview)"
+    >
+      tech preview
+    </Translate>
+  ),
+  defaultText:
+    "This is a Tech Preview feature and is subject to change. Do not use this feature in production workloads.",
+};
+
+export default function AdmonitionTypeTechPreview(props) {
+  const text = props.children || defaultProps.defaultText;
+  return (
+    <AdmonitionLayout {...defaultProps} className={clsx(infimaClassName, props.className)}>
+      {text}
+    </AdmonitionLayout>
+  );
+}
diff --git a/src/theme/Admonition/Types.js b/src/theme/Admonition/Types.js
@@ -0,0 +1,11 @@
+import DefaultAdmonitionTypes from "@theme-original/Admonition/Types";
+import AdmonitionTypeTechPreview from "../Admonition/Type/TechPreview";
+import AdmonitionTypeFurtherGuidance from "./Type/FurtherGuidance";
+
+const AdmonitionTypes = {
+  ...DefaultAdmonitionTypes,
+  preview: AdmonitionTypeTechPreview,
+  further: AdmonitionTypeFurtherGuidance,
+};
+
+export default AdmonitionTypes;