_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>
diff --git a/_content/index.md b/_content/index.md
index bcf2581..63ae298 100644
--- a/_content/index.md
+++ b/_content/index.md
@@ -240,7 +240,7 @@
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>
diff --git a/_content/js/site.js b/_content/js/site.js
index 0b78891..71cae73 100644
--- a/_content/js/site.js
+++ b/_content/js/site.js
@@ -207,97 +207,6 @@
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.addEventListener('DOMContentLoaded', () => {
registerHeaderListeners();
- registerSolutionsTabs();
setDownloadLinks();
setThemeButtons();
setVersionSpans();
diff --git a/_content/menus.yaml b/_content/menus.yaml
index 4be6a09..c606bb5 100644
--- a/_content/menus.yaml
+++ b/_content/menus.yaml
@@ -4,10 +4,10 @@
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 @@
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/
diff --git a/_content/solutions/case-studies.md b/_content/solutions/case-studies.md
index 024f14e..03ebf18 100644
--- a/_content/solutions/case-studies.md
+++ b/_content/solutions/case-studies.md
@@ -4,6 +4,60 @@
---
{{$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">
diff --git a/_content/solutions/index.md b/_content/solutions/index.md
index 7ae4eb5..15ca043 100644
--- a/_content/solutions/index.md
+++ b/_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.
diff --git a/cmd/golangorg/testdata/godev.txt b/cmd/golangorg/testdata/godev.txt
index fd68e06..1123622 100644
--- a/cmd/golangorg/testdata/godev.txt
+++ b/cmd/golangorg/testdata/godev.txt
@@ -5,7 +5,7 @@
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
diff --git a/cmd/screentest/testdata/godev.txt b/cmd/screentest/testdata/godev.txt
index 2b6e197..fc278f9 100644
--- a/cmd/screentest/testdata/godev.txt
+++ b/cmd/screentest/testdata/godev.txt
@@ -7,12 +7,12 @@
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