refactor: cleanup and unify the featured image metadata integration (#345)

layouts/partials/microformats/opengraph.html

@@ -1,28 +1,20 @@
 {{- if not (eq .Kind "home") }}
-  <meta property="og:title" content="{{ partial "utils/title" . }}" />
+  <meta
+    property="og:title"
+    {{ partial "utils/title" . | printf "content=%q" | safeHTMLAttr }}
+  />
 {{- end }}
 {{- with .Site.Title }}
-  <meta property="og:site_name" content="{{ . }}" />
+  <meta property="og:site_name" {{ . | printf "content=%q" | safeHTMLAttr }} />
+{{- end }}
+{{- with partial "utils/featured" . }}
+  <meta property="og:image" content="{{ . }}" />
 {{- end }}
 {{- with partial "utils/description" . }}
-  <meta property="og:description" content="{{ trim (. | plainify) "\n" | safeHTML }}" />
+  <meta property="og:description" content="{{ . | plainify | htmlUnescape | chomp }}" />
 {{- end }}
 <meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}" />
 <meta property="og:url" content="{{ .Permalink }}" />
-
-{{- with $.Params.images }}
-  {{- range first 6 . }}<meta property="og:image" content="{{ . | absURL }}" />{{ end -}}
-{{- else }}
-  {{- $featured := ($.Resources.ByType "image").GetMatch "{*feature*,*cover*,*thumbnail*}" -}}
-  {{- with $featured }}
-    <meta property="og:image" content="{{ $featured.Permalink }}" />
-  {{- else }}
-    {{- with $.Site.Params.images }}
-      <meta property="og:image" content="{{ index . 0 | absURL }}" />
-    {{- end }}
-  {{- end }}
-{{- end }}
-
 {{- with .Params.audio }}
   <meta property="og:audio" content="{{ . }}" />
 {{- end }}

layouts/partials/microformats/schema.html

@@ -1,19 +1,17 @@
-{{- if .IsHome -}}
+{{- if eq .Kind "home" }}
-  {{- $thumbnail := default (default "brand.svg" .Site.Params.logo) (index (default slice .Site.Params.images) 0) | absURL }}
-
   <script type="application/ld+json">
   {
       "@context": "http://schema.org",
       "@type": "WebSite",
-      "name": "{{ .Site.Title }}",
+      "name": {{ .Site.Title }},
-      "url": "{{ .Site.BaseURL }}",
+      "url": {{ .Site.BaseURL }},
       {{- with partial "utils/description" . }}
-      "description": "{{ trim (. | plainify) "\n" | safeHTML }}",
+      "description": "{{ . | plainify | htmlUnescape | chomp }}",
       {{- end }}
-      "thumbnailUrl": "{{ $thumbnail }}"
+      {{- with partial "utils/featured" . }}
-      {{- with .Site.Params.GeekdocContentLicense }},
+      "thumbnailUrl": {{ . }},
-      "license": "{{ .name }}"
       {{- end }}
+      "inLanguage": {{ .Lang }}
   }
   </script>
 {{- else if .IsPage }}
@@ -22,18 +20,28 @@
       "@context": "http://schema.org",
       "@type": "TechArticle",
       "articleSection": "{{ .Section | humanize | title }}",
-      "name": "{{ (partial "utils/title" .) | safeJS }}",
+      "name": {{ partial "utils/title" . }},
-      "headline": "{{ (partial "utils/title" .) | safeJS }}",
+      "url" : {{ .Permalink }},
-      "alternativeHeadline": "{{ .Params.lead }}",
+      "headline": {{ partial "utils/title" . }},
-      {{- with partial "utils/description" . }}
+      {{- with .Params.lead }}
-      "description": "{{ trim (. | plainify) "\n" | safeHTML }}",
+      "alternativeHeadline": {{ . }},
       {{- end }}
-      "inLanguage": {{ .Site.Language.Lang }},
+      {{- with partial "utils/description" . }}
+      "description": "{{ . | plainify | htmlUnescape | chomp }}",
+      {{- end }}
+      {{- with partial "utils/featured" . }}
+      "thumbnailUrl": {{ . }},
+      {{- end }}
+      "wordCount" : "{{ .WordCount }}",
+      "inLanguage": {{ .Lang }},
       "isFamilyFriendly": "true",
       "mainEntityOfPage": {
           "@type": "WebPage",
-          "@id": "{{ .Permalink }}"
+          "@id": {{ .Permalink }}
       },
+      {{- with $tags := .Params.tags }}
+      "keywords" : [ {{ range $i, $tag := $tags }}{{ if $i }}, {{ end }}"{{ $tag }}" {{ end }}],
+      {{- end }}
       "copyrightHolder" : "{{ .Site.Title }}",
       "copyrightYear" : "{{ .Date.Format "2006" }}",
       "dateCreated": "{{ .Date.Format "2006-01-02T15:04:05.00Z" | safeJS }}",
@@ -45,23 +53,11 @@
           "url": {{ .Site.BaseURL }},
           "logo": {
               "@type": "ImageObject",
-              "url": "{{ (default "brand.svg" .Site.Params.logo) | absURL }}",
+              "url": {{ (default "brand.svg" .Site.Params.logo) | absURL }},
               "width":"32",
               "height":"32"
           }
-      },
+      }
-      {{- with $images := $.Resources.ByType "image" }}
-      "image": [ {{ range $i, $image := $images }}{{ if $i }}, {{ end }}"{{ $image.Permalink | absURL }}" {{ end }}],
-      {{- else }}
-      {{- with $images := .Params.images }}
-      "image": [ {{ range $i, $image := $images }}{{ if $i }}, {{ end }}"{{ $image | absURL }}" {{ end }}],
-      {{- end }}
-      {{- end }}
-      "url" : "{{ .Permalink }}",
-      "wordCount" : "{{ .WordCount }}",
-      {{- with $tags := .Params.tags }}
-      "genre" : [ {{ range $i, $tag := $tags }}{{ if $i }}, {{ end }}"{{ $tag }}" {{ end }}]
-      {{- end }}
   }
   </script>
 {{- end }}

layouts/partials/microformats/twitter_cards.html

@@ -1,27 +1,14 @@
-{{- with $.Params.images -}}
+{{- with partial "utils/featured" . }}
   <meta name="twitter:card" content="summary_large_image" />
-  <meta name="twitter:image" content="{{ index . 0 | absURL }}" />
 {{- else }}
-  {{- $images := $.Resources.ByType "image" -}}
+  <meta name="twitter:card" content="summary" />
-  {{- $featured := $images.GetMatch "*feature*" -}}
+{{- end }}
-  {{- if not $featured }}
+<meta name="twitter:title" {{ partial "utils/title" . | printf "content=%q" | safeHTMLAttr }} />
-    {{- $featured = $images.GetMatch "{*cover*,*thumbnail*}" -}}
+{{- with partial "utils/featured" . }}
-  {{- end }}
+  <meta property="twitter:image" content="{{ . }}" />
-  {{- with $featured }}
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:image" content="{{ $featured.Permalink }}" />
-  {{- else }}
-    {{- with $.Site.Params.images }}
-      <meta name="twitter:card" content="summary_large_image" />
-      <meta name="twitter:image" content="{{ index . 0 | absURL }}" />
-    {{- else }}
-      <meta name="twitter:card" content="summary" />
-    {{- end }}
-  {{- end }}
 {{- end }}
-<meta name="twitter:title" content="{{ partial "utils/title" . }}" />
 {{- with partial "utils/description" . }}
-  <meta name="twitter:description" content="{{ trim (. | plainify) "\n" | safeHTML }}" />
+  <meta name="twitter:description" content="{{ . | plainify | htmlUnescape | chomp }}" />
 {{- end }}
 {{- with .Site.Social.twitter -}}
   <meta name="twitter:site" content="@{{ . }}" />

layouts/partials/utils/featured.html

@@ -0,0 +1,12 @@
+{{ $img := "" }}
+
+{{ with $source := ($.Resources.ByType "image").GetMatch "{*feature*,*cover*,*thumbnail*}" }}
+  {{ $featured := .Fill (printf "1200x630 %s" (default "Smart" .Params.anchor)) }}
+  {{ $img = $featured.Permalink }}
+{{ else }}
+  {{ with default $.Site.Params.images $.Params.images }}
+    {{ $img = index . 0 | absURL }}
+  {{ end }}
+{{ end }}
+
+{{ return $img }}