Skip to content

Add Slides component with video embed support #839

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
milldr wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add Slides component with video embed support #839

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
126 changes: 21 additions & 105 deletions docs/jumpstart/handoffs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,115 +2,31 @@
title: Watch All Handoffs
sidebar_label: Watch All Handoffs
sidebar_position: 5
icon: false
---
import Slider, { Slide } from '@site/src/components/Slider'
import Steps from '@site/src/components/Steps'
import Step from '@site/src/components/Step'
import StepNumber from '@site/src/components/StepNumber'
import PrimaryCTA from '@site/src/components/PrimaryCTA'
import ReactPlayer from 'react-player'
import Intro from '@site/src/components/Intro'
import Intro from '@site/src/components/Intro';
import ActionCard from '@site/src/components/ActionCard';
import PrimaryCTA from '@site/src/components/PrimaryCTA';
import SecondaryCTA from '@site/src/components/SecondaryCTA';

:::info Legacy Videos Available
The original AI-narrated overview videos have been archived.
Updated slide deck presentations are coming soon.
:::

<Intro>
We've organized everything into "layers" that represent the different concerns of our infrastructure. Watch these short videos to get an overview of each layer, the problems we faced, and how we solved them.
We've organized everything into "layers" that represent the different concerns
of our infrastructure. These overview materials help you understand each layer,
the problems we faced, and how we solved them.
</Intro>

<div class="hidden">
https://github.com/facebook/docusaurus/issues/6201
## Placeholder {#hidden}
</div>

<Slider>
<Slide title="Introduction to Toolchain">
<figure>
<ReactPlayer controls url="https://docs.cloudposse.com/assets/refarch/handoffs/introduction-to-toolchain.mp4" />
<figcaption>AI generated voice</figcaption>
</figure>

Learn about the essential tools Cloud Posse uses to manage infrastructure as code. This guide covers the Geodesic Toolbox Container for standardizing development environments, the Atmos framework for implementing conventions and workflows, Terraform for managing cloud infrastructure, and GitHub Actions for CI/CD automation.

<PrimaryCTA to="/layers/project">Get Started</PrimaryCTA>
</Slide>

<Slide title="Account Management">
<figure>
<ReactPlayer controls url="https://docs.cloudposse.com/assets/refarch/handoffs/account-management.mp4" />
<figcaption>AI generated voice</figcaption>
</figure>

Review how Cloud Posse designs and manages AWS Account architectures using Atmos and Terraform, aligning with the AWS Well-Architected Framework.

<PrimaryCTA to="/layers/accounts">Get Started</PrimaryCTA>
</Slide>

<Slide title="Identity and Authentication">
<figure>
<ReactPlayer controls url="https://docs.cloudposse.com/assets/refarch/handoffs/identity-and-authentication.mp4" />
<figcaption>AI generated voice</figcaption>
</figure>

Learn how Cloud Posse sets up fine-grained access control for an entire organization using IAM roles, AWS SAML, and AWS IAM Identity Center (SSO). We addresses the challenges we encountered of using various login methods and tools and introduce our solution involving Teams and Team Roles to manage access across multiple AWS accounts.

<PrimaryCTA to="/layers/identity">Get Started</PrimaryCTA>
</Slide>

<Slide title="Network & DNS">
<figure>
<ReactPlayer controls url="https://docs.cloudposse.com/assets/refarch/handoffs/network-and-dns.mp4" />
<figcaption>AI generated voice</figcaption>
</figure>

Understand Cloud Posse’s approach to designing robust and scalable Network and DNS architectures on AWS, with a focus on symmetry, account-level isolation, security, and reusability. We cover essential topics such as account isolation, connecting multiple accounts together using Transit Gateways, deploying AWS Client VPN for remote network access by developers, and differentiating between DNS service discovery and branded vanity domains used by customers.

<PrimaryCTA to="/layers/network">Get Started</PrimaryCTA>

</Slide>

<Slide title="Software Delivery">
<figure>
<ReactPlayer controls url='https://docs.cloudposse.com/assets/refarch/handoffs/release-engineering.mp4' />

<figcaption>AI generated voice</figcaption>
</figure>

<PrimaryCTA to="/layers/software-delivery">Get Started</PrimaryCTA>
</Slide>

<Slide title="Terraform Automation with GitHub Actions">
<figure>
<ReactPlayer controls url='https://docs.cloudposse.com/assets/refarch/handoffs/gitops.mp4' />
<figcaption>AI generated voice</figcaption>
</figure>

<PrimaryCTA to="/layers/atmos-pro">Get Started</PrimaryCTA>
</Slide>

<Slide title="ECS Platform">
<figure>
<ReactPlayer controls url="https://docs.cloudposse.com/assets/refarch/handoffs/ecs.mp4" />
<figcaption>AI generated voice</figcaption>
</figure>

<PrimaryCTA to="/layers/ecs">Get Started</PrimaryCTA>
</Slide>

<Slide title="Monitoring & SRE">
<figure>
<ReactPlayer controls url='https://docs.cloudposse.com/assets/refarch/handoffs/monitoring.mp4' />
<figcaption>AI generated voice</figcaption>
</figure>

<PrimaryCTA to="/layers/observability">Get Started</PrimaryCTA>
</Slide>

<Slide title="Component Development">
<figure>
<ReactPlayer controls url="https://docs.cloudposse.com/assets/refarch/handoffs/component-development.mp4" />
<figcaption>AI generated voice</figcaption>
</figure>
## Overview Materials

<PrimaryCTA to="/learn/component-development">Get Started</PrimaryCTA>
</Slide>
<ActionCard title="View Legacy Setup Videos">
Watch the original AI-narrated overview videos that cover all layers of the
reference architecture, from foundation through platform and development.

</Slider>
<div>
<PrimaryCTA to="/resources/legacy/setup-videos/">View Legacy Videos</PrimaryCTA>
<SecondaryCTA to="/layers/foundation">Start with Foundation</SecondaryCTA>
</div>
</ActionCard>
10 changes: 5 additions & 5 deletions docs/layers/accounts/accounts.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ sidebar_class_name: hidden
---
import Intro from '@site/src/components/Intro';
import KeyPoints from '@site/src/components/KeyPoints';
import ReactPlayer from "react-player";
import Slides from '@site/src/components/Slides';
import ActionCard from '@site/src/components/ActionCard';
import PrimaryCTA from '@site/src/components/PrimaryCTA';
import SecondaryCTA from '@site/src/components/SecondaryCTA';
Expand All @@ -22,10 +22,10 @@ This chapter presents how Cloud Posse designs and manages AWS Account architectu
- The set of components we use to provision, configure, and manage AWS accounts, including account-level settings, service control policies, and Terraform state backends, using native Terraform with Atmos
</KeyPoints>

<figure>
<ReactPlayer controls url="https://docs.cloudposse.com/assets/refarch/handoffs/account-management.mp4" />
<figcaption>AI generated voice</figcaption>
</figure>
<Slides
title="Account Management Overview"
videoUrl="https://docs.cloudposse.com/assets/refarch/handoffs/account-management.mp4"
/>

## The Problem

Expand Down
10 changes: 5 additions & 5 deletions docs/layers/ecs/ecs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,16 @@ title: "ECS Foundational Platform"
sidebar_label: "ECS"
sidebar_class_name: hidden
---
import ReactPlayer from "react-player";
import Slides from '@site/src/components/Slides';
import Intro from '@site/src/components/Intro';
import KeyPoints from '@site/src/components/KeyPoints';

Elastic Container Service (ECS) is a fully-managed container orchestration service provided by Amazon Web Services (AWS) that simplifies the process of deploying, managing, and scaling containerized applications. ECS makes it easy to run and manage Docker containers on AWS infrastructure, providing a secure and scalable platform for your applications.

<figure>
<ReactPlayer controls url="https://docs.cloudposse.com/assets/refarch/handoffs/ecs.mp4" />
<figcaption>AI generated voice</figcaption>
</figure>
<Slides
title="ECS Platform Overview"
videoUrl="https://docs.cloudposse.com/assets/refarch/handoffs/ecs.mp4"
/>

## The Problem

Expand Down
34 changes: 17 additions & 17 deletions docs/layers/foundation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import StepNumber from '@site/src/components/StepNumber';
import Step from '@site/src/components/Step';
import PrimaryCTA from '@site/src/components/PrimaryCTA';
import SecondaryCTA from '@site/src/components/SecondaryCTA';
import ReactPlayer from 'react-player';
import Slides from '@site/src/components/Slides';

<Intro>
To build a reliable infrastructure, we must start with a solid foundation. Our reference architecture is designed with best practices and consistent conventions to ensure it is well-architected from the ground up. As part of this process, you’ll make critical design decisions that will shape your infrastructure. Next, you’ll initialize your infrastructure repository and then begin by provisioning your AWS Organizations, accounts, networks, DNS, and fine-grained IAM roles and policies. Once your foundation is complete, you’ll be ready to build a platform to deliver your applications.
Expand All @@ -24,10 +24,10 @@ import ReactPlayer from 'react-player';
3. Then import the Cloud Posse reference architecture and prepare the Geodesic toolbox image to get ready to provision your infrastructure.
</Steps>

<figure>
<ReactPlayer controls url="https://docs.cloudposse.com/assets/refarch/handoffs/introduction-to-toolchain.mp4" />
<figcaption>AI generated voice</figcaption>
</figure>
<Slides
title="Introduction to Toolchain"
videoUrl="https://docs.cloudposse.com/assets/refarch/handoffs/introduction-to-toolchain.mp4"
/>

<PrimaryCTA to="/layers/project">Get Started</PrimaryCTA>
</Step>
Expand All @@ -41,10 +41,10 @@ import ReactPlayer from 'react-player';
3. Then proceed to organize the accounts into Organizational Units (OUs), apply Service Control Policies (SCPs), and configure account-level settings.
</Steps>

<figure>
<ReactPlayer controls url="https://docs.cloudposse.com/assets/refarch/handoffs/account-management.mp4" />
<figcaption>AI generated voice</figcaption>
</figure>
<Slides
title="Account Management"
videoUrl="https://docs.cloudposse.com/assets/refarch/handoffs/account-management.mp4"
/>

<PrimaryCTA to="/layers/accounts">Get Started</PrimaryCTA>
</Step>
Expand All @@ -54,10 +54,10 @@ import ReactPlayer from 'react-player';

Learn how Cloud Posse sets up fine-grained access control for an entire organization using Permission Sets, IAM roles, and AWS IAM Identity Center (SSO). It addresses the challenges of managing access across multiple AWS accounts with a solution that ensures precise control, easy role switching, and compatibility with different identity providers. This approach provides seamless authentication via Atmos Auth for CLI access, programmatic access for GitHub Actions via OIDC, and a user-friendly login experience with AWS Identity Center.

<figure>
<ReactPlayer controls url="https://docs.cloudposse.com/assets/refarch/handoffs/identity-and-authentication.mp4" />
<figcaption>AI generated voice</figcaption>
</figure>
<Slides
title="Identity and Authentication"
videoUrl="https://docs.cloudposse.com/assets/refarch/handoffs/identity-and-authentication.mp4"
/>

<PrimaryCTA to="/layers/identity">Get Started</PrimaryCTA>
</Step>
Expand All @@ -67,10 +67,10 @@ import ReactPlayer from 'react-player';

Finally, understand Cloud Posse’s approach to designing robust and scalable Network and DNS architectures on AWS, with a focus on symmetry, account-level isolation, security, and reusability. We cover essential topics such as account isolation, connecting multiple accounts together using Transit Gateways, deploying AWS Client VPN for remote network access by developers, and differentiating between DNS service discovery and branded vanity domains used by customers. The solution includes reusable network building blocks, ensuring consistent deployment of VPCs and subnets, accommodating multi-region global networks, and addressing special network design considerations depending on whether you'll use ECS or EKS.

<figure>
<ReactPlayer controls url="https://docs.cloudposse.com/assets/refarch/handoffs/network-and-dns.mp4" />
<figcaption>AI generated voice</figcaption>
</figure>
<Slides
title="Network and DNS"
videoUrl="https://docs.cloudposse.com/assets/refarch/handoffs/network-and-dns.mp4"
/>

<PrimaryCTA to="/layers/network">Get Started</PrimaryCTA>
</Step>
Expand Down
10 changes: 5 additions & 5 deletions docs/layers/gitops/gitops.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import Intro from '@site/src/components/Intro';
import KeyPoints from '@site/src/components/KeyPoints';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import ReactPlayer from 'react-player';
import Slides from '@site/src/components/Slides';
import CodeBlock from '@theme/CodeBlock';

:::warning Deprecated
Expand All @@ -25,10 +25,10 @@ This content is preserved for users with existing GitHub Actions GitOps deployme
GitOps is a cloud-native continuous deployment methodology that uses Git as the single source of truth for declarative infrastructure and applications. Changes to infrastructure or applications are made through Git commits, and the actual state is automatically adjusted to match the desired state expressed in the Git repository. This approach provides an audit trail for changes, simplifies rollback, and enhances collaboration and visibility across teams.
</Intro>

<figure>
<ReactPlayer controls url='https://docs.cloudposse.com/assets/refarch/handoffs/gitops.mp4' />
<figcaption>AI generated voice</figcaption>
</figure>
<Slides
title="GitOps with Terraform"
videoUrl="https://docs.cloudposse.com/assets/refarch/handoffs/gitops.mp4"
/>

## The Problem

Expand Down
10 changes: 5 additions & 5 deletions docs/layers/identity/identity.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ sidebar_label: "Understand Identity"
sidebar_class_name: hidden
description: Setup fine-grained access control for an entire organization
---
import ReactPlayer from "react-player";
import Slides from '@site/src/components/Slides';
import Steps from '@site/src/components/Steps';
import Step from '@site/src/components/Step';
import StepNumber from '@site/src/components/StepNumber';
Expand All @@ -22,10 +22,10 @@ Cloud Posse's identity architecture provides fine-grained access control for AWS
1. **Static Configuration** — Account mappings as static YAML, no dynamic lookups or circular dependencies
</Steps>

<figure>
<ReactPlayer controls url="https://docs.cloudposse.com/assets/refarch/handoffs/identity-and-authentication.mp4" />
<figcaption>AI generated voice</figcaption>
</figure>
<Slides
title="Identity and Authentication Overview"
videoUrl="https://docs.cloudposse.com/assets/refarch/handoffs/identity-and-authentication.mp4"
/>

## Our Requirements

Expand Down
10 changes: 5 additions & 5 deletions docs/layers/monitoring/monitoring.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,15 @@ sidebar_class_name: hidden
---
import Intro from '@site/src/components/Intro';
import KeyPoints from '@site/src/components/KeyPoints';
import ReactPlayer from 'react-player';
import Slides from '@site/src/components/Slides';
import CategoryList from '@site/src/components/CategoryList';

Monitoring is a key component of any production system. It is important to have visibility into the health of your system and to be able to react to issues before they become problems.

<figure>
<ReactPlayer controls url='https://docs.cloudposse.com/assets/refarch/handoffs/monitoring.mp4' />
<figcaption>AI generated voice</figcaption>
</figure>
<Slides
title="Monitoring Overview"
videoUrl="https://docs.cloudposse.com/assets/refarch/handoffs/monitoring.mp4"
/>

## The Problem

Expand Down
10 changes: 5 additions & 5 deletions docs/layers/network/network.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ sidebar_label: "Network and DNS"
sidebar_class_name: hidden
description: "Build a robust, scalable AWS Network and DNS architectures"
---
import ReactPlayer from "react-player";
import Slides from '@site/src/components/Slides';
import Intro from '@site/src/components/Intro';
import KeyPoints from '@site/src/components/KeyPoints';

Expand All @@ -14,10 +14,10 @@ import KeyPoints from '@site/src/components/KeyPoints';

This document is intended to present Cloud Posse's approach to designing Network and DNS architectures. The contents of this document assume that the reader is familiar with the basics of [networking and content delivery services in AWS](https://aws.amazon.com/products/networking/).

<figure>
<ReactPlayer controls url="https://docs.cloudposse.com/assets/refarch/handoffs/network-and-dns.mp4" />
<figcaption>AI generated voice</figcaption>
</figure>
<Slides
title="Network and DNS Overview"
videoUrl="https://docs.cloudposse.com/assets/refarch/handoffs/network-and-dns.mp4"
/>

## The Problem

Expand Down
10 changes: 5 additions & 5 deletions docs/layers/observability.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import Step from '@site/src/components/Step';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import PrimaryCTA from '@site/src/components/PrimaryCTA';
import ReactPlayer from 'react-player';
import Slides from '@site/src/components/Slides';

<Intro>
With so many moving pieces, it's crucial to monitor what's happening under the hood to understand what's going on. This includes gathering telemetry in the form of metrics and logs coming from your services and the underlying infrastructure. This data must be shipped somewhere to build dashboards and raise alerts that will escalate to the appropriate personnel. Depending on your business needs, you may also need to monitor for security and compliance against various technical benchmarks like PCI/DSS, CIS, ISO 27001, and others.
Expand Down Expand Up @@ -43,10 +43,10 @@ import ReactPlayer from 'react-player';
</TabItem>
</Tabs>

<figure>
<ReactPlayer controls url='https://docs.cloudposse.com/assets/refarch/handoffs/monitoring.mp4' />
<figcaption>AI generated voice</figcaption>
</figure>
<Slides
title="Observability Overview"
videoUrl="https://docs.cloudposse.com/assets/refarch/handoffs/monitoring.mp4"
/>

</Step>

Expand Down
Loading
Loading