Simplify social images and add ability to set per-page images (#36804)

* Simplify social images and add ability to set per-page images

- Removes the homepage summary layout in favor of the larger image card (makes it more consistent with other pages)
- Reuses new thumbnails for Webpack, Parcel, and Vite guides to add their new social images

* Update default social card

* Change description to subtitle, add longer description to match homepage

* Remove social_image_path, use inline conditions for social images

diff --git a/config.yml b/config.yml
index 744c9f095be857ee910418989b71bdcd94667690..bb71b8d0ca1d2563c0015860d06c9187f322c11b 100644 (file)
--- a/config.yml
+++ b/config.yml
@@ -48,10 +48,9 @@ module:
       target:           static/favicon.ico
 
 params:
-  description:          "The most popular HTML, CSS, and JS library in the world."
+  subtitle:             "The most popular HTML, CSS, and JS library in the world."
+  description:          "Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins."
   authors:              "Mark Otto, Jacob Thornton, and Bootstrap contributors"
-  social_image_path:    /docs/5.2/assets/brand/bootstrap-social.png
-  social_logo_path:     /docs/5.2/assets/brand/bootstrap-social-logo.png
 
   current_version:      "5.2.0"
   current_ruby_version: "5.2.0"

diff --git a/site/content/docs/5.2/getting-started/parcel.md b/site/content/docs/5.2/getting-started/parcel.md
index 674a39837bcd79f0f2327765183952c452ba6a87..d28f92384fad71d9efa30aed1552c7b3f985313f 100644 (file)
--- a/site/content/docs/5.2/getting-started/parcel.md
+++ b/site/content/docs/5.2/getting-started/parcel.md
@@ -4,6 +4,7 @@ title: "Bootstrap & Parcel"
 description: The official guide for how to include and bundle Bootstrap's CSS and JavaScript in your project using Parcel.
 group: getting-started
 toc: true
+thumbnail: guides/bootstrap-parcel@2x.png
 ---
 
 <img class="mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel.png" width="2000" height="1000" alt="">

diff --git a/site/content/docs/5.2/getting-started/vite.md b/site/content/docs/5.2/getting-started/vite.md
index ca71bbe31d5c4adf6e3179d47f0d3095a2412b15..ee08379a7c210ebbecd82c07115023cb621a5189 100644 (file)
--- a/site/content/docs/5.2/getting-started/vite.md
+++ b/site/content/docs/5.2/getting-started/vite.md
@@ -4,6 +4,7 @@ title: "Bootstrap & Vite"
 description: The official guide for how to include and bundle Bootstrap's CSS and JavaScript in your project using Vite.
 group: getting-started
 toc: true
+thumbnail: guides/bootstrap-vite@2x.png
 ---
 
 <img class="mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite.png" width="2000" height="1000" alt="">

diff --git a/site/content/docs/5.2/getting-started/webpack.md b/site/content/docs/5.2/getting-started/webpack.md
index e314ecf6a2a9e39546f7ac994d3d202bf0b2f254..ca104f98c1a5617f3fec84cacdeb75bd60f96303 100644 (file)
--- a/site/content/docs/5.2/getting-started/webpack.md
+++ b/site/content/docs/5.2/getting-started/webpack.md
@@ -4,6 +4,7 @@ title: "Bootstrap & Webpack"
 description: The official guide for how to include and bundle Bootstrap's CSS and JavaScript in your project using Webpack.
 group: getting-started
 toc: true
+thumbnail: guides/bootstrap-webpack@2x.png
 ---
 
 <img class="mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack.png" width="2000" height="1000" alt="">

diff --git a/site/layouts/partials/header.html b/site/layouts/partials/header.html
index a592cdccb848a40759365227422cc9aee72076fe..ceeb8b546d1a11a5fee4f8cd54129a1e5a746f54 100644 (file)
--- a/site/layouts/partials/header.html
+++ b/site/layouts/partials/header.html
@@ -7,7 +7,7 @@
 <meta name="docsearch:language" content="en">
 <meta name="docsearch:version" content="{{ .Site.Params.docs_version }}">
 
-<title>{{ if .IsHome }}{{ .Site.Title | markdownify }} · {{ .Site.Params.description | markdownify }}{{ else }}{{ .Title | markdownify }} · {{ .Site.Title | markdownify }} v{{ .Site.Params.docs_version }}{{ end }}</title>
+<title>{{ if .IsHome }}{{ .Site.Title | markdownify }} · {{ .Site.Params.subtitle | markdownify }}{{ else }}{{ .Title | markdownify }} · {{ .Site.Title | markdownify }} v{{ .Site.Params.docs_version }}{{ end }}</title>
 
 <link rel="canonical" href="{{ .Permalink }}">
 

diff --git a/site/layouts/partials/social.html b/site/layouts/partials/social.html
index a63f6caee84e20fb9925517fce948e59a4f30635..2226c386c4cf22a38c9d23d5fc30d8740131851d 100644 (file)
--- a/site/layouts/partials/social.html
+++ b/site/layouts/partials/social.html
@@ -1,17 +1,15 @@
-{{ "<!-- Twitter -->" | safeHTML }}
-<meta name="twitter:card" content="{{ if .IsHome }}summary_large_image{{ else }}summary{{ 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="{{ if .IsHome }}{{ .Site.Params.social_logo_path | absURL }}{{ else }}{{ .Site.Params.social_image_path | absURL }}{{ end }}">
+<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}}">
 
-{{ "<!-- Facebook -->" | safeHTML }}
 <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:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}">
-<meta property="og:image" content="{{ .Site.Params.social_image_path | 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}}">

diff --git a/site/static/docs/5.2/assets/brand/bootstrap-social.png b/site/static/docs/5.2/assets/brand/bootstrap-social.png
index c7adc6f85b8ccb08dd566881bf55b2de6e682283..f027ee8e6be9a09fea0779f9035f3f66f4875cbb 100644 (file)
Binary files a/site/static/docs/5.2/assets/brand/bootstrap-social.png and b/site/static/docs/5.2/assets/brand/bootstrap-social.png differ