Repos / hi.imnhan.com / 72aa0baee7
commit 72aa0baee79511303d483e83ec0f7ba216f49b31
Author: Nhân <hi@imnhan.com>
Date:   Mon Aug 21 23:01:10 2023 +0700

    add OpenGraph/Twitter meta tags

diff --git a/_s4g/settings.txt b/_s4g/settings.txt
index a5acd42..60a783b 100644
--- a/_s4g/settings.txt
+++ b/_s4g/settings.txt
@@ -4,7 +4,9 @@ Tagline: and this is my humble corner on the intertubes
 Root: /
 ShowFooter: true
 NavbarLinks: index.dj, about/index.dj, projects/index.dj
+DefaultThumb: about/keyboard-warrior.jpg
 
 AuthorName: nhanb
 AuthorURI: https://hi.imnhan.com
 AuthorEmail: hi@imnhan.com
+AuthorTwitter: nhanb
diff --git a/_s4g/theme/base.tmpl b/_s4g/theme/base.tmpl
index 3dd855a..90beb9c 100644
--- a/_s4g/theme/base.tmpl
+++ b/_s4g/theme/base.tmpl
@@ -7,6 +7,25 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="alternate" type="application/atom+xml" title="Atom feed" href="{{.Feed}}">
   <link rel="stylesheet" href="{{.ThemePath}}/base.css">
+
+  <meta property="og:title" content="{{.Post.Title}}" />
+  <meta name="twitter:title" content="{{.Post.Title}}" />
+  <meta name="twitter:card" content="summary" />
+  {{- if .Post.Description -}}
+    <meta property="og:description" content="{{.Post.Description}}" />
+    <meta name="twitter:description" content="{{.Post.Description}}" />
+  {{- end -}}
+  {{- if .Post.Thumb -}}
+    <meta property="og:image" content="./{{.Post.Thumb}}" />
+    <meta name="twitter:image" content="./{{.Post.Thumb}}" />
+  {{- else if .Site.DefaultThumb -}}
+    <meta property="og:image" content="{{.Site.Root}}{{.Site.DefaultThumb}}" />
+    <meta name="twitter:image" content="{{.Site.Root}}{{.Site.DefaultThumb}}" />
+  {{- end }}
+  {{- if .Site.AuthorTwitter -}}
+    <meta name="twitter:site" content="{{.Site.AuthorTwitter}}" />
+  {{- end }}
+
   {{- template "head" .}}
 </head>
 
diff --git a/about/index.dj b/about/index.dj
index d288218..72ac40e 100644
--- a/about/index.dj
+++ b/about/index.dj
@@ -1,6 +1,5 @@
 Title: About
 ShowInFeed: false
-Thumb: images/keyboard-warrior.jpg
 ---
 
 Hi, I'm Nhân. I make webstuff for a living.
diff --git a/about/index.html b/about/index.html
index c02cb4f..fea5340 100644
--- a/about/index.html
+++ b/about/index.html
@@ -7,6 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
   <link rel="stylesheet" href="/_s4g/theme/base.css">
+
+  <meta property="og:title" content="About" />
+  <meta name="twitter:title" content="About" />
+  <meta name="twitter:card" content="summary" /><meta property="og:image" content="/about/keyboard-warrior.jpg" />
+    <meta name="twitter:image" content="/about/keyboard-warrior.jpg" /><meta name="twitter:site" content="@nhanb" />
 </head>
 
 <body>
diff --git a/chromebook/index.dj b/chromebook/index.dj
index 30f1ad4..fe3b330 100644
--- a/chromebook/index.dj
+++ b/chromebook/index.dj
@@ -1,6 +1,6 @@
 Title: Acer Chromebook Spin 713 "Voxel": an adequate Crostini device, a buggy Linux laptop
 PostedAt: 2023-04-22 15:55
-Thumb: images/voxel_battery.jpg
+Thumb: voxel_battery.jpg
 
 ---
 
diff --git a/chromebook/index.html b/chromebook/index.html
index d8f3b76..bbccda5 100644
--- a/chromebook/index.html
+++ b/chromebook/index.html
@@ -7,6 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
   <link rel="stylesheet" href="/_s4g/theme/base.css">
+
+  <meta property="og:title" content="Acer Chromebook Spin 713 &#34;Voxel&#34;: an adequate Crostini device, a buggy Linux laptop" />
+  <meta name="twitter:title" content="Acer Chromebook Spin 713 &#34;Voxel&#34;: an adequate Crostini device, a buggy Linux laptop" />
+  <meta name="twitter:card" content="summary" /><meta property="og:image" content="./voxel_battery.jpg" />
+    <meta name="twitter:image" content="./voxel_battery.jpg" /><meta name="twitter:site" content="@nhanb" />
 </head>
 
 <body>
diff --git a/cool/index.dj b/cool/index.dj
index 5b21792..8f45172 100644
--- a/cool/index.dj
+++ b/cool/index.dj
@@ -1,6 +1,6 @@
 Title: "Have you built anything cool?"
 PostedAt: 2014-01-25 10:37
-Thumb: images/sealord.png
+Thumb: sealord.png
 
 ---
 
diff --git a/cool/index.html b/cool/index.html
index c4b15ef..368bd1f 100644
--- a/cool/index.html
+++ b/cool/index.html
@@ -7,6 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
   <link rel="stylesheet" href="/_s4g/theme/base.css">
+
+  <meta property="og:title" content="&#34;Have you built anything cool?&#34;" />
+  <meta name="twitter:title" content="&#34;Have you built anything cool?&#34;" />
+  <meta name="twitter:card" content="summary" /><meta property="og:image" content="./sealord.png" />
+    <meta name="twitter:image" content="./sealord.png" /><meta name="twitter:site" content="@nhanb" />
 </head>
 
 <body>
diff --git a/custom-theme/index.html b/custom-theme/index.html
index 89fe4d0..bb8a1ef 100644
--- a/custom-theme/index.html
+++ b/custom-theme/index.html
@@ -7,6 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
   <link rel="stylesheet" href="/_s4g/theme/base.css">
+
+  <meta property="og:title" content="Look ma, no stock theme!" />
+  <meta name="twitter:title" content="Look ma, no stock theme!" />
+  <meta name="twitter:card" content="summary" /><meta property="og:image" content="/about/keyboard-warrior.jpg" />
+    <meta name="twitter:image" content="/about/keyboard-warrior.jpg" /><meta name="twitter:site" content="@nhanb" />
 </head>
 
 <body>
diff --git a/fcitx/index.html b/fcitx/index.html
index 33f6506..ac77ad2 100644
--- a/fcitx/index.html
+++ b/fcitx/index.html
@@ -7,6 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
   <link rel="stylesheet" href="/_s4g/theme/base.css">
+
+  <meta property="og:title" content="Dẹp ibus-unikey đi, dùng fcitx-unikey nhé!" />
+  <meta name="twitter:title" content="Dẹp ibus-unikey đi, dùng fcitx-unikey nhé!" />
+  <meta name="twitter:card" content="summary" /><meta property="og:image" content="/about/keyboard-warrior.jpg" />
+    <meta name="twitter:image" content="/about/keyboard-warrior.jpg" /><meta name="twitter:site" content="@nhanb" />
 </head>
 
 <body>
diff --git a/fightstick-1/index.dj b/fightstick-1/index.dj
index a058178..1c6be36 100644
--- a/fightstick-1/index.dj
+++ b/fightstick-1/index.dj
@@ -1,6 +1,6 @@
 Title: My first DIY fightstick: Part 1
 PostedAt: 2015-12-08 12:50
-Thumb: images/fightstick_17_top_panel.jpg
+Thumb: fightstick_17_top_panel.jpg
 
 ---
 
diff --git a/fightstick-1/index.html b/fightstick-1/index.html
index 982074e..9fb1e5d 100644
--- a/fightstick-1/index.html
+++ b/fightstick-1/index.html
@@ -7,6 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
   <link rel="stylesheet" href="/_s4g/theme/base.css">
+
+  <meta property="og:title" content="My first DIY fightstick: Part 1" />
+  <meta name="twitter:title" content="My first DIY fightstick: Part 1" />
+  <meta name="twitter:card" content="summary" /><meta property="og:image" content="./fightstick_17_top_panel.jpg" />
+    <meta name="twitter:image" content="./fightstick_17_top_panel.jpg" /><meta name="twitter:site" content="@nhanb" />
 </head>
 
 <body>
diff --git a/fightstick-2/index.html b/fightstick-2/index.html
index 0af0db6..7d1741e 100644
--- a/fightstick-2/index.html
+++ b/fightstick-2/index.html
@@ -7,6 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
   <link rel="stylesheet" href="/_s4g/theme/base.css">
+
+  <meta property="og:title" content="My first DIY fightstick: Part 2" />
+  <meta name="twitter:title" content="My first DIY fightstick: Part 2" />
+  <meta name="twitter:card" content="summary" /><meta property="og:image" content="./fightstick2_02_top.jpg" />
+    <meta name="twitter:image" content="./fightstick2_02_top.jpg" /><meta name="twitter:site" content="@nhanb" />
 </head>
 
 <body>
diff --git a/go-stack/index.html b/go-stack/index.html
index 0f3693f..2e53cf1 100644
--- a/go-stack/index.html
+++ b/go-stack/index.html
@@ -7,6 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
   <link rel="stylesheet" href="/_s4g/theme/base.css">
+
+  <meta property="og:title" content="Go, Postgres, Caddy, systemd: a simple, highly portable, Docker-free web stack" />
+  <meta name="twitter:title" content="Go, Postgres, Caddy, systemd: a simple, highly portable, Docker-free web stack" />
+  <meta name="twitter:card" content="summary" /><meta property="og:image" content="/about/keyboard-warrior.jpg" />
+    <meta name="twitter:image" content="/about/keyboard-warrior.jpg" /><meta name="twitter:site" content="@nhanb" />
 </head>
 
 <body>
diff --git a/hdviet/index.dj b/hdviet/index.dj
index db66176..631c63f 100644
--- a/hdviet/index.dj
+++ b/hdviet/index.dj
@@ -1,6 +1,6 @@
 Title: How I bypassed my university's domain blocker to watch movies on hdviet.com
 PostedAt: 2014-03-17 21:58
-Thumb: images/hdviet_05_no_sub.png
+Thumb: hdviet_05_no_sub.png
 ---
 
 *TL;DR*: Clone [my script from GitHub][4], run it with `python2 server.py 8080`, configure your
diff --git a/hdviet/index.html b/hdviet/index.html
index e65724f..f9a4680 100644
--- a/hdviet/index.html
+++ b/hdviet/index.html
@@ -7,6 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
   <link rel="stylesheet" href="/_s4g/theme/base.css">
+
+  <meta property="og:title" content="How I bypassed my university&#39;s domain blocker to watch movies on hdviet.com" />
+  <meta name="twitter:title" content="How I bypassed my university&#39;s domain blocker to watch movies on hdviet.com" />
+  <meta name="twitter:card" content="summary" /><meta property="og:image" content="./hdviet_05_no_sub.png" />
+    <meta name="twitter:image" content="./hdviet_05_no_sub.png" /><meta name="twitter:site" content="@nhanb" />
 </head>
 
 <body>
diff --git a/ideas.html b/ideas.html
index f6a14cd..8fd9f51 100644
--- a/ideas.html
+++ b/ideas.html
@@ -7,6 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
   <link rel="stylesheet" href="/_s4g/theme/base.css">
+
+  <meta property="og:title" content="Potential project ideas" />
+  <meta name="twitter:title" content="Potential project ideas" />
+  <meta name="twitter:card" content="summary" /><meta property="og:image" content="/about/keyboard-warrior.jpg" />
+    <meta name="twitter:image" content="/about/keyboard-warrior.jpg" /><meta name="twitter:site" content="@nhanb" />
 </head>
 
 <body>
diff --git a/index.html b/index.html
index 8508b37..df67c0f 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
   <link rel="stylesheet" href="/_s4g/theme/base.css">
+
+  <meta property="og:title" content="Home" />
+  <meta name="twitter:title" content="Home" />
+  <meta name="twitter:card" content="summary" /><meta property="og:image" content="/about/keyboard-warrior.jpg" />
+    <meta name="twitter:image" content="/about/keyboard-warrior.jpg" /><meta name="twitter:site" content="@nhanb" />
 </head>
 
 <body>
diff --git a/linux-automation/index.html b/linux-automation/index.html
index 12b6177..b2dc36d 100644
--- a/linux-automation/index.html
+++ b/linux-automation/index.html
@@ -7,6 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
   <link rel="stylesheet" href="/_s4g/theme/base.css">
+
+  <meta property="og:title" content="Why I use Linux: Automation" />
+  <meta name="twitter:title" content="Why I use Linux: Automation" />
+  <meta name="twitter:card" content="summary" /><meta property="og:image" content="/about/keyboard-warrior.jpg" />
+    <meta name="twitter:image" content="/about/keyboard-warrior.jpg" /><meta name="twitter:site" content="@nhanb" />
 </head>
 
 <body>
diff --git a/manjaro-xfce/index.html b/manjaro-xfce/index.html
index 64a598d..4be15ac 100644
--- a/manjaro-xfce/index.html
+++ b/manjaro-xfce/index.html
@@ -7,6 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
   <link rel="stylesheet" href="/_s4g/theme/base.css">
+
+  <meta property="og:title" content="What I did after installing Manjaro xfce" />
+  <meta name="twitter:title" content="What I did after installing Manjaro xfce" />
+  <meta name="twitter:card" content="summary" /><meta property="og:image" content="/about/keyboard-warrior.jpg" />
+    <meta name="twitter:image" content="/about/keyboard-warrior.jpg" /><meta name="twitter:site" content="@nhanb" />
 </head>
 
 <body>
diff --git a/mcross/index.html b/mcross/index.html
index 670ef4f..613802b 100644
--- a/mcross/index.html
+++ b/mcross/index.html
@@ -7,6 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
   <link rel="stylesheet" href="/_s4g/theme/base.css">
+
+  <meta property="og:title" content="Introducing McRoss—a minimal gemini browser" />
+  <meta name="twitter:title" content="Introducing McRoss—a minimal gemini browser" />
+  <meta name="twitter:card" content="summary" /><meta property="og:image" content="/about/keyboard-warrior.jpg" />
+    <meta name="twitter:image" content="/about/keyboard-warrior.jpg" /><meta name="twitter:site" content="@nhanb" />
 </head>
 
 <body>
diff --git a/node-webkit/index.html b/node-webkit/index.html
index 5634985..38fb90a 100644
--- a/node-webkit/index.html
+++ b/node-webkit/index.html
@@ -7,6 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
   <link rel="stylesheet" href="/_s4g/theme/base.css">
+
+  <meta property="og:title" content="Setting up your development environment for a node-webkit project" />
+  <meta name="twitter:title" content="Setting up your development environment for a node-webkit project" />
+  <meta name="twitter:card" content="summary" /><meta property="og:image" content="/about/keyboard-warrior.jpg" />
+    <meta name="twitter:image" content="/about/keyboard-warrior.jpg" /><meta name="twitter:site" content="@nhanb" />
 </head>
 
 <body>
diff --git a/notes.html b/notes.html
index cd82a1b..c6c2998 100644
--- a/notes.html
+++ b/notes.html
@@ -7,6 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
   <link rel="stylesheet" href="/_s4g/theme/base.css">
+
+  <meta property="og:title" content="Random notes" />
+  <meta name="twitter:title" content="Random notes" />
+  <meta name="twitter:card" content="summary" /><meta property="og:image" content="/about/keyboard-warrior.jpg" />
+    <meta name="twitter:image" content="/about/keyboard-warrior.jpg" /><meta name="twitter:site" content="@nhanb" />
 </head>
 
 <body>
diff --git a/pathogen-vs-vundle/index.html b/pathogen-vs-vundle/index.html
index b4947a9..d6174e7 100644
--- a/pathogen-vs-vundle/index.html
+++ b/pathogen-vs-vundle/index.html
@@ -7,6 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
   <link rel="stylesheet" href="/_s4g/theme/base.css">
+
+  <meta property="og:title" content="Modern vim plugin management: Pathogen vs Vundle" />
+  <meta name="twitter:title" content="Modern vim plugin management: Pathogen vs Vundle" />
+  <meta name="twitter:card" content="summary" /><meta property="og:image" content="/about/keyboard-warrior.jpg" />
+    <meta name="twitter:image" content="/about/keyboard-warrior.jpg" /><meta name="twitter:site" content="@nhanb" />
 </head>
 
 <body>
diff --git a/petition-fraud/index.html b/petition-fraud/index.html
index 88f5ce1..8bcf8d2 100644
--- a/petition-fraud/index.html
+++ b/petition-fraud/index.html
@@ -7,6 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
   <link rel="stylesheet" href="/_s4g/theme/base.css">
+
+  <meta property="og:title" content="I did NOT sign that online petition!" />
+  <meta name="twitter:title" content="I did NOT sign that online petition!" />
+  <meta name="twitter:card" content="summary" /><meta property="og:image" content="/about/keyboard-warrior.jpg" />
+    <meta name="twitter:image" content="/about/keyboard-warrior.jpg" /><meta name="twitter:site" content="@nhanb" />
 </head>
 
 <body>
diff --git a/pippable-webapp/index.html b/pippable-webapp/index.html
index 476913c..91dc461 100644
--- a/pippable-webapp/index.html
+++ b/pippable-webapp/index.html
@@ -7,6 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
   <link rel="stylesheet" href="/_s4g/theme/base.css">
+
+  <meta property="og:title" content="I made my python webapp installable via pip" />
+  <meta name="twitter:title" content="I made my python webapp installable via pip" />
+  <meta name="twitter:card" content="summary" /><meta property="og:image" content="/about/keyboard-warrior.jpg" />
+    <meta name="twitter:image" content="/about/keyboard-warrior.jpg" /><meta name="twitter:site" content="@nhanb" />
 </head>
 
 <body>
diff --git a/projects/index.dj b/projects/index.dj
index dc87ab4..82f98e8 100644
--- a/projects/index.dj
+++ b/projects/index.dj
@@ -1,6 +1,5 @@
 Title: Projects
 ShowInFeed: false
-Thumb: images/keyboard-warrior.jpg
 ---
 
 
diff --git a/projects/index.html b/projects/index.html
index 59fc853..252b1a4 100644
--- a/projects/index.html
+++ b/projects/index.html
@@ -7,6 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
   <link rel="stylesheet" href="/_s4g/theme/base.css">
+
+  <meta property="og:title" content="Projects" />
+  <meta name="twitter:title" content="Projects" />
+  <meta name="twitter:card" content="summary" /><meta property="og:image" content="/about/keyboard-warrior.jpg" />
+    <meta name="twitter:image" content="/about/keyboard-warrior.jpg" /><meta name="twitter:site" content="@nhanb" />
 </head>
 
 <body>
diff --git a/pyqt5/index.html b/pyqt5/index.html
index eebca4e..05645f9 100644
--- a/pyqt5/index.html
+++ b/pyqt5/index.html
@@ -7,6 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
   <link rel="stylesheet" href="/_s4g/theme/base.css">
+
+  <meta property="og:title" content="How to install PyQt5 on a virtualenv on Ubuntu 14.04" />
+  <meta name="twitter:title" content="How to install PyQt5 on a virtualenv on Ubuntu 14.04" />
+  <meta name="twitter:card" content="summary" /><meta property="og:image" content="/about/keyboard-warrior.jpg" />
+    <meta name="twitter:image" content="/about/keyboard-warrior.jpg" /><meta name="twitter:site" content="@nhanb" />
 </head>
 
 <body>
diff --git a/pytaku-old/index.html b/pytaku-old/index.html
index 7dc24db..4cda6e7 100644
--- a/pytaku-old/index.html
+++ b/pytaku-old/index.html
@@ -7,6 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
   <link rel="stylesheet" href="/_s4g/theme/base.css">
+
+  <meta property="og:title" content="Introducing Pytaku—the only online manga reader you&#39;ll ever need" />
+  <meta name="twitter:title" content="Introducing Pytaku—the only online manga reader you&#39;ll ever need" />
+  <meta name="twitter:card" content="summary" /><meta property="og:image" content="./pytaku_01_chapter_progress.png" />
+    <meta name="twitter:image" content="./pytaku_01_chapter_progress.png" /><meta name="twitter:site" content="@nhanb" />
 </head>
 
 <body>
diff --git a/rmit-wifi/index.html b/rmit-wifi/index.html
index 2cac2a7..e5a09e7 100644
--- a/rmit-wifi/index.html
+++ b/rmit-wifi/index.html
@@ -7,6 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
   <link rel="stylesheet" href="/_s4g/theme/base.css">
+
+  <meta property="og:title" content="Fix RMIT wi-fi issue in Ubuntu 13.04 and variants" />
+  <meta name="twitter:title" content="Fix RMIT wi-fi issue in Ubuntu 13.04 and variants" />
+  <meta name="twitter:card" content="summary" /><meta property="og:image" content="./rmit_wifi.png" />
+    <meta name="twitter:image" content="./rmit_wifi.png" /><meta name="twitter:site" content="@nhanb" />
 </head>
 
 <body>
diff --git a/sqlite-python/index.html b/sqlite-python/index.html
index e89d713..2ab306b 100644
--- a/sqlite-python/index.html
+++ b/sqlite-python/index.html
@@ -7,6 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
   <link rel="stylesheet" href="/_s4g/theme/base.css">
+
+  <meta property="og:title" content="Working with SQLite in Python without an ORM or migration framework" />
+  <meta name="twitter:title" content="Working with SQLite in Python without an ORM or migration framework" />
+  <meta name="twitter:card" content="summary" /><meta property="og:image" content="./byte_databases.jpg" />
+    <meta name="twitter:image" content="./byte_databases.jpg" /><meta name="twitter:site" content="@nhanb" />
 </head>
 
 <body>
diff --git a/stepmania-pad/index.dj b/stepmania-pad/index.dj
index 39d909a..29de90f 100644
--- a/stepmania-pad/index.dj
+++ b/stepmania-pad/index.dj
@@ -1,6 +1,6 @@
 Title: Simplest possible stepmania soft-to-hard pad mod
 PostedAt: 2021-02-08 12:47
-Thumb: padmod/08_finished.jpg
+Thumb: 08_finished.jpg
 
 ---
 
diff --git a/stepmania-pad/index.html b/stepmania-pad/index.html
index 2549e61..1faa951 100644
--- a/stepmania-pad/index.html
+++ b/stepmania-pad/index.html
@@ -7,6 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
   <link rel="stylesheet" href="/_s4g/theme/base.css">
+
+  <meta property="og:title" content="Simplest possible stepmania soft-to-hard pad mod" />
+  <meta name="twitter:title" content="Simplest possible stepmania soft-to-hard pad mod" />
+  <meta name="twitter:card" content="summary" /><meta property="og:image" content="./08_finished.jpg" />
+    <meta name="twitter:image" content="./08_finished.jpg" /><meta name="twitter:site" content="@nhanb" />
 </head>
 
 <body>
diff --git a/tmux-italics/index.html b/tmux-italics/index.html
index 7e82c3e..a4c1fd5 100644
--- a/tmux-italics/index.html
+++ b/tmux-italics/index.html
@@ -7,6 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
   <link rel="stylesheet" href="/_s4g/theme/base.css">
+
+  <meta property="og:title" content="Enable italic text inside vim inside tmux inside gnome-terminal" />
+  <meta name="twitter:title" content="Enable italic text inside vim inside tmux inside gnome-terminal" />
+  <meta name="twitter:card" content="summary" /><meta property="og:image" content="./italic_01_gvim.png" />
+    <meta name="twitter:image" content="./italic_01_gvim.png" /><meta name="twitter:site" content="@nhanb" />
 </head>
 
 <body>
diff --git a/ubuntu-programs/index.html b/ubuntu-programs/index.html
index 1b937b0..96b4c87 100644
--- a/ubuntu-programs/index.html
+++ b/ubuntu-programs/index.html
@@ -7,6 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
   <link rel="stylesheet" href="/_s4g/theme/base.css">
+
+  <meta property="og:title" content="Installing programs in Ubuntu" />
+  <meta name="twitter:title" content="Installing programs in Ubuntu" />
+  <meta name="twitter:card" content="summary" /><meta property="og:image" content="./wget-dependencies.png" />
+    <meta name="twitter:image" content="./wget-dependencies.png" /><meta name="twitter:site" content="@nhanb" />
 </head>
 
 <body>
diff --git a/video-streaming-1/index.html b/video-streaming-1/index.html
index af37a46..0345ae8 100644
--- a/video-streaming-1/index.html
+++ b/video-streaming-1/index.html
@@ -7,6 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
   <link rel="stylesheet" href="/_s4g/theme/base.css">
+
+  <meta property="og:title" content="Towards an acceptable video playing experience" />
+  <meta name="twitter:title" content="Towards an acceptable video playing experience" />
+  <meta name="twitter:card" content="summary" /><meta property="og:image" content="/about/keyboard-warrior.jpg" />
+    <meta name="twitter:image" content="/about/keyboard-warrior.jpg" /><meta name="twitter:site" content="@nhanb" />
 </head>
 
 <body>
diff --git a/video-streaming-2/index.html b/video-streaming-2/index.html
index 065df2d..0bcac55 100644
--- a/video-streaming-2/index.html
+++ b/video-streaming-2/index.html
@@ -7,6 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
   <link rel="stylesheet" href="/_s4g/theme/base.css">
+
+  <meta property="og:title" content="Streaming videos from Google Drive: a second attempt" />
+  <meta name="twitter:title" content="Streaming videos from Google Drive: a second attempt" />
+  <meta name="twitter:card" content="summary" /><meta property="og:image" content="/about/keyboard-warrior.jpg" />
+    <meta name="twitter:image" content="/about/keyboard-warrior.jpg" /><meta name="twitter:site" content="@nhanb" />
 </head>
 
 <body>
diff --git a/video-streaming-3/index.html b/video-streaming-3/index.html
index 763f6fb..c7ffaed 100644
--- a/video-streaming-3/index.html
+++ b/video-streaming-3/index.html
@@ -7,6 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
   <link rel="stylesheet" href="/_s4g/theme/base.css">
+
+  <meta property="og:title" content="The video streaming finale, or why put.io is awesome" />
+  <meta name="twitter:title" content="The video streaming finale, or why put.io is awesome" />
+  <meta name="twitter:card" content="summary" /><meta property="og:image" content="/about/keyboard-warrior.jpg" />
+    <meta name="twitter:image" content="/about/keyboard-warrior.jpg" /><meta name="twitter:site" content="@nhanb" />
 </head>
 
 <body>
diff --git a/vim-open-link/index.html b/vim-open-link/index.html
index 2fdabb9..770fe4c 100644
--- a/vim-open-link/index.html
+++ b/vim-open-link/index.html
@@ -7,6 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
   <link rel="stylesheet" href="/_s4g/theme/base.css">
+
+  <meta property="og:title" content="Opening http link under the cursor in vim" />
+  <meta name="twitter:title" content="Opening http link under the cursor in vim" />
+  <meta name="twitter:card" content="summary" /><meta property="og:image" content="/about/keyboard-warrior.jpg" />
+    <meta name="twitter:image" content="/about/keyboard-warrior.jpg" /><meta name="twitter:site" content="@nhanb" />
 </head>
 
 <body>
diff --git a/virtualenvwrapper/index.html b/virtualenvwrapper/index.html
index 83ffe7e..fc18d70 100644
--- a/virtualenvwrapper/index.html
+++ b/virtualenvwrapper/index.html
@@ -7,6 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
   <link rel="stylesheet" href="/_s4g/theme/base.css">
+
+  <meta property="og:title" content="Virtualenv(wrapper), python2 and python3" />
+  <meta name="twitter:title" content="Virtualenv(wrapper), python2 and python3" />
+  <meta name="twitter:card" content="summary" /><meta property="og:image" content="/about/keyboard-warrior.jpg" />
+    <meta name="twitter:image" content="/about/keyboard-warrior.jpg" /><meta name="twitter:site" content="@nhanb" />
 </head>
 
 <body>
diff --git a/yaks.html b/yaks.html
index db72e1d..b11b608 100644
--- a/yaks.html
+++ b/yaks.html
@@ -7,6 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
   <link rel="stylesheet" href="/_s4g/theme/base.css">
+
+  <meta property="og:title" content="Yak shaving" />
+  <meta name="twitter:title" content="Yak shaving" />
+  <meta name="twitter:card" content="summary" /><meta property="og:image" content="/about/keyboard-warrior.jpg" />
+    <meta name="twitter:image" content="/about/keyboard-warrior.jpg" /><meta name="twitter:site" content="@nhanb" />
 </head>
 
 <body>