Add the Further Guidance admonition + link to the VMware PCG tutorial (…

…#3379) (#3381)

* chore: Add the Further Guidance admonition

* docs: Link to the VMware PCG tutorial

* chore: Fix spelling

* chore: Implement peer review

(cherry picked from commit 51c3f8b)

Co-authored-by: Yuliia Horbenko <31223054+yuliiiah@users.noreply.github.com>

docs/docs-content/clusters/pcg/deploy-pcg/vmware.md

@@ -10,6 +10,13 @@ tags: ["pcg"]
 This guide provides you with the steps to deploy a PCG cluster to a VMware vSphere environment. Before you begin the
 installation, carefully review the [Prerequisites](#prerequisites) section.
 
+:::further
+
+Refer to our [Deploy App Workloads with a PCG](../../../tutorials/cluster-deployment/pcg/deploy-app-pcg.md) tutorial for
+detailed guidance on how to deploy app workloads with a PCG.
+
+:::
+
 ## Prerequisites
 
 :::info

docusaurus.config.js

@@ -103,7 +103,7 @@ const config = {
             },
           },
           admonitions: {
-            keywords: ["preview"],
+            keywords: ["preview", "further"],
             extendDefaults: true,
           },
           // exclude: ["api/v1/palette-apis-3-4"],
@@ -146,7 +146,7 @@ const config = {
         lastVersion: "current",
         includeCurrentVersion: true,
         admonitions: {
-          keywords: ["preview"],
+          keywords: ["preview", "further"],
           extendDefaults: true,
         },
         versions: {

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;

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);

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 {

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} />;
+}

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>
+  );
+}

src/theme/Admonition/Types.js

@@ -1,9 +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;