privacyguides.org/theme/layouts/blog.yml

definitions:
  - &site_name >-
    {{ config.site_name }}

  - &page_title >-
    {{ page.meta.get("title", page.title) }}

  - &page_description >-
    {{ page.meta.get("description", config.site_description) or "" }}

  - &page_logo >-
    {% if page.meta.preview and page.meta.preview.logo %}
      {{- page.meta.preview.logo -}}
    {% endif %}

  - &page_icon >-
    {%- if page.meta.preview and page.meta.preview.icon -%}
      {{- page.meta.preview.icon -}}
    {%- elif page.meta.preview and page.meta.preview.logo -%}
    {%- else -%}
      material/book-open-page-variant
    {%- endif -%}

  - &page_color >-
    {%- if page.meta.preview and page.meta.preview.color -%}
      {{- page.meta.preview.color -}}
    {%- else -%}
      #FFD06F
    {%- endif -%}

  - &text_color >-
    {%- if page.meta.preview and page.meta.preview.text_color -%}
      {{- page.meta.preview.text_color -}}
    {%- else -%}
      #2d2d2d
    {%- endif -%}

  - &background_transparency >-
    {%- if page.meta.preview and page.meta.preview.color -%}
      {{- page.meta.preview.color -}}99
    {%- else -%}
      #FFD06F99
    {%- endif -%}

  - &icon_transparency >-
    {%- if page.meta.preview and page.meta.preview.text_color -%}
      {{- page.meta.preview.text_color -}}33
    {%- else -%}
      #00000033
    {%- endif -%}

  - &logo >-
    {%- if page.meta.preview and page.meta.preview.site_logo -%}
      theme/assets/brand/logos/svg/logo/{{- page.meta.preview.site_logo -}}
    {%- else -%}
      theme/assets/brand/logos/svg/logo/privacy-guides-logo-notext-colorbg.svg
    {%- endif -%}

  - &updated_time >-
    {% if page.config.date.updated %}
      {{- page.config.date.updated.strftime('%Y-%m-%dT%H:%M:%S+00:00') -}}
    {% else %}
      {{- page.config.date.created.strftime('%Y-%m-%dT%H:%M:%S+00:00') -}}
    {% endif %}

  - &author_mastodon >-
    {%- if page.authors[0].mastodon -%}
      @{{- page.authors[0].mastodon.username -}}@{{- page.authors[0].mastodon.instance -}}
    {%- else -%}
      {{- "@privacyguides@neat.computer" -}}
    {%- endif -%}

  - &author_twitter >-
    {%- if page.authors[0].twitter -%}
      @{{- page.authors[0].twitter -}}
    {%- else -%}
      {{- "@privacy_guides" -}}
    {%- endif -%}

  - &replacement_image >-
    {%- if page.meta.preview and page.meta.preview.cover -%}
      {{- page.meta.preview.cover -}}
    {%- endif -%}

# Meta tags
tags:
  # Open Graph
  og:site_name: *site_name
  og:locale: "en_US"
  og:type: article
  og:title: *page_title
  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 }}"

  # Blog
  article:published_time: "{{ page.config.date.created.strftime('%Y-%m-%dT%H:%M:%S+00:00') }}"
  article:modified_time: *updated_time
  article:section: "{{ page.categories[0].title }}"
  article:author: "https://www.privacyguides.org/articles/{{ page.authors[0].url }}"

  # Facebook
  article:publisher: "https://www.facebook.com/PrivacyGuides.org"
  article:tag: "Technology"

  # Mastodon
  fediverse:creator: *author_mastodon

  # Twitter
  twitter:site: "@privacy_guides"
  twitter:creator: *author_twitter
  twitter:card: summary_large_image
  twitter:title: *page_title
  twitter:description: *page_description
  twitter:image: "{{ image.url }}"
  twitter:image:width: "{{ image.width }}"
  twitter:image:height: "{{ image.height }}"
  twitter:image:alt: "Privacy Guides: Trusted, non-profit privacy and cybersecurity resources."
  twitter:label1: "Written by"
  twitter:data1: "{{ page.authors[0].name }}"

# -----------------------------------------------------------------------------
# Specification
# -----------------------------------------------------------------------------

# Card size and layers
size: { width: 1200, height: 630 }
layers:
  # Background
  - background:
      color: *page_color

  - size: { width: 512, height: 512 }
    offset: { x: 600, y: 59 }
    background:
      image: *page_logo

  - background:
      color: *background_transparency

  # Page icon
  - size: { width: 630, height: 630 }
    offset: { x: 570, y: 0 }
    icon:
      value: *page_icon
      color: *icon_transparency

  # 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: *text_color
      font:
        family: Bagnard
        style: Bold

  # Page title
  - size: { width: 864, height: 360 }
    offset: { x: 62, y: 192 }
    typography:
      content: *page_title
      align: start
      color: *text_color
      line:
        amount: 4
        height: 1.5
      font:
        family: Bagnard
        style: Bold

  - background:
      image: *replacement_image