docs: add Open Graph tags so shared links show the logo

.github/workflows/docs.yml

@@ -8,6 +8,7 @@ on:
     paths:
       - "docs/**"
       - "mkdocs.yml"
+      - "overrides/**"
   workflow_dispatch:
 permissions:
   contents: read

mkdocs.yml

@@ -13,6 +13,7 @@ edit_uri: edit/main/docs/
 # Theme configuration
 theme:
   name: material
+  custom_dir: overrides
   # The header is brand ink (#16191c) in both schemes, the background the -dark lockup is drawn for.
   logo: assets/logo/ignis-lockup-ember-dark-outline.svg
   favicon: assets/logo/favicon.ico

overrides/main.html

@@ -0,0 +1,22 @@
+{% extends "base.html" %}
+
+{#- Open Graph and Twitter tags for link previews. Previewers need an absolute raster image URL,
+    so the image is a PNG resolved against site_url. -#}
+{% block extrahead %}
+  {%- set title = (page.title ~ " - " ~ config.site_name) if page.title and not page.is_homepage else config.site_name -%}
+  {%- set description = (page.meta.description if page.meta and page.meta.description else config.site_description) | trim -%}
+  {%- set image = config.site_url ~ "assets/social/ignis-social-preview.png" -%}
+  <meta property="og:type" content="website">
+  <meta property="og:site_name" content="{{ config.site_name }}">
+  <meta property="og:title" content="{{ title }}">
+  <meta property="og:description" content="{{ description }}">
+  <meta property="og:url" content="{{ page.canonical_url }}">
+  <meta property="og:image" content="{{ image }}">
+  <meta property="og:image:type" content="image/png">
+  <meta property="og:image:width" content="1280">
+  <meta property="og:image:height" content="640">
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="{{ title }}">
+  <meta name="twitter:description" content="{{ description }}">
+  <meta name="twitter:image" content="{{ image }}">
+{% endblock %}