docs: Update architecture diagrams (#620)

apptension · Sep 20, 2024 · 3e89b15 · 3e89b15
1 parent 751bb99
commit 3e89b15
Show file tree

Hide file tree

Showing 11 changed files with 41 additions and 21 deletions.
diff --git a/packages/internal/docs/docs/shared/components/ImgThemed.component.tsx b/packages/internal/docs/docs/shared/components/ImgThemed.component.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { useColorMode } from '@docusaurus/theme-common';
+
+interface ImgThemedProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  srcDark: string;
+}
+
+const ImgThemed = ({ srcDark, ...props }: ImgThemedProps) => {
+  const { colorMode } = useColorMode();
+
+  return <img {...props} src={colorMode === 'dark' ? srcDark : props.src} />;
+};
+
+export default ImgThemed;
diff --git a/packages/internal/docs/docs/shared/partials/architecture/_cicd_architecture.mdx b/packages/internal/docs/docs/shared/partials/architecture/_cicd_architecture.mdx
@@ -1,4 +1,5 @@
 import useBaseUrl from "@docusaurus/useBaseUrl";
+import ImgThemed from '../../components/ImgThemed.component';
 
 ## CI/CD architecture diagram
 
@@ -9,5 +10,5 @@ The deployment pipeline is configured to start automatically after each code pus
 CodeCommit repository created by the CI/CD CDK stack. Each environment can have a different branch configuration.
 
 <p align="center">
-  <img src={useBaseUrl("img/cicd-diagram-v3.png")} alt="CI/CD Diagram" />
+  <ImgThemed srcDark={useBaseUrl("img/cicd-diagram-v4-dark.png")} src={useBaseUrl("img/cicd-diagram-v4.png")} alt="CI/CD Diagram" />
 </p>
diff --git a/packages/internal/docs/docs/shared/partials/architecture/_system_architecture.mdx b/packages/internal/docs/docs/shared/partials/architecture/_system_architecture.mdx
@@ -1,9 +1,10 @@
 import useBaseUrl from "@docusaurus/useBaseUrl";
+import ImgThemed from '../../components/ImgThemed.component';
 
 ## System architecture diagram
 
 The following diagram illustrates the standard set of AWS services used and configured for every application environment.
 
 <p align="center">
-  <img src={useBaseUrl("img/system-diagram-v1.png")} alt="System Diagram" />
+  <ImgThemed srcDark={useBaseUrl("img/system-diagram-v4-dark.png")} src={useBaseUrl("img/system-diagram-v4.png")} alt="System Diagram" />
 </p>
diff --git a/packages/internal/docs/package.json b/packages/internal/docs/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@docusaurus/core": "^3.2.1",
     "@docusaurus/preset-classic": "^3.2.1",
+    "@docusaurus/theme-common": "3.2.1",
     "@mdx-js/react": "^3.0.1",
     "clsx": "^1.2.1",
     "react": "^18.2.0",
@@ -26,10 +27,10 @@
     "@sb/infra-shared": "workspace:*",
     "@sb/tools": "workspace:*",
     "@sb/webapp-api-client": "workspace:*",
-    "@sb/webapp-core": "workspace:*",
-    "@sb/webapp-tenants": "workspace:*",
     "@sb/webapp-contentful": "workspace:*",
+    "@sb/webapp-core": "workspace:*",
     "@sb/webapp-emails": "workspace:*",
+    "@sb/webapp-tenants": "workspace:*",
     "docusaurus-plugin-typedoc": "^0.22.0",
     "typedoc": "^0.25.13",
     "typedoc-plugin-markdown": "^3.17.1",

diff --git a/packages/internal/docs/static/img/cicd-diagram-v3.png b/packages/internal/docs/static/img/cicd-diagram-v3.png
diff --git a/packages/internal/docs/static/img/cicd-diagram-v4-dark.png b/packages/internal/docs/static/img/cicd-diagram-v4-dark.png
diff --git a/packages/internal/docs/static/img/cicd-diagram-v4.png b/packages/internal/docs/static/img/cicd-diagram-v4.png
diff --git a/packages/internal/docs/static/img/system-diagram-v1.png b/packages/internal/docs/static/img/system-diagram-v1.png
diff --git a/packages/internal/docs/static/img/system-diagram-v4-dark.png b/packages/internal/docs/static/img/system-diagram-v4-dark.png
diff --git a/packages/internal/docs/static/img/system-diagram-v4.png b/packages/internal/docs/static/img/system-diagram-v4.png
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml