privacyguides.org/theme/layouts/page.yml

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 == ("zh-Hant" or "ru") -%}
      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 == ("zh-Hant" or "ru") -%}
      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 >-
    {%- if page.meta.cover -%}
      theme/assets/brand/logos/svg/logo/privacy-guides-logo-notext.svg
    {%- else -%}
      theme/assets/brand/logos/svg/logo/privacy-guides-logo-notext-colorbg.svg
    {%- endif -%}

# Meta tags
tags:
  # Open Graph
  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 }}"

  # 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: *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