docs: social card meta inject method (#419)

docs/blog/posts/2024-11-22-screenshot-driven-development.md

@@ -1,16 +1,13 @@
 ---
 draft: false
 title: "Screenshot-Driven Development"
+description: "AI Agent uses screenshots to assist in styling."
+background_image: "https://block.github.io/goose/blog/images/screenshot-driven-development-blog/screenshot-driven-development.png" 
 date: 2024-11-22
 authors:
   - rizel
 categories:
   - Web Development
-social:
-  cards_layout_options:
-    title: "Screenshot-Driven Development"  
-    description: "AI Agent uses screenshots to assist in styling."
-    background_image: "https://block.github.io/goose/blog/images/screenshot-driven-development-blog/screenshot-driven-development.png" 
 ---
 ![calendar](../images/screenshot-driven-development-blog/screenshot-driven-development.png)
 

mkdocs.yml

@@ -9,6 +9,7 @@ use_directory_urls: false
 # theme
 theme:
   name: material
+  custom_dir: overrides
   features:
     - announce.dismiss
     - content.action.edit
@@ -41,11 +42,11 @@ theme:
 # plugins
 plugins:
   - blog
+  - social:
+      enabled: true
   - include-markdown
   - callouts
   - glightbox
-  - social:
-      enabled: !ENV [CI, true]
   - mkdocstrings:
       handlers:
         python:

overrides/social-meta-inject.html

@@ -0,0 +1,10 @@
+{% block head %}
+  {{ super() }}
+  {% if page.meta.description %}
+    <meta name="description" content="{{ page.meta.description }}">
+  {% endif %}
+  {% if page.meta.background_image %}
+    <meta property="og:image" content="{{ page.meta.background_image }}">
+    <meta name="twitter:image" content="{{ page.meta.background_image }}">
+  {% endif %}
+{% endblock %}