From dd8af65813e20bfcbb87dcd2317e67dbb2ab0c42 Mon Sep 17 00:00:00 2001
From: Tixie <admin@glitch.family>
Date: Tue, 3 Dec 2019 21:35:06 +0100
Subject: [PATCH] add opengraph/twitter card on single page

---
 layouts/_default/baseof.html | 12 ++++++------
 layouts/_default/single.html | 20 ++++++++++++++++++++
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 52713df..8e298b0 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -13,11 +13,11 @@
     <base href="{{ if getenv "CONTEXT" }}{{ cond (eq "production" (getenv "CONTEXT")) (getenv "URL") (getenv "DEPLOY_PRIME_URL") }}{{ else }}{{ $.Site.BaseURL }}{{ end }}">
 
 
-    <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png">
-    <link rel="manifest" href="/favicons/site.webmanifest">
-    <link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#ff2749">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ "/favicons/apple-touch-icon.png" | absURL }}">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ "/favicons/favicon-32x32.png" | absURL }}">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ "/favicons/favicon-16x16.png" | absURL }}">
+    <link rel="manifest" href="{{ "/favicons/site.webmanifest" | absURL }}">
+    <link rel="mask-icon" href="{{ "/favicons/safari-pinned-tab.svg" | absURL }}" color="#ff2749">
     <meta name="msapplication-TileColor" content="#0e1848">
     <meta name="theme-color" content="#0e1848">
     {{ block "metaSocial" . }}
@@ -25,7 +25,7 @@
       <meta property="og:title" content="Now Playing ∴ Great music should be shared">
       <meta property="og:description" content="Handpicked Albums by the Glitch Family">
       <meta property="og:url" content="https://music.glitch.family">
-      <meta property="og:image" content="/favicons/android-chrome-512x512.png">
+      <meta property="og:image" content="{{ "/favicons/android-chrome-512x512.png" | absURL }}">
       <meta property="og:image:height" content="512">
       <meta property="og:image:width" content="512">
       <!-- twitter card -->
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 09aebe4..fd040fd 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,6 +1,26 @@
 {{ define "metaTitle" }}
   <title>{{ .Title }} ∴ {{ .Site.Title }}</title>
 {{ end }}
+{{ define "metaSocial" }}
+  {{ $original := resources.Get .Params.cover }}
+  {{ $cover := $original.Resize "x1000" }}
+  <!-- opengraph -->
+  <meta property="og:type" content="music.album">
+  <meta property="og:title" content="{{ .Title }} by {{ .Params.artist }}">
+  <meta property="og:description" content="Listen to this album on Now Playing">
+  <meta property="og:url" content="{{ .Permalink }}">
+  <meta property="og:image" content="{{ $cover.Permalink }}">
+  <meta property="og:image:height" content="1000">
+  <meta property="og:image:width" content="1000">
+  <meta property="music:musician" content="{{ .Params.artist }}">
+  <meta property="music:song:url" content="{{ .Permalink }}">
+
+  <!-- twitter card -->
+  <meta name="twitter:card" content="summary" />
+  <meta name="twitter:title" content="{{ .Title }} by {{ .Params.artist }}" />
+  <meta name="twitter:description" content="Listen to this album on Now Playing" />
+  <meta name="twitter:image" content="{{ $cover.Permalink }}" />
+{{ end }}
 {{ define "main" }}
 <main>
   <div class="album">