_content: Learn page redesign
- redesign header
- moved sections into cards and reordered page
- Hooked up jump link layout but they're not matching functionality of pkg site yet
Video: https://drive.google.com/file/d/1OAGq_566FX2ASC68fmQMDfNk17dtp3jr/view?usp=sharing
Change-Id: I7224840e8316909b98a97cf876813f111621d2a7
Reviewed-on: https://go-review.googlesource.com/c/website/+/445579
Reviewed-by: Dmitri Shuralyov <dmitshur@google.com>
Reviewed-by: Than McIntosh <thanm@google.com>
TryBot-Result: Gopher Robot <gobot@golang.org>
Reviewed-by: Jamal Carvalho <jamal@golang.org>
Run-TryBot: Jamal Carvalho <jamal@golang.org>
diff --git a/_content/css/styles.css b/_content/css/styles.css
index 23f7f8f..b532ec8 100644
--- a/_content/css/styles.css
+++ b/_content/css/styles.css
@@ -2171,14 +2171,6 @@
.Security-hero {
background-color: var(--color-background-accented);
color: var(--color-text);
- background-image: radial-gradient(
- 60.0625rem 60.0625rem,
- #bfeaf4 50%,
- transparent 50%
- );
- background-position: top -50rem left -9rem;
- background-repeat: no-repeat;
- background-size: 75rem 75rem;
padding: 0 2.25rem 0;
}
[data-theme='dark'] .Learn-hero .BreadcrumbNav-li:not(:last-child):after,
@@ -2200,7 +2192,6 @@
background: url('/images/icons/arrow-forward.svg') no-repeat;
}
}
-.Learn-hero .Container,
.Security-hero .Container {
max-width: 68.125rem;
position: relative;
@@ -2212,17 +2203,20 @@
display: flex;
flex-direction: column-reverse;
}
+.Learn-heroInner {
+ padding-bottom: 3.25rem;
+}
.Learn-heroGopher,
.Security-heroGopher {
display: flex;
- justify-content: flex-end;
+ justify-content: flex-start;
padding-top: 1.25rem;
}
.Learn-heroGopher img,
.Security-heroGopher img {
- height: 13.5625rem;
+ height: 8.25rem;
width: auto;
}
@@ -2247,6 +2241,9 @@
color: var(--color-text);
font-size: 0.875rem;
max-width: 27.1875rem;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 1.5rem;
}
.Learn-heroAction,
@@ -2282,37 +2279,104 @@
.LearnGo-gridContainer,
.Security-gridContainer {
display: flex;
- justify-content: center;
padding: 0rem 0rem 1rem;
}
.Learn-cardList,
.Security-cardList {
- column-gap: 3.313rem;
+ column-gap: 2.813rem;
display: grid;
grid-template-columns: repeat(1, 1fr);
justify-content: space-between;
list-style: none;
padding-left: 0;
- row-gap: 2rem;
+ row-gap: 2.813rem;
+}
+
+.Learn-columns {
+ display: flex;
+ max-width: 78.25rem;
+ margin: auto;
+ padding: 0 1.25rem;
+}
+
+.Learn-columns .Learn-sidebar {
+ display: none;
+ margin-top: 3.75rem;
+ width: 25%;
+ height: 100vh;
+ min-height: 12.5rem;
+ overflow: auto;
+ position: sticky;
+ top: 5%;
+}
+
+.Learn-columns .LearnNav {
+ display: flex;
+ flex-direction: column;
+}
+
+.Learn-columns .LearnNav a {
+ display: flex;
+ align-items: center;
+ margin-bottom: 0.875rem;
+ text-decoration: none;
+}
+
+.Learn-columns .LearnNav a span {
+ margin-left: 0.75rem;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 1rem;
+ line-height: 1.5rem;
+ color: var(--color-text-subtle);
+}
+
+.Learn-columns .LearnNav a svg {
+ visibility: hidden;
+}
+
+.Learn-columns .LearnNav a.active svg {
+ visibility: visible;
+}
+
+.Learn-columns .LearnNav a.active span,
+.Learn-columns .LearnNav a span:hover {
+ color: var(--color-text);
+ font-weight: 500;
}
.Learn-card,
.Security-card {
- height: 23.375rem;
- max-width: 40rem;
+ min-height: 13.25rem;
}
@media only screen and (min-width: 48rem) {
.Learn-cardList,
.Security-cardList {
- grid-template-columns: repeat(2, 1fr);
+ grid-template-columns: repeat(3, 1fr);
+ }
+ .Learn-card {
+ max-width: 15.875rem;
+ }
+ .Learn-heroGopher img,
+ .Security-heroGopher img {
+ height: 13.25rem;
}
}
@media only screen and (min-width: 72.75rem) {
+ .Learn-columns .Learn-sidebar {
+ display: block;
+ }
.Learn-cardList,
.Security-cardList {
- grid-template-columns: repeat(4, 1fr);
+ grid-template-columns: repeat(3, 1fr);
+ }
+ .Learn-heroGopher,
+ .Security-heroGopher {
+ display: flex;
+ justify-content: flex-end;
+ padding-top: 3.25rem;
}
}
@@ -2372,30 +2436,35 @@
.Learn-heroGopher,
.Security-heroGopher {
flex: 1;
- justify-content: center;
- padding-top: 2.625rem;
+ justify-content: flex-end;
+ align-items: center;
}
- .Learn-heroGopher img,
.Security-heroGopher img {
height: 21.0625rem;
}
.Learn-heroAction,
.Security-heroAction {
- height: 4rem;
- width: 16.5625rem;
+ height: 2.5rem;
+ width: 10.25rem;
}
- .Learn-heroAction a,
- .Learn-heroAction a:hover,
- .Learn-heroAction a:visited,
.Security-heroAction a,
.Security-heroAction a:hover,
.Security-heroAction a:visited {
font-size: 1.5rem;
}
+ .Learn-heroAction a,
+ .Learn-heroAction a:hover,
+ .Learn-heroAction a:visited {
+ font-size: 1rem;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 1rem;
+ }
+
.Learn-heroAction span,
.Security-heroAction span {
font-size: 1rem;
@@ -2414,7 +2483,8 @@
.Learn-selfPaced,
.Learn-books,
.Learn-inPersonTraining,
-.Learn-meetups {
+.Learn-meetups,
+.Learn-tutorials {
margin-top: 3.75rem;
padding: 0 1.5rem;
}
@@ -2443,7 +2513,9 @@
.Security-sectionHeader {
color: var(--color-text);
display: flex;
- justify-content: center;
+ justify-content: flex-start;
+ align-items: flex-start;
+ flex-direction: column;
}
.Learn-subHeader h2 {
@@ -2452,10 +2524,19 @@
.Learn-learningResourcesHeader h3 {
font-size: 1.5rem;
- font-weight: bold;
+ font-style: normal;
+ font-weight: 400;
line-height: 2.25rem;
}
+.Learn-learningResourcesHeader p {
+ color: var(--color-text-subtle);
+ font-size: 0.875rem;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 1.375rem;
+}
+
.Learn-selfPaced .Learn-card .Card-content {
justify-content: space-between;
}
@@ -2467,16 +2548,7 @@
height: 7.5625rem;
}
-.Learn-selfPaced .Learn-card {
- height: 20.3125rem;
-}
-
@media only screen and (min-width: 48rem) {
- .Learn-learningResourcesHeader {
- display: flex;
- justify-content: flex-start;
- }
-
.Learn-learningResourcesHeader h2,
.Security-sectionHeader h2 {
font-size: 2.25rem;
@@ -2487,63 +2559,39 @@
.Learn-cardList.Learn-bookList {
grid-template-columns: repeat(1, 1fr);
width: 100%;
+ grid-gap: 0;
}
.Learn-card.Learn-book {
height: auto;
+ max-width: 26.5rem;
}
@media only screen and (min-width: 48rem) {
.Learn-cardList.Learn-bookList {
- grid-template-columns: repeat(3, 1fr);
- }
-
- .Learn-card.Learn-book {
- max-width: 13.125rem;
- }
-}
-
-@media only screen and (min-width: 57.7rem) {
- .Learn-cardList.Learn-bookList {
- grid-template-columns: repeat(4, 1fr);
- }
-}
-
-@media only screen and (min-width: 72.75rem) {
- .Learn-cardList.Learn-bookList {
- grid-template-columns: repeat(5, 1fr);
+ grid-template-columns: repeat(2, 1fr);
}
}
.Learn-inPersonList {
- display: flex;
- flex: 1 0 100%;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: space-between;
+ display: grid;
list-style: none;
- margin: 1.875rem 0 1.875rem -1rem; /* Offset gutters for the leftmost and top cells in the grid. */
padding-left: 0;
+ grid-template-columns: repeat(1, 1fr);
}
.Learn-inPerson {
- border-bottom: var(--border);
flex: 1 1 31.25rem;
- margin: 0 0 0 1rem; /* Gutter between grid cells. */
- max-width: 31rem;
+ max-width: 36.5rem;
padding-bottom: 1.25rem;
}
-.Learn-inPerson:nth-child(1),
-.Learn-inPerson:nth-child(2) {
- border-top: var(--border);
-}
.Learn-inPersonTitle {
font-size: 1.25rem;
}
.Learn-inPersonBlurb {
color: var(--color-text);
- margin: 0;
+ line-height: 1.75rem;
}
.Learn-events {
@@ -2705,6 +2753,9 @@
.Learn-tileList {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
+ .Learn-inPersonBlurb {
+ margin-right: 10rem;
+ }
}
@media only screen and (min-width: 48rem) {
.Learn-tileList {
@@ -2713,6 +2764,9 @@
.Learn-tileList {
column-gap: 3rem;
}
+ .Learn-inPersonList {
+ grid-template-columns: repeat(2, 1fr);
+ }
}
.Learn-tile {
display: flex;
@@ -3874,14 +3928,21 @@
.Card-contentBody {
color: var(--color-text-subtle);
- flex: auto;
font-size: 0.875rem;
margin-top: 1rem;
}
+.Card-lineClamp {
+ overflow: hidden;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 5;
+}
+
.Card-contentCta {
align-items: center;
display: flex;
+ margin-top: auto;
}
.Card-contentCta span {
@@ -3916,9 +3977,8 @@
}
.Book-inner {
- align-items: flex-start;
display: flex;
- justify-content: space-between;
+ align-items: flex-start;
}
.Book-thumbnail {
@@ -3926,18 +3986,31 @@
}
.Book-thumbnail img {
- width: 100%;
+ width: 6.25rem;
+ height: 7.875rem;
+ border-radius: 0.625rem;
+ filter: drop-shadow(0 0.125rem 0.125rem rgba(200, 200, 200, 0.29458));
}
.Book-content {
- flex: 1;
- margin-left: 1.6875rem;
+ margin-left: 2rem;
+}
+
+.Book-eyebrow {
+ font-style: normal;
+ font-weight: 400;
+ font-size: 0.688rem;
+ letter-spacing: 0.063rem;
+ text-transform: uppercase;
+ color: var(--color-text-subtle);
+ margin-top: 0;
}
.Book-title {
color: var(--color-text);
- font-size: 1.125rem;
- font-weight: 500;
+ font-size: 1rem;
+ font-weight: 400;
+ line-height: 1.5rem;
margin: 0 0 0.5rem;
}
@@ -3954,20 +4027,11 @@
.Book-cta span {
margin-right: 0.6875rem;
-}
-
-@media only screen and (min-width: 48rem) {
- .Book-inner {
- flex-direction: column;
- }
-
- .Book-thumbnail {
- width: 100%;
- }
-
- .Book-content {
- margin: 1rem 0 0;
- }
+ font-style: normal;
+ font-weight: 400;
+ font-size: 0.875rem;
+ line-height: 1rem;
+ letter-spacing: 0.016rem;
}
#blog h1.small {
diff --git a/_content/js/jumplinks.js b/_content/js/jumplinks.js
new file mode 100644
index 0000000..df4c618
--- /dev/null
+++ b/_content/js/jumplinks.js
@@ -0,0 +1,69 @@
+/**
+ * This is a basic version of the jump links.
+ * New version will follow with parity to package site.
+ */
+(function() {
+ 'use-strict'
+ async function resetNav() {
+ return new Promise((resolve, reject) => {
+ const nav = document.querySelector('.LearnNav');
+ if (!nav) {
+ reject(new Error('.LearnNav element not found.'));
+ }
+ for (let a of Array.from(nav?.children ?? [])) {
+ a.classList.remove('active');
+ }
+ resolve();
+ });
+ }
+ async function setNav() {
+ return new Promise((resolve, reject) => {
+ const nav = document.querySelector('.LearnNav');
+ if (!nav) {
+ reject(new Error('.LearnNav element not found.'));
+ }
+ for (let a of Array.from(nav?.children ?? [])) {
+ if (a.href === location.href) {
+ a.classList.add('active');
+ document.getElementById(location.hash.substring(1))?.scrollIntoView();
+ break;
+ }
+ }
+ resolve();
+ });
+ }
+ function observeSections() {
+ const learnContent = document.querySelector('.Learn-body');
+ if (learnContent && learnContent.children) {
+ const callback = async (payload) => {
+ if (payload && payload.length > 0) {
+ for (p of payload) {
+ if (p.isIntersecting) {
+ const {id} = p.target;
+ const link = document.querySelector(`[href='#${id}']`);
+ await resetNav();
+ link.classList.add('active');
+ break;
+ }
+ }
+ }
+ }
+ // rootMargin is important when multiple sections are in the observable area **on page load**.
+ // they will still be highlighted on scroll because of the root margin.
+ const ob = new IntersectionObserver(callback, {
+ threshold: 0,
+ rootMargin: '0px 0px -50% 0px',
+ });
+ for (section of learnContent.children) {
+ ob.observe(section);
+ }
+ }
+ }
+
+ setNav()
+ .then(observeSections)
+ .catch((error) => {
+ console.error(error);
+ });
+
+})();
diff --git a/_content/js/site.js b/_content/js/site.js
index 52d04a2..0b78891 100644
--- a/_content/js/site.js
+++ b/_content/js/site.js
@@ -372,8 +372,19 @@
}
/**
- * toggleTheme switches the preferred color scheme between auto, light, and
- * dark.
+ * setVersionSpan sets the latest version in any span that has this selector.
+ */
+ async function setVersionSpans() {
+ const spans = document.querySelectorAll('.GoVersionSpan');
+ if (!spans) return;
+ const version = await getLatestVersion();
+ Array.from(spans).forEach(span => {
+ span.textContent = `Download (${version.replace('go', '')})`
+ });
+ }
+
+ /**
+ * toggleTheme switches the preferred color scheme between auto, light, and dark.
*/
function toggleTheme() {
let nextTheme = 'dark';
@@ -399,5 +410,6 @@
registerSolutionsTabs();
setDownloadLinks();
setThemeButtons();
+ setVersionSpans();
});
})();
diff --git a/_content/learn/books.yaml b/_content/learn/books.yaml
index c46a374..981a59c 100644
--- a/_content/learn/books.yaml
+++ b/_content/learn/books.yaml
@@ -1,25 +1,25 @@
- title: The Go Programming Language
description: Alan A. A. Donovan, Brian W. Kernighan
- cta: View
+ eyebrow: PDF
url: https://www.gopl.io/
thumbnail: /images/learn/go-programming-language-book.png
- title: Get Programming with Go
description: Nathan Youngman, Roger Peppé
- cta: Manning.com
+ eyebrow: Manning.com
url: https://www.manning.com/books/get-programming-with-go
thumbnail: /images/learn/get-programming-with-go.jpeg
- title: Go Programming Blueprints
description: This is the official source code repository for the book.
- cta: View on GitHub
+ eyebrow: GitHub
url: https://github.com/matryer/goblueprints
thumbnail: /images/learn/go-programming-blueprints.png
- title: Introducing Go
description: Caleb Doxsey
- cta: View on O’Reilly.com
+ eyebrow: O'Reilly.com
url: http://shop.oreilly.com/product/0636920046516.do
thumbnail: /images/learn/introducing-go-book.png
- title: Concurrency in Go
description: Katherine Cox-Buday
- cta: View on O’Reilly.com
+ eyebrow: O'Reilly.com
url: https://www.oreilly.com/library/view/concurrency-in-go/9781491941294/
thumbnail: /images/learn/concurrency-in-go.png
diff --git a/_content/learn/cloud.yaml b/_content/learn/cloud.yaml
index 81491ce..3bbf12b 100644
--- a/_content/learn/cloud.yaml
+++ b/_content/learn/cloud.yaml
@@ -1,25 +1,21 @@
- title: Deploy Go Apps on Google Cloud Serverless Platforms
url: https://google.qwiklabs.com/focuses/10532?parent=catalog
- thumbnail: /images/learn/qwiklabs.png
length: 1h 10m
credits: 5
rating: 4.25
- title: Use Go Code to Work with Google Cloud Data Sources
url: https://google.qwiklabs.com/focuses/10531?parent=catalog
- thumbnail: /images/learn/qwiklabs.png
length: 1h 10m
credits: 5
rating: 4.25
- title: Getting Started with Go on App Engine
url: https://google.qwiklabs.com/focuses/2754?catalog_rank=%7B%22rank%22%3A1%2C%22num_filters%22%3A0%2C%22has_search%22%3Atrue%7D&parent=catalog&search_id=5407947
- thumbnail: /images/learn/qwiklabs.png
length: 20m
credits: 1
rating: 4.15
- title: HTTP Google Cloud Functions in Go
url: https://google.qwiklabs.com/focuses/5171?catalog_rank=%7B%22rank%22%3A1%2C%22num_filters%22%3A0%2C%22has_search%22%3Atrue%7D&parent=catalog&search_id=5407953
- thumbnail: /images/learn/qwiklabs.png
length: 40m
credits: 5
rating: 4.5
diff --git a/_content/learn/guided.yaml b/_content/learn/guided.yaml
index 7af9c2b..b52c9d7 100644
--- a/_content/learn/guided.yaml
+++ b/_content/learn/guided.yaml
@@ -2,24 +2,14 @@
content: Go Web Examples provides easy to understand code snippets on
how to use Go for web development.
url: https://gowebexamples.com
- thumbnail: /images/learn/web-dev.png
cta: Learn more
- title: CLIs
content: This workshop will walk you through building a CLI app with Go,
introducing you to basic Go principles and CLI frameworks along the way.
url: https://spf13.com/presentation/building-an-awesome-cli-app-in-go-oscon/
- thumbnail: /images/learn/clis.png
cta: Learn more
- title: New to coding?
content: Get started with this introductory course covering basic
programming principles and Go fundamentals.
url: https://www.youtube.com/watch?v=Q0sKAMal4WQ
- thumbnail: /images/learn/edureka.png
- cta: Learn more
- - title: Go by example
- content: <i>Go by Example</i> is a hands-on introduction to Go using annotated
- example programs. It’s a great starting point to use when tackling any Go
- project.
- url: https://gobyexample.com/
- thumbnail: /images/learn/gobyexample.png
cta: Learn more
diff --git a/_content/learn/index.md b/_content/learn/index.md
index 8717bcb..b4b1c01 100644
--- a/_content/learn/index.md
+++ b/_content/learn/index.md
@@ -27,143 +27,163 @@
target="_blank"
rel="noopener"
>
- Download
+ <span class="GoVersionSpan">Download</span>
</a>
</div>
</div>
- <p>
- Download packages for
- <a class="js-downloadWin">Windows 64-bit</a>,
- <a class="js-downloadMac">macOS</a>,
- <a class="js-downloadLinux">Linux</a>, and
- <a href="/dl/">more</a>.
- </p>
</div>
<div class="Learn-heroGopher">
<img src="/images/gophers/motorcycle.svg" alt="Go Gopher riding a motorcycle">
</div>
</div>
- <div class="LearnGo-gridContainer">
- <ul class="Learn-quickstarts Learn-cardList">
+ </div>
+</section>
+
+<div class="Learn-columns">
+ <aside class="Learn-sidebar">
+ <nav class="LearnNav">
+ <a class="active" href="#selected-tutorials">
+ <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="2.5" cy="2.5" r="2.5" fill="#007F9F"/></svg>
+ <span>Selected tutorials</span>
+ </a>
+ <a href="#guided-learning-journeys">
+ <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="2.5" cy="2.5" r="2.5" fill="#007F9F"/></svg>
+ <span>Guided journeys</span>
+ </a>
+ <a href="#self-paced-labs">
+ <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="2.5" cy="2.5" r="2.5" fill="#007F9F"/></svg>
+ <span>Qwiklabs</span>
+ </a>
+ <a href="#tutorials">
+ <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="2.5" cy="2.5" r="2.5" fill="#007F9F"/></svg>
+ <span>Tutorials</span>
+ </a>
+ <a href="#training">
+ <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="2.5" cy="2.5" r="2.5" fill="#007F9F"/></svg>
+ <span>Training</span>
+ </a>
+ <a href="#featured-books">
+ <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="2.5" cy="2.5" r="2.5" fill="#007F9F"/></svg>
+ <span>Books</span>
+ </a>
+ </nav>
+ </aside>
+ <div class="Learn-body">
+ <section id="selected-tutorials" class="Learn-tutorials">
+ <div class="Container">
+ <div class="Learn-learningResourcesHeader">
+ <h3>Selected tutorials</h3>
+ <p>New to Go and don't know where to start?</p>
+ </div>
+ <div class="LearnGo-gridContainer">
+ <ul class="Learn-cardList">
{{- range first 3 (data "quickstart.yaml")}}
- <li class="Learn-quickstart Learn-card">
- {{- template "learn-card" .}}
- </li>
+ <li class="Learn-card">
+ {{- template "learn-card" . }}
+ </li>
{{- end}}
- </ul>
+ </ul>
+ </div>
</div>
- </div>
-</section>
+ </section>
-<section class="Learn-learningResources">
- <h2>Learning Resources</h2>
-</section>
-
-<section id="guided-learning-journeys" class="Learn-guided">
- <div class="Container">
- <div class="Learn-learningResourcesHeader">
- <h3>Guided learning journeys</h3>
+ <section id="guided-learning-journeys" class="Learn-guided">
+ <div class="Container">
+ <div class="Learn-learningResourcesHeader">
+ <h3>Guided learning journeys</h3>
+ <p>Got the basics and want to learn more?</p>
+ </div>
+ <div class="LearnGo-gridContainer">
+ <ul class="Learn-cardList">
+ {{- range first 4 (data "guided.yaml")}}
+ <li class="Learn-card">
+ {{- template "learn-card" .}}
+ </li>
+ {{- end}}
+ </ul>
+ </div>
</div>
- <div class="LearnGo-gridContainer">
- <ul class="Learn-cardList">
- {{- range first 4 (data "guided.yaml")}}
+ </section>
+
+ <section id="self-paced-labs" class="Learn-selfPaced">
+ <div class="Container">
+ <div class="Learn-learningResourcesHeader">
+ <h3>Qwiklabs</h3>
+ <p>Guided tours of Go programs</p>
+ </div>
+ <div class="LearnGo-gridContainer">
+ <ul class="Learn-cardList">
+ {{- range first 3 (data "cloud.yaml")}}
<li class="Learn-card">
- {{- template "learn-card" .}}
+ {{- template "learn-self-paced-card" .}}
</li>
- {{- end}}
- </ul>
- </div>
- </div>
-</section>
-
-<section id="online-learning" class="Learn-online">
- <div class="Container">
- <div class="Learn-learningResourcesHeader">
- <h3>Online learning</h3>
- </div>
- <div class="LearnGo-gridContainer">
- <ul class="Learn-cardList">
- {{- range first 4 (data "courses.yaml") }}
- <li class="Learn-card">
- {{- template "learn-card" .}}
</li>
- {{- end}}
- </ul>
+ {{- end}}
+ </ul>
+ </div>
</div>
- </div>
-</section>
+ </section>
-<section id="self-paced-labs" class="Learn-selfPaced">
- <div class="Container">
- <div class="Learn-learningResourcesHeader">
- <h3>Google Cloud Self-Paced Labs</h3>
+ <section id="tutorials" class="Learn-tutorials">
+ <div class="Container">
+ <div class="Learn-learningResourcesHeader">
+ <h3>Tutorials</h3>
+ <p></p>
+ </div>
+ <div class="LearnGo-gridContainer">
+ <ul class="Learn-cardList">
+ {{- range first 3 (data "tutorials.yaml") }}
+ <li class="Learn-card">
+ {{- template "learn-card" .}}
+ </li>
+ {{- end}}
+ </ul>
+ </div>
</div>
- <div class="LearnGo-gridContainer">
- <ul class="Learn-cardList">
- {{- range first 4 (data "cloud.yaml")}}
- <li class="Learn-card">
- {{- template "learn-self-paced-card" .}}
- </li>
- </li>
- {{- end}}
- </ul>
- </div>
- </div>
-</section>
+ </section>
-<section id="tutorials" class="Learn-tutorials">
- <div class="Container">
- <div class="Learn-learningResourcesHeader">
- <h3>Tutorials</h3>
- </div>
- <div class="LearnGo-gridContainer">
- <ul class="Learn-cardList">
- {{- range first 4 (data "tutorials.yaml") }}
- <li class="Learn-card">
- {{- template "learn-card" .}}
+ <section id="training" class="Learn-inPersonTraining">
+ <div class="Container">
+ <div class="Learn-learningResourcesHeader">
+ <h3>Training</h3>
+ <p>Guided tours of Go programs</p>
+ </div>
+ <div class="LearnGo-gridContainer">
+ <ul class="Learn-inPersonList">
+ {{- range first 4 (data "training.yaml")}}
+ <li class="Learn-inPerson">
+ <p class="Learn-inPersonTitle">
+ <a href="{{.url}}">{{.title}} </a>
+ </p>
+ <p class="Learn-inPersonBlurb">{{.blurb}}</p>
</li>
- {{- end}}
- </ul>
+ {{- end}}
+ </ul>
+ </div>
</div>
- </div>
-</section>
+ </section>
-<section id="featured-books" class="Learn-books">
- <div class="Container">
- <div class="Learn-learningResourcesHeader">
- <h3>Featured books</h3>
+ <section id="featured-books" class="Learn-books">
+ <div class="Container">
+ <div class="Learn-learningResourcesHeader">
+ <h3>Books</h3>
+ <p></p>
+ </div>
+ <div class="LearnGo-gridContainer">
+ <ul class="Learn-cardList Learn-bookList">
+ {{- range first 5 (data "books.yaml")}}
+ <li class="Learn-card Learn-book">
+ {{template "learn-book" .}}
+ </li>
+ {{- end}}
+ </ul>
+ </div>
</div>
- <div class="LearnGo-gridContainer">
- <ul class="Learn-cardList Learn-bookList">
- {{- range first 5 (data "books.yaml")}}
- <li class="Learn-card Learn-book">
- {{template "learn-book" .}}
- </li>
- {{- end}}
- </ul>
- </div>
+ </section>
</div>
-</section>
+</div>
-<section class="Learn-inPersonTraining">
- <div class="Container">
- <div class="Learn-learningResourcesHeader">
- <h3>In-person training</h3>
- </div>
- <div class="LearnGo-gridContainer">
- <ul class="Learn-inPersonList">
- {{- range first 4 (data "training.yaml")}}
- <li class="Learn-inPerson">
- <p class="Learn-inPersonTitle">
- <a href="{{.url}}">{{.title}} </a>
- </p>
- <p class="Learn-inPersonBlurb">{{.blurb}}</p>
- </li>
- {{- end}}
- </ul>
- </div>
- </div>
-</section>
+<script async src="/js/jumplinks.js"></script>
{{define "learn-card"}}
<div class="Card">
@@ -187,24 +207,10 @@
{{- end}}
<div class="Card-content">
<div class="Card-contentTitle">{{.title}}</div>
- <p class="Card-contentBody">{{raw .content}}</p>
+ <p class="Card-contentBody Card-lineClamp">{{raw .content}}</p>
<div class="Card-contentCta">
<a href="{{.url}}" target="_blank">
<span>{{.cta}}</span>
- <svg
- xmlns="http://www.w3.org/2000/svg"
- width="16"
- height="16"
- fill="none"
- viewBox="0 0 24 24"
- >
- <path
- fill="#007D9C"
- fill-rule="evenodd"
- d="M5 5v14h14v-7h2v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5c0-1.1.9-2 2-2h7v2H5zm9 0V3h7v7h-2V6.4l-9.8 9.8-1.4-1.4L17.6 5H14z"
- clip-rule="evenodd"
- />
- </svg>
</a>
</div>
</div>
@@ -249,24 +255,11 @@
</div>
{{- end}}
<div class="Book-content">
+ <p class="Book-eyebrow">{{.eyebrow}}</p>
<p class="Book-title">{{.title}}</p>
<p class="Book-description">{{.description}}</p>
<div class="Book-cta">
- <span>{{.cta}}</span>
- <svg
- xmlns="http://www.w3.org/2000/svg"
- width="16"
- height="16"
- fill="none"
- viewBox="0 0 24 24"
- >
- <path
- fill="#007D9C"
- fill-rule="evenodd"
- d="M5 5v14h14v-7h2v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5c0-1.1.9-2 2-2h7v2H5zm9 0V3h7v7h-2V6.4l-9.8 9.8-1.4-1.4L17.6 5H14z"
- clip-rule="evenodd"
- />
- </svg>
+ <span>view book</span>
</div>
</div>
</div>
diff --git a/_content/learn/quickstart.yaml b/_content/learn/quickstart.yaml
index 928be0b..dd5c3f2 100644
--- a/_content/learn/quickstart.yaml
+++ b/_content/learn/quickstart.yaml
@@ -8,8 +8,9 @@
concludes with a few exercises so you can practice what you've learned.
cta: Take a tour
url: /tour/
- - title: Playground
- content: The Playground allows anyone with a web browser to write Go code
- that we immediately compile, link, and run on our servers.
- cta: Go to playground
- url: /play
+ - title: Go by example
+ content: <i>Go by Example</i> is a hands-on introduction to Go using annotated
+ example programs. It’s a great starting point to use when tackling any Go
+ project.
+ url: https://gobyexample.com/
+ cta: View examples
