Use Quix layout

.github/workflows/build-commit-subfolder.yaml

@@ -72,6 +72,9 @@ jobs:
     # add 'social' to mkdocs.yml file under plugins
     - run: pip install cffi pillow cairosvg
 
+    # Material extension now part of mkdocs
+    - run: pip install mkdocs-material-extensions
+
     # add mkdocs-redirects
     # zoom images
     - name: Install mkdocs-redirects

.github/workflows/sync-build-deploy.yaml

@@ -58,6 +58,9 @@ jobs:
       # add 'social' to mkdocs.yml file under plugins
       - run: pip install cffi pillow cairosvg
 
+      # Material extension now part of mkdocs
+      - run: pip install mkdocs-material-extensions
+
       # add mkdocs-redirects
       # zoom images
       - name: Install mkdocs-redirects

layouts/custom.yml → layouts/quix.yml

@@ -5,6 +5,30 @@ definitions:
 - &page_description >-
     {{ page.meta.get("description") or "" }}
 
+- &page_title_with_site_name >-
+  {%- if not page.is_homepage -%}
+    {{ page.meta.get("title", page.title) }} - {{ config.site_name }}
+  {%- else -%}
+    {{ page.meta.get("title", page.title) }}
+  {%- endif -%}
+
+tags:
+
+  og:type: website
+  og:title: *page_title_with_site_name
+  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 }}"
+
+  twitter:card: summary_large_image
+  twitter:title: *page_title_with_site_name
+  twitter:description: *page_description
+  twitter:image: "{{ image.url }}"
+
+
 size: { width: 1200, height: 630 }
 layers:
 #Set background image
@@ -51,4 +75,4 @@ layers:
         height: 2.5
       font:
         family: Inter
-        style: Normal
+        style: Normal

mkdocs.yml

@@ -137,7 +137,9 @@ plugins:
       cleanup: true
   - search:
       separator: '[\s\-\.]' 
-  - social
+  - social:
+      cards_layout_dir: layouts
+      cards_layout: quix
   - glightbox
   - redirects:
       redirect_maps: