docs: Add icons for deployment examples

alhendrickson · May 7, 2026 · May 7, 2026 · May 7, 2026 · May 7, 2026 · May 7, 2026
commit 395426226e0055ba6d1f92501e83dfb508b875ce
diff --git a/docs/docs/platform/deployment/examples/aws-kubernetes-eks.md b/docs/docs/platform/deployment/examples/aws-kubernetes-eks.md
@@ -1,5 +1,13 @@
 # AWS EKS Deployment
 
+<div class="tech-stack-banner" markdown="block">
+
+{{ cogstack_banner_logo() }}
+
+:material-aws:{ .tech-icon-aws } :simple-kubernetes:{ .tech-icon-kubernetes } :simple-terraform:{ .tech-icon-terraform }
+
+</div>
+
 This is an example deployment of CogStack in AWS. It will create publically accessible services, so is not suitable for production deployment.
 
 The recommended deployment in AWS is based on using Kubernetes through AWS EKS.

diff --git a/docs/docs/platform/deployment/examples/azure-kubernetes-aks.md b/docs/docs/platform/deployment/examples/azure-kubernetes-aks.md
@@ -1,5 +1,13 @@
 # Azure AKS Deployment
 
+<div class="tech-stack-banner" markdown="block">
+
+{{ cogstack_banner_logo() }}
+
+:material-microsoft-azure:{ .tech-icon-azure } :simple-kubernetes:{ .tech-icon-kubernetes } :simple-terraform:{ .tech-icon-terraform }
+
+</div>
+
 This is an example deployment of CogStack in Azure.
 
 The recommended deployment of CogStack in Azure is based on using Kubernetes through Azure Kubernetes Service.

diff --git a/docs/docs/platform/deployment/examples/openstack-docker.md b/docs/docs/platform/deployment/examples/openstack-docker.md
@@ -1,5 +1,13 @@
 # Openstack Docker Deployment
 
+<div class="tech-stack-banner" markdown="block">
+
+{{ cogstack_banner_logo() }}
+
+:simple-openstack:{ .tech-icon-openstack } :simple-docker:{ .tech-icon-docker } :simple-portainer: :simple-ansible:{ .tech-icon-ansible } :simple-terraform:{ .tech-icon-terraform }
+
+</div>
+
 This Terraform example provides one stop approach to deploy the **CogStack** platform with its core components and observability stack in an OpenStack environment. It is specifically designed to simplify and automate the provisioning and configuration needed to run CogStack reliably and securely.
 
 This example:

diff --git a/docs/docs/platform/deployment/examples/openstack-kubernetes-k3s.md b/docs/docs/platform/deployment/examples/openstack-kubernetes-k3s.md
@@ -1,5 +1,13 @@
 # Openstack Kubernetes Deployment
 
+<div class="tech-stack-banner" markdown="block">
+
+{{ cogstack_banner_logo() }}
+
+:simple-openstack:{ .tech-icon-openstack } :simple-docker:{ .tech-icon-docker } :simple-kubernetes:{ .tech-icon-kubernetes } :simple-terraform:{ .tech-icon-terraform }
+
+</div>
+
 This Terraform example provides one stop approach to deploy the **CogStack** platform with its core components and observability stack in an OpenStack environment. It is specifically designed to simplify and automate the provisioning and configuration needed to run CogStack reliably and securely.
 
 This example:

diff --git a/docs/docs/stylesheets/extra.css b/docs/docs/stylesheets/extra.css
@@ -11,3 +11,88 @@
   max-height: var(--md-code-block-max-height);
   overflow-y: auto;
 }
+
+/* Large technology icons row (use with md_in_html wrapper, see deployment examples) */
+.md-typeset .tech-stack-banner {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1.25rem;
+  padding: 1rem 1.25rem;
+  margin: 0 0 1.25rem;
+  max-width: 100%;
+  box-sizing: border-box;
+  border-radius: 0.2rem;
+  border: 1px solid var(--md-default-fg-color--lightest);
+  background-color: var(--md-code-bg-color);
+}
+
+/* Markdown wraps banner content in <p>; flatten so flex aligns logo + icons */
+.md-typeset .tech-stack-banner > p {
+  display: contents;
+  margin: 0;
+}
+
+.md-typeset .tech-stack-banner .twemoji {
+  width: var(--tech-banner-icon-size, 2.75rem);
+  height: var(--tech-banner-icon-size, 2.75rem);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.md-typeset .tech-stack-banner .twemoji img,
+.md-typeset .tech-stack-banner .twemoji svg {
+  width: 100%;
+  height: 100%;
+}
+
+.md-typeset .tech-stack-banner .tech-stack-banner__logo-svg {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  height: var(--tech-banner-icon-size, 2.75rem);
+}
+
+.md-typeset .tech-stack-banner .tech-stack-banner__logo-svg svg {
+  height: 100%;
+  width: auto;
+  max-width: 9rem;
+  display: block;
+}
+
+/* Brand colours — use { .tech-icon-* } on each shortcode in the banner */
+.md-typeset .tech-stack-banner .twemoji.tech-icon-aws svg *,
+.md-typeset .tech-stack-banner .twemoji.tech-icon-aws svg {
+  fill: #ff9900 !important;
+}
+
+.md-typeset .tech-stack-banner .twemoji.tech-icon-kubernetes svg *,
+.md-typeset .tech-stack-banner .twemoji.tech-icon-kubernetes svg {
+  fill: #326ce5 !important;
+}
+
+.md-typeset .tech-stack-banner .twemoji.tech-icon-terraform svg *,
+.md-typeset .tech-stack-banner .twemoji.tech-icon-terraform svg {
+  fill: #844fba !important;
+}
+
+.md-typeset .tech-stack-banner .twemoji.tech-icon-azure svg *,
+.md-typeset .tech-stack-banner .twemoji.tech-icon-azure svg {
+  fill: #0078d4 !important;
+}
+
+.md-typeset .tech-stack-banner .twemoji.tech-icon-openstack svg *,
+.md-typeset .tech-stack-banner .twemoji.tech-icon-openstack svg {
+  fill: #da1a32 !important;
+}
+
+.md-typeset .tech-stack-banner .twemoji.tech-icon-docker svg *,
+.md-typeset .tech-stack-banner .twemoji.tech-icon-docker svg {
+  fill: #2496ed !important;
+}
+
+.md-typeset .tech-stack-banner .twemoji.tech-icon-ansible svg *,
+.md-typeset .tech-stack-banner .twemoji.tech-icon-ansible svg {
+  fill: #000000 !important;
+}
diff --git a/docs/main.py b/docs/main.py
@@ -11,6 +11,18 @@ def define_env(env):
 
     repo_root = Path(__file__).resolve().parent.parent
 
+    @env.macro
+    def cogstack_banner_logo() -> str:
+        """Inline SVG for the tech-stack banner (avoids late <img> fetch vs emoji icons)."""
+        docs_dir = Path(env.conf.docs_dir)
+        path = docs_dir / "assets" / "brand-logo-dark.svg"
+        svg = path.read_text(encoding="utf-8").strip()
+        if svg.startswith("<?xml"):
+            svg = svg.split("?>", 1)[-1].strip()
+        return (
+            f'<span class="tech-stack-banner__logo-svg" role="img" aria-label="CogStack">{svg}</span>'
+        )
+
     @env.macro
     def embed_all_files_in_directory_as_snippets(
         folder: str,

diff --git a/docs/mkdocs.yml b/docs/mkdocs.yml
@@ -123,6 +123,7 @@ extra_css:
   - stylesheets/extra.css
 
 markdown_extensions:
+  - md_in_html
   - admonition
   - attr_list
   - pymdownx.details