Enable social card generation (#2068)

README.md

@@ -69,7 +69,7 @@ This website uses [`mkdocs-material-insiders`](https://squidfunk.github.io/mkdoc
 
 1. Clone this repository and submodules: `git clone --recurse-submodules https://github.com/privacyguides/privacyguides.org.git`
 2. Enable SSH commit verification with our local [`.allowed_signers`](/.allowed_signers) file: `git config gpg.ssh.allowedSignersFile .allowed_signers`
-3. Install Python **3.10**
+3. Install Python **3.8**, this is the only version supported by Netlify.
 4. Install **pipenv**: `pip install pipenv`
 5. Install dependencies: `pipenv install --dev` (install [Pillow and CairoSVG](https://squidfunk.github.io/mkdocs-material/setup/setting-up-social-cards/#dependencies) as well to generate social cards)
 6. Serve the site locally: `pipenv run mkdocs serve --config-file config/mkdocs.en.yml` (set `CARDS=true` to generate social cards)

config/mkdocs.common.yml

@@ -36,11 +36,10 @@ repo_name: ""
 theme:
   name: material
   custom_dir: ../theme
-  favicon: assets/img/brand/PNG/Favicon/favicon-32x32.png
+  favicon: assets/brand/png/favicon/favicon-32x32.png
   icon:
     logo: octicons/shield-lock-16
     repo: simple/github
-  font: false
   features:
     - navigation.tracking
     - navigation.tabs

config/mkdocs.en.yml

@@ -33,6 +33,9 @@ extra:
 
 theme:
   language: en
+  font:
+    text: Public Sans
+    code: DM Mono
   palette:
     - media: "(prefers-color-scheme)"
       scheme: default
@@ -60,7 +63,8 @@ plugins:
       fill: "#FFD06F"
       text: "#2d2d2d"
     cards_dir: assets/img/social
-    cards_font: 'Public Sans'
+    cards_font: Public Sans
+    cache_dir: .cache/plugin/social-en
 
 nav:
   - Home: 'index.md'

config/mkdocs.fr.yml

@@ -33,6 +33,9 @@ extra:
 
 theme:
   language: fr
+  font:
+    text: Public Sans
+    code: DM Mono
   palette:
     - media: "(prefers-color-scheme)"
       scheme: default
@@ -53,6 +56,16 @@ theme:
         icon: material/brightness-5
         name: "Basculer en mode sombre"
 
+plugins:
+  social:
+    cards: !ENV [NETLIFY, false]
+    cards_color:
+      fill: "#FFD06F"
+      text: "#2d2d2d"
+    cards_dir: assets/img/social
+    cards_font: Public Sans
+    cache_dir: .cache/plugin/social-fr
+
 nav:
   - Accueil: 'index.md'
   - Base de connaissances:

config/mkdocs.he.yml

@@ -31,8 +31,15 @@ extra:
           data: Needs Improvement
           note: "תודה על המשוב שלך! Help us improve this page by opening a <a href='https://discuss.privacyguides.net/'>discussion on our forum</a>."
 
+extra_css:
+  - assets/stylesheets/extra.css?v=3.2.0
+  - assets/stylesheets/lang-he.css?v=3.4.0
+
 theme:
   language: he
+  font:
+    text: Open Sans
+    code: Cousine
   palette:
     - media: "(prefers-color-scheme)"
       scheme: default
@@ -53,6 +60,16 @@ theme:
         icon: material/brightness-5
         name: "עבור למצב כהה"
 
+plugins:
+  social:
+    cards: !ENV [NETLIFY, false]
+    cards_color:
+      fill: "#FFD06F"
+      text: "#2d2d2d"
+    cards_dir: assets/img/social
+    cards_font: Suez One
+    cache_dir: .cache/plugin/social-he
+
 nav:
   - "דף הבית": 'index.md'
   - "ידע בסיסי":

config/mkdocs.nl.yml

@@ -53,6 +53,16 @@ theme:
         icon: material/brightness-5
         name: "Verander naar donker thema"
 
+plugins:
+  social:
+    cards: !ENV [NETLIFY, false]
+    cards_color:
+      fill: "#FFD06F"
+      text: "#2d2d2d"
+    cards_dir: assets/img/social
+    cards_font: Public Sans
+    cache_dir: .cache/plugin/social-nl
+
 nav:
   - Home: 'index.md'
   - Kennisbank:

theme/assets/stylesheets/extra.css

@@ -4,62 +4,6 @@
     font-display: swap;
 }
 
-@font-face {
-    font-family: 'Public Sans';
-    src: url('/en/assets/brand/WOFF/public_sans/PublicSans-Bold.woff2') format('woff2');
-    font-weight: bold;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Public Sans';
-    src: url('/en/assets/brand/WOFF/public_sans/PublicSans-BoldItalic.woff2') format('woff2');
-    font-weight: bold;
-    font-style: italic;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Public Sans';
-    src: url('/en/assets/brand/WOFF/public_sans/PublicSans-Light.woff2') format('woff2');
-    font-weight: 300;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Public Sans';
-    src: url('/en/assets/brand/WOFF/public_sans/PublicSans-Italic.woff2') format('woff2');
-    font-weight: normal;
-    font-style: italic;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Public Sans';
-    src: url('/en/assets/brand/WOFF/public_sans/PublicSans-Regular.woff2') format('woff2');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'DM Mono';
-    src: url('/en/assets/brand/WOFF/dm_mono/DMMono-Regular.woff2') format('woff2');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'DM Mono';
-    src: url('/en/assets/brand/WOFF/dm_mono/DMMono-Medium.woff2') format('woff2');
-    font-weight: 500;
-    font-style: normal;
-    font-display: swap;
-}
-
 /* Define brand */
 :root, [data-md-color-scheme="default"] {
     --md-default-bg-color: rgb(247, 247, 252);
@@ -69,8 +13,6 @@
     --md-primary-bg-color: rgba(0,0,0,.75);
     --md-primary-bg-color--light: rgba(0,0,0,.54);
     --md-accent-fg-color: #4e30e6;
-    --md-text-font: "Public Sans", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
-    --md-code-font: "DM Mono", SFMono-Regular, Consolas, Menlo, monospace;
     --pg-light-border: rgb(229, 231, 235);
     --pg-hero-color: rgb(45, 45, 45);
     --pg-purple: #603aa0;
@@ -90,8 +32,6 @@
     --md-primary-bg-color: rgba(0,0,0,.75);
     --md-primary-bg-color--light: rgba(0,0,0,.54);
     --md-accent-fg-color: #ffdb57;
-    --md-text-font: "Public Sans", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
-    --md-code-font: "DM Mono", SFMono-Regular, Consolas, Menlo, monospace;
     --pg-light-border: rgb(47, 47, 47);
     --pg-hero-color: #FFD06F;
     --pg-purple: #af94de;

theme/assets/stylesheets/lang-he.css

@@ -0,0 +1,33 @@
+/* hebrew */
+@font-face {
+    font-family: 'Suez One';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://fonts.bunny.net/suez-one/files/suez-one-hebrew-400-normal.woff2) format('woff2'), url(https://fonts.bunny.net/suez-one/files/suez-one-hebrew-400-normal.woff) format('woff'); 
+    unicode-range: U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
+}
+
+    /* latin */
+@font-face {
+    font-family: 'Suez One';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://fonts.bunny.net/suez-one/files/suez-one-latin-400-normal.woff2) format('woff2'), url(https://fonts.bunny.net/suez-one/files/suez-one-latin-400-normal.woff) format('woff'); 
+    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+    /* latin-ext */
+@font-face {
+    font-family: 'Suez One';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://fonts.bunny.net/suez-one/files/suez-one-latin-ext-400-normal.woff2) format('woff2'), url(https://fonts.bunny.net/suez-one/files/suez-one-latin-ext-400-normal.woff) format('woff'); 
+    unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+  
+h1, h2, h3, .md-header__topic {
+    font-family: "Bagnard", "Suez One", serif;
+}