fix(blog): HTML meta tags (privacyguides#2721)

Signed-off-by: blacklight447 <niek@privacyguides.org> Signed-off-by: Daniel Gray <dngray@privacyguides.org>
kimg45 · Aug 21, 2024 · 4c33224 · 4c33224
1 parent b6529e4
commit 4c33224
Show file tree

Hide file tree

Showing 9 changed files with 133 additions and 10 deletions.
diff --git a/blog/.authors.yml b/blog/.authors.yml
@@ -12,6 +12,9 @@ authors:
     name: Niek de Wilde
     description: Team Member
     avatar: https://github.com/blacklight447.png
+    mastodon:
+      username: blacklight447
+      instance: mastodon.social
   dngray:
     name: Daniel Gray
     description: Team Member
@@ -24,6 +27,10 @@ authors:
     name: Jonah Aragon
     description: Team Member
     avatar: https://github.com/jonaharagon.png
+    mastodon:
+      username: jonah
+      instance: neat.computer
+    twitter: jonaharagon
   kaitebay:
     name: Kai Tebay
     description: Former Team Member

diff --git a/blog/posts/.meta.yml b/blog/posts/.meta.yml
@@ -1 +1,3 @@
 comments: true
+social:
+  cards_layout: blog
diff --git a/docs/index.md b/docs/index.md
@@ -1,5 +1,5 @@
 ---
-meta_title: "Privacy Guides: Your Independent Privacy and Security Resource"
+meta_title: "Privacy Guides: Independent Privacy & Security Resources"
 description: "The most popular & trustworthy non-profit website to find privacy tools and learn about protecting your digital life. Ad & affiliate free, high quality reviews."
 template: home.html
 social:

diff --git a/mkdocs.blog.yml b/mkdocs.blog.yml
@@ -23,7 +23,7 @@ site_url: "https://www.privacyguides.org/articles/"
 site_dir: "site/articles"
 
 site_name: Privacy Guides
-site_description: "Privacy Guides is your central privacy and security resource to protect yourself online."
+site_description: "Privacy Guides is the most popular & trustworthy non-profit privacy resource to find privacy tools and learn about protecting your digital life."
 edit_uri_template: blob/main/blog/{path}?plain=1
 
 extra:
@@ -128,6 +128,8 @@ plugins:
     blog_dir: .
     blog_toc: true
     post_url_format: "{date}/{file}"
+    post_excerpt: required
+    post_excerpt_max_authors: 0
     authors_profiles: true
     authors_profiles_toc: true
     categories_allowed:

diff --git a/theme/layouts/blog.yml b/theme/layouts/blog.yml
@@ -0,0 +1,110 @@
+definitions:
+  - &site_name >-
+    {{ config.site_name }}
+
+  - &page_title >-
+    {{ page.meta.get("title", page.title) }}
+
+  - &page_description >-
+    {{ page.meta.get("description", config.site_description) or "" }}
+
+  - &logo >-
+    theme/assets/brand/logos/svg/logo/privacy-guides-logo-notext-colorbg.svg
+
+  - &updated_time >-
+    {% if page.config.date.updated %}
+      {{- page.config.date.updated.strftime('%Y-%m-%d') -}}
+    {% else %}
+      {{- page.config.date.created.strftime('%Y-%m-%d') -}}
+    {% 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 -%}
+
+# Meta tags
+tags:
+  # Open Graph
+  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-%d') }}"
+  article:modified_time: *updated_time
+  article:section: "{{ page.categories[0].title }}"
+  article:author: "https://www.privacyguides.org/articles/{{ page.authors[0].url }}"
+
+  # 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 }}"
+
+# -----------------------------------------------------------------------------
+# Specification
+# -----------------------------------------------------------------------------
+
+# Card size and layers
+size: { width: 1200, height: 630 }
+layers:
+  # Background
+  - background:
+      color: "#FFD06F"
+
+  # Page icon
+  - size: { width: 630, height: 630 }
+    offset: { x: 570, y: 0 }
+    icon:
+      value: material/book-open-page-variant
+      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: "#2d2d2d"
+      font:
+        family: Bagnard
+        style: Bold
+
+  # Page title
+  - size: { width: 864, height: 256 }
+    offset: { x: 62, y: 192 }
+    typography:
+      content: *page_title
+      align: start
+      color: "#2d2d2d"
+      line:
+        amount: 3
+        height: 1.5
+      font:
+        family: Bagnard
+        style: Bold
diff --git a/theme/layouts/home.yml b/theme/layouts/home.yml
@@ -46,7 +46,7 @@ tags:
 
   # Twitter
   twitter:card: summary_large_image
-  twitter.title: *page_title_with_site_name
+  twitter:title: *page_title_with_site_name
   twitter:description: *page_description
   twitter:image: "{{ image.url }}"
 

diff --git a/theme/layouts/page.yml b/theme/layouts/page.yml
@@ -79,9 +79,13 @@ tags:
   og:image:height: "{{ image.height }}"
   og:url: "{{ page.canonical_url }}"
 
+  # Mastodon
+  fediverse:creator: "@privacyguides@neat.computer"
+
   # Twitter
+  twitter:site: "@privacy_guides"
   twitter:card: summary_large_image
-  twitter.title: *page_title_with_site_name
+  twitter:title: *page_title_with_site_name
   twitter:description: *page_description
   twitter:image: "{{ image.url }}"
 

diff --git a/theme/layouts/pride.yml b/theme/layouts/pride.yml
@@ -66,7 +66,7 @@ tags:
 
   # Twitter
   twitter:card: summary_large_image
-  twitter.title: *page_title_with_site_name
+  twitter:title: *page_title_with_site_name
   twitter:description: *page_description
   twitter:image: "{{ image.url }}"
 

diff --git a/theme/main.html b/theme/main.html
@@ -31,6 +31,8 @@
     {% endif %}
     {% if page.meta and page.meta.author %}
     <meta name="author" content="{{ page.meta.author }}">
+    {% elif page.authors %}
+    <meta name="author" content="{{ page.authors[0].name }}">
     {% elif config.site_author %}
     <meta name="author" content="{{ config.site_author }}">
     {% endif %}
@@ -83,12 +85,8 @@
     <meta name="robots" content="max-snippet:-1, max-image-preview:large">
   {% endif %}
 
-  <meta name="fediverse:creator" content="privacyguides@neat.computer" />
-
   {% if config.extra.context == "production" %}
-  <meta http-equiv="onion-location" content="{{ "http://www.xoe4vn5uwdztif6goazfbmogh6wh5jc4up35bqdflu6bkdc5cas5vjqd.onion/" ~ config.theme.language ~ "/" ~ page.url }}" />
-  {% elif config.extra.deploy %}
-  <meta http-equiv="onion-location" content="{{ "http://" ~ config.extra.deploy ~ ".netlify.xoe4vn5uwdztif6goazfbmogh6wh5jc4up35bqdflu6bkdc5cas5vjqd.onion/" ~ config.theme.language ~ "/" ~ page.url }}" />
+  <meta http-equiv="onion-location" content="{{ page.canonical_url | replace("https://www.privacyguides.org", "http://www.xoe4vn5uwdztif6goazfbmogh6wh5jc4up35bqdflu6bkdc5cas5vjqd.onion") }}" />
   {% endif %}
   {% if page and page.meta and page.meta.schema %}
   <script type="application/ld+json">