New social card layout (#2177)

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: