Add text overlay to social cards

7 files changed, 91 insertions, 3 deletions

diff --git a/.gitignore b/.gitignore
index c69c9958..ac1513d3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,5 @@
 .idea
-
+.vscode/*
 src/node_modules
 node_modules
 .DS_Store
diff --git a/assets/opengraph/Mulish-Black.ttf b/assets/opengraph/Mulish-Black.ttf
new file mode 100644
index 00000000..db680a08
--- /dev/null
+++ b/assets/opengraph/Mulish-Black.ttf
diff --git a/assets/opengraph/gohugoio-card-base-1.png b/assets/opengraph/gohugoio-card-base-1.png
new file mode 100644
index 00000000..65555845
--- /dev/null
+++ b/assets/opengraph/gohugoio-card-base-1.png
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 0de21a25..47019072 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -47,9 +47,9 @@
   {{ end }}
   {{ partial "site-manifest.html" . }}
   {{- partial "head-additions.html" . -}}
-  {{- template "_internal/opengraph.html" . -}}
+  {{- partial "opengraph/opengraph.html" . -}}
   {{- template "_internal/schema.html" . -}}
-  {{- template "_internal/twitter_cards.html" . -}}
+  {{- partial "opengraph/twitter_cards.html" . -}}
 
   {{ if eq (getenv "HUGO_ENV") "production" | or (eq .Site.Params.env "production")  }}
   {{ partial "gtag" . }}
diff --git a/layouts/partials/opengraph/get-featured-image.html b/layouts/partials/opengraph/get-featured-image.html
new file mode 100644
index 00000000..f170a775
--- /dev/null
+++ b/layouts/partials/opengraph/get-featured-image.html
@@ -0,0 +1,24 @@
+{{ $images := $.Resources.ByType "image" }}
+{{ $featured := $images.GetMatch "*feature*" }}
+{{ if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end }}
+{{ if not $featured }}{{ $featured = resources.Get "/opengraph/gohugoio-card-base-1.png" }}{{ end }}
+{{ with $featured }}
+    {{ $size := 80 }}
+    {{ $title := $.LinkTitle }}
+    {{ if gt (len $title) 20 }}
+    {{ $size = 70 }}
+    {{ end }}
+
+    {{ $text := $title }}
+                {{ $textOptions := dict 
+                    "color" "#FFF"
+                    "size" $size
+                    "lineSpacing" 10
+                    "x" 65 "y" 80
+                    "font" (resources.Get "/opengraph/mulish-black.ttf")
+                }}
+
+    {{ $featured = $featured | images.Filter (images.Text $text $textOptions) }}
+{{ end }}
+
+{{ return $featured }}
\ No newline at end of file
diff --git a/layouts/partials/opengraph/opengraph.html b/layouts/partials/opengraph/opengraph.html
new file mode 100644
index 00000000..c8ff6488
--- /dev/null
+++ b/layouts/partials/opengraph/opengraph.html
@@ -0,0 +1,42 @@
+<meta property="og:title" content="{{ .Title }}" />
+<meta property="og:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ 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 := partial "opengraph/get-featured-image.html" . }}
+{{- 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 -}}
+
+{{- if .IsPage }}
+{{- $iso8601 := "2006-01-02T15:04:05-07:00" -}}
+<meta property="article:section" content="{{ .Section }}" />
+{{ with .PublishDate }}<meta property="article:published_time" {{ .Format $iso8601 | printf "content=%q" | safeHTMLAttr }} />{{ end }}
+{{ with .Lastmod }}<meta property="article:modified_time" {{ .Format $iso8601 | printf "content=%q" | safeHTMLAttr }} />{{ end }}
+{{- end -}}
+
+{{- with .Params.audio }}<meta property="og:audio" content="{{ . }}" />{{ end }}
+{{- with .Params.locale }}<meta property="og:locale" content="{{ . }}" />{{ end }}
+{{- with .Site.Params.title }}<meta property="og:site_name" content="{{ . }}" />{{ end }}
+{{- with .Params.videos }}{{- range . }}
+<meta property="og:video" content="{{ . | absURL }}" />
+{{ end }}{{ end }}
+
+{{- /* If it is part of a series, link to related articles */}}
+{{- $permalink := .Permalink }}
+{{- $siteSeries := .Site.Taxonomies.series }}
+{{ with .Params.series }}{{- range $name := . }}
+  {{- $series := index $siteSeries ($name | urlize) }}
+  {{- range $page := first 6 $series.Pages }}
+    {{- if ne $page.Permalink $permalink }}<meta property="og:see_also" content="{{ $page.Permalink }}" />{{ end }}
+  {{- end }}
+{{ end }}{{ end }}
+
+{{- /* Facebook Page Admin ID for Domain Insights */}}
+{{- with .Site.Social.facebook_admin }}<meta property="fb:admins" content="{{ . }}" />{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/opengraph/twitter_cards.html b/layouts/partials/opengraph/twitter_cards.html
new file mode 100644
index 00000000..9d25d031
--- /dev/null
+++ b/layouts/partials/opengraph/twitter_cards.html
@@ -0,0 +1,22 @@
+{{- with $.Params.images -}}
+<meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="{{ index . 0 | absURL }}"/>
+{{ else -}}
+{{- $featured := partial "opengraph/get-featured-image.html" . }}
+{{- 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="{{ .Title }}"/>
+<meta name="twitter:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end -}}"/>
+{{ with .Site.Social.twitter -}}
+<meta name="twitter:site" content="@{{ . }}"/>
+{{ end -}}
\ No newline at end of file