Add new custom card layouts

config/layouts/home.yml

@@ -0,0 +1,100 @@
+definitions:
+
+  - &background_color >-
+    #FFD06F
+
+  - &color >-
+    #2d2d2d
+
+  - &title_font_family >-
+    Bagnard
+
+  - &font_family >-
+    {%- if config.theme.language == "he" -%}
+      Suez One
+    {%- elif config.theme.language == ("zh-Hant" or "ru") -%}
+      Noto Sans TC
+    {%- else -%}
+      Public Sans
+    {%- endif -%}
+
+  - &page_title >-
+    {{ config.site_name }}
+
+  - &page_title_with_site_name >-
+    {{ page.meta.get("title", page.title) }}
+
+  - &page_description >-
+    {{ config.extra.homepage_description or "A socially motivated website which provides information about protecting your online data privacy and security." }}
+
+  - &og_description >-
+    {{ page.meta.get("description", config.site_description) or "" }}
+
+  - &logo >-
+    {{ config.docs_dir }}/{{ config.theme.logo }}
+
+# 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:
+      color: *background_color
+
+  # Logo
+  - size: { width: 64, height: 64 }
+    offset: { x: 64, y: 64 }
+    background:
+      image: *logo
+
+  # 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: 192 }
+    offset: { x: 64, y: 320 }
+    typography:
+      content: *page_description
+      overflow: shrink
+      align: start
+      color: *color
+      line:
+        amount: 3
+        height: 1.5
+      font:
+        family: *font_family
+        style: Regular

config/layouts/custom.yml → config/layouts/page.yml

@@ -18,9 +18,7 @@ definitions:
     {{ layout.color or "#2d2d2d" }}
 
   - &title_font_family >-
-    {%- if page.is_homepage -%}
-      Bagnard
-    {%- elif config.theme.language == "he" -%}
+    {%- if config.theme.language == "he" -%}
       Suez One
     {%- elif config.theme.language == ("zh-Hant" or "ru") -%}
       Noto Serif TC
@@ -38,40 +36,19 @@ definitions:
     {%- endif -%}
 
   - &site_name >-
-    {%- if page.is_homepage -%}
-    {%- else -%}
-      {{ config.site_name }}
-    {%- endif -%}
+    {{ config.site_name }}
 
   - &page_title >-
-    {%- if page.is_homepage -%}
-      Privacy Guides
-    {%- else -%}
-      {{ page.meta.get("title", page.title) }}
-    {%- endif -%}
+    {{ page.meta.get("title", page.title) }}
 
   - &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) }}
+      {{ page.meta.get("title", page.title) }} - {{ config.site_name }}
     {%- endif -%}
 
   - &page_description >-
-    {%- if page.is_homepage -%}
-    {%- else -%}
-      {{ page.meta.get("description", config.site_description) or "" }}
-    {%- endif -%}
-
-  - &homepage_description >-
-    {%- if page.is_homepage -%}
-      {{ config.extra.homepage_description or "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 >-
@@ -90,7 +67,7 @@ tags:
   # Open Graph
   og:type: website
   og:title: *page_title_with_site_name
-  og:description: *og_description
+  og:description: *page_description
   og:image: "{{ image.url }}"
   og:image:type: "{{ image.type }}"
   og:image:width: "{{ image.width }}"
@@ -166,18 +143,3 @@ layers:
       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