feat: EKS Upgrades link-out with new "Explore" badge (#1116)

Co-authored-by: Ashok Srirama <[email protected]>

docs/style_guide.md

@@ -42,6 +42,18 @@ sidebar_custom_props: {"info": true}
 ---
 ```
 
+To mark your module as external content, which at the moment is only used for other AWS workshops, place the following in the header of your markdown file:
+
+```
+---
+...
+sidebar_custom_props:
+  {
+    "explore": "https://<external link here>"
+  }
+---
+```
+
 ### Navigating the AWS console
 
 There are instances where the user needs to navigate to specific screens in the AWS console. It is preferable to provide a link to the exact screen if possible, or a close as can be done.

website/docs/fundamentals/cluster-upgrades/index.md

@@ -0,0 +1,14 @@
+---
+title: "EKS Cluster Upgrades"
+sidebar_custom_props:
+  {
+    "explore": "https://catalog.us-east-1.prod.workshops.aws/workshops/693bdee4-bc31-41d5-841f-54e3e54f8f4a",
+  }
+sidebar_position: 90
+---
+
+The Kubernetes project is constantly updated with new features, design updates, and bug fixes. New minor versions are released on average every four months and are supported for about twelve months after their release. So, one of the key considerations for Amazon EKS users is to plan and execute these version updates in a timely manner.
+
+Refer the Amazon EKS Upgrades Workshop below for step-by-step guidance and best practices in planning and upgrading EKS Clusters. It includes a series of labs describing various stages of an upgrade process, starting from preparation, choosing an upgrade plan, executing the upgrade, while maintaining availability during the process.
+
+<LaunchButton url="https://catalog.us-east-1.prod.workshops.aws/workshops/693bdee4-bc31-41d5-841f-54e3e54f8f4a" label="Amazon EKS Upgrades Workshop" />

website/src/css/custom.scss

@@ -207,6 +207,10 @@
   background-color: #ff9900;
 }
 
+.explore {
+  background-color: #0073bb;
+}
+
 .category-wrapper {
   display: flex;
   width: 100%;

website/src/theme/DocSidebarItem/Category/index.js

@@ -180,6 +180,11 @@ export default function DocSidebarItemCategory({
               ) : (
                 <span></span>
               )}
+              {item.customProps?.explore ? (
+                <span className="badge explore">EXPLORE</span>
+              ) : (
+                <span></span>
+              )}
             </div>
           </div>
         </Link>

website/src/theme/DocSidebarItem/Link/index.js

@@ -56,9 +56,27 @@ export default function DocSidebarItemLink({
             ) : (
               <span></span>
             )}
+            {item.customProps?.explore ? (
+              <span className="badge explore">EXPLORE</span>
+            ) : (
+              <span></span>
+            )}
           </div>
         </div>
         {!isInternalLink && <IconExternalLink />}
+        {item.customProps?.explore && (
+          <button
+            aria-label={`Open external link for ${label}`}
+            type="button"
+            className="clean-btn menu__link"
+            onClick={(e) => {
+              e.stopPropagation();
+              window.open(item.customProps.explore, "_blank", "noopener");
+            }}
+          >
+            <IconExternalLink />
+          </button>
+        )}
       </Link>
     </li>
   );