[APT-1585] Courses page (#99)

* [WIP] Courses page * Add images * Updated author avatars * Style tweak * Support a centered layout for content without sidebar/toc
gruntwork-io · Dec 15, 2021 · fcfecd3 · fcfecd3
1 parent 9b10193
commit fcfecd3
Show file tree

Hide file tree

Showing 25 changed files with 269 additions and 36 deletions.
diff --git a/_docs-sources/courses.mdx b/_docs-sources/courses.mdx
@@ -0,0 +1,57 @@
+---
+hide_table_of_contents: true
+hide_title: true
+---
+
+import CenterLayout from "/src/components/CenterLayout"
+import Course from "/src/components/Course"
+import Grid from "/src/components/Grid"
+
+<CenterLayout>
+
+# Learn DevOps from the experts
+
+At Gruntwork, we’ve created a library of video training courses that teach a variety of DevOps topics, such as infrastructure as code, Terraform, Docker, Packer, AWS, security, and more. Each course consists of a series of “micro-videos” of 1–10 minutes each that you can watch your at own pace as often as you like.
+
+:::note
+
+Courses are offered through Teachable. Access is included with every Gruntwork subscription. If you haven’t already done so, [sign in to the Gruntwork Developer Portal](https://app.gruntwork.io) to activate your Teachable account and access course content.
+
+:::
+
+## Available Courses
+
+<Grid cols={2} gap="2rem">
+  <Course
+    title="A Crash Course on Terraform"
+    icon="/img/courses/terraform.svg"
+    href="https://training.gruntwork.io/courses/terraform/lectures/3429337"
+    description="Learn how to manage infrastructure as code using Terraform through a series of live coding exercises."
+    author="Josh Padnick & Yoriyasu Yano"
+    authorImg="/img/courses/authors/josh-yori.png"
+    videos={30}
+    duration={90}
+  />
+  <Course
+    title="A Crash Course on Docker + Packer"
+    icon="/img/courses/docker+packer.svg"
+    href="https://training.gruntwork.io/courses/a-crash-course-on-docker-packer/lectures/4247382"
+    description="Learn how to package your code into immutable images that run exactly the same way in all environments."
+    author="Yevgeniy Brikman"
+    authorImg="/img/courses/authors/yevgeniy-brikman.jpg"
+    videos={40}
+    duration={95}
+  />
+  <Course
+    title="Infrastructure Module Cookbook"
+    icon="/img/courses/terraform.svg"
+    href="https://training.gruntwork.io/courses/infrastructure-module-cookbook/lectures/9081297"
+    description="A guide to building reusable, production-grade, battle-tested infrastructure code."
+    author="Yevgeniy Brikman"
+    authorImg="/img/courses/authors/yevgeniy-brikman.jpg"
+    videos={8}
+    duration={141}
+  />
+</Grid>
+
+</CenterLayout>
diff --git a/_docs-sources/guides/support.mdx b/_docs-sources/guides/support.mdx
@@ -94,7 +94,7 @@ We’re here to help you with:
 
 - **Code reviews** — Get another pair of eyes on any changes you make to your infrastructure so you can have confidence taking them live.
 
-- **DevOps guidance** — While we don’t provide DevOps training beyond our [video training courses](/courses), we can help you understand how to apply general DevOps principles to devise the right infrastructure for your needs.
+- **DevOps guidance** — While we don’t provide DevOps training beyond our [video training courses](/docs/courses), we can help you understand how to apply general DevOps principles to devise the right infrastructure for your needs.
 
 ### How to reach us
 

diff --git a/_docs-sources/intro/next-steps.mdx b/_docs-sources/intro/next-steps.mdx
@@ -7,7 +7,7 @@ import Grid from "/src/components/Grid"
 
 # Next Steps
 
-Now that your foundational knowledge is in place and your workspace is configured, you’re ready to dive in and learn how to deploy production-grade infrastructure. If you’ve purchased a Gruntwork Reference Architecture, use [this guide](/docs/guides/reference-architecture/overview/overview) to get started. Otherwise, view our [courses](/courses) and [guides](/docs/guides/welcome), or check out the [Service Catalog API reference](/docs/reference/services/intro) to learn what's available.
+Now that your foundational knowledge is in place and your workspace is configured, you’re ready to dive in and learn how to deploy production-grade infrastructure. If you’ve purchased a Gruntwork Reference Architecture, use [this guide](/docs/guides/reference-architecture/overview/overview) to get started. Otherwise, view our [courses](/docs/courses) and [guides](/docs/guides/welcome), or check out the [Service Catalog API reference](/docs/reference/services/intro) to learn what's available.
 
 <Grid cols={2}>
   <Card

diff --git a/docs/courses.mdx b/docs/courses.mdx
@@ -0,0 +1,62 @@
+---
+hide_table_of_contents: true
+hide_title: true
+---
+
+import CenterLayout from "/src/components/CenterLayout"
+import Course from "/src/components/Course"
+import Grid from "/src/components/Grid"
+
+<CenterLayout>
+
+# Learn DevOps from the experts
+
+At Gruntwork, we’ve created a library of video training courses that teach a variety of DevOps topics, such as infrastructure as code, Terraform, Docker, Packer, AWS, security, and more. Each course consists of a series of “micro-videos” of 1–10 minutes each that you can watch your at own pace as often as you like.
+
+:::note
+
+Courses are offered through Teachable. Access is included with every Gruntwork subscription. If you haven’t already done so, [sign in to the Gruntwork Developer Portal](https://app.gruntwork.io) to activate your Teachable account and access course content.
+
+:::
+
+## Available Courses
+
+<Grid cols={2} gap="2rem">
+  <Course
+    title="A Crash Course on Terraform"
+    icon="/img/courses/terraform.svg"
+    href="https://training.gruntwork.io/courses/terraform/lectures/3429337"
+    description="Learn how to manage infrastructure as code using Terraform through a series of live coding exercises."
+    author="Josh Padnick & Yoriyasu Yano"
+    authorImg="/img/courses/authors/josh-yori.png"
+    videos={30}
+    duration={90}
+  />
+  <Course
+    title="A Crash Course on Docker + Packer"
+    icon="/img/courses/docker+packer.svg"
+    href="https://training.gruntwork.io/courses/a-crash-course-on-docker-packer/lectures/4247382"
+    description="Learn how to package your code into immutable images that run exactly the same way in all environments."
+    author="Yevgeniy Brikman"
+    authorImg="/img/courses/authors/yevgeniy-brikman.jpg"
+    videos={40}
+    duration={95}
+  />
+  <Course
+    title="Infrastructure Module Cookbook"
+    icon="/img/courses/terraform.svg"
+    href="https://training.gruntwork.io/courses/infrastructure-module-cookbook/lectures/9081297"
+    description="A guide to building reusable, production-grade, battle-tested infrastructure code."
+    author="Yevgeniy Brikman"
+    authorImg="/img/courses/authors/yevgeniy-brikman.jpg"
+    videos={8}
+    duration={141}
+  />
+</Grid>
+
+</CenterLayout>
+
+
+<!-- ##DOCS-SOURCER-START
+{"sourcePlugin":"Local File Copier","hash":"e7db12791a1d683580786b082c83953a"}
+##DOCS-SOURCER-END -->
diff --git a/docs/guides/support.mdx b/docs/guides/support.mdx
@@ -94,7 +94,7 @@ We’re here to help you with:
 
 - **Code reviews** — Get another pair of eyes on any changes you make to your infrastructure so you can have confidence taking them live.
 
-- **DevOps guidance** — While we don’t provide DevOps training beyond our [video training courses](/courses), we can help you understand how to apply general DevOps principles to devise the right infrastructure for your needs.
+- **DevOps guidance** — While we don’t provide DevOps training beyond our [video training courses](/docs/courses), we can help you understand how to apply general DevOps principles to devise the right infrastructure for your needs.
 
 ### How to reach us
 
@@ -127,5 +127,5 @@ Looking for more personalized assistance using a particular Gruntwork product? O
 
 
 <!-- ##DOCS-SOURCER-START
-{"sourcePlugin":"Local File Copier","hash":"2560c9d558ad8e868112def1fd5e52b9"}
+{"sourcePlugin":"Local File Copier","hash":"57ffe41a1fc5e3ba24024d75053d2933"}
 ##DOCS-SOURCER-END -->
diff --git a/docs/intro/next-steps.mdx b/docs/intro/next-steps.mdx
@@ -7,7 +7,7 @@ import Grid from "/src/components/Grid"
 
 # Next Steps
 
-Now that your foundational knowledge is in place and your workspace is configured, you’re ready to dive in and learn how to deploy production-grade infrastructure. If you’ve purchased a Gruntwork Reference Architecture, use [this guide](/docs/guides/reference-architecture/overview/overview) to get started. Otherwise, view our [courses](/courses) and [guides](/docs/guides/welcome), or check out the [Service Catalog API reference](/docs/reference/services/intro) to learn what's available.
+Now that your foundational knowledge is in place and your workspace is configured, you’re ready to dive in and learn how to deploy production-grade infrastructure. If you’ve purchased a Gruntwork Reference Architecture, use [this guide](/docs/guides/reference-architecture/overview/overview) to get started. Otherwise, view our [courses](/docs/courses) and [guides](/docs/guides/welcome), or check out the [Service Catalog API reference](/docs/reference/services/intro) to learn what's available.
 
 <Grid cols={2}>
   <Card
@@ -28,5 +28,5 @@ Now that your foundational knowledge is in place and your workspace is configure
 
 
 <!-- ##DOCS-SOURCER-START
-{"sourcePlugin":"Local File Copier","hash":"1fa8df69d2217521e026aedb8bcecf58"}
+{"sourcePlugin":"Local File Copier","hash":"db3a06a189595b0d46e28c735d0bfb7a"}
 ##DOCS-SOURCER-END -->
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -66,7 +66,7 @@ const config = {
             label: "Service Catalog API",
             docId: "reference/services/intro",
           },
-          { to: "/courses", label: "Courses", position: "left" },
+          { to: "/docs/courses", label: "Courses", position: "left" },
           {
             href: "https://github.com/gruntwork-io/knowledge-base/discussions",
             label: "Knowledge Base",

diff --git a/src/components/AsciiDocContent.tsx b/src/components/AsciiDocContent.tsx
diff --git a/src/components/Card.module.css b/src/components/Card.module.css
@@ -12,8 +12,9 @@
 }
 
 .card .icon {
-  width: 60px;
   height: 60px;
+  object-fit: contain;
+  object-position: left;
   margin-bottom: 1rem;
 }
 

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -6,21 +6,20 @@ type CardProps = {
   icon?: string
   href?: string
   description?: JSX.Element
-  children?: JSX.Element | string
 }
 
-export default function Card({
+export const Card: React.FunctionComponent<CardProps> = ({
   title,
   icon,
   description,
   href,
   children,
-}: CardProps): JSX.Element {
+}) => {
   const body = (
     <div className={styles.card}>
       {icon && <img className={styles.icon} alt={title} src={icon} />}
       <h3>{title}</h3>
-      <p>{children || description}</p>
+      <div>{children || description}</div>
     </div>
   )
 
@@ -32,3 +31,5 @@ export default function Card({
     </a>
   )
 }
+
+export default Card
diff --git a/src/components/CenterLayout.module.css b/src/components/CenterLayout.module.css
@@ -0,0 +1,4 @@
+.center {
+  margin: auto;
+  max-width: 996px;
+}
diff --git a/src/components/CenterLayout.tsx b/src/components/CenterLayout.tsx
@@ -0,0 +1,18 @@
+import React from "react"
+import styles from "./CenterLayout.module.css"
+
+/**
+ * When using this layout, you should set the following parameters in
+ * your front matter:
+ *
+ * ---
+ * hide_table_of_contents: true
+ * hide_title: true
+ * ---
+ * */
+
+export const CenterLayout: React.FunctionComponent<any> = ({ children }) => {
+  return <div className={styles.center}>{children}</div>
+}
+
+export default CenterLayout
diff --git a/src/components/Course.module.css b/src/components/Course.module.css
@@ -0,0 +1,31 @@
+.author {
+  color: gray;
+}
+
+.author img {
+  border-radius: 100%;
+  border: solid 1px gray;
+  background-color: gray;
+  margin-right: 0.5rem;
+  width: 2rem;
+  height: 2rem;
+  vertical-align: middle;
+}
+
+.metadata {
+  padding-left: 1.5rem;
+  background-position: left center;
+  background-size: contain;
+  margin-right: 2rem;
+  background-repeat: no-repeat;
+  color: gray;
+  font-weight: 600;
+}
+
+.videos {
+  background-image: url("/img/courses/video.svg");
+}
+
+.duration {
+  background-image: url("/img/courses/clock.svg");
+}
diff --git a/src/components/Course.tsx b/src/components/Course.tsx
@@ -0,0 +1,46 @@
+import React from "react"
+import clsx from "clsx"
+import styles from "./Course.module.css"
+import Card from "./Card"
+
+type CourseProps = {
+  title: string
+  icon: string
+  href: string
+  description: JSX.Element
+  author: string
+  authorImg: string
+  videos: number
+  duration: number
+}
+
+export const Course: React.FunctionComponent<CourseProps> = ({
+  title,
+  icon,
+  description,
+  href,
+  author,
+  authorImg,
+  videos,
+  duration,
+}) => {
+  return (
+    <Card title={title} icon={icon} href={href}>
+      <p>{description}</p>
+      <p className={styles.author}>
+        <img src={authorImg} />
+        <span>{author}</span>
+      </p>
+      <p>
+        <span className={clsx(styles.videos, styles.metadata)}>
+          {videos} micro videos
+        </span>
+        <span className={clsx(styles.duration, styles.metadata)}>
+          {duration} minutes
+        </span>
+      </p>
+    </Card>
+  )
+}
+
+export default Course
diff --git a/src/pages/courses.tsx b/src/pages/courses.tsx
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -77,7 +77,7 @@ export default function Home(): JSX.Element {
                   Learn how to deploy Gruntwork services to construct your own
                   bespoke architecture.
                 </Card>
-                <Card title="Courses" href="/courses">
+                <Card title="Courses" href="/docs/courses">
                   Learn DevOps fundamentals with our series of introductory
                   video tutorials.
                 </Card>

diff --git a/static/img/courses/authors/josh-padnick.jpg b/static/img/courses/authors/josh-padnick.jpg
diff --git a/static/img/courses/authors/josh-yori.png b/static/img/courses/authors/josh-yori.png
diff --git a/static/img/courses/authors/yevgeniy-brikman.jpg b/static/img/courses/authors/yevgeniy-brikman.jpg
diff --git a/static/img/courses/authors/yori.jpg b/static/img/courses/authors/yori.jpg
diff --git a/static/img/courses/clock.svg b/static/img/courses/clock.svg
diff --git a/static/img/courses/docker+packer.svg b/static/img/courses/docker+packer.svg