Card list (#115)

* Introduce CardGroup and CardList components * CardList chapters for Intro guide * CardList chapters for Build it Yourself guides * Clarify page title for production grade design intros
gruntwork-io · Dec 17, 2021 · 6f2ae82 · 6f2ae82
1 parent 7234c29
commit 6f2ae82
Show file tree

Hide file tree

Showing 26 changed files with 524 additions and 326 deletions.
diff --git a/...es/build-it-yourself/2-landing-zone/0-intro/0-what-youll-learn-in-this-guide.md b/...es/build-it-yourself/2-landing-zone/0-intro/0-what-youll-learn-in-this-guide.md
@@ -3,6 +3,8 @@ sidebar_label: What you’ll learn in this guide
 pagination_label: Configure Your Accounts With Landing Zone
 ---
 
+import { CardList } from "/src/components/CardGroup"
+
 # Configure Your Accounts with Landing Zone
 
 :::caution
@@ -11,32 +13,37 @@ This guide hasn’t been updated in the past 6 months. If you find any inaccurac
 
 :::
 
-This guide will walk you through the process of configuring a production-grade AWS account structure, including how to manage multiple environments, users, permissions, and audit logging. We’ll also discuss how to implement a Landing Zone solution that lets you quickly spin up new AWS accounts that all implement a security baseline that enforces your company’s policies.
-
-This guide consists of four main sections:
-
-<div className="dlist">
-
-#### [Core concepts](../1-core-concepts/0-aws-account.md)
-
-An overview of the core concepts you need to understand to set up an AWS account structure, including AWS
-Organizations, IAM Users, IAM Roles, IAM Groups, CloudTrail, and more.
-
-#### [Production-grade design](../2-production-grade-design/0-intro.md)
+## Overview
 
-An overview of how to configure a secure, scalable, highly available AWS account structure that you can rely on in
-production. To get a sense of what production-grade means, check out
-[The production-grade infrastructure checklist](https://gruntwork.io/guides/foundations/how-to-use-gruntwork-infrastructure-as-code-library#production_grade_infra_checklist).
-
-#### [Deployment walkthrough](../3-deployment-walkthrough/0-pre-requisites.md)
-
-A step-by-step guide to configuring a production-grade AWS account structure using the Gruntwork AWS Landing Zone
-solution, including how to manage it all with customizable security baselines defined in Terraform.
-
-#### [Next steps](../4-next-steps.md)
-
-What to do once you’ve got your AWS account structure configured.
-
-</div>
+This guide will walk you through the process of configuring a production-grade AWS account structure, including how to manage multiple environments, users, permissions, and audit logging. We’ll also discuss how to implement a Landing Zone solution that lets you quickly spin up new AWS accounts that all implement a security baseline that enforces your company’s policies.
 
-Feel free to read the guide from start to finish or skip around to whatever part interests you.
+## Sections
+
+Feel free to read this guide from start to finish or skip around to whatever sections interest you.
+
+<CardList>
+  <Card
+    title="Core Concepts"
+    href="../core-concepts/aws-account"
+  >
+    An overview of the core concepts you need to understand to set up an AWS account structure, including AWS Organizations, IAM Users, IAM Roles, IAM Groups, CloudTrail, and more.
+  </Card>
+  <Card
+    title="Production-grade Design"
+    href="../production-grade-design/intro"
+  >
+    An overview of how to configure a secure, scalable, highly available AWS account structure that you can rely on in production.
+  </Card>
+  <Card
+    title="Deployment Walkthrough"
+    href="../deployment-walkthrough/pre-requisites"
+  >
+    A step-by-step guide to configuring a production-grade AWS account structure using the Gruntwork AWS Landing Zone solution, including how to manage it all with customizable security baselines defined in Terraform.
+  </Card>
+  <Card
+    title="Next Steps"
+    href="../next-steps"
+  >
+    What to do once you’ve got your AWS account structure configured.
+  </Card>
+</CardList>
diff --git a/...es/guides/build-it-yourself/2-landing-zone/2-production-grade-design/0-intro.md b/...es/guides/build-it-yourself/2-landing-zone/2-production-grade-design/0-intro.md
@@ -2,7 +2,7 @@
 pagination_label: Production-grade Design
 ---
 
-# Intro
+# Intro to Production-grade Design
 
 With all the core concepts out of the way, let’s now discuss how to configure a production-grade AWS account structure that looks something like this:
 

diff --git a/...uides/build-it-yourself/3-pipelines/0-intro/0-what-youll-learn-in-this-guide.md b/...uides/build-it-yourself/3-pipelines/0-intro/0-what-youll-learn-in-this-guide.md
@@ -3,6 +3,8 @@ sidebar_label: What you’ll learn in this guide
 pagination_label: Set Up an Infrastructure CI/CD Pipeline
 ---
 
+import { CardList } from "/src/components/CardGroup"
+
 # Set Up an Infrastructure CI/CD Pipeline
 
 :::caution
@@ -11,6 +13,8 @@ This guide hasn’t been updated in the past 6 months. If you find any inaccurac
 
 :::
 
+## Overview
+
 This is a comprehensive guide of how to design, configure, and implement a Continuous Integration and Continuous
 Delivery pipeline for your infrastructure code. This guide will walk you through the steps to set up a secure CI/CD
 pipeline for your favorite infrastructure as code tools (e.g., Terraform) using your favorite CI/CD platform (e.g.,
@@ -20,29 +24,37 @@ TLDR: If you follow this guide, you’ll be able to set up a pipeline that works
 
 ![For an extended version with audio commentary, see <https://youtu.be/iYXghJK7YdU>](/img/guides/build-it-yourself/pipelines/walkthrough.gif)
 
-This guide consists of four main sections:
-
-<div className="dlist">
-
-#### [Core Concepts](../1-core-concepts/0-why-is-it-important-to-have-ci-cd.md)
-
-An overview of the core concepts you need to understand what a typical CI/CD pipeline entails for infrastructure code,
-including a comparison with CI/CD for application code, a sample workflow, infrastructure to support CI/CD, and threat
-models to consider to protect your infrastructure.
-
-#### [Production-grade design](../2-production-grade-design/0-intro.md)
-
-An overview of how to configure a secure, scalable, and robust CI/CD workflow that you can rely on for your
-production application and infrastructure code. To get a sense of what production-grade means, check out
-[The production-grade infrastructure checklist](https://gruntwork.io/guides/foundations/how-to-use-gruntwork-infrastructure-as-code-library#production_grade_infra_checklist).
-
-#### [Deployment walkthrough](../3-deployment-walkthrough/0-pre-requisites.md)
-
-A step-by-step guide to deploying a production-grade CI/CD pipeline in AWS using code from the Gruntwork
-Infrastructure as Code Library.
-
-#### [Next steps](../4-next-steps.md)
-
-What to do once you’ve got your CI/CD pipeline set up.
-
-</div>
+## Sections
+
+Feel free to read this guide from start to finish or skip around to whatever sections interest you.
+
+<CardList>
+  <Card
+    title="Core Concepts"
+    href="../core-concepts/why-is-it-important-to-have-ci-cd"
+  >
+    An overview of the core concepts you need to understand what a typical CI/CD pipeline entails for infrastructure code,
+    including a comparison with CI/CD for application code, a sample workflow, infrastructure to support CI/CD, and threat
+    models to consider to protect your infrastructure.
+  </Card>
+  <Card
+    title="Production-grade Design"
+    href="../production-grade-design/intro"
+  >
+    An overview of how to configure a secure, scalable, and robust CI/CD workflow that you can rely on for your
+    production application and infrastructure code.
+  </Card>
+  <Card
+    title="Deployment Walkthrough"
+    href="../deployment-walkthrough/pre-requisites"
+  >
+    A step-by-step guide to deploying a production-grade CI/CD pipeline in AWS using code from the Gruntwork
+    Infrastructure as Code Library.
+  </Card>
+  <Card
+    title="Next Steps"
+    href="../next-steps"
+  >
+    What to do once you’ve got your CI/CD pipeline set up.
+  </Card>
+</CardList>
diff --git a/...urces/guides/build-it-yourself/3-pipelines/2-production-grade-design/0-intro.md b/...urces/guides/build-it-yourself/3-pipelines/2-production-grade-design/0-intro.md
@@ -3,7 +3,7 @@ pagination_label: Production Grade Design
 sidebar_label: Intro
 ---
 
-# Intro to Production Grade Design
+# Intro to Production-grade Design
 
 With all the core concepts out of the way, let’s now discuss how to configure a production-grade CI/CD workflow for
 infrastructure code, using a platform that looks something like this:

diff --git a/...rces/guides/build-it-yourself/4-vpc/0-intro/0-what-youll-learn-in-this-guide.md b/...rces/guides/build-it-yourself/4-vpc/0-intro/0-what-youll-learn-in-this-guide.md
@@ -3,6 +3,8 @@ sidebar_label: What you’ll learn in this guide
 pagination_label: Deploy a Production-grade VPC
 ---
 
+import { CardList } from "/src/components/CardGroup"
+
 # Deploy a Production-grade VPC
 
 :::caution
@@ -11,28 +13,34 @@ This guide hasn’t been updated in the past 6 months. If you find any inaccurac
 
 :::
 
-This guide consists of four main sections:
-
-<div className="dlist">
-
-#### [Core concepts](../1-core-concepts/0-default-vp-cs-and-custom-vp-cs.md)
-
-An overview of the core concepts you need to understand to use VPCs, including subnets, route tables, security
-groups, NACLs, peering connections, and endpoints.
-
-#### [Production-grade design](../2-production-grade-design/0-intro.md)
-
-An overview of how to configure a secure, scalable, highly available VPC that you can rely on in production. To get a
-sense of what production-grade means, check out [The production-grade infrastructure checklist](https://gruntwork.io/guides/foundations/how-to-use-gruntwork-infrastructure-as-code-library#production_grade_infra_checklist).
-
-#### [Deployment walkthrough](../3-deployment-walkthrough/0-pre-requisites.md)
-
-A step-by-step guide to deploying a production-grade VPC in AWS using code from the Gruntwork Infrastructure as Code Library.
-
-#### [Next steps](../4-next-steps.md)
-
-What to do once you’ve got your VPC(s) deployed.
-
-</div>
-
-Feel free to read the guide from start to finish or skip around to whatever part interests you!
+## Sections
+
+Feel free to read this guide from start to finish or skip around to whatever sections interest you.
+
+<CardList>
+  <Card
+    title="Core Concepts"
+    href="../core-concepts/default-vp-cs-and-custom-vp-cs"
+  >
+    An overview of the core concepts you need to understand to use VPCs, including subnets, route tables, security
+    groups, NACLs, peering connections, and endpoints.
+  </Card>
+  <Card
+    title="Production-grade Design"
+    href="../production-grade-design/intro"
+  >
+    An overview of how to configure a secure, scalable, highly available VPC that you can rely on in production.
+  </Card>
+  <Card
+    title="Deployment Walkthrough"
+    href="../deployment-walkthrough/pre-requisites"
+  >
+    A step-by-step guide to deploying a production-grade VPC in AWS using code from the Gruntwork Infrastructure as Code Library.
+  </Card>
+  <Card
+    title="Next Steps"
+    href="../next-steps"
+  >
+    What to do once you’ve got your VPC(s) deployed.
+  </Card>
+</CardList>
diff --git a/_docs-sources/guides/build-it-yourself/4-vpc/2-production-grade-design/0-intro.md b/_docs-sources/guides/build-it-yourself/4-vpc/2-production-grade-design/0-intro.md
@@ -2,7 +2,7 @@
 pagination_label: Introduction to Production-grade design
 ---
 
-# Intro
+# Intro to Production-grade Design
 
 With all the core concepts out of the way, let’s now discuss how to configure a production-grade VPC that looks
 something like this:

diff --git a/...ld-it-yourself/5-kubernetes-cluster/0-intro/0-what-youll-learn-in-this-guide.md b/...ld-it-yourself/5-kubernetes-cluster/0-intro/0-what-youll-learn-in-this-guide.md
@@ -3,6 +3,8 @@ sidebar_label: What you’ll learn in this guide
 pagination_label: Deploy a Production-grade Kubernetes Cluster
 ---
 
+import { CardList } from "/src/components/CardGroup"
+
 # Deploy a Production-grade Kubernetes Cluster
 
 :::caution
@@ -11,33 +13,37 @@ This guide hasn’t been updated in the past 6 months. If you find any inaccurac
 
 :::
 
-This guide will walk you through the process of configuring a production-grade Kubernetes cluster on AWS.
-
-The guide consists of four main sections:
-
-<div className="dlist">
-
-#### [Core concepts](../1-core-concepts/0-why-kubernetes.md)
-
-An overview of the core concepts you need to understand to use Kubernetes, including why you may want to use
-Kubernetes, Kubernetes architecture, the control plane, worker nodes, different ways to run Kubernetes, services,
-deployments, auto scaling, auto healing, RBAC, and more.
-
-#### [Production-grade design](../2-production-grade-design/1-use-eks.md)
-
-An overview of how to configure a secure, scalable, highly available Kubernetes cluster that you can rely on in
-production. To get a sense of what production-grade means, check out
-[The production-grade infrastructure checklist](https://gruntwork.io/guides/foundations/how-to-use-gruntwork-infrastructure-as-code-library#production_grade_infra_checklist).
-
-#### [Deployment walkthrough](../3-deployment-walkthrough/0-pre-requisites.md)
-
-A step-by-step guide to deploying a production-grade Kubernetes cluster in AWS using code from the Gruntwork
-Infrastructure as Code Library.
-
-#### [Next steps](../4-next-steps.md)
-
-What to do once you’ve got your Kubernetes cluster deployed.
-
-</div>
-
-Feel free to read the guide from start to finish or skip around to whatever part interests you!
+## Sections
+
+This guide will walk you through the process of configuring a production-grade Kubernetes cluster on AWS. Feel free to read it from start to finish or skip around to whatever sections interest you.
+
+<CardList>
+  <Card
+    title="Core Concepts"
+    href="../core-concepts/why-kubernetes"
+  >
+    An overview of the core concepts you need to understand to use Kubernetes, including why you may want to use
+    ubernetes, Kubernetes architecture, the control plane, worker nodes, different ways to run Kubernetes, services,
+    deployments, auto scaling, auto healing, RBAC, and more.
+  </Card>
+  <Card
+    title="Production-grade Design"
+    href="../production-grade-design/intro"
+  >
+    An overview of how to configure a secure, scalable, highly available Kubernetes cluster that you can rely on in
+    production.
+  </Card>
+  <Card
+    title="Deployment Walkthrough"
+    href="../deployment-walkthrough/pre-requisites"
+  >
+    A step-by-step guide to deploying a production-grade Kubernetes cluster in AWS using code from the Gruntwork
+    Infrastructure as Code Library.
+  </Card>
+  <Card
+    title="Next Steps"
+    href="../next-steps"
+  >
+    What to do once you’ve got your Kubernetes cluster deployed.
+  </Card>
+</CardList>
diff --git a/...des/build-it-yourself/5-kubernetes-cluster/2-production-grade-design/0-intro.md b/...des/build-it-yourself/5-kubernetes-cluster/2-production-grade-design/0-intro.md
@@ -2,7 +2,7 @@
 pagination_label: Production-grade Design
 ---
 
-# Intro
+# Intro to Production-grade Design
 
 With all the core concepts out of the way, let's now discuss how to configure a production-grade Kubernetes cluster
 that looks something like this:
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,7 +2,7 @@ @@
     pagination_label: Production-grade Design
     ---
-    # Intro
+    # Intro to Production-grade Design
     With all the core concepts out of the way, let’s now discuss how to configure a production-grade AWS account structure that looks something like this:
@@ Expand Down @@