From 6f2ae82cdbbd353d5e3f3d9acd3efe7c1e0bc018 Mon Sep 17 00:00:00 2001 From: Eben Eliason Date: Fri, 17 Dec 2021 10:30:15 -0800 Subject: [PATCH] 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 --- .../0-what-youll-learn-in-this-guide.md | 61 +++++++++------- .../2-production-grade-design/0-intro.md | 2 +- .../0-what-youll-learn-in-this-guide.md | 64 ++++++++++------- .../2-production-grade-design/0-intro.md | 2 +- .../0-what-youll-learn-in-this-guide.md | 58 ++++++++------- .../2-production-grade-design/0-intro.md | 2 +- .../0-what-youll-learn-in-this-guide.md | 66 +++++++++-------- .../2-production-grade-design/0-intro.md | 2 +- .../0-what-youll-learn-in-this-guide.md | 68 ++++++++++-------- .../2-production-grade-design/0-intro.md | 2 +- .../intro/overview/getting-started.mdx | 13 ++-- .../0-what-youll-learn-in-this-guide.md | 63 +++++++++-------- .../2-production-grade-design/0-intro.md | 4 +- .../0-what-youll-learn-in-this-guide.md | 66 ++++++++++------- .../2-production-grade-design/0-intro.md | 4 +- .../0-what-youll-learn-in-this-guide.md | 60 +++++++++------- .../2-production-grade-design/0-intro.md | 4 +- .../0-what-youll-learn-in-this-guide.md | 68 ++++++++++-------- .../2-production-grade-design/0-intro.md | 4 +- .../0-what-youll-learn-in-this-guide.md | 70 +++++++++++-------- .../2-production-grade-design/0-intro.md | 4 +- docs/intro/overview/getting-started.mdx | 15 ++-- src/components/Card.module.css | 31 +++++++- src/components/Card.tsx | 52 ++++++++++---- src/components/CardGroup.tsx | 57 +++++++++++++++ src/components/Grid.tsx | 8 ++- 26 files changed, 524 insertions(+), 326 deletions(-) create mode 100644 src/components/CardGroup.tsx diff --git a/_docs-sources/guides/build-it-yourself/2-landing-zone/0-intro/0-what-youll-learn-in-this-guide.md b/_docs-sources/guides/build-it-yourself/2-landing-zone/0-intro/0-what-youll-learn-in-this-guide.md index 91697a95f..c1b508d49 100644 --- a/_docs-sources/guides/build-it-yourself/2-landing-zone/0-intro/0-what-youll-learn-in-this-guide.md +++ b/_docs-sources/guides/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: - -
- -#### [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. - -
+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. + + + + 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. + + + An overview of how to configure a secure, scalable, highly available AWS account structure that you can rely on in production. + + + 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. + + + What to do once you’ve got your AWS account structure configured. + + diff --git a/_docs-sources/guides/build-it-yourself/2-landing-zone/2-production-grade-design/0-intro.md b/_docs-sources/guides/build-it-yourself/2-landing-zone/2-production-grade-design/0-intro.md index f116f56ac..b69a99416 100644 --- a/_docs-sources/guides/build-it-yourself/2-landing-zone/2-production-grade-design/0-intro.md +++ b/_docs-sources/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/_docs-sources/guides/build-it-yourself/3-pipelines/0-intro/0-what-youll-learn-in-this-guide.md b/_docs-sources/guides/build-it-yourself/3-pipelines/0-intro/0-what-youll-learn-in-this-guide.md index 066796e1e..c14b6f553 100644 --- a/_docs-sources/guides/build-it-yourself/3-pipelines/0-intro/0-what-youll-learn-in-this-guide.md +++ b/_docs-sources/guides/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 ](/img/guides/build-it-yourself/pipelines/walkthrough.gif) -This guide consists of four main sections: - -
- -#### [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. - -
+## Sections + +Feel free to read this guide from start to finish or skip around to whatever sections interest you. + + + + 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. + + + 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. + + + A step-by-step guide to deploying a production-grade CI/CD pipeline in AWS using code from the Gruntwork + Infrastructure as Code Library. + + + What to do once you’ve got your CI/CD pipeline set up. + + diff --git a/_docs-sources/guides/build-it-yourself/3-pipelines/2-production-grade-design/0-intro.md b/_docs-sources/guides/build-it-yourself/3-pipelines/2-production-grade-design/0-intro.md index 144798c3d..0335337e4 100644 --- a/_docs-sources/guides/build-it-yourself/3-pipelines/2-production-grade-design/0-intro.md +++ b/_docs-sources/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/_docs-sources/guides/build-it-yourself/4-vpc/0-intro/0-what-youll-learn-in-this-guide.md b/_docs-sources/guides/build-it-yourself/4-vpc/0-intro/0-what-youll-learn-in-this-guide.md index 86aef0193..4a1fb6d43 100644 --- a/_docs-sources/guides/build-it-yourself/4-vpc/0-intro/0-what-youll-learn-in-this-guide.md +++ b/_docs-sources/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: - -
- -#### [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. - -
- -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. + + + + An overview of the core concepts you need to understand to use VPCs, including subnets, route tables, security + groups, NACLs, peering connections, and endpoints. + + + An overview of how to configure a secure, scalable, highly available VPC that you can rely on in production. + + + A step-by-step guide to deploying a production-grade VPC in AWS using code from the Gruntwork Infrastructure as Code Library. + + + What to do once you’ve got your VPC(s) deployed. + + 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 index 4162ab341..b02f90cea 100644 --- 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/_docs-sources/guides/build-it-yourself/5-kubernetes-cluster/0-intro/0-what-youll-learn-in-this-guide.md b/_docs-sources/guides/build-it-yourself/5-kubernetes-cluster/0-intro/0-what-youll-learn-in-this-guide.md index 251526673..4529024c4 100644 --- a/_docs-sources/guides/build-it-yourself/5-kubernetes-cluster/0-intro/0-what-youll-learn-in-this-guide.md +++ b/_docs-sources/guides/build-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: - -
- -#### [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. - -
- -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. + + + + 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. + + + An overview of how to configure a secure, scalable, highly available Kubernetes cluster that you can rely on in + production. + + + A step-by-step guide to deploying a production-grade Kubernetes cluster in AWS using code from the Gruntwork + Infrastructure as Code Library. + + + What to do once you’ve got your Kubernetes cluster deployed. + + diff --git a/_docs-sources/guides/build-it-yourself/5-kubernetes-cluster/2-production-grade-design/0-intro.md b/_docs-sources/guides/build-it-yourself/5-kubernetes-cluster/2-production-grade-design/0-intro.md index dfd8a6dff..64ef40451 100644 --- a/_docs-sources/guides/build-it-yourself/5-kubernetes-cluster/2-production-grade-design/0-intro.md +++ b/_docs-sources/guides/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: diff --git a/_docs-sources/guides/build-it-yourself/6-achieve-compliance/0-intro/0-what-youll-learn-in-this-guide.md b/_docs-sources/guides/build-it-yourself/6-achieve-compliance/0-intro/0-what-youll-learn-in-this-guide.md index 662ad79f9..47ef0a926 100644 --- a/_docs-sources/guides/build-it-yourself/6-achieve-compliance/0-intro/0-what-youll-learn-in-this-guide.md +++ b/_docs-sources/guides/build-it-yourself/6-achieve-compliance/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: Achieve Compliance With the CIS AWS Foundations Benchmark --- +import { CardList } from "/src/components/CardGroup" + # Achieve Compliance With the CIS AWS Foundations Benchmark :::info @@ -13,6 +15,8 @@ If you need to access older versions, please [get in touch](/docs/guides/support ::: +## Overview + This is a complete guide to help you achieve compliance with the [CIS AWS Foundations Benchmark](https://www.cisecurity.org/benchmark/amazon_web_services/). By following this guide, you can launch infrastructure that is compliant with the Benchmark recommendations, and you'll be set to retain a @@ -25,32 +29,40 @@ Previously, we supported versions 1.3.0 and 1.2.0 of the Benchmark. If you are l ![CIS Benchmark Architecture](/img/guides/build-it-yourself/achieve-compliance/cis-account-architecture.png) -This guide consists of five main sections: - -
- -#### [Core concepts](#core_concepts) - -An overview of the AWS Foundations Benchmark, including its control sections and structure. - -#### [Production-grade design](#production_grade_design) - -How to use infrastructure as code to achieve compliance with minimal redundancy and maximum flexibility. - -#### [Deployment walkthrough](#deployment_walkthrough) - -A step-by-step guide to achieving compliance using the Gruntwork Infrastructure as Code Library and the -Gruntwork CIS AWS Foundations Benchmark wrapper modules. - -#### [Next steps](#next_steps) - -How to measure and maintain compliance. - -#### [Traceability matrix](#traceability_matrix) - -A reference table that maps each Benchmark recommendation to the corresponding section in the deployment +## Sections + +Feel free to read this guide from start to finish or skip around to whatever sections interest you. + + + + An overview of the AWS Foundations Benchmark, including its control sections and structure. + + + How to use infrastructure as code to achieve compliance with minimal redundancy and maximum flexibility. + + + A step-by-step guide to achieving compliance using the Gruntwork Infrastructure as Code Library and the Gruntwork CIS AWS Foundations Benchmark wrapper modules. + + + How to measure and maintain compliance. + + + A reference table that maps each Benchmark recommendation to the corresponding section in the deployment walkthrough. - -
- -Feel free to read the guide from start to finish or skip around to whatever part interests you! + + diff --git a/_docs-sources/guides/build-it-yourself/6-achieve-compliance/2-production-grade-design/0-intro.md b/_docs-sources/guides/build-it-yourself/6-achieve-compliance/2-production-grade-design/0-intro.md index a432437f9..62b42865c 100644 --- a/_docs-sources/guides/build-it-yourself/6-achieve-compliance/2-production-grade-design/0-intro.md +++ b/_docs-sources/guides/build-it-yourself/6-achieve-compliance/2-production-grade-design/0-intro.md @@ -2,7 +2,7 @@ pagination_label: Production-grade Design --- -# Intro +# Intro to Production-grade Design In [core concepts](../1-core-concepts/0-intro.md) we discussed the basics of the AWS Foundations Benchmark. Although it's possible to achieve compliance with the Benchmark by manually configuring each setting in the web console or entering the CLI commands, we diff --git a/_docs-sources/intro/overview/getting-started.mdx b/_docs-sources/intro/overview/getting-started.mdx index 3dd2c8370..12126b780 100644 --- a/_docs-sources/intro/overview/getting-started.mdx +++ b/_docs-sources/intro/overview/getting-started.mdx @@ -1,30 +1,29 @@ -import Card from "/src/components/Card" -import Grid from "/src/components/Grid" +import { CardList } from "/src/components/CardGroup" # Getting started In this introductory guide we’ll cover the fundamentals you'll need in order to be successful with Gruntwork. After setting up your account to gain access to Gruntwork products, we’ll help you install necessary tools and understand how they fit into the Gruntwork development workflow. Once finished, you’ll have the knowledge required to dive into our [guides](/docs/guides/welcome) and make full use of the IaC Library. - + Create an account with our Developer Portal to access the IaC Library and training courses. Prepare your local development environment for efficiently working with the industry standard DevOps tools. Learn how to leverage these tools with Gruntwork products to realize your infrastructure needs. - + diff --git a/docs/guides/build-it-yourself/2-landing-zone/0-intro/0-what-youll-learn-in-this-guide.md b/docs/guides/build-it-yourself/2-landing-zone/0-intro/0-what-youll-learn-in-this-guide.md index f4ce128b2..3988e9fbf 100644 --- a/docs/guides/build-it-yourself/2-landing-zone/0-intro/0-what-youll-learn-in-this-guide.md +++ b/docs/guides/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,37 +13,42 @@ 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: - -
- -#### [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. - -
+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. + + + + 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. + + + An overview of how to configure a secure, scalable, highly available AWS account structure that you can rely on in production. + + + 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. + + + What to do once you’ve got your AWS account structure configured. + + diff --git a/docs/guides/build-it-yourself/2-landing-zone/2-production-grade-design/0-intro.md b/docs/guides/build-it-yourself/2-landing-zone/2-production-grade-design/0-intro.md index b9487b3f5..7835e9c3a 100644 --- a/docs/guides/build-it-yourself/2-landing-zone/2-production-grade-design/0-intro.md +++ b/docs/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: @@ -13,5 +13,5 @@ we'll break it down piece by piece in the next few sections. diff --git a/docs/guides/build-it-yourself/3-pipelines/0-intro/0-what-youll-learn-in-this-guide.md b/docs/guides/build-it-yourself/3-pipelines/0-intro/0-what-youll-learn-in-this-guide.md index f70cdbe3f..5532ad218 100644 --- a/docs/guides/build-it-yourself/3-pipelines/0-intro/0-what-youll-learn-in-this-guide.md +++ b/docs/guides/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,34 +24,42 @@ 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 ](/img/guides/build-it-yourself/pipelines/walkthrough.gif) -This guide consists of four main sections: - -
- -#### [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. - -
+## Sections + +Feel free to read this guide from start to finish or skip around to whatever sections interest you. + + + + 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. + + + 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. + + + A step-by-step guide to deploying a production-grade CI/CD pipeline in AWS using code from the Gruntwork + Infrastructure as Code Library. + + + What to do once you’ve got your CI/CD pipeline set up. + + diff --git a/docs/guides/build-it-yourself/3-pipelines/2-production-grade-design/0-intro.md b/docs/guides/build-it-yourself/3-pipelines/2-production-grade-design/0-intro.md index 2c30161b1..fd0195611 100644 --- a/docs/guides/build-it-yourself/3-pipelines/2-production-grade-design/0-intro.md +++ b/docs/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: @@ -12,5 +12,5 @@ infrastructure code, using a platform that looks something like this: diff --git a/docs/guides/build-it-yourself/4-vpc/0-intro/0-what-youll-learn-in-this-guide.md b/docs/guides/build-it-yourself/4-vpc/0-intro/0-what-youll-learn-in-this-guide.md index 8fdcd793f..3ecd6f738 100644 --- a/docs/guides/build-it-yourself/4-vpc/0-intro/0-what-youll-learn-in-this-guide.md +++ b/docs/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,33 +13,39 @@ This guide hasn’t been updated in the past 6 months. If you find any inaccurac ::: -This guide consists of four main sections: - -
- -#### [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. - -
- -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. + + + + An overview of the core concepts you need to understand to use VPCs, including subnets, route tables, security + groups, NACLs, peering connections, and endpoints. + + + An overview of how to configure a secure, scalable, highly available VPC that you can rely on in production. + + + A step-by-step guide to deploying a production-grade VPC in AWS using code from the Gruntwork Infrastructure as Code Library. + + + What to do once you’ve got your VPC(s) deployed. + + diff --git a/docs/guides/build-it-yourself/4-vpc/2-production-grade-design/0-intro.md b/docs/guides/build-it-yourself/4-vpc/2-production-grade-design/0-intro.md index 9ed90d271..8681826b4 100644 --- a/docs/guides/build-it-yourself/4-vpc/2-production-grade-design/0-intro.md +++ b/docs/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: @@ -11,5 +11,5 @@ something like this: diff --git a/docs/guides/build-it-yourself/5-kubernetes-cluster/0-intro/0-what-youll-learn-in-this-guide.md b/docs/guides/build-it-yourself/5-kubernetes-cluster/0-intro/0-what-youll-learn-in-this-guide.md index 1d692163b..203eb0a57 100644 --- a/docs/guides/build-it-yourself/5-kubernetes-cluster/0-intro/0-what-youll-learn-in-this-guide.md +++ b/docs/guides/build-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,38 +13,42 @@ 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: - -
- -#### [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. - -
- -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. + + + + 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. + + + An overview of how to configure a secure, scalable, highly available Kubernetes cluster that you can rely on in + production. + + + A step-by-step guide to deploying a production-grade Kubernetes cluster in AWS using code from the Gruntwork + Infrastructure as Code Library. + + + What to do once you’ve got your Kubernetes cluster deployed. + + diff --git a/docs/guides/build-it-yourself/5-kubernetes-cluster/2-production-grade-design/0-intro.md b/docs/guides/build-it-yourself/5-kubernetes-cluster/2-production-grade-design/0-intro.md index 50c3d3073..5c2774d40 100644 --- a/docs/guides/build-it-yourself/5-kubernetes-cluster/2-production-grade-design/0-intro.md +++ b/docs/guides/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: @@ -11,5 +11,5 @@ that looks something like this: diff --git a/docs/guides/build-it-yourself/6-achieve-compliance/0-intro/0-what-youll-learn-in-this-guide.md b/docs/guides/build-it-yourself/6-achieve-compliance/0-intro/0-what-youll-learn-in-this-guide.md index 2ff895d39..7e97a7912 100644 --- a/docs/guides/build-it-yourself/6-achieve-compliance/0-intro/0-what-youll-learn-in-this-guide.md +++ b/docs/guides/build-it-yourself/6-achieve-compliance/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: Achieve Compliance With the CIS AWS Foundations Benchmark --- +import { CardList } from "/src/components/CardGroup" + # Achieve Compliance With the CIS AWS Foundations Benchmark :::info @@ -13,6 +15,8 @@ If you need to access older versions, please [get in touch](/docs/guides/support ::: +## Overview + This is a complete guide to help you achieve compliance with the [CIS AWS Foundations Benchmark](https://www.cisecurity.org/benchmark/amazon_web_services/). By following this guide, you can launch infrastructure that is compliant with the Benchmark recommendations, and you'll be set to retain a @@ -25,37 +29,45 @@ Previously, we supported versions 1.3.0 and 1.2.0 of the Benchmark. If you are l ![CIS Benchmark Architecture](/img/guides/build-it-yourself/achieve-compliance/cis-account-architecture.png) -This guide consists of five main sections: - -
- -#### [Core concepts](#core_concepts) - -An overview of the AWS Foundations Benchmark, including its control sections and structure. - -#### [Production-grade design](#production_grade_design) - -How to use infrastructure as code to achieve compliance with minimal redundancy and maximum flexibility. - -#### [Deployment walkthrough](#deployment_walkthrough) - -A step-by-step guide to achieving compliance using the Gruntwork Infrastructure as Code Library and the -Gruntwork CIS AWS Foundations Benchmark wrapper modules. - -#### [Next steps](#next_steps) - -How to measure and maintain compliance. - -#### [Traceability matrix](#traceability_matrix) - -A reference table that maps each Benchmark recommendation to the corresponding section in the deployment +## Sections + +Feel free to read this guide from start to finish or skip around to whatever sections interest you. + + + + An overview of the AWS Foundations Benchmark, including its control sections and structure. + + + How to use infrastructure as code to achieve compliance with minimal redundancy and maximum flexibility. + + + A step-by-step guide to achieving compliance using the Gruntwork Infrastructure as Code Library and the Gruntwork CIS AWS Foundations Benchmark wrapper modules. + + + How to measure and maintain compliance. + + + A reference table that maps each Benchmark recommendation to the corresponding section in the deployment walkthrough. - -
- -Feel free to read the guide from start to finish or skip around to whatever part interests you! + + diff --git a/docs/guides/build-it-yourself/6-achieve-compliance/2-production-grade-design/0-intro.md b/docs/guides/build-it-yourself/6-achieve-compliance/2-production-grade-design/0-intro.md index 0a8510ddb..8dd562600 100644 --- a/docs/guides/build-it-yourself/6-achieve-compliance/2-production-grade-design/0-intro.md +++ b/docs/guides/build-it-yourself/6-achieve-compliance/2-production-grade-design/0-intro.md @@ -2,7 +2,7 @@ pagination_label: Production-grade Design --- -# Intro +# Intro to Production-grade Design In [core concepts](../1-core-concepts/0-intro.md) we discussed the basics of the AWS Foundations Benchmark. Although it's possible to achieve compliance with the Benchmark by manually configuring each setting in the web console or entering the CLI commands, we @@ -18,5 +18,5 @@ edition of Terraform Up & Running](https://blog.gruntwork.io/terraform-up-runnin diff --git a/docs/intro/overview/getting-started.mdx b/docs/intro/overview/getting-started.mdx index 7336f6bb8..38e037708 100644 --- a/docs/intro/overview/getting-started.mdx +++ b/docs/intro/overview/getting-started.mdx @@ -1,35 +1,34 @@ -import Card from "/src/components/Card" -import Grid from "/src/components/Grid" +import { CardList } from "/src/components/CardGroup" # Getting started In this introductory guide we’ll cover the fundamentals you'll need in order to be successful with Gruntwork. After setting up your account to gain access to Gruntwork products, we’ll help you install necessary tools and understand how they fit into the Gruntwork development workflow. Once finished, you’ll have the knowledge required to dive into our [guides](/docs/guides/welcome) and make full use of the IaC Library. - + Create an account with our Developer Portal to access the IaC Library and training courses. Prepare your local development environment for efficiently working with the industry standard DevOps tools. Learn how to leverage these tools with Gruntwork products to realize your infrastructure needs. - + diff --git a/src/components/Card.module.css b/src/components/Card.module.css index 407f0027f..bbe6e84cd 100644 --- a/src/components/Card.module.css +++ b/src/components/Card.module.css @@ -5,13 +5,31 @@ padding: 2rem; width: 100%; height: 100%; - background-color: #f9fbfc; border-radius: 6px; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); transition: 0.15s ease-in-out; +} + +.card.horizontal { + flex-direction: row; + align-items: left; +} + +.flush { + background-color: transparent; + box-shadow: none; + border: solid 1px #ddd; +} + +.float { + background-color: #f9fbfc; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); border: solid 1px transparent; } +.card.horizontal .title { + margin-bottom: 0.25rem; +} + .card .icon { height: 60px; object-fit: contain; @@ -43,6 +61,15 @@ margin-bottom: 0; } +.card .num { + font-weight: bold; + font-size: 2rem; + display: inline-block; + margin-right: 1.5rem; + margin-top: -1rem !important; + color: #5849a6; +} + ul.tags { padding: 1em 0 0 0; margin: auto 0 0 0; diff --git a/src/components/Card.tsx b/src/components/Card.tsx index 9a1766887..3feafcb19 100644 --- a/src/components/Card.tsx +++ b/src/components/Card.tsx @@ -1,34 +1,58 @@ import React from "react" +import clsx from "clsx" import styles from "./Card.module.css" -type CardProps = { +export type CardProps = { title: string - icon?: string - href?: string description?: JSX.Element + href?: string + icon?: string + number?: number tags?: string[] + orientation?: "horizontal" | "vertical" + appearance?: "flush" | "float" + className?: string } export const Card: React.FunctionComponent = ({ title, - icon, description, href, + icon, + number, tags, + orientation = "vertical", + appearance = "float", + className, children, }) => { const body = ( -
- {icon && {title}} -

{title}

-
{children || description}
- {tags && ( -
    - {tags.map((tag, idx) => ( -
  • {tag}
    • - ))} -
+
+
+ {number && {number}} + {icon && !number && ( + {title} + )} +
+
+

{title}

+
{children || description}
+ {tags && ( +
    + {tags.map((tag, idx) => ( +
  • {tag}
    • + ))} +
+ )} +
) diff --git a/src/components/CardGroup.tsx b/src/components/CardGroup.tsx new file mode 100644 index 000000000..608b7fafc --- /dev/null +++ b/src/components/CardGroup.tsx @@ -0,0 +1,57 @@ +import React from "react" +import clsx from "clsx" +import { Card, CardProps } from "./Card" +import { Grid, GridProps } from "./Grid" + +interface CardGroupProps extends GridProps { + commonCardProps?: Partial + numbered?: boolean +} + +export const CardGroup: React.FunctionComponent = ({ + commonCardProps, + numbered, + cols, + gap, + colGap, + rowGap, + equalHeightRows, + children, +}) => { + return ( + + {React.Children.map(children || null, (child: JSX.Element, idx) => ( + + ))} + + ) +} + +export const CardList: React.FunctionComponent = (props) => { + const { commonCardProps, ...allButCommonCardProps } = props + return ( + + ) +} + +export default CardGroup diff --git a/src/components/Grid.tsx b/src/components/Grid.tsx index 508597ffa..247a6f995 100644 --- a/src/components/Grid.tsx +++ b/src/components/Grid.tsx @@ -2,7 +2,7 @@ import React from "react" import clsx from "clsx" import styles from "./Grid.module.css" -type GridProps = { +export type GridProps = { cols?: number gap?: number | string colGap?: number | string @@ -12,7 +12,7 @@ type GridProps = { children?: JSX.Element | JSX.Element[] } -export default function Grid({ +export const Grid: React.FunctionComponent = ({ cols = 3, gap = "1rem", colGap, @@ -20,7 +20,7 @@ export default function Grid({ equalHeightRows = true, stacked = false, children, -}: GridProps): JSX.Element { +}) => { const classes = clsx( styles.grid, cols == 1 && styles.col1, @@ -51,3 +51,5 @@ export default function Grid({ ) } + +export default Grid