Add Open Graph metadata to base template

build.sh

@@ -15,7 +15,12 @@ echo "Compiling picker.js"
 npx esbuild website/picker.js --bundle --minify --outfile=dist/static/picker.min.js
 
 echo "Generating images"
-node website/generate-images.js avatar >build/avatar.pam
+node website/generate-images.js avatar200 >build/avatar200.pam
+node website/generate-images.js avatar500 >build/avatar500.pam
+convert build/avatar200.pam dist/static/images/avatar200.jpeg
+convert build/avatar200.pam dist/static/images/avatar200.png
+convert build/avatar500.pam dist/static/images/avatar500.jpeg
+convert build/avatar500.pam dist/static/images/avatar500.png
 node website/generate-images.js favicon >build/favicon.pam
 convert build/favicon.pam dist/favicon.png
 node website/generate-images.js hsluv >build/hsluv.pam

website/generate-images.js

@@ -221,8 +221,10 @@ const demos = {
     'hpluv-chroma': demoHpluvChroma
 };
 
-if (type === 'avatar') {
+if (type === 'avatar200') {
     makeImage(luvSquare, 200, 200);
+} else if (type === 'avatar500') {
+    makeImage(luvSquare, 500, 500);
 } else if (type === 'favicon') {
     makeImage(luvSquare, 32, 32);
 } else {

website/templates/base.mustache

@@ -6,6 +6,8 @@
     <meta name="description" content="HSLuv - An alternative to HSL for programmatic color generation">
     <meta name="author" content="Alexei Boronine">
     <meta name="viewport" content="width=device-width">
+    <meta property="og:title" content="{{{ title }}} - Human-friendly HSL">
+    <meta property="og:image" content="https://www.hsluv.org/static/images/avatar200.jpeg">
     <link rel="preload" href="/static/css/min.min.css" as="style">
     <link rel="preload" href="/static/css/main.css" as="style">
     <link rel="stylesheet" href="/static/css/min.min.css">