New social card layout (#2177)

.cache/plugin/social/fonts/Bagnard/Bold.woff

@@ -0,0 +1 @@
+../../../../../theme/assets/brand/WOFF/bagnard/Bagnard.woff

.gitignore

@@ -1,7 +1,17 @@
 site
-.cache
 /i18n/
 /includes/*
 !/includes/*.en.*
 /theme/overrides/*
 !/theme/overrides/*.en.*
+# include Bagnard font in social card
+# (not available in Google Fonts)
+# ridiculous hide-and-seek https://stackoverflow.com/a/72380673
+/.cache/* 
+!/.cache/plugin
+/.cache/plugin/*
+!/.cache/plugin/social
+/.cache/plugin/social/*
+!/.cache/plugin/social/fonts
+/.cache/plugin/social/fonts/*
+!/.cache/plugin/social/fonts/Bagnard

config/layouts/custom.yml

@@ -0,0 +1,177 @@
+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
+    {%- else -%}
+      Bagnard
+    {%- endif -%}
+
+  - &font_family >-
+    {%- if config.theme.language == "he" -%}
+      Suez One
+    {%- else -%}
+      Public Sans
+    {%- endif -%}
+
+  - &site_name >-
+    {%- if page.is_homepage -%}
+    {%- else -%}
+      {{ config.site_name }}
+    {%- endif -%}
+
+  - &page_title >-
+    {%- if page.is_homepage -%}
+      Privacy Guides
+    {%- else -%}
+      {{ page.meta.get("title", page.title) }}
+    {%- endif -%}
+
+  - &page_title_with_site_name >-
+    {%- if page.meta.meta_title -%}
+      {{ page.meta.meta_title }}
+    {%- elif not page.is_homepage -%}
+      {{ page.meta.get("title", page.title) }} - {{ config.site_name }}
+    {%- else -%}
+      {{ page.meta.get("title", page.title) }}
+    {%- endif -%}
+
+  - &page_description >-
+    {%- if page.is_homepage -%}
+    {%- else -%}
+      {{ page.meta.get("description", config.site_description) or "" }}
+    {%- endif -%}
+  
+  - &homepage_description >-
+    {%- if page.is_homepage -%}
+      A socially motivated website which provides information about protecting your online data privacy and security.
+    {%- else -%}
+    {%- endif -%}
+
+  - &og_description >-
+    {{ page.meta.get("description", config.site_description) or "" }}
+
+  - &page_icon >-
+    {{ page.meta.icon or "" }}
+
+  - &logo >-
+    {%- if page.meta.cover -%}
+      theme/assets/brand/SVG/Logo/privacy-guides-logo-notext.svg
+    {%- elif config.theme.logo -%}
+      {{ config.docs_dir }}/{{ config.theme.logo }}
+    {%- endif -%}
+
+# Meta tags
+tags:
+
+  # Open Graph
+  og:type: website
+  og:title: *page_title_with_site_name
+  og:description: *og_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 }}"
+
+  # Twitter
+  twitter:card: summary_large_image
+  twitter.title: *page_title_with_site_name
+  twitter:description: *page_description
+  twitter:image: "{{ image.url }}"
+
+# -----------------------------------------------------------------------------
+# 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: *site_name
+      color: *color
+      font:
+        family: Bagnard
+        style: Bold
+
+  # Page title
+  - size: { width: 864, height: 256 }
+    offset: { x: 62, y: 192 }
+    typography:
+      content: *page_title
+      align: start
+      color: *color
+      line:
+        amount: 3
+        height: 1.5
+      font:
+        family: *title_font_family
+        style: Bold
+
+  # 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
+  
+  # Homepage description
+  - size: { width: 864, height: 192 }
+    offset: { x: 64, y: 320 }
+    typography:
+      content: *homepage_description
+      overflow: shrink
+      align: start
+      color: *color
+      line:
+        amount: 3
+        height: 1.5
+      font:
+        family: *font_family
+        style: Regular

config/mkdocs.common.yml

@@ -100,12 +100,17 @@ plugins:
       - index.md
     fallback_to_build_date: true
   privacy:
-    external_assets_exclude:
+    assets_exclude:
       - cdn.jsdelivr.net/npm/mathjax@3/*
       - api.privacyguides.net/*
   optimize:
     enabled: !ENV [NETLIFY, false]
   typeset: {}
+  social:
+    cards: !ENV [CARDS, true]
+    cards_dir: assets/img/social
+    cards_layout_dir: config/layouts
+    cards_layout: custom
 
 markdown_extensions:
   admonition: {}

config/mkdocs.en.yml

@@ -77,17 +77,6 @@ theme:
         icon: material/brightness-5
         name: "Switch to system theme"
 
-plugins:
-  social:
-    cards: !ENV [NETLIFY, false]
-    cards_dir: assets/img/social
-    cache_dir: .cache/plugin/social-en
-    cards_layout: default/variant
-    cards_layout_options:
-        background_color: "#FFD06F"
-        color: "#2d2d2d"
-        font_family: Public Sans
-
 markdown_extensions:
   pymdownx.snippets:
     auto_append: 

config/mkdocs.es.yml

@@ -77,17 +77,6 @@ theme:
         icon: material/brightness-5
         name: "Cambiar al tema del sistema"
 
-plugins:
-  social:
-    cards: !ENV [NETLIFY, false]
-    cards_dir: assets/img/social
-    cache_dir: .cache/plugin/social-es
-    cards_layout: default/variant
-    cards_layout_options:
-        background_color: "#FFD06F"
-        color: "#2d2d2d"
-        font_family: Public Sans
-
 markdown_extensions:
   pymdownx.snippets:
     auto_append: 

config/mkdocs.fr.yml

@@ -77,17 +77,6 @@ theme:
         icon: material/brightness-5
         name: "Basculer vers le thème du système"
 
-plugins:
-  social:
-    cards: !ENV [NETLIFY, false]
-    cards_dir: assets/img/social
-    cache_dir: .cache/plugin/social-fr
-    cards_layout: default/variant
-    cards_layout_options:
-        background_color: "#FFD06F"
-        color: "#2d2d2d"
-        font_family: Public Sans
-
 markdown_extensions:
   pymdownx.snippets:
     auto_append: 

config/mkdocs.he.yml

@@ -81,17 +81,6 @@ theme:
         icon: material/brightness-5
         name: "עבור לערכת הנושא של המערכת"
 
-plugins:
-  social:
-    cards: !ENV [NETLIFY, false]
-    cards_dir: assets/img/social
-    cache_dir: .cache/plugin/social-he
-    cards_layout: default/variant
-    cards_layout_options:
-        background_color: "#FFD06F"
-        color: "#2d2d2d"
-        font_family: Suez One
-
 markdown_extensions:
   pymdownx.snippets:
     auto_append: 

config/mkdocs.nl.yml

@@ -77,17 +77,6 @@ theme:
         icon: material/brightness-5
         name: "Verander naar systeem thema"
 
-plugins:
-  social:
-    cards: !ENV [NETLIFY, false]
-    cards_dir: assets/img/social
-    cache_dir: .cache/plugin/social-nl
-    cards_layout: default/variant
-    cards_layout_options:
-        background_color: "#FFD06F"
-        color: "#2d2d2d"
-        font_family: Public Sans
-
 markdown_extensions:
   pymdownx.snippets:
     auto_append: 

docs/about/index.md

@@ -16,7 +16,7 @@ schema:
     - https://www.youtube.com/@privacyguides
     - https://mastodon.neat.computer/@privacyguides
 ---
-![Privacy Guides logo](../assets/brand/png/square/pg-yellow.png){ align=right }
+![Privacy Guides logo](../assets/brand/PNG/Square/pg-yellow.png){ align=right }
 
 **Privacy Guides** is a socially motivated website that provides [information](/kb) for protecting your data security and privacy. Our mission is to inform the public about the value of digital privacy, and global government initiatives which aim to monitor your online activity. We are a non-profit collective operated entirely by volunteer [team members](https://discuss.privacyguides.net/g/team) and contributors. Our website is free of advertisements and not affiliated with any of the listed providers.