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

layouts/partials/head/meta.html

@@ -7,7 +7,7 @@
 {{- $authors := default (slice .Site.Params.GeekblogAuthor) .Params.authors -}}
 
 {{- with partial "utils/description" . }}
-  <meta name="description" content="{{ trim (. | plainify) "\n" | safeHTML }}" />
+  <meta name="description" content="{{ trim (. | plainify) "\n" | safeHTMLAttr }}" />
 {{- end }}
 {{- with $keywords }}
   <meta name="keywords" content="{{ delimit . "," }}" />

layouts/partials/microformats/opengraph.html

@@ -4,25 +4,14 @@
 {{- with .Site.Title }}
   <meta property="og:site_name" content="{{ . }}" />
 {{- 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="{{ trim (. | plainify) "\n" | safeHTMLAttr }}" />
 {{- 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,6 +1,4 @@
 {{- 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",
@@ -9,14 +7,17 @@
       {{ with index $.Site.Data.authors . }}"author": "{{ .name }}",{{ end }}
       {{- end }}
       "name": "{{ .Site.Title }}",
-      "url": "{{ .Site.BaseURL }}",
+      "url": {{ .Site.BaseURL | jsonify | safeJS }},
       {{- with partial "utils/description" . }}
-      "description": "{{ trim (. | plainify) "\n" | safeHTML }}",
+      "description": {{ trim (. | plainify) "\n" | jsonify | safeJS }},
       {{- end }}
-      "thumbnailUrl": "{{ $thumbnail }}"
+      {{- with partial "utils/featured" . }}
-      {{- with .Site.Params.GeekblogContentLicense }},
+      "thumbnailUrl": {{ . | jsonify | safeJS }},
-      "license": "{{ .name }}"
       {{- end }}
+      {{- with .Site.Params.GeekblogContentLicense }}
+      "license": "{{ .name }}",
+      {{- end }}
+      "inLanguage": {{ .Lang }}
   }
   </script>
 {{- else if .IsPage }}
@@ -30,19 +31,30 @@
       "@type": "BlogPosting",
       "articleSection": "{{ .Section | humanize | title }}",
       "name": "{{ (partial "utils/title" .) | safeJS }}",
+      "url" : {{ .Permalink | jsonify | safeJS }},
       "headline": "{{ (partial "utils/title" .) | safeJS }}",
       {{- with .Params.lead }}
       "alternativeHeadline": "{{ . }}",
       {{- end }}
       {{- with partial "utils/description" . }}
-      "description": "{{ trim (. | plainify) "\n" | safeHTML }}",
+      "description": {{ trim (. | plainify) "\n" | jsonify | safeJS }},
       {{- end }}
-      "inLanguage": {{ .Site.Language.Lang }},
+      {{- with partial "utils/featured" . }}
+      "thumbnailUrl": {{ . | jsonify | safeJS }},
+      {{- end }}
+      "wordCount" : "{{ .WordCount }}",
+      {{- with .Site.Params.GeekblogContentLicense }}
+      "license": "{{ .name }}",
+      {{- end }}
+      "inLanguage": {{ .Lang }},
       "isFamilyFriendly": "true",
       "mainEntityOfPage": {
           "@type": "WebPage",
-          "@id": "{{ .Permalink }}"
+          "@id": {{ .Permalink | jsonify | safeJS }}
       },
+      {{- with $tags := .Params.tags }}
+      "keywords" : [ {{ range $i, $tag := $tags }}{{ if $i }}, {{ end }}"{{ $tag }}" {{ end }}],
+      {{- end }}
       {{- with $authors }}
       "author" : [
           {{- range sort . }}
@@ -65,26 +77,14 @@
       "publisher":{
           "@type":"Organization",
           "name": {{ .Site.Title }},
-          "url": {{ .Site.BaseURL }},
+          "url": {{ .Site.BaseURL | jsonify | safeJS }},
           "logo": {
               "@type": "ImageObject",
-              "url": "{{ (default "brand.svg" .Site.Params.logo) | absURL }}",
+              "url": {{ (default "brand.svg" .Site.Params.logo) | absURL | jsonify | safeJS }},
               "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*" -}}
-  {{- if not $featured }}
-    {{- $featured = $images.GetMatch "{*cover*,*thumbnail*}" -}}
-  {{- end }}
-  {{- 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/featured" . }}
+  <meta property="twitter:image" content="{{ . }}" />
+{{- end }}
 {{- with partial "utils/description" . }}
-  <meta name="twitter:description" content="{{ trim (. | plainify) "\n" | safeHTML }}" />
+  <meta name="twitter:description" content="{{ trim (. | plainify) "\n" | safeHTMLAttr }}" />
 {{- 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 }}