Fixes opengraph metadata

davidhariri · Feb 24, 2025 · 872d62b · 872d62b
1 parent 2d95e8d
commit 872d62b
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 5 deletions.
diff --git a/make_site.py b/make_site.py
@@ -14,7 +14,6 @@
 from rfeed import Feed, Item
 from dataclasses import dataclass
 import yaml
-import copy
 from urllib.parse import quote
 
 
@@ -26,6 +25,8 @@ class BaseContent:
     date_published: date | None
     raw_content: str
     content: str
+    tags: list[str] = None
+    cover_photo: str | None = None
 
     @classmethod
     def from_frontmatter(cls, content: str, url_slug: str, **kwargs):
@@ -58,18 +59,20 @@ def from_frontmatter(cls, content: str, url_slug: str, **kwargs):
             date_published=date_published,
             raw_content=content,
             content=html_content,
+            tags=data.metadata.get("tags", []),
+            cover_photo=data.metadata.get("cover_photo", None),
             **kwargs,
         )
 
 
 @dataclass
 class Post(BaseContent):
-    tags: list[str]
+    pass
 
 
 @dataclass
 class Page(BaseContent):
-    date_last_updated: date | None
+    date_last_updated: date | None = None
 
 @dataclass
 class SiteConfig:
@@ -106,8 +109,7 @@ class SiteConfig:
 
             post = Post.from_frontmatter(
                 content,
-                url_slug=url_slug,
-                tags=post_data.metadata.get("tags", [])
+                url_slug=url_slug
             )
 
             POSTS_ALL.append(post)

diff --git a/posts/2024/chatgpt-growth.md b/posts/2024/chatgpt-growth.md
@@ -5,6 +5,7 @@ description: 'Reflecting on the mind-boggling growth of #ChatGPT and how it shat
 tags:
 - LLMs
 title: ChatGPT Growth
+cover_photo: /static/media/3989c1fc-cd3b-4098-b6ab-89b0721f8b40.png
 ---
 
 Sometimes I forget just how insanely fast #ChatGPT grew. 

diff --git a/static/opengraph-banner.png b/static/opengraph-banner.png
diff --git a/templates/base.jinja b/templates/base.jinja
@@ -7,12 +7,30 @@
   <meta name="description" content="{{ config.site_description }}" />
   <meta property="og:site_name" content="{{ config.site_title }}" />
   <meta property="og:url" content="{{ config.site_domain }}" />
+  <meta property="og:title" content="{% block og_title %}{{ config.site_title }}{% endblock %}" />
+  <meta property="og:description" content="{% block og_description %}{{ config.site_description }}{% endblock %}" />
+  <meta property="og:type" content="{% block og_type %}website{% endblock %}" />
+  <meta property="og:image" content="{% block og_image %}{{ config.site_domain }}/static/opengraph-banner.png{% endblock %}" />
+  <meta property="og:image:alt" content="{% block og_image_alt %}{{ config.site_title }}{% endblock %}" />
+  <meta property="og:locale" content="en_US" />
+  <meta property="article:published_time" content="{% block article_published_time %}{% endblock %}" />
+  <meta property="article:author" content="David Hariri" />
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:site" content="@davehariri" />
+  <meta name="twitter:creator" content="@davehariri" />
+  <meta name="twitter:title" content="{% block twitter_title %}{{ config.site_title }}{% endblock %}" />
+  <meta name="twitter:description" content="{% block twitter_description %}{{ config.site_description }}{% endblock %}" />
+  <meta name="twitter:image" content="{% block twitter_image %}{{ config.site_domain }}/static/opengraph-banner.png{% endblock %}" />
+  <meta name="author" content="David Hariri">
+  <meta name="theme-color" content="#faf9f4" media="(prefers-color-scheme: light)">
+  <meta name="theme-color" content="#1e1e1d" media="(prefers-color-scheme: dark)">
   <title>{% block title %}David Hariri{% endblock %}</title>
   <link href="/static/favicon-light.svg" rel="icon" media="(prefers-color-scheme: light)" />
   <link href="/static/favicon-dark.svg" rel="icon" media="(prefers-color-scheme: dark)" />
   <link rel="stylesheet" href="/static/styles.css?v=2" />
   <script defer data-domain="dhariri.com" src="https://plausible.io/js/script.js"></script>
   <link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml" />
+  <link rel="canonical" href="https://{{ config.site_domain }}{% block canonical_url %}/{% endblock %}">
 </head>
 
 <body>

diff --git a/templates/post.jinja b/templates/post.jinja
@@ -1,5 +1,20 @@
 {% extends "base.jinja" %}
 {% block title %}{{ post.title }} - David Hariri{% endblock %}
+
+{% block og_title %}{{ post.title }}{% endblock %}
+{% block og_description %}{{ post.description }}{% endblock %}
+{% block og_type %}article{% endblock %}
+{% block og_image %}{% if post.cover_photo %}https://{{ config.site_domain }}{{ post.cover_photo }}{% else %}https://{{ config.site_domain }}/static/default-share-image.jpg{% endif %}{% endblock %}
+{% block og_image_alt %}{{ post.title }}{% endblock %}
+
+{% block twitter_title %}{{ post.title }}{% endblock %}
+{% block twitter_description %}{{ post.description }}{% endblock %}
+{% block twitter_image %}{% if post.cover_photo %}https://{{ config.site_domain }}{{ post.cover_photo }}{% else %}https://{{ config.site_domain }}/static/default-share-image.jpg{% endif %}{% endblock %}
+
+{% block article_published_time %}{{ post.date_published.isoformat() }}{% endblock %}
+
+{% block canonical_url %}/{{ post.url_slug }}.html{% endblock %}
+
 {% block body %}
 <time>{{ post.date_published.strftime("%B %d %Y") }}</time>
 <h1>{{ post.title }}</h1>
-Original file line number
+Diff line change
@@ Expand Up @@
     tags:
     - LLMs
     title: ChatGPT Growth
+    cover_photo: /static/media/3989c1fc-cd3b-4098-b6ab-89b0721f8b40.png
     ---
     Sometimes I forget just how insanely fast #ChatGPT grew.
@@ Expand Down @@