From 0faf54811141860281bfee313e3d2b5a2b5d2d7f Mon Sep 17 00:00:00 2001 From: Jonah Aragon Date: Tue, 30 May 2023 16:39:22 -0500 Subject: [PATCH] New social card layout (#2177) --- .cache/plugin/social/fonts/Bagnard/Bold.woff | 1 + .gitignore | 12 +- config/layouts/custom.yml | 177 +++++++++++++++++++ config/mkdocs.common.yml | 7 +- config/mkdocs.en.yml | 11 -- config/mkdocs.es.yml | 11 -- config/mkdocs.fr.yml | 11 -- config/mkdocs.he.yml | 11 -- config/mkdocs.nl.yml | 11 -- docs/about/index.md | 2 +- 10 files changed, 196 insertions(+), 58 deletions(-) create mode 120000 .cache/plugin/social/fonts/Bagnard/Bold.woff create mode 100644 config/layouts/custom.yml diff --git a/.cache/plugin/social/fonts/Bagnard/Bold.woff b/.cache/plugin/social/fonts/Bagnard/Bold.woff new file mode 120000 index 00000000..6b5e0b8a --- /dev/null +++ b/.cache/plugin/social/fonts/Bagnard/Bold.woff @@ -0,0 +1 @@ +../../../../../theme/assets/brand/WOFF/bagnard/Bagnard.woff \ No newline at end of file diff --git a/.gitignore b/.gitignore index 24b1ea88..6d5574a5 100644 --- a/.gitignore +++ b/.gitignore @@ -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 diff --git a/config/layouts/custom.yml b/config/layouts/custom.yml new file mode 100644 index 00000000..e43db650 --- /dev/null +++ b/config/layouts/custom.yml @@ -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 diff --git a/config/mkdocs.common.yml b/config/mkdocs.common.yml index 3648b8a5..832c27fa 100644 --- a/config/mkdocs.common.yml +++ b/config/mkdocs.common.yml @@ -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: {} diff --git a/config/mkdocs.en.yml b/config/mkdocs.en.yml index 28e26d82..35b370ee 100644 --- a/config/mkdocs.en.yml +++ b/config/mkdocs.en.yml @@ -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: diff --git a/config/mkdocs.es.yml b/config/mkdocs.es.yml index 59b225de..db7e69ea 100644 --- a/config/mkdocs.es.yml +++ b/config/mkdocs.es.yml @@ -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: diff --git a/config/mkdocs.fr.yml b/config/mkdocs.fr.yml index c0487799..ef59c781 100644 --- a/config/mkdocs.fr.yml +++ b/config/mkdocs.fr.yml @@ -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: diff --git a/config/mkdocs.he.yml b/config/mkdocs.he.yml index f2012fe8..602fa6e5 100644 --- a/config/mkdocs.he.yml +++ b/config/mkdocs.he.yml @@ -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: diff --git a/config/mkdocs.nl.yml b/config/mkdocs.nl.yml index 2d5f5557..1981b177 100644 --- a/config/mkdocs.nl.yml +++ b/config/mkdocs.nl.yml @@ -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: diff --git a/docs/about/index.md b/docs/about/index.md index 06399f37..0a3d162a 100644 --- a/docs/about/index.md +++ b/docs/about/index.md @@ -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.