From 4efe5831c064054592bac0e3889737969e061d8a Mon Sep 17 00:00:00 2001
From: Jonah Aragon <jonah@privacyguides.org>
Date: Tue, 3 Mar 2026 17:28:21 -0600
Subject: [PATCH] Social preview card temporary layout

---
 docs/activism/toolbox/.meta.yml |   2 +
 theme/layouts/toolbox.yml       | 155 ++++++++++++++++++++++++++++++++
 2 files changed, 157 insertions(+)
 create mode 100644 theme/layouts/toolbox.yml

diff --git a/docs/activism/toolbox/.meta.yml b/docs/activism/toolbox/.meta.yml
index d50c990c..58cfcadc 100644
--- a/docs/activism/toolbox/.meta.yml
+++ b/docs/activism/toolbox/.meta.yml
@@ -1,2 +1,4 @@
 hide:
   - toc
+social:
+  cards_layout: toolbox
diff --git a/theme/layouts/toolbox.yml b/theme/layouts/toolbox.yml
new file mode 100644
index 00000000..66374d21
--- /dev/null
+++ b/theme/layouts/toolbox.yml
@@ -0,0 +1,155 @@
+definitions:
+  - &background_image >-
+    {%- if page.meta.cover -%}
+      theme/assets/img/cover/{{ page.meta.cover }}
+    {%- else -%}
+      {{ layout.background_image or "" }}
+    {%- endif -%}
+
+  - &background_color >-
+    {%- if page.meta.cover -%}
+      #f7f7fcaa
+    {%- else -%}
+      #FFD06F
+    {%- endif -%}
+
+  - &color >-
+    {{ layout.color or "#2d2d2d" }}
+
+  - &title_font_family >-
+    {%- if config.theme.language == "he" -%}
+      Suez One
+    {%- elif config.theme.language == ("ru" or "zh-Hant" or "zh-TW") -%}
+      Noto Serif TC
+    {%- else -%}
+      Bagnard
+    {%- endif -%}
+
+  - &title_font_style >-
+    {%- if config.theme.language == "he" -%}
+      Regular
+    {%- else -%}
+      Bold
+    {%- endif -%}
+
+  - &font_family >-
+    {%- if config.theme.language == "he" -%}
+      Suez One
+    {%- elif config.theme.language == ("ru" or "zh-Hant" or "zh-TW") -%}
+      Noto Sans TC
+    {%- else -%}
+      Public Sans
+    {%- endif -%}
+
+  - &site_name >-
+    {{ config.site_name }}
+
+  - &page_title >-
+    {{ page.meta.get("title", page.title) }}
+
+  - &page_title_with_site_name >-
+    {%- if page.meta.meta_title -%}
+      {{ page.meta.meta_title }}
+    {%- else -%}
+      {{ page.meta.get("title", page.title) }} - {{ config.site_name }}
+    {%- endif -%}
+
+  - &page_description >-
+    {{ page.meta.get("description", config.site_description) or "" }}
+
+  - &page_icon >-
+    {{ page.meta.icon or "" }}
+
+  - &logo >-
+    theme/assets/brand/logos/svg/logo/privacy-guides-logo-notext-colorbg.svg
+
+# Meta tags
+tags:
+  # Open Graph
+  og:site_name: *site_name
+  og:type: website
+  og:title: *page_title_with_site_name
+  og:description: *page_description
+  og:image: "{{ image.url }}"
+  og:image:type: "{{ image.type }}"
+  og:image:width: "{{ image.width }}"
+  og:image:height: "{{ image.height }}"
+  og:url: "{{ page.canonical_url }}"
+
+  # Facebook
+  article:publisher: "https://www.facebook.com/PrivacyGuides.org"
+
+  # Mastodon
+  fediverse:creator: "@privacyguides@neat.computer"
+
+  # Twitter
+  twitter:site: "@privacy_guides"
+  twitter:card: summary_large_image
+  twitter:title: *page_title_with_site_name
+  twitter:description: *page_description
+  twitter:image: "{{ image.url }}"
+  twitter:image:width: "{{ image.width }}"
+  twitter:image:height: "{{ image.height }}"
+
+# -----------------------------------------------------------------------------
+# Specification
+# -----------------------------------------------------------------------------
+
+# Card size and layers
+size: { width: 1200, height: 630 }
+layers:
+  # Background
+  - background:
+      image: *background_image
+      color: *background_color
+
+  # # Page icon
+  # - size: { width: 630, height: 630 }
+  #   offset: { x: 570, y: 0 }
+  #   icon:
+  #     value: *page_icon
+  #     color: "#00000033"
+
+  # Logo
+  - size: { width: 64, height: 64 }
+    offset: { x: 64, y: 64 }
+    background:
+      image: *logo
+
+  # Site name
+  - size: { width: 768, height: 42 }
+    offset: { x: 160, y: 78 }
+    typography:
+      content: Activism Toolbox
+      color: *color
+      font:
+        family: Bagnard
+        style: Bold
+
+  # Page title
+  - size: { width: 864, height: 256 }
+    offset: { x: 160, y: 256 }
+    typography:
+      content: *page_title
+      align: start
+      color: *color
+      line:
+        amount: 3
+        height: 1.5
+      font:
+        family: *title_font_family
+        style: *title_font_style
+
+  # # Page description
+  # - size: { width: 864, height: 96 }
+  #   offset: { x: 64, y: 480 }
+  #   typography:
+  #     content: *page_description
+  #     align: start
+  #     color: *color
+  #     line:
+  #       amount: 3
+  #       height: 1.5
+  #     font:
+  #       family: *font_family
+  #       style: Regular