_content: Why Go/Solutions routing update

- Update links: solutions#case-studies => solutions/case-studies.
- Update links: solutions#use-cases    => solutions/use-cases.
- Adds blank markdown files as place holders for these pages.
- Removes js for tabbing because it's no longer used.
- Convert solutions index page into directory page (no design).
- Add old slider to case studies page so it isn't missing from a deploy

Screenshot: https://drive.google.com/file/d/1FWC_d6SUqPZ0UQfETCyvOjcvEUCI4KGA/view?usp=sharing

Change-Id: If9e2f866c5e3252cdd943068d212f0264f01b1e5
Reviewed-on: https://go-review.googlesource.com/c/website/+/436335
Reviewed-by: David Chase <drchase@google.com>
TryBot-Result: Gopher Robot <gobot@golang.org>
Reviewed-by: Hyang-Ah Hana Kim <hyangah@gmail.com>
Run-TryBot: Jamal Carvalho <jamal@golang.org>

_content/index.md

@@ -240,7 +240,7 @@ func main() {
                 alt="Go Gopher is skateboarding.">
             </div>
             <div class="WhyGo-reasonShowMoreLink">
-              <a href="/solutions/#use-cases">More use cases <i
+              <a href="/solutions/use-cases">More use cases <i
               class="material-icons
               WhyGo-forwardArrowIcon">arrow_forward</i></a>
             </div>

_content/js/site.js

@@ -207,97 +207,6 @@ window.initFuncs = [];
     handleNavigationDrawerInactive(header);
   }
 
-  function registerSolutionsTabs() {
-    // Handle tab navigation on Solutions page.
-    const tabList = document.querySelector('.js-solutionsTabs');
-
-    if (tabList) {
-      const tabs = tabList.querySelectorAll('[role="tab"]');
-      let tabFocus = getTabFocus();
-
-      changeTabs({target: tabs[tabFocus]});
-
-      tabs.forEach(tab => {
-        tab.addEventListener('click', changeTabs);
-      });
-
-      // Enable arrow navigation between tabs in the tab list
-      tabList.addEventListener('keydown', e => {
-        // Move right
-        if (e.keyCode === 39 || e.keyCode === 37) {
-          tabs[tabFocus].setAttribute('tabindex', -1);
-          if (e.keyCode === 39) {
-            tabFocus++;
-            // If we're at the end, go to the start
-            if (tabFocus >= tabs.length) {
-              tabFocus = 0;
-            }
-            // Move left
-          } else if (e.keyCode === 37) {
-            tabFocus--;
-            // If we're at the start, move to the end
-            if (tabFocus < 0) {
-              tabFocus = tabs.length - 1;
-            }
-          }
-          tabs[tabFocus].setAttribute('tabindex', 0);
-          tabs[tabFocus].focus();
-          setTabFocus(tabs[tabFocus].id);
-        }
-      });
-
-      function getTabFocus() {
-        const hash = window.location.hash;
-
-        switch (hash) {
-          case '#use-cases':
-            return 1;
-          case '#case-studies':
-          default:
-            return 0;
-        }
-      }
-
-      function setTabFocus(id) {
-        switch (id) {
-          case 'btn-tech':
-            tabFocus = 1;
-            window.location.hash = '#use-cases';
-            break;
-          case 'btn-companies':
-          default:
-            window.location.hash = '#case-studies';
-            tabFocus = 0;
-        }
-      }
-
-      function changeTabs(e) {
-        const target = e.target;
-        const parent = target.parentNode;
-        const grandparent = parent.parentNode;
-
-        // Remove all current selected tabs
-        parent
-          .querySelectorAll('[aria-selected="true"]')
-          .forEach(t => t.setAttribute('aria-selected', false));
-
-        // Set this tab as selected
-        target.setAttribute('aria-selected', true);
-        setTabFocus(target.id);
-
-        // Hide all tab panels
-        grandparent
-          .querySelectorAll('[role="tabpanel"]')
-          .forEach(panel => panel.setAttribute('hidden', true));
-
-        // Show the selected panel
-        grandparent.parentNode
-          .querySelector(`#${target.getAttribute('aria-controls')}`)
-          .removeAttribute('hidden');
-      }
-    }
-  }
-
   /**
    * Attempts to detect user's operating system and sets the download
    * links accordingly
@@ -407,7 +316,6 @@ window.initFuncs = [];
 
   window.addEventListener('DOMContentLoaded', () => {
     registerHeaderListeners();
-    registerSolutionsTabs();
     setDownloadLinks();
     setThemeButtons();
     setVersionSpans();

_content/menus.yaml

@@ -4,10 +4,10 @@ main:
     children:
       - name: Case Studies
         explanation: Common problems companies solve with Go
-        url: /solutions#case-studies
+        url: /solutions/case-studies
       - name: Use Cases
         explanation: Stories about how and why companies use Go
-        url: /solutions#use-cases
+        url: /solutions/use-cases
       - name: Security Policy
         explanation: How Go can help keep you secure by default
         url: /security/policy/
@@ -72,9 +72,9 @@ footer:
     url: /solutions/
     children:
       - name: Use Cases
-        url: /solutions/#use-cases
+        url: /solutions/use-cases
       - name: Case Studies
-        url: /solutions/#case-studies
+        url: /solutions/case-studies
 
   - name: Get Started
     url: /learn/

_content/solutions/case-studies.md

@@ -4,6 +4,60 @@ layout: none
 ---
 
 {{$solutions := pages "/solutions/*"}}
+<section class="Solutions-headline">
+  <div class="GoCarousel" id="SolutionsHeroCarousel-carousel">
+    <div class="GoCarousel-controlsContainer">
+      <div class="GoCarousel-wrapper SolutionsHeroCarousel-wrapper">
+      {{ breadcrumbs . }}
+        <ul class="js-solutionsHeroCarouselSlides SolutionsHeroCarousel-slides">
+          {{- $n := 0}}
+          {{- range newest $solutions}}
+            {{- if eq .series "Case Studies"}}
+              {{- $n = add $n 1}}
+              {{- if le $n 3}}
+              <li class="SolutionsHeroCarousel-slide">
+                <div class="Solutions-headlineImg">
+                  <img
+                    src="/images/{{.carouselImgSrc}}"
+                    alt="{{(or .linkTitle .title)}}"
+                  />
+                </div>
+                <div class="Solutions-headlineText">
+                  <p class="Solutions-headlineNotification">RECENTLY UPDATED</p>
+                  <h2>
+                    {{(or .linkTitle .title)}}
+                  </h2>
+                  <p class="Solutions-headlineBody">
+                    {{with .quote}}{{.}}{{end}}
+                    <a href="{{.URL}}"
+                      >Learn more
+                      <i class="material-icons Solutions-forwardArrowIcon"
+                        >arrow_forward</i
+                      >
+                    </a>
+                  </p>
+                </div>
+              </li>
+              {{- end}}
+            {{- end}}
+          {{- end}}
+        </ul>
+      </div>
+      <button
+        class="js-solutionsHeroCarouselPrev GoCarousel-controlPrev GoCarousel-controlPrev-solutionsHero"
+        hidden
+      >
+        <i class="GoCarousel-icon material-icons">navigate_before</i>
+      </button>
+      <button
+        class="js-solutionsHeroCarouselNext GoCarousel-controlNext GoCarousel-controlNext-solutionsHero"
+      >
+        <i class="GoCarousel-icon material-icons">navigate_next</i>
+      </button>
+    </div>
+  </div>
+</section>
+
 <section class="Solutions-useCases">
   <div class="Container">
     <ul class="MarketingCardList">

_content/solutions/index.md

@@ -1,204 +1,12 @@
 ---
 title: Why Go
-layout: none
+layout: article
 ---
+<h2><a href="/solutions/case-studies">Case Studies</a></h2>
+Common problems companies solve with Go.
 
-{{$solutions := pages "/solutions/*"}}
-<section class="Solutions-headline">
-  <div class="GoCarousel" id="SolutionsHeroCarousel-carousel">
-    <div class="GoCarousel-controlsContainer">
-      <div class="GoCarousel-wrapper SolutionsHeroCarousel-wrapper">
-      {{ breadcrumbs . }}
-        <ul class="js-solutionsHeroCarouselSlides SolutionsHeroCarousel-slides">
-          {{- $n := 0}}
-          {{- range newest $solutions}}
-            {{- if eq .series "Case Studies"}}
-              {{- $n = add $n 1}}
-              {{- if le $n 3}}
-              <li class="SolutionsHeroCarousel-slide">
-                <div class="Solutions-headlineImg">
-                  <img
-                    src="/images/{{.carouselImgSrc}}"
-                    alt="{{(or .linkTitle .title)}}"
-                  />
-                </div>
-                <div class="Solutions-headlineText">
-                  <p class="Solutions-headlineNotification">RECENTLY UPDATED</p>
-                  <h2>
-                    {{(or .linkTitle .title)}}
-                  </h2>
-                  <p class="Solutions-headlineBody">
-                    {{with .quote}}{{.}}{{end}}
-                    <a href="{{.URL}}"
-                      >Learn more
-                      <i class="material-icons Solutions-forwardArrowIcon"
-                        >arrow_forward</i
-                      >
-                    </a>
-                  </p>
-                </div>
-              </li>
-              {{- end}}
-            {{- end}}
-          {{- end}}
-        </ul>
-      </div>
-      <button
-        class="js-solutionsHeroCarouselPrev GoCarousel-controlPrev GoCarousel-controlPrev-solutionsHero"
-        hidden
-      >
-        <i class="GoCarousel-icon material-icons">navigate_before</i>
-      </button>
-      <button
-        class="js-solutionsHeroCarouselNext GoCarousel-controlNext GoCarousel-controlNext-solutionsHero"
-      >
-        <i class="GoCarousel-icon material-icons">navigate_next</i>
-      </button>
-    </div>
-  </div>
-</section>
-<section class="Solutions-useCases">
-  <div class="Container">
-    <div class="SolutionsTabs-tabList js-solutionsTabs" role="tablist">
-      <button
-        role="tab"
-        aria-selected="true"
-        class="SolutionsTabs-tab"
-        id="btn-companies"
-        aria-controls="tab-companies"
-      >
-        Case studies
-      </button>
-      <button
-        role="tab"
-        aria-selected="false"
-        class="SolutionsTabs-tab"
-        id="btn-tech"
-        aria-controls="tab-tech"
-      >
-        Use cases
-      </button>
-      <hr />
-    </div>
-    <ul
-      class="js-solutionsList Solutions-cardList"
-      aria-expanded="true"
-      aria-labelledby="btn-companies"
-      id="tab-companies"
-      role="tabpanel"
-      tabindex="0"
-    >
-      {{- range $solutions}}
-      {{- if eq .series "Case Studies"}}
-      <li class="Solutions-card">
-        {{- if .link}}
-        <a
-          href="{{.link}}"
-          target="_blank"
-          rel="noopener"
-          class="Solutions-useCaseLink"
-        >
-          <div
-            class="Solutions-useCaseLogo Solutions-useCaseLogo--{{.company}}"
-          >
-            <img
-              class="DarkMode-img"
-              loading="lazy"
-              alt="{{.company}}"
-              src="/images/logos/{{.logoSrcDark}}"
-            />
-            <img
-              class="LightMode-img"
-              loading="lazy"
-              alt="{{.company}}"
-              src="/images/logos/{{.logoSrc}}"
-            />
-          </div>
-          <div class="Solutions-useCaseBody">
-            <h3 class="Solutions-useCaseTitle">{{or .linkTitle .title}}</h3>
-            <p class="Solutions-useCaseDescription">
-              {{.description}}
-            </p>
-          </div>
-          <p class="Solutions-useCaseAction">
-            View blog post
-            <i class="material-icons Solutions-forwardArrowIcon">open_in_new</i>
-          </p>
-        </a>
-        {{- else}}
-        <a href="{{.URL}}" class="Solutions-useCaseLink">
-          <div class="Solutions-useCaseLogo">
-            <img
-              class="DarkMode-img"
-              loading="lazy"
-              alt="{{.company}}"
-              src="/images/logos/{{.logoSrcDark}}"
-            />
-            <img
-              class="LightMode-img"
-              loading="lazy"
-              alt="{{.company}}"
-              src="/images/logos/{{.logoSrc}}"
-            />
-          </div>
-          <div class="Solutions-useCaseBody">
-            <h3 class="Solutions-useCaseTitle">{{or .linkTitle .title}}</h3>
-            <p class="Solutions-useCaseDescription">
-              {{with .quote}}{{.}}{{end}}
-            </p>
-          </div>
-          <p class="Solutions-useCaseAction">View case study</p>
-        </a>
-        {{- end}}
-      </li>
-      {{- end}}
-      {{- end}}
-    </ul>
-    <ul
-      class="js-solutionsList Solutions-cardList"
-      aria-expanded="false"
-      aria-labelledby="btn-tech"
-      id="tab-tech"
-      role="tabpanel"
-      tabindex="0"
-      hidden
-    >
-      {{- range newest $solutions}}{{if eq .series "Use Cases"}}
-      <li class="Solutions-card">
-        <a href="{{.URL}}" class="Solutions-useCaseLink">
-          <div class="Solutions-useCaseLogo">
-            {{- $icon := .icon}}
-            {{- $iconDark := .iconDark}}
-            {{- if $icon}}
-            <img
-              class="LightMode-img"
-              loading="lazy"
-              alt="{{$icon.alt}}"
-              src="{{path.Dir .URL}}/{{$icon.file}}"
-            />
-            {{- end}}
-            {{- if $iconDark}}
-            <img
-              class="DarkMode-img"
-              loading="lazy"
-              alt="{{$iconDark.alt}}"
-              src="{{path.Dir .URL}}/{{$iconDark.file}}"
-            />
-            {{- end}}
-          </div>
-          <div class="Solutions-useCaseBody">
-            <h3 class="Solutions-useCaseTitle">{{or .linkTitle .title}}</h3>
-            <p class="Solutions-useCaseDescription">
-              {{.description}}
-            </p>
-          </div>
-          <p class="Solutions-useCaseAction">
-            Learn More
-          </p>
-        </a>
-      </li>
-      {{- end}}
-      {{- end}}
-    </ul>
-  </div>
-</section>
+<h2><a href="/solutions/use-cases">Use Cases</a></h2>
+Stories about how and why companies use Go.
+
+<h2><a href="/security/policy">Security Policy</a></h2>
+How Go can help keep you secure by default.

cmd/golangorg/testdata/godev.txt

@@ -5,7 +5,7 @@ body contains <h2 class="WhoUses-headerH2">Companies using Go</h2>
 GET https://go.dev/about
 redirect == https://pkg.go.dev/about
 
-GET https://go.dev/solutions/
+GET https://go.dev/solutions/case-studies
 body contains Using Go at Google
 
 GET https://go.dev/solutions/dropbox

cmd/screentest/testdata/godev.txt

@@ -7,12 +7,12 @@ capture fullscreen
 capture fullscreen 540x1080
 
 test why go case studies
-pathname /solutions/
+pathname /solutions/case-studies
 capture fullscreen
 capture fullscreen 540x1080
 
 test why go use cases
-pathname /solutions/#use-cases
+pathname /solutions/use-cases
 capture fullscreen
 capture fullscreen 540x1080