From ba850c4bc4768d511d30527619546dc217c43827 Mon Sep 17 00:00:00 2001 From: milldr Date: Mon, 29 Dec 2025 14:42:40 -0500 Subject: [PATCH] feat: Add Slides component with video embed mode and restore legacy videos MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Implemented a new Slides component that supports multiple display modes: - Interactive MDX slides with speaker notes and theater/fullscreen modes - Video embeds for legacy AI-narrated content - Google Slides embeds - Placeholder mode for future slide decks Restored video embeds in 14 documentation files across: - Foundation layers (toolchain, accounts, identity, network) - Platform layers (ECS, GitOps) - Software delivery and monitoring documentation - Learning materials (onboarding, component development) The concepts.mdx page keeps interactive slides for the "Introduction to Toolchain" presentation, while all other pages can now display legacy videos to ensure continuous knowledge sharing while we systematically replace them with new slide content. ๐Ÿค– Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Haiku 4.5 --- docs/jumpstart/handoffs.mdx | 126 +-- docs/layers/accounts/accounts.mdx | 10 +- docs/layers/ecs/ecs.mdx | 10 +- docs/layers/foundation.mdx | 34 +- docs/layers/gitops/gitops.mdx | 10 +- docs/layers/identity/identity.mdx | 10 +- docs/layers/monitoring/monitoring.mdx | 10 +- docs/layers/network/network.mdx | 10 +- docs/layers/observability.mdx | 10 +- docs/layers/platform.mdx | 18 +- .../layers/software-delivery/fundamentals.mdx | 10 +- .../software-delivery/software-delivery.mdx | 10 +- .../component-development.mdx | 10 +- docs/learn/concepts.mdx | 218 ++++- docs/learn/onboarding.mdx | 10 +- .../legacy/setup-videos/development.mdx | 38 + .../legacy/setup-videos/foundation-setup.mdx | 87 ++ .../legacy/setup-videos/platform-setup.mdx | 83 ++ .../legacy/setup-videos/setup-videos.mdx | 21 + src/components/slides/index.css | 760 ++++++++++++++++++ src/components/slides/index.js | 313 ++++++++ 21 files changed, 1617 insertions(+), 191 deletions(-) create mode 100644 docs/resources/legacy/setup-videos/development.mdx create mode 100644 docs/resources/legacy/setup-videos/foundation-setup.mdx create mode 100644 docs/resources/legacy/setup-videos/platform-setup.mdx create mode 100644 docs/resources/legacy/setup-videos/setup-videos.mdx create mode 100644 src/components/slides/index.css create mode 100644 src/components/slides/index.js diff --git a/docs/jumpstart/handoffs.mdx b/docs/jumpstart/handoffs.mdx index 3ade09a9d..1dfb71c89 100644 --- a/docs/jumpstart/handoffs.mdx +++ b/docs/jumpstart/handoffs.mdx @@ -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. +::: - 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. - - - - -
- -
AI generated voice
-
- - 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. - - Get Started - - - -
- -
AI generated voice
-
- - Review how Cloud Posse designs and manages AWS Account architectures using Atmos and Terraform, aligning with the AWS Well-Architected Framework. - - Get Started - - - -
- -
AI generated voice
-
- - 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. - - Get Started - - - -
- -
AI generated voice
-
- - 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. - - Get Started - - - - -
- - -
AI generated voice
-
- - Get Started - - - -
- -
AI generated voice
-
- - Get Started - - - -
- -
AI generated voice
-
- - Get Started - - - -
- -
AI generated voice
-
- - Get Started - - - -
- -
AI generated voice
-
+## Overview Materials - Get Started - + + Watch the original AI-narrated overview videos that cover all layers of the + reference architecture, from foundation through platform and development. - +
+ View Legacy Videos + Start with Foundation +
+ diff --git a/docs/layers/accounts/accounts.mdx b/docs/layers/accounts/accounts.mdx index c33b1f11b..ffe6c845a 100644 --- a/docs/layers/accounts/accounts.mdx +++ b/docs/layers/accounts/accounts.mdx @@ -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'; @@ -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 -
- -
AI generated voice
-
+ ## The Problem diff --git a/docs/layers/ecs/ecs.mdx b/docs/layers/ecs/ecs.mdx index f254da0f3..3c97ef1c1 100644 --- a/docs/layers/ecs/ecs.mdx +++ b/docs/layers/ecs/ecs.mdx @@ -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. -
- -
AI generated voice
-
+ ## The Problem diff --git a/docs/layers/foundation.mdx b/docs/layers/foundation.mdx index f583189f4..efd7705c1 100644 --- a/docs/layers/foundation.mdx +++ b/docs/layers/foundation.mdx @@ -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'; 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. @@ -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. -
- -
AI generated voice
-
+ Get Started @@ -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. -
- -
AI generated voice
-
+ Get Started @@ -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. -
- -
AI generated voice
-
+ Get Started @@ -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. -
- -
AI generated voice
-
+ Get Started diff --git a/docs/layers/gitops/gitops.mdx b/docs/layers/gitops/gitops.mdx index 6982ea7a9..242b166ff 100644 --- a/docs/layers/gitops/gitops.mdx +++ b/docs/layers/gitops/gitops.mdx @@ -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 @@ -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. -
- -
AI generated voice
-
+ ## The Problem diff --git a/docs/layers/identity/identity.mdx b/docs/layers/identity/identity.mdx index 8cb86fd1a..0398499ca 100644 --- a/docs/layers/identity/identity.mdx +++ b/docs/layers/identity/identity.mdx @@ -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'; @@ -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 -
- -
AI generated voice
-
+ ## Our Requirements diff --git a/docs/layers/monitoring/monitoring.mdx b/docs/layers/monitoring/monitoring.mdx index 55a31b268..665d0b8e3 100644 --- a/docs/layers/monitoring/monitoring.mdx +++ b/docs/layers/monitoring/monitoring.mdx @@ -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. -
- -
AI generated voice
-
+ ## The Problem diff --git a/docs/layers/network/network.mdx b/docs/layers/network/network.mdx index 88dbde2aa..dfbecc5ed 100644 --- a/docs/layers/network/network.mdx +++ b/docs/layers/network/network.mdx @@ -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'; @@ -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/). -
- -
AI generated voice
-
+ ## The Problem diff --git a/docs/layers/observability.mdx b/docs/layers/observability.mdx index 53f8002c1..7c39c074d 100644 --- a/docs/layers/observability.mdx +++ b/docs/layers/observability.mdx @@ -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'; 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. @@ -43,10 +43,10 @@ import ReactPlayer from 'react-player'; -
- -
AI generated voice
-
+ diff --git a/docs/layers/platform.mdx b/docs/layers/platform.mdx index 013cb9752..32692e6a7 100644 --- a/docs/layers/platform.mdx +++ b/docs/layers/platform.mdx @@ -8,7 +8,7 @@ import Step from '@site/src/components/Step'; import PrimaryCTA from '@site/src/components/PrimaryCTA'; import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -import ReactPlayer from 'react-player'; +import Slides from '@site/src/components/Slides'; Your platform ensures consistent service delivery every time. A well-designed platform seamlessly integrates with your monitoring, security, and compliance systems, building on your established foundation. Automated software delivery pipelines deploy new services quickly and easily. The reference architecture supports AWS EKS, Amazon ECS, and Lambda functions. @@ -25,10 +25,10 @@ import ReactPlayer from 'react-player'; 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. One of the major benefits of ECS over EKS, is that there is no need to upgrade the underlying platform. ECS is a managed service that is always up to date. This means that you can focus on your application and not the underlying platform. -
- -
AI generated voice
-
+ Get Started @@ -56,10 +56,10 @@ import ReactPlayer from 'react-player'; Use GitHub Actions to automate your Terraform deployments with Atmos, ensuring consistent infrastructure across your environments. -
- -
AI generated voice
-
+ Get Started diff --git a/docs/layers/software-delivery/fundamentals.mdx b/docs/layers/software-delivery/fundamentals.mdx index 900804c97..4df6a4d73 100644 --- a/docs/layers/software-delivery/fundamentals.mdx +++ b/docs/layers/software-delivery/fundamentals.mdx @@ -6,7 +6,7 @@ description: "Get started with Cloud Posse's Release Engineering." --- 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 Note from '@site/src/components/Note'; @@ -16,10 +16,10 @@ For more, see [What is DevOps](https://aws.amazon.com/devops/what-is-devops/). -
- -
AI generated voice
-
+ ## The Problem diff --git a/docs/layers/software-delivery/software-delivery.mdx b/docs/layers/software-delivery/software-delivery.mdx index 3592a7132..388948f17 100644 --- a/docs/layers/software-delivery/software-delivery.mdx +++ b/docs/layers/software-delivery/software-delivery.mdx @@ -8,7 +8,7 @@ import Step from '@site/src/components/Step'; import PrimaryCTA from '@site/src/components/PrimaryCTA'; import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -import ReactPlayer from 'react-player'; +import Slides from '@site/src/components/Slides'; Software delivery is the process of moving your applications from development to production. This involves building, testing, deploying, and promoting them through environments like dev, staging, and production, with approval gates at each stage. Whether you're using EKS, ECS, or Lambdas, the solutions may vary slightly, but we maintain a consistent, reusable pattern across all applications. @@ -47,10 +47,10 @@ import ReactPlayer from 'react-player'; -
- -
AI generated voice
-
+ diff --git a/docs/learn/component-development/component-development.mdx b/docs/learn/component-development/component-development.mdx index e0c2b0303..afb3b21bf 100644 --- a/docs/learn/component-development/component-development.mdx +++ b/docs/learn/component-development/component-development.mdx @@ -6,7 +6,7 @@ sidebar_position: 5 --- 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 TaskList from '@site/src/components/TaskList'; import Steps from '@site/src/components/Steps'; import Step from '@site/src/components/Step'; @@ -17,10 +17,10 @@ import Admonition from '@theme/Admonition'; While all companies are unique, their infrastructure doesn't need to be. Well-built infrastructure consists of reusable building blocks that implement all the standard components like servers, clusters, load balancers, etc. Rather than building everything from scratch โ€œthe hard wayโ€, there's an easier way. Using our โ€œreference architectureโ€ and its service catalog of all the essential pieces of infrastructure, everything a business needs can be composed together as an architecture using โ€œStackโ€ configurations. Best of all, it's all native terraform. -
- -
AI generated voice
-
+ # Our Solution diff --git a/docs/learn/concepts.mdx b/docs/learn/concepts.mdx index 455c68afc..25440b889 100644 --- a/docs/learn/concepts.mdx +++ b/docs/learn/concepts.mdx @@ -6,17 +6,225 @@ import Intro from '@site/src/components/Intro'; import Steps from '@site/src/components/Steps'; import StepNumber from '@site/src/components/StepNumber'; import Step from '@site/src/components/Step'; -import ReactPlayer from 'react-player'; +import Slides, { Slide } from '@site/src/components/Slides'; Your platform ensures consistent service delivery every time. A well-designed platform seamlessly integrates with your monitoring, security, and compliance systems, building on your established foundation. Automated software delivery pipelines deploy new services quickly and easily. The reference architecture supports AWS EKS, Amazon ECS, and Lambda functions. -
- -
AI generated voice
-
+ + + ## Introduction to Toolchain + + **The "Big Picture" Overview** + + Learn the fundamentals of Cloud Posse's reference architecture, terminology, conventions, and toolset. + + + + ## Goals for Today + + - **Terminology** โ€” Learn Cloud Posse's unique terms + - **Conventions** โ€” Understand our naming patterns + - **Repository Layout** โ€” Navigate your infrastructure repo + - **Toolbox** โ€” Get started with Geodesic + + + + ## Stacks + + Written as **YAML** configuration that defines instances of Components. + + ```yaml + components: + terraform: + cloudtrail: + vars: + enabled: true + name: cloudtrail + is_organization_trail: true + ``` + + Found under `stacks/` in your infrastructure repository. + + + + ## Components + + Reusable building blocks of Infrastructure-as-Code (Terraform root modules). + + ``` + components/terraform/ + โ”œโ”€โ”€ account + โ”œโ”€โ”€ acm + โ”œโ”€โ”€ aurora-postgres + โ””โ”€โ”€ datadog-monitor/ + โ”œโ”€โ”€ main.tf + โ”œโ”€โ”€ variables.tf + โ””โ”€โ”€ outputs.tf + ``` + + Configured within one or more Stacks. + + + + ## Modules + + Any Terraform module called from another module (child modules). + + ```hcl + module "eks" { + source = "cloudposse/stack-config/yaml//modules/remote-state" + version = "1.3.1" + component = var.eks_component_name + context = module.this.context + } + ``` + + Cloud Posse maintains open source modules at [github.com/cloudposse](https://github.com/cloudposse). + + + + ## Environment + + Shorthand notation for the AWS Region where resources are deployed. + + | Region | Short | Fixed | + |--------|-------|-------| + | us-east-1 | use1 | ue1 | + | us-west-2 | usw2 | uw2 | + | eu-west-1 | euw1 | ew1 | + + We recommend **short** notation (3-4 characters). + + + + ## Stage + + A classification for different life cycles in infrastructure management. + + - **core:** audit, identity, network, security, dns + - **plat:** dev, staging, prod, sandbox + + In our industry, "Environment" frequently describes what Cloud Posse refers to as "Stage." + + + + ## Tenant + + A logical grouping of stages (typically mirrors AWS Organizational Units). + + - **core** โ€” Management accounts (singletons) + - **plat** โ€” Application platform accounts (dynamic) + + You can create multiple platform tenants for different teams or applications. + + + + ## Repository Layout + + ``` + infrastructure/ + โ”œโ”€โ”€ README.md + โ”œโ”€โ”€ components/ + โ”‚ โ””โ”€โ”€ terraform/ + โ”œโ”€โ”€ docs/ + โ”‚ โ”œโ”€โ”€ adr/ + โ”‚ โ””โ”€โ”€ setup/ + โ”œโ”€โ”€ rootfs/ + โ””โ”€โ”€ stacks/ + ``` + + Configuration lives in `stacks/`, Terraform code in `components/terraform/`. + + + + ## Stack Layout + + ``` + stacks/ + โ”œโ”€โ”€ catalog/ + โ””โ”€โ”€ orgs/ + โ””โ”€โ”€ acme/ + โ”œโ”€โ”€ core/ + โ””โ”€โ”€ plat/ + โ”œโ”€โ”€ dev/ + โ”œโ”€โ”€ staging/ + โ””โ”€โ”€ prod/ + ``` + + **catalog/** defines baselines, **orgs/** defines deployments. + + + + ## Atmos + + Manage environments easily in Terraform with DRY configuration. + + - Simplify complex architectures + - Free and Open Source + - Native Terraform integration + + [atmos.tools](https://atmos.tools/) + + + + ## Atmos Workflows + + Combine multiple commands into one executable unit of work. + + ```bash + atmos workflow deploy/eks -s acme-ue1-dev + ``` + + ```yaml + workflows: + deploy/eks: + steps: + - command: terraform deploy vpc + - command: terraform deploy eks + ``` + + + + ## Atmos Vendoring + + Keep Components up to date with the latest reference architecture. + + ```bash + atmos vendor pull -c foobar + ``` + + The `component.yaml` file defines which upstream component and version to pull. + + + + ## Geodesic + + Universal DevOps toolbox (Docker image with pre-installed toolset). + + ```bash + make all && make run + ``` + + | Host | Container | + |------|-----------| + | ~/ | /localhost/ | + | rootfs/ | / | + + Allows customization with aliases, commands, and startup scripts. + + + + ## References + + - [Atmos](https://atmos.tools/) + - [Geodesic](https://github.com/cloudposse/geodesic) + - [Cloud Posse Docs](https://docs.cloudposse.com/reference-architecture) + - [Support](https://docs.cloudposse.com/reference-architecture/support/) + + diff --git a/docs/learn/onboarding.mdx b/docs/learn/onboarding.mdx index c292bcb94..e3402b492 100644 --- a/docs/learn/onboarding.mdx +++ b/docs/learn/onboarding.mdx @@ -9,7 +9,7 @@ import Steps from '@site/src/components/Steps'; import Step from '@site/src/components/Step'; import StepNumber from '@site/src/components/StepNumber'; import TaskList from '@site/src/components/TaskList'; -import ReactPlayer from 'react-player'; +import Slides from '@site/src/components/Slides'; This guide is intended to help new developers get up to speed with the Cloud Posse reference architecture. It covers the basics of the architecture, how to get started, and how to contribute. We assume you have a basic understanding of Terraform and AWS. We assume you are joining a team that is already using the Cloud Posse reference architecture that's been fully implemented in your AWS organization. @@ -45,10 +45,10 @@ If you're new to Terraform, we recommend starting with the [Terraform documentat ### Learn the Cloud Posse Toolchain -
- -
AI generated voice
-
+ - [ ] Review the Introduction to Toolset video and become familiar with the concepts diff --git a/docs/resources/legacy/setup-videos/development.mdx b/docs/resources/legacy/setup-videos/development.mdx new file mode 100644 index 000000000..9e6b868e9 --- /dev/null +++ b/docs/resources/legacy/setup-videos/development.mdx @@ -0,0 +1,38 @@ +--- +title: "Development Videos" +sidebar_label: "Development" +description: "Overview videos for component development" +--- +import Intro from '@site/src/components/Intro'; +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'; + +:::warning Legacy Content +These videos are preserved for reference but may not reflect current implementation details. +See the [Component Development](/learn/component-development) documentation for up-to-date information. +::: + + +This video covers how to develop custom Terraform components using Cloud Posse's +conventions and integrate them with the reference architecture. + + + + + ## Component Development + + Learn how to build custom Terraform components that integrate with the Cloud Posse + reference architecture. This covers component structure, using Cloud Posse modules, + integrating with Atmos stacks, and following conventions for consistent infrastructure. + +
+ +
AI generated voice
+
+ + View Current Documentation + + diff --git a/docs/resources/legacy/setup-videos/foundation-setup.mdx b/docs/resources/legacy/setup-videos/foundation-setup.mdx new file mode 100644 index 000000000..47471e229 --- /dev/null +++ b/docs/resources/legacy/setup-videos/foundation-setup.mdx @@ -0,0 +1,87 @@ +--- +title: "Foundation Setup Videos" +sidebar_label: "Foundation Setup" +description: "Overview videos for setting up your AWS foundation" +--- +import Intro from '@site/src/components/Intro'; +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'; + +:::warning Legacy Content +These videos are preserved for reference but may not reflect current implementation details. +See the [Foundation Layer](/layers/foundation) for up-to-date documentation. +::: + + +These videos cover the foundational elements of the Cloud Posse Reference Architecture, +including project setup, account management, identity configuration, and network architecture. + + + + + ## Introduction to Toolchain + + 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. + +
+ +
AI generated voice
+
+ + View Current Documentation + + + + ## Account Management + + Review how Cloud Posse designs and manages AWS Account architectures using Atmos and Terraform, + aligning with the AWS Well-Architected Framework. This covers provisioning the Terraform state + backend, organizing accounts into Organizational Units (OUs), applying Service Control Policies + (SCPs), and configuring account-level settings. + +
+ +
AI generated voice
+
+ + View Current Documentation + + + + ## Identity and Authentication + + 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). This 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. + +
+ +
AI generated voice
+
+ + View Current Documentation + + + + ## Network and DNS + + 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. Covers + account isolation, connecting multiple accounts using Transit Gateways, deploying AWS Client VPN + for remote network access, and differentiating between DNS service discovery and branded vanity domains. + +
+ +
AI generated voice
+
+ + View Current Documentation + + diff --git a/docs/resources/legacy/setup-videos/platform-setup.mdx b/docs/resources/legacy/setup-videos/platform-setup.mdx new file mode 100644 index 000000000..68b964173 --- /dev/null +++ b/docs/resources/legacy/setup-videos/platform-setup.mdx @@ -0,0 +1,83 @@ +--- +title: "Platform Setup Videos" +sidebar_label: "Platform Setup" +description: "Overview videos for setting up your AWS platform" +--- +import Intro from '@site/src/components/Intro'; +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'; + +:::warning Legacy Content +These videos are preserved for reference but may not reflect current implementation details. +See the [Platform Layer](/layers/platform) for up-to-date documentation. +::: + + +These videos cover the platform elements of the Cloud Posse Reference Architecture, +including software delivery, GitOps automation, container orchestration, and monitoring. + + + + + ## Software Delivery / Release Engineering + + Learn about Cloud Posse's approach to CI/CD and release engineering. This covers the + philosophy behind treating pipelines as software, using GitHub Actions for automation, + and implementing consistent deployment patterns across environments. + +
+ +
AI generated voice
+
+ + View Current Documentation + + + + ## GitOps with Terraform + + Understand how to implement GitOps for Terraform using GitHub Actions. This covers + plan/apply workflows, drift detection, and the integration with Atmos for managing + infrastructure deployments through pull requests. + +
+ +
AI generated voice
+
+ + View Current Documentation + + + + ## ECS Platform + + Learn about Amazon ECS (Elastic Container Service) as a container orchestration solution. + This covers the benefits of ECS over Kubernetes for simpler deployments, cluster configuration, + service deployment, and integration with the reference architecture. + +
+ +
AI generated voice
+
+ + View Current Documentation + + + + ## Monitoring and SRE + + Understand Cloud Posse's approach to monitoring and observability. This covers integrating + with Datadog, setting up monitors, implementing SLIs/SLOs, and building a monitoring-as-code + approach using Terraform. + +
+ +
AI generated voice
+
+ + View Current Documentation + + diff --git a/docs/resources/legacy/setup-videos/setup-videos.mdx b/docs/resources/legacy/setup-videos/setup-videos.mdx new file mode 100644 index 000000000..9f0d2fc8c --- /dev/null +++ b/docs/resources/legacy/setup-videos/setup-videos.mdx @@ -0,0 +1,21 @@ +--- +title: "Legacy Setup Videos" +sidebar_label: "Setup Videos" +description: "AI-generated overview videos for the Cloud Posse Reference Architecture" +--- +import Intro from '@site/src/components/Intro'; +import DocCardList from '@theme/DocCardList'; + +:::warning Legacy Content +These AI-generated overview videos were created during the initial documentation development. +They provide high-level overviews but may not reflect the latest implementation details. + +**For current documentation**, please refer to the main documentation sections for each layer. +::: + + +These videos provide AI-narrated overviews of the Cloud Posse Reference Architecture. +They are organized by the major setup phases: Foundation, Platform, and Development. + + + diff --git a/src/components/slides/index.css b/src/components/slides/index.css new file mode 100644 index 000000000..28ac17455 --- /dev/null +++ b/src/components/slides/index.css @@ -0,0 +1,760 @@ +/* Base container */ +.slides-container { + margin: 1.5rem 0; +} + +/* ===================================================== + Placeholder mode styles (coming soon) + ===================================================== */ +.slides-placeholder { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 2rem; + background: var(--ifm-background-surface-color); + border: 2px dashed var(--ifm-color-emphasis-300); + border-radius: 8px; + text-align: center; + min-height: 200px; +} + +.slides-icon { + color: var(--ifm-color-primary); + margin-bottom: 1rem; +} + +.slides-title { + margin: 0 0 0.5rem 0; + font-size: 1.25rem; + color: var(--ifm-heading-color); +} + +.slides-description { + margin: 0 0 1rem 0; + color: var(--ifm-color-content-secondary); + max-width: 400px; +} + +.slides-badge { + display: inline-block; + padding: 0.25rem 0.75rem; + background: var(--ifm-color-emphasis-100); + border-radius: 4px; + font-size: 0.875rem; + color: var(--ifm-color-emphasis-700); +} + +/* Google Slides embed */ +.slides-iframe { + width: 100%; + aspect-ratio: 16 / 9; + border-radius: 8px; +} + +/* Video embed (legacy content) */ +.slides-video { + text-align: center; +} + +.slides-video-player { + width: 100%; + max-width: 800px; + aspect-ratio: 16 / 9; + border-radius: 8px; + background: #000; +} + +/* ===================================================== + Interactive MDX slides styles + ===================================================== */ +.slides-interactive { + background: var(--ifm-color-emphasis-200); + border-radius: 8px; + padding: 1rem; + outline: none; + max-width: 100%; + overflow: hidden; +} + +.slides-interactive:focus { + border-color: var(--ifm-color-primary); + box-shadow: 0 0 0 2px var(--ifm-color-primary-lightest); +} + +/* Header/title */ +.slides-header { + font-size: 1.125rem; + font-weight: 600; + color: var(--ifm-heading-color); + margin: 0 0 0.75rem 0; + text-align: center; +} + +/* Progress bar */ +.slides-progress-bar { + width: 100%; + height: 6px; + background-color: var(--ifm-color-emphasis-200); + border-radius: 3px; + margin-bottom: 0.75rem; + overflow: hidden; +} + +.slides-progress { + height: 100%; + background-color: var(--ifm-color-primary); + transition: width 0.3s ease; + border-radius: 3px; +} + +/* Bottom controls container */ +.slides-controls { + margin-top: 0.75rem; + padding: 0.5rem; +} + +/* Navigation row with prev/next and dots */ +.slides-nav-row { + display: flex; + justify-content: center; + align-items: center; + gap: 1rem; + margin-bottom: 0.5rem; +} + +/* Navigation dots */ +.slides-dots { + display: flex; + justify-content: center; + gap: 0.5rem; +} + +.slides-dot { + width: 10px; + height: 10px; + border-radius: 50%; + border: none; + background: var(--ifm-color-emphasis-300); + cursor: pointer; + padding: 0; + transition: background-color 0.2s ease, transform 0.2s ease; +} + +.slides-dot:hover { + background: var(--ifm-color-emphasis-500); + transform: scale(1.2); +} + +.slides-dot.active { + background: var(--ifm-color-primary); +} + +/* Slides viewport */ +.slides-viewport { + position: relative; + overflow: hidden; + width: 100%; + border: none; + box-shadow: none; +} + +/* Slides track (horizontal scrolling container) */ +.slides-track { + display: flex; + transition: transform 0.4s ease-in-out; +} + +/* Individual slide */ +.slides-slide { + min-width: 100%; + max-width: 100%; + width: 100%; + flex-shrink: 0; + opacity: 0.3; + transition: opacity 0.4s ease; + padding: 0.5rem; + box-sizing: border-box; + overflow: hidden; + background: transparent; + border: none; + box-shadow: none; +} + +.slides-slide.active { + opacity: 1; +} + +/* Slide content container - side by side layout */ +.slides-slide-content { + max-width: 100%; + overflow-wrap: break-word; + word-wrap: break-word; + display: flex; + flex-direction: row; + gap: 0.5rem; + align-items: center; + justify-content: center; + border: none; + box-shadow: none; + outline: none; + /* Fixed aspect ratio container - roughly 16:6 to accommodate slide + notes side by side */ + aspect-ratio: 16 / 6; +} + +/* Main slide content area - 16:9 aspect ratio */ +.slides-slide-main { + height: 100%; + aspect-ratio: 16 / 9; + flex-shrink: 0; + position: relative; + background: #ffffff; + border-radius: 6px; + box-sizing: border-box; + overflow: hidden; + border: none; + box-shadow: none; +} + +html[data-theme='dark'] .slides-slide-main { + background: var(--ifm-background-color); +} + +/* Content wrapper inside the slide */ +.slides-slide-inner { + width: 100%; + height: 100%; + padding: 1.5rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + overflow: hidden; + font-size: clamp(0.5rem, 1.1vw, 0.85rem); + line-height: 1.5; + text-align: left; + background: var(--ifm-background-color); + box-sizing: border-box; +} + +.slides-slide-inner > * { + width: 100%; + max-width: 100%; +} + +/* Title slide variant - centered content */ +.slides-slide-title { + text-align: center; +} + +.slides-slide-title h1, +.slides-slide-title h2, +.slides-slide-title h3 { + text-align: center; +} + +.slides-slide-title p, +.slides-slide-title strong { + text-align: center; +} + +.slides-slide-inner h1, +.slides-slide-inner h2, +.slides-slide-inner h3 { + font-size: clamp(0.75rem, 1.8vw, 1.25rem); + font-weight: 600; + margin-bottom: 0.75em; + margin-top: 0; + color: var(--ifm-heading-color); +} + +.slides-slide-inner ul, +.slides-slide-inner ol { + margin: 0.5em 0; + padding-left: 1.25em; +} + +.slides-slide-inner li { + margin: 0.35em 0; +} + +.slides-slide-inner p { + margin: 0.5em 0; +} + +.slides-slide-inner table { + font-size: inherit; + width: 100%; + border-collapse: collapse; + display: table; + overflow: hidden; +} + +.slides-slide-inner th, +.slides-slide-inner td { + padding: 0.4em 0.6em; + text-align: left; +} + +.slides-slide-inner th { + font-weight: 600; + border-bottom: 2px solid var(--ifm-color-emphasis-300); +} + +.slides-slide-inner td { + border-bottom: 1px solid var(--ifm-color-emphasis-200); +} + +.slides-slide-inner pre, +.slides-slide-inner code { + font-size: 0.85em; +} + +.slides-slide-inner pre { + padding: 0.75em; + margin: 0.5em 0; + line-height: 1.3; + border-radius: 4px; +} + +/* Speaker notes / explanation area */ +.slides-slide-notes { + flex: 1; + height: 100%; + padding: 1rem; + font-size: clamp(0.5rem, 1.1vw, 0.9rem); + color: var(--ifm-color-content-secondary); + line-height: 1.5; + box-sizing: border-box; + background: #ffffff; + border-radius: 6px; + border: none; + box-shadow: none; + overflow: hidden; +} + +html[data-theme='dark'] .slides-slide-notes { + background: var(--ifm-background-color); +} + + +/* When notes are hidden, slide expands within fixed-height container */ +.slides-slide-content.slides-notes-hidden .slides-slide-main { + /* Slide already uses height: 100% and aspect-ratio: 16/9 */ + /* It will naturally expand to fill available height */ +} + +/* Stack vertically on smaller screens */ +@media (max-width: 900px) { + .slides-slide-content { + flex-direction: column; + aspect-ratio: auto; + height: auto; + } + + .slides-slide-main { + width: 100%; + height: auto; + aspect-ratio: 16 / 9; + } + + .slides-slide-notes { + height: auto; + } +} + +/* Constrain code blocks and pre elements */ +.slides-slide-content pre, +.slides-slide-content code { + max-width: 100%; + overflow-x: auto; +} + +.slides-slide-content table { + max-width: 100%; + overflow: hidden; +} + +.slides-slide-content h1, +.slides-slide-content h2, +.slides-slide-content h3 { + margin-top: 0; +} + +.slides-slide-content > *:last-child { + margin-bottom: 0; +} + +/* Navigation buttons */ +.slides-nav-button { + background-color: var(--ifm-color-emphasis-200); + color: var(--ifm-color-emphasis-700); + border: none; + padding: 0.5rem 0.75rem; + cursor: pointer; + font-size: 1rem; + border-radius: 4px; + transition: background-color 0.2s ease, color 0.2s ease; + line-height: 1; +} + +.slides-nav-button:hover:not(:disabled) { + background-color: var(--ifm-color-primary); + color: white; +} + +.slides-nav-button:disabled { + opacity: 0.3; + cursor: not-allowed; +} + +/* Controls row with view options */ +.slides-controls-row { + display: flex; + justify-content: center; + align-items: center; +} + +/* View options (theater/fullscreen buttons) */ +.slides-view-options { + display: flex; + gap: 0.5rem; +} + +.slides-view-button { + background: transparent; + border: none; + border-radius: 4px; + padding: 0.5rem; + cursor: pointer; + color: var(--ifm-color-emphasis-500); + display: flex; + align-items: center; + justify-content: center; + transition: background-color 0.2s ease, color 0.2s ease; +} + +.slides-view-button svg { + width: 22px; + height: 22px; +} + +.slides-view-button:hover { + background: var(--ifm-color-emphasis-300); + color: var(--ifm-color-emphasis-800); +} + +.slides-view-button.active { + background: var(--ifm-color-primary); + color: white; +} + +/* Dark mode adjustments */ +html[data-theme='dark'] .slides-interactive { + border-color: var(--ifm-color-emphasis-300); +} + +html[data-theme='dark'] .slides-viewport { + border-color: var(--ifm-color-emphasis-300); +} + +html[data-theme='dark'] .slides-nav-button { + background-color: var(--ifm-color-emphasis-300); + color: var(--ifm-color-emphasis-800); +} + +html[data-theme='dark'] .slides-nav-button:hover:not(:disabled) { + background-color: var(--ifm-color-primary); + color: white; +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + .slides-slide { + padding: 1rem; + } + + .slides-nav-button { + padding: 0.5rem 0.35rem; + font-size: 1rem; + } + + .slides-dots { + gap: 0.375rem; + } + + .slides-dot { + width: 8px; + height: 8px; + } +} + +/* ===================================================== + Theater mode styles (fills browser window) + ===================================================== */ +.slides-theater { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100vw; + height: 100vh; + max-width: none; + margin: 0; + padding: 2rem; + border-radius: 0; + z-index: 100000; + background: #1b1b1d; + display: flex; + flex-direction: column; + box-sizing: border-box; +} + +.slides-theater .slides-header { + font-size: 1.5rem; + margin-bottom: 1rem; + color: #ffffff; +} + +.slides-theater .slides-viewport { + flex: 1; + display: flex; + align-items: center; + width: 100%; +} + +.slides-theater .slides-track { + width: 100%; +} + +.slides-theater .slides-slide { + width: 100%; +} + +.slides-theater .slides-slide-content { + gap: 2rem; + width: 100%; + justify-content: center; +} + +.slides-theater .slides-slide-main { + width: auto; + max-width: 60%; + background: #f8f9fa; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +.slides-theater .slides-slide-inner { + font-size: clamp(0.875rem, 2vw, 1.25rem); + padding: 2rem; + color: #1b1b1d; + background: #f8f9fa; +} + +.slides-theater .slides-slide-inner h1, +.slides-theater .slides-slide-inner h2, +.slides-theater .slides-slide-inner h3 { + font-size: clamp(1.25rem, 3vw, 2rem); + color: #1b1b1d; +} + +.slides-theater .slides-slide-notes { + font-size: clamp(0.75rem, 1.5vw, 1.1rem); + padding: 1.5rem; + color: #444950; + max-width: 35%; + min-width: 250px; + background: #f8f9fa; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +.slides-theater .slides-nav-button { + padding: 0.75rem 1rem; + font-size: 1.25rem; + background-color: rgba(255, 255, 255, 0.15); + color: #ffffff; +} + +.slides-theater .slides-nav-button:hover:not(:disabled) { + background-color: var(--ifm-color-primary); + color: #ffffff; +} + +.slides-theater .slides-nav-button:disabled { + opacity: 0.2; +} + +.slides-theater .slides-controls { + margin-top: 1rem; +} + +.slides-theater .slides-dots { + margin-bottom: 0.75rem; +} + +.slides-theater .slides-dot { + width: 12px; + height: 12px; + background: rgba(255, 255, 255, 0.3); +} + +.slides-theater .slides-dot:hover { + background: rgba(255, 255, 255, 0.5); +} + +.slides-theater .slides-dot.active { + background: var(--ifm-color-primary); +} + +.slides-theater .slides-progress-bar { + height: 8px; + margin-bottom: 1rem; + background-color: rgba(255, 255, 255, 0.2); +} + +.slides-theater .slides-view-button { + padding: 0.5rem; + color: rgba(255, 255, 255, 0.6); +} + +.slides-theater .slides-view-button:hover { + background: rgba(255, 255, 255, 0.15); + color: #ffffff; +} + +.slides-theater .slides-view-button.active { + background: var(--ifm-color-primary); + color: #ffffff; +} + +.slides-theater .slides-view-button svg { + width: 22px; + height: 22px; +} + +/* Dark mode theater */ +html[data-theme='dark'] .slides-theater { + background: #1b1b1d; +} + +html[data-theme='dark'] .slides-theater .slides-slide-main { + background: #2a2a2d; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); +} + +html[data-theme='dark'] .slides-theater .slides-slide-inner { + color: #e3e3e3; + background: #2a2a2d; +} + +html[data-theme='dark'] .slides-theater .slides-slide-inner h1, +html[data-theme='dark'] .slides-theater .slides-slide-inner h2, +html[data-theme='dark'] .slides-theater .slides-slide-inner h3 { + color: #ffffff; +} + +html[data-theme='dark'] .slides-theater .slides-slide-notes { + color: #b0b0b0; + background: #2a2a2d; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); +} + +/* ===================================================== + Fullscreen mode styles + ===================================================== */ +.slides-fullscreen { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100vw; + height: 100vh; + max-width: none; + margin: 0; + padding: 2rem; + border-radius: 0; + z-index: 9999; + background: var(--ifm-background-color); + display: flex; + flex-direction: column; +} + +.slides-fullscreen .slides-header { + font-size: 1.5rem; + margin-bottom: 1rem; +} + +.slides-fullscreen .slides-viewport { + flex: 1; + display: flex; + align-items: center; +} + +.slides-fullscreen .slides-slide-content { + gap: 2rem; +} + +.slides-fullscreen .slides-slide-main { + width: 65%; +} + +.slides-fullscreen .slides-slide-inner { + font-size: clamp(0.875rem, 2vw, 1.25rem); + padding: 2rem; +} + +.slides-fullscreen .slides-slide-inner h1, +.slides-fullscreen .slides-slide-inner h2, +.slides-fullscreen .slides-slide-inner h3 { + font-size: clamp(1.25rem, 3vw, 2rem); +} + +.slides-fullscreen .slides-slide-notes { + font-size: clamp(0.75rem, 1.5vw, 1.1rem); + padding: 1.5rem; +} + +.slides-fullscreen .slides-nav-button { + padding: 0.75rem 1rem; + font-size: 1.25rem; +} + +.slides-fullscreen .slides-controls { + margin-top: 1rem; +} + +.slides-fullscreen .slides-dots { + margin-bottom: 0.75rem; +} + +.slides-fullscreen .slides-dot { + width: 12px; + height: 12px; +} + +.slides-fullscreen .slides-progress-bar { + height: 8px; + margin-bottom: 1rem; +} + +.slides-fullscreen .slides-view-button { + padding: 0.5rem; +} + +.slides-fullscreen .slides-view-button svg { + width: 22px; + height: 22px; +} + +/* Dark mode fullscreen */ +html[data-theme='dark'] .slides-fullscreen { + background: var(--ifm-background-color); +} + +html[data-theme='dark'] .slides-view-button:hover { + background: var(--ifm-color-emphasis-400); +} diff --git a/src/components/slides/index.js b/src/components/slides/index.js new file mode 100644 index 000000000..6f51adedd --- /dev/null +++ b/src/components/slides/index.js @@ -0,0 +1,313 @@ +import React, { useState, useEffect, useCallback, useRef } from 'react'; +import './index.css'; + +/** + * Slide component for individual slides within a Slides container. + * Used as children of the Slides component. + * + * @param {Object} props + * @param {React.ReactNode} props.children - The MDX content for this slide + * @param {string} [props.title] - Optional title shown in TOC navigation + * @param {string} [props.notes] - Optional speaker notes/explanation shown below the slide + * @param {boolean} [props.showNotes] - Whether to show the notes panel + * @param {string} [props.variant] - Optional variant: "title" for centered title slides + */ +export const Slide = ({ children, title, notes, showNotes = true, variant }) => { + const innerClasses = `slides-slide-inner ${variant === 'title' ? 'slides-slide-title' : ''}`; + return ( +
+
+
+ {children} +
+
+ {notes && showNotes && ( +
+ {notes} +
+ )} +
+ ); +}; + +/** + * Slides component that displays MDX-based slide presentations. + * Supports four modes: + * 1. MDX slides - When children (Slide components) are provided + * 2. Google Slides embed - When googleSlidesUrl is provided + * 3. Video embed - When videoUrl is provided (legacy video content) + * 4. Placeholder - When only title/description provided (coming soon) + * + * @param {Object} props + * @param {string} props.title - Title of the presentation + * @param {string} [props.description] - Description shown in placeholder mode + * @param {string} [props.googleSlidesUrl] - URL to embed Google Slides + * @param {string} [props.videoUrl] - URL to embed a video (legacy content) + * @param {React.ReactNode} [props.children] - Slide components for MDX mode + */ +const Slides = ({ + title, + description, + googleSlidesUrl, + videoUrl, + children, +}) => { + const [currentSlide, setCurrentSlide] = useState(0); + const [isFullscreen, setIsFullscreen] = useState(false); + const [isTheater, setIsTheater] = useState(false); + const [showNotes, setShowNotes] = useState(true); + const slidesRef = useRef(null); + + // Get array of slide children + const slideChildren = React.Children.toArray(children).filter( + child => React.isValidElement(child) + ); + const totalSlides = slideChildren.length; + const hasSlides = totalSlides > 0; + + const nextSlide = useCallback(() => { + setCurrentSlide((prev) => (prev < totalSlides - 1 ? prev + 1 : prev)); + }, [totalSlides]); + + const prevSlide = useCallback(() => { + setCurrentSlide((prev) => (prev > 0 ? prev - 1 : prev)); + }, []); + + const goToSlide = useCallback((index) => { + setCurrentSlide(index); + }, []); + + const toggleFullscreen = useCallback(() => { + if (!document.fullscreenElement) { + slidesRef.current?.requestFullscreen(); + setIsFullscreen(true); + setIsTheater(false); + } else { + document.exitFullscreen(); + setIsFullscreen(false); + } + }, []); + + const toggleTheater = useCallback(() => { + if (isFullscreen) { + document.exitFullscreen(); + setIsFullscreen(false); + } + setIsTheater(prev => !prev); + }, [isFullscreen]); + + const toggleNotes = useCallback(() => { + setShowNotes(prev => !prev); + }, []); + + const handleKeyDown = useCallback((event) => { + if (event.key === 'ArrowRight' || event.key === ' ') { + event.preventDefault(); + nextSlide(); + } else if (event.key === 'ArrowLeft') { + event.preventDefault(); + prevSlide(); + } else if (event.key === 'Escape') { + if (isFullscreen) { + setIsFullscreen(false); + } else if (isTheater) { + setIsTheater(false); + } + } else if (event.key === 'f' || event.key === 'F') { + event.preventDefault(); + toggleFullscreen(); + } else if (event.key === 't' || event.key === 'T') { + event.preventDefault(); + toggleTheater(); + } else if (event.key === 'n' || event.key === 'N') { + event.preventDefault(); + toggleNotes(); + } + }, [nextSlide, prevSlide, isFullscreen, isTheater, toggleFullscreen, toggleTheater, toggleNotes]); + + useEffect(() => { + const slidesEl = slidesRef.current; + if (slidesEl) { + slidesEl.addEventListener('keydown', handleKeyDown); + return () => slidesEl.removeEventListener('keydown', handleKeyDown); + } + }, [handleKeyDown]); + + // Listen for fullscreen change events + useEffect(() => { + const handleFullscreenChange = () => { + setIsFullscreen(!!document.fullscreenElement); + }; + document.addEventListener('fullscreenchange', handleFullscreenChange); + return () => document.removeEventListener('fullscreenchange', handleFullscreenChange); + }, []); + + // Mode 1: MDX-based slides with children + if (hasSlides) { + const containerClass = `slides-container slides-interactive ${isFullscreen ? 'slides-fullscreen' : ''} ${isTheater ? 'slides-theater' : ''}`; + + return ( +
+ {/* Header with title */} + {title &&
{title}
} + + {/* Progress bar */} +
+
+
+ + {/* Slides viewport */} +
+
+ {slideChildren.map((child, index) => ( +
+ {React.cloneElement(child, { showNotes })} +
+ ))} +
+
+ + {/* Bottom controls */} +
+ {/* Navigation and dots row */} +
+ +
+ {slideChildren.map((child, index) => ( +
+ +
+ + {/* View options */} +
+
+ + + +
+
+
+
+ ); + } + + // Mode 2: Google Slides embed + if (googleSlidesUrl) { + return ( +
+