Add Open Graph and Twitter Card metadata to all Quarto sites

- Book: site-url, description, og:image with cover art
- Kits: site-url, description, og:image with favicon
- Collabs: site-url, description, og:image with favicon

Enables proper social media previews when sharing links on
LinkedIn, Twitter, Facebook, Discord, Slack, etc.

book/quarto/config/_quarto-html.yml

@@ -34,6 +34,20 @@ project:
 
 website:
   title: "ML Systems Textbook"  # This controls the browser tab title
+  description: "A comprehensive textbook on machine learning systems, covering hardware, software, and deployment."
+  site-url: https://mlsysbook.ai/book/
+
+  # Open Graph / Social Media metadata
+  open-graph:
+    locale: en_US
+    site-name: "Machine Learning Systems"
+    image: assets/images/covers/cover-hardcover-book.png
+    image-width: 1200
+    image-height: 630
+  twitter-card:
+    card-style: summary_large_image
+    image: assets/images/covers/cover-hardcover-book.png
+
   # High-level navigation enhancements
   page-navigation: true
   reader-mode: false

collabs/config/_quarto-html.yml

@@ -11,7 +11,21 @@ project:
 
 website:
   title: "Co-Labs"
+  description: "Interactive ML simulations and collaborative labs for exploring machine learning systems."
+  site-url: https://mlsysbook.ai/collabs/
   favicon: assets/images/favicon.png
+
+  # Open Graph / Social Media metadata
+  open-graph:
+    locale: en_US
+    site-name: "Machine Learning Systems"
+    image: assets/images/favicon.png
+    image-width: 512
+    image-height: 512
+  twitter-card:
+    card-style: summary
+    image: assets/images/favicon.png
+
   page-navigation: true
   reader-mode: false
   back-to-top-navigation: true

kits/config/_quarto-html.yml

@@ -11,7 +11,21 @@ project:
 
 website:
   title: "Hardware Kits"
+  description: "Hands-on hardware labs and kits for machine learning systems education."
+  site-url: https://mlsysbook.ai/kits/
   favicon: assets/images/favicon.png
+
+  # Open Graph / Social Media metadata
+  open-graph:
+    locale: en_US
+    site-name: "Machine Learning Systems"
+    image: assets/images/favicon.png
+    image-width: 512
+    image-height: 512
+  twitter-card:
+    card-style: summary
+    image: assets/images/favicon.png
+
   page-navigation: true
   reader-mode: false
   back-to-top-navigation: true