New social card layout (#2177)

This commit is contained in:
Jonah Aragon 2023-05-30 16:39:22 -05:00
parent 60c7a0970f
commit 0faf548111
Signed by: jonah
SSH Key Fingerprint: SHA256:oJSBSFgpWl4g+IwjL96Ya8ocGfI7r6VKnQw+257pZZ0
10 changed files with 196 additions and 58 deletions

View File

@ -0,0 +1 @@
../../../../../theme/assets/brand/WOFF/bagnard/Bagnard.woff

12
.gitignore vendored
View File

@ -1,7 +1,17 @@
site
.cache
/i18n/
/includes/*
!/includes/*.en.*
/theme/overrides/*
!/theme/overrides/*.en.*
# include Bagnard font in social card
# (not available in Google Fonts)
# ridiculous hide-and-seek https://stackoverflow.com/a/72380673
/.cache/*
!/.cache/plugin
/.cache/plugin/*
!/.cache/plugin/social
/.cache/plugin/social/*
!/.cache/plugin/social/fonts
/.cache/plugin/social/fonts/*
!/.cache/plugin/social/fonts/Bagnard

177
config/layouts/custom.yml Normal file
View File

@ -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

View File

@ -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: {}

View File

@ -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:

View File

@ -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:

View File

@ -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:

View File

@ -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:

View File

@ -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:

View File

@ -16,7 +16,7 @@ schema:
- https://www.youtube.com/@privacyguides
- https://mastodon.neat.computer/@privacyguides
---
![Privacy Guides logo](../assets/brand/png/square/pg-yellow.png){ align=right }
![Privacy Guides logo](../assets/brand/PNG/Square/pg-yellow.png){ align=right }
**Privacy Guides** is a socially motivated website that provides [information](/kb) for protecting your data security and privacy. Our mission is to inform the public about the value of digital privacy, and global government initiatives which aim to monitor your online activity. We are a non-profit collective operated entirely by volunteer [team members](https://discuss.privacyguides.net/g/team) and contributors. Our website is free of advertisements and not affiliated with any of the listed providers.