Polidea update - direct links to Ecosystem tabs (#9488)

* Add direct links to tabs on Ecosystem

* Fix lint errors

content/en/_index.html

@@ -111,7 +111,7 @@ description: A service mesh for observability, security in depth, and management
         </div>
 
         <div class="cta-container">
-            <a class="btn" href="/about/ecosystem">See all providers</a>
+            <a class="btn" href="/about/ecosystem#providers">See all providers</a>
         </div>
     </section>
 </main>

content/en/about/ecosystem/index.md

@@ -10,11 +10,11 @@ doc_type: about
 ---
 [comment]: <> (TODO: Replace placeholders)
 
-{{< tabset category-name="ecosystem-type" class="tabset--ecosystem" >}}
+{{< tabset category-name="ecosystem-type" class="tabset--ecosystem" forget-tab=true >}}
 
     {{< tab
         name="providers"
-        category-value="default"
+        category-value="providers"
         description="Locality-weighted load balancing allows administrators to control the distribution of traffic to endpoints based on the localities of where the traffic originates and where it will terminate."
     >}}
 
@@ -24,7 +24,7 @@ doc_type: about
 
     {{< tab
         name="pro services"
-        category-value="pro_services"
+        category-value="services"
         description="Locality-weighted load balancing allows administrators to control the distribution of traffic to endpoints based on the localities of where the traffic originates and where it will terminate."
     >}}
 

layouts/shortcodes/tabset.html

@@ -3,13 +3,14 @@
 {{- $tabs := .Scratch.Get "tabs" -}}
 {{- $category_name := trim (.Get "category-name") " " -}}
 {{ $tab_set_class := .Get "class" }}
+{{ $forget_tab := .Get "forget-tab" }}
 
 {{- if .Inner -}}
     {{- /* We don't use the inner content, but Hugo needs this reference as a trigger to indicate this shortcode has a content area. */ -}}
 {{- end -}}
 
 <div id="{{ $tab_set_id }}" role="tablist" class="tabset {{ if $tab_set_class }}{{ $tab_set_class }}{{ end }}">
-    <div class="tab-strip" data-category-name="{{ $category_name }}">
+    <div class="tab-strip" data-category-name="{{ $category_name }}" {{ if $forget_tab }}data-forget-tab{{ end }}>
         {{- range $i, $e := $tabs -}}
             {{- $id := printf "%s-%d" $tab_set_id $i -}}
             <button {{ if eq $i 0 }}aria-selected="true"{{ else }}tabindex="-1"{{ end }} data-category-value="{{ .category_value }}"

src/ts/tabset.ts

@@ -52,6 +52,7 @@ function handleTabs(): void {
         }
 
         const categoryName = strip.dataset.categoryName;
+        const forgetTab = strip.dataset.forgetTab !== undefined;
         const panels = tabset.querySelectorAll<HTMLElement>("[role=tabpanel]");
 
         const tabs: HTMLElement[] = [];
@@ -59,6 +60,8 @@ function handleTabs(): void {
             tabs.push(tab);
         });
 
+        const categoryValues = tabs.map(tab => tab.dataset.categoryValue);
+
         const kbdnav = new KbdNav(tabs);
 
         function activateTab(tab: HTMLElement): void {
@@ -87,7 +90,20 @@ function handleTabs(): void {
         }
 
         if (categoryName) {
-            const categoryValue = readLocalStorage(categoryName);
+            let categoryValue;
+            const hashTab = location.hash.replace("#", "");
+
+            if (hashTab) {
+                if (categoryValues.indexOf(hashTab) > -1) {
+                    categoryValue = hashTab;
+                }
+            } else if (!forgetTab) {
+                categoryValue = readLocalStorage(categoryName);
+                if (categoryValue) {
+                    selectTabsets(categoryName, categoryValue);
+                }
+            }
+
             if (categoryValue) {
                 selectTabsets(categoryName, categoryValue);
             }
@@ -102,7 +118,9 @@ function handleTabs(): void {
                 if (categoryName) {
                     const categoryValue = tab.dataset.categoryValue;
                     if (categoryValue) {
+                        if (!forgetTab) {
                             localStorage.setItem(categoryName, categoryValue);
+                        }
                         selectTabsets(categoryName, categoryValue);
                     }
                 }
@@ -114,7 +132,9 @@ function handleTabs(): void {
                 if (categoryName) {
                     const categoryValue = tab.dataset.categoryValue;
                     if (categoryValue) {
+                        if (!forgetTab) {
                             localStorage.setItem(categoryName, categoryValue);
+                        }
                         selectTabsets(categoryName, categoryValue);
                     }
                 }