docs: improve social image partial (#37717)

* Fix social image URL to be absolute

* Deduplicate social.html

* Get image dimensions with Hugo

diff --git a/site/layouts/partials/social.html b/site/layouts/partials/social.html
index 2226c386c4cf22a38c9d23d5fc30d8740131851d..f4f556e5a82e9764e0eeb406bc9fdf0daf536601 100644 (file)
--- a/site/layouts/partials/social.html
+++ b/site/layouts/partials/social.html
@@ -1,15 +1,27 @@
+{{- $pageTitle := .Title | markdownify -}}
+{{- $pageDescription := .Page.Params.description | default .Site.Params.description | markdownify -}}
+{{- $socialImagePath := printf "/docs/%s/assets" .Site.Params.docs_version -}}
+
+{{- if .Page.Params.thumbnail -}}
+  {{- $socialImagePath = path.Join $socialImagePath "img/" .Page.Params.thumbnail -}}
+{{- else -}}
+  {{- $socialImagePath = path.Join $socialImagePath "brand/bootstrap-social.png" -}}
+{{- end -}}
+
 <meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:site" content="@{{ .Site.Params.twitter }}">
 <meta name="twitter:creator" content="@{{ .Site.Params.twitter }}">
-<meta name="twitter:title" content="{{ .Title | markdownify }}">
-<meta name="twitter:description" content="{{ .Page.Params.description | default .Site.Params.description | markdownify }}">
-<meta name="twitter:image" content="/docs/{{ .Site.Params.docs_version }}/assets/{{ if .Page.Params.thumbnail }}img/{{ .Page.Params.thumbnail }}{{else}}brand/bootstrap-social.png{{end}}">
+<meta name="twitter:title" content="{{ $pageTitle }}">
+<meta name="twitter:description" content="{{ $pageDescription }}">
+<meta name="twitter:image" content="{{ $socialImagePath | absURL }}">
 
 <meta property="og:url" content="{{ .Permalink }}">
-<meta property="og:title" content="{{ .Title | markdownify }}">
-<meta property="og:description" content="{{ .Page.Params.description | default .Site.Params.description | markdownify }}">
+<meta property="og:title" content="{{ $pageTitle }}">
+<meta property="og:description" content="{{ $pageDescription }}">
 <meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}">
+<meta property="og:image" content="{{ $socialImagePath | absURL }}">
 <meta property="og:image:type" content="image/png">
-<meta property="og:image:width" content="1000">
-<meta property="og:image:height" content="500">
-<meta property="og:image" content="/docs/{{ .Site.Params.docs_version }}/assets/{{ if .Page.Params.thumbnail }}img/{{ .Page.Params.thumbnail }}{{else}}brand/bootstrap-social.png{{end}}">
+{{ with (imageConfig (path.Join "site/static" $socialImagePath)) -}}
+<meta property="og:image:width" content="{{ .Width }}">
+<meta property="og:image:height" content="{{ .Height }}">
+{{- end }}