WIP Fix twitter cards (#9397)

* Fix twitter cards by copying images/assets into static * Allow docs and guides to specify feature image in frontmatter, update defaults for the rest * Apply Prettier formatting * Fix image path
pantheon-systems · Jan 28, 2025 · 1a3c87d · 1a3c87d
1 parent 3f26802
commit 1a3c87d
Show file tree

Hide file tree

Showing 60 changed files with 240 additions and 157 deletions.
diff --git a/source/content/debug-slow-performance.md b/source/content/debug-slow-performance.md
@@ -13,6 +13,7 @@ integration: [--]
 reviewed: "2024-06-12"
 showtoc: true
 contributors: [jms-pantheon]
+image: CDN-speedTest-docs-guide.png
 ---
 
 This article covers the most common causes for performance problems, demonstrates how to diagnose bottlenecks, and provides actionable solutions for developers.

diff --git a/source/content/guides/build-tools/01-introduction.md b/source/content/guides/build-tools/01-introduction.md
@@ -16,6 +16,7 @@ cms: [--]
 audience: [development]
 product: [--]
 integration: [--]
+image: buildToolsGuide-thumb.png
 ---
 
 ## What Is Build Tools?

diff --git a/source/content/guides/build-tools/02-create-project.md b/source/content/guides/build-tools/02-create-project.md
@@ -14,6 +14,7 @@ cms: [--]
 audience: [development]
 product: [--]
 integration: [--]
+image: buildToolsGuide-thumb.png
 ---
 
 In this section, we will use the Terminus Build Tools Plugin to create a new project consisting of a Git repository, [Composer](https://getcomposer.org), a Continuous Integration (CI) service, and a Pantheon site with Automated Testing. This guide will get you started, but you will need to customize and maintain the CI/testing set up for your projects.

diff --git a/source/content/guides/build-tools/03-pr-workflow.md b/source/content/guides/build-tools/03-pr-workflow.md
@@ -14,6 +14,7 @@ cms: [--]
 audience: [development]
 product: [--]
 integration: [--]
+image: buildToolsGuide-thumb.png
 ---
 
 ## Pull Request/Merge Request Introduction

diff --git a/source/content/guides/build-tools/04-configure.md b/source/content/guides/build-tools/04-configure.md
@@ -15,6 +15,7 @@ cms: [--]
 audience: [development]
 product: [--]
 integration: [--]
+image: buildToolsGuide-thumb.png
 ---
 
 In this lesson, we'll use the Configuration Management system within the Drupal Admin interface to set block placements for our example site. Continuing from the previous step, we'll be working in the feature branch environment, not Dev.

diff --git a/source/content/guides/build-tools/05-extend.md b/source/content/guides/build-tools/05-extend.md
@@ -13,6 +13,7 @@ cms: [--]
 audience: [development]
 product: [--]
 integration: [--]
+image: buildToolsGuide-thumb.png
 ---
 Next, we'll add a module to our existing `slogan` branch using Composer. You should already have a Pull Request open for this branch in GitHub, [created in a previous lesson](/guides/build-tools/pr-workflow#create-a-pull-request).
 

diff --git a/source/content/guides/build-tools/06-tests.md b/source/content/guides/build-tools/06-tests.md
@@ -14,6 +14,7 @@ audience: [development]
 product: [--]
 integration: [--]
 reviewed: "2022-12-13"
+image: buildToolsGuide-thumb.png
 ---
 
 The Pantheon example projects include some basic tests to validate basic capabilities of the given framework. You can customize these tests and add more to fit your project needs. Drupal uses [Behat](http://behat.org/en/latest/) and the WordPress example uses [WordHat](https://github.com/paulgibbs/behat-wordpress-extension).

diff --git a/source/content/guides/build-tools/07-merge.md b/source/content/guides/build-tools/07-merge.md
@@ -13,6 +13,7 @@ cms: [--]
 audience: [development]
 product: [--]
 integration: [--]
+image: buildToolsGuide-thumb.png
 ---
 This lesson demonstrates the final process of the Pull Request workflow, merging. After completing an internal peer review process for a given Pull Request, work is considered ready for production and accepted into the master branch.
 

diff --git a/source/content/guides/build-tools/08-custom-theme.md b/source/content/guides/build-tools/08-custom-theme.md
@@ -13,6 +13,7 @@ cms: [--]
 audience: [development]
 product: [--]
 integration: [--]
+image: buildToolsGuide-thumb.png
 ---
 This lesson demonstrates how to create a custom theme from the default [Bartik](https://www.drupal.org/project/bartik) theme using the [Terminus Drupal Console plugin](https://github.com/pantheon-systems/terminus-drupal-console-plugin). 
 

diff --git a/source/content/guides/build-tools/09-update.md b/source/content/guides/build-tools/09-update.md
@@ -12,6 +12,7 @@ cms: [--]
 audience: [development]
 product: [--]
 integration: [--]
+image: buildToolsGuide-thumb.png
 ---
 
 In this lesson, we'll take a closer look at how to update dependencies in a Composer workflow.

diff --git a/source/content/guides/frontend-performance/01-introduction.md b/source/content/guides/frontend-performance/01-introduction.md
@@ -14,6 +14,7 @@ cms: [drupal, wordpress]
 audience: [development]
 product: [--]
 integration: [--]
+image: CDN-speedTest-docs-guide.png
 ---
 
 In this guide we’ll show you how to speed up frontend performance to ensure that visitors to your site stay engaged and have the best experience.

diff --git a/source/content/guides/frontend-performance/02-metrics.md b/source/content/guides/frontend-performance/02-metrics.md
@@ -15,6 +15,7 @@ cms: [drupal, wordpress]
 audience: [development]
 product: [--]
 integration: [--]
+image: CDN-speedTest-docs-guide.png
 ---
 
 There are many different ways to measure page speed and performance. This guide will help you tune your site for the metrics in Google's [Core Web Vitals](https://web.dev/vitals/#core-web-vitals), which focus on three aspects of the user experience—loading, interactivity, and visual stability.

diff --git a/source/content/guides/frontend-performance/03-diagnostics.md b/source/content/guides/frontend-performance/03-diagnostics.md
@@ -15,6 +15,7 @@ cms: [drupal, wordpress]
 audience: [development]
 product: [--]
 integration: [--]
+image: CDN-speedTest-docs-guide.png
 ---
 
 This page includes information on diagnostics and tools for evaluating performance issues.

diff --git a/source/content/guides/frontend-performance/04-caching.md b/source/content/guides/frontend-performance/04-caching.md
@@ -15,6 +15,7 @@ cms: [drupal, wordpress]
 audience: [development]
 product: [--]
 integration: [--]
+image: CDN-speedTest-docs-guide.png
 ---
 
 This page includes information on how to improve optimization with caching.

diff --git a/source/content/guides/frontend-performance/05-media.md b/source/content/guides/frontend-performance/05-media.md
@@ -15,6 +15,7 @@ cms: [drupal, wordpress]
 audience: [development]
 product: [--]
 integration: [--]
+image: CDN-speedTest-docs-guide.png
 ---
 
 This pages includes information on optimizing media, such as images and iframes.

diff --git a/source/content/guides/frontend-performance/06-code-css.md b/source/content/guides/frontend-performance/06-code-css.md
@@ -15,6 +15,7 @@ cms: [drupal, wordpress]
 audience: [development]
 product: [--]
 integration: [--]
+image: CDN-speedTest-docs-guide.png
 ---
 
 This page provides information on optimizing code and CSS.

diff --git a/source/content/guides/frontend-performance/07-queries.md b/source/content/guides/frontend-performance/07-queries.md
@@ -15,6 +15,7 @@ cms: [drupal, wordpress]
 audience: [development]
 product: [--]
 integration: [--]
+image: CDN-speedTest-docs-guide.png
 ---
 
 This page provides information on optimizing queries, query caching (when you should, and shouldn't use it), and database optimization techniques.

diff --git a/source/content/guides/frontend-performance/08-static.md b/source/content/guides/frontend-performance/08-static.md
@@ -15,6 +15,7 @@ cms: [drupal, wordpress]
 audience: [development]
 product: [--]
 integration: [--]
+image: CDN-speedTest-docs-guide.png
 ---
 
 This pages provides information on static sites and static page generation, including AMP.

diff --git a/source/content/guides/frontend-performance/09-redirects.md b/source/content/guides/frontend-performance/09-redirects.md
@@ -15,6 +15,7 @@ cms: [drupal, wordpress]
 audience: [development]
 product: [--]
 integration: [--]
+image: CDN-speedTest-docs-guide.png
 ---
 
 ## Avoid Redirects

diff --git a/source/content/guides/frontend-performance/10-additional-resources.md b/source/content/guides/frontend-performance/10-additional-resources.md
@@ -14,6 +14,7 @@ cms: [drupal, wordpress]
 audience: [development]
 product: [--]
 integration: [modules, plugins]
+image: CDN-speedTest-docs-guide.png
 ---
 
 Learn more about improving Frontend Performance by reviewing resources available on [Drupal](https://www.drupal.org/docs/mobile-drupal-sites/front-end-performance) and [WordPress](https://wordpress.org/support/article/optimization/).
diff --git a/source/content/guides/getstarted/01-introduction.md b/source/content/guides/getstarted/01-introduction.md
@@ -15,6 +15,7 @@ reviewed: "2023-03-21"
 showtoc: false
 permalink: docs/guides/getstarted
 editpath: getstarted/01-introduction.md
+image: getting-started-Largethumb.png
 ---
 
 Welcome to Pantheon! This guide will walk you through the steps required to get your business and site(s) up and running on Pantheon.

diff --git a/source/content/guides/getstarted/03-signup.md b/source/content/guides/getstarted/03-signup.md
@@ -15,6 +15,7 @@ reviewed: "2023-03-21"
 showtoc: false
 permalink: docs/guides/getstarted/signup
 editpath: getstarted/03-signup.md
+image: getting-started-Largethumb.png
 ---
 
 First, let's get you signed up!

diff --git a/source/content/guides/getstarted/05-team.md b/source/content/guides/getstarted/05-team.md
@@ -15,6 +15,7 @@ reviewed: "2023-03-21"
 showtoc: false
 permalink: docs/guides/getstarted/team
 editpath: getstarted/05-team.md
+image: getting-started-Largethumb.png
 ---
 
 <Wistia src="jdhn2naeu2" />

diff --git a/source/content/guides/getstarted/06-addsite.md b/source/content/guides/getstarted/06-addsite.md
@@ -15,6 +15,7 @@ reviewed: "2024-12-02"
 showtoc: true
 permalink: docs/guides/getstarted/addsite
 editpath: getstarted/addsite.md
+image: getting-started-Largethumb.png
 ---
 
 There are dozens of ways to add a site on Pantheon. This section covers the most common scenarios for new users: creating a new CMS site (a site running WordPress or Drupal), or migrating an existing WordPress or Drupal site.  For additional scenarios, see the [Adding a Site to Pantheon](/guides/getstarted/addsite/) section at the end of this document.

diff --git a/source/content/guides/getstarted/07-purchase.md b/source/content/guides/getstarted/07-purchase.md
@@ -15,6 +15,7 @@ reviewed: "2023-03-21"
 showtoc: false
 permalink: docs/guides/getstarted/purchase
 editpath: getstarted/07-purchase.md
+image: getting-started-Largethumb.png
 ---
 
 The free account you created allows you to create sandbox (non-production) sites.  In order to take your site live, you'll need to select and purchase a plan.

diff --git a/source/content/guides/getstarted/08-launch.md b/source/content/guides/getstarted/08-launch.md
@@ -15,6 +15,7 @@ reviewed: "2023-03-21"
 showtoc: true
 permalink: docs/guides/getstarted/launch
 editpath: getstarted/08-launch.md
+image: getting-started-Largethumb.png
 ---
 
 And now it's time to finally make your site available to the public! This section provides the minimum requirements to launch your site. Refer to our [Launch Guide](/guides/launch/) for more detailed information.

diff --git a/source/content/guides/getstarted/09-nextsteps.md b/source/content/guides/getstarted/09-nextsteps.md
@@ -15,6 +15,7 @@ reviewed: "2023-03-21"
 showtoc: false
 permalink: docs/guides/getstarted/nextsteps
 editpath: getstarted/09-nextsteps.md
+image: getting-started-Largethumb.png
 ---
 
 This guide showed you how to complete your basic Pantheon set up, and add a site. But there is so much more you can do with the Pantheon Platform!

diff --git a/source/content/guides/launch/01-introduction.md b/source/content/guides/launch/01-introduction.md
@@ -13,6 +13,7 @@ cms: [wordpress, drupal]
 audience: [agency, development]
 product: [--]
 integration: [--]
+image: launchGuide-twitterLarge.png
 ---
 
 Pantheon is a WebOps platform for open-source Drupal and WordPress sites that makes it easy to design, build, test, and measure your sites. WebOps combines the lessons of Agile and DevOps communities to prioritize iterative work that is visible to all team members. You can quickly deploy different versions of the same site on your Test environment, Live environment, and backup servers.

diff --git a/source/content/guides/launch/02-create-site-launch.md b/source/content/guides/launch/02-create-site-launch.md
@@ -13,6 +13,7 @@ cms: [wordpress, drupal]
 audience: [agency, development]
 product: [--]
 integration: [--]
+image: launchGuide-twitterLarge.png
 ---
 
 This section provides information on how to create your Live environment. 

diff --git a/source/content/guides/launch/03-plans.md b/source/content/guides/launch/03-plans.md
@@ -13,6 +13,7 @@ audience: [agency, business]
 product: [--]
 integration: [--]
 reviewed: "2024-08-07"
+image: launchGuide-twitterLarge.png
 ---
 
 This section provides information on how to upgrade from a free account to a paid plan by adding billing information or inviting a business owner to pay.

diff --git a/source/content/guides/launch/04-domains.md b/source/content/guides/launch/04-domains.md
@@ -12,6 +12,7 @@ cms: [wordpress, drupal]
 audience: [agency, development]
 product: [--]
 integration: [--]
+image: launchGuide-twitterLarge.png
 ---
 
 This section provides information on how to connect a bare domain and `www` domain to Pantheon's Live environment.

diff --git a/source/content/guides/launch/05-advanced-curls.md b/source/content/guides/launch/05-advanced-curls.md
@@ -13,6 +13,7 @@ cms: [wordpress, drupal]
 audience: [development]
 product: [--]
 integration: [--]
+image: launchGuide-twitterLarge.png
 ---
 
 This section provides information on how to use cURL commands during the migration process, as well as commands to compare your old site to your newly migrated site on Pantheon. 

diff --git a/source/content/guides/launch/06-configure-dns.md b/source/content/guides/launch/06-configure-dns.md
@@ -12,6 +12,7 @@ cms: [wordpress, drupal]
 audience: [agency, development]
 product: [--]
 integration: [--]
+image: launchGuide-twitterLarge.png
 ---
 
 This section provides information on how to configure DNS and provision [free, automated HTTPS](/guides/global-cdn/https) on Pantheon.

diff --git a/source/content/guides/launch/07-redirects.md b/source/content/guides/launch/07-redirects.md
@@ -12,6 +12,7 @@ cms: [wordpress, drupal]
 audience: [agency, development]
 product: [dashboard, terminus]
 integration: [--]
+image: launchGuide-twitterLarge.png
 ---
 
 This section provides information on how to redirect all traffic to a primary domain, which is a best practice for SEO. This means if you choose `www.example.com` as your primary domain, then if a visitor navigates to a bare domain, for example, `example.com` (or any other domain you have connected to your site), they will end up on `https://www.example.com`.

diff --git a/source/content/guides/launch/08-launch-check.md b/source/content/guides/launch/08-launch-check.md
@@ -12,6 +12,7 @@ cms: [wordpress, drupal]
 audience: [agency, development]
 product: [--]
 integration: [--]
+image: launchGuide-twitterLarge.png
 ---
 
 This section provides information on how to enable backups, test your email plugin or module, review status reports, and test your cache.

diff --git a/source/content/guides/launch/09-next-steps.md b/source/content/guides/launch/09-next-steps.md
@@ -12,6 +12,7 @@ cms: [wordpress, drupal]
 audience: [agency, development]
 product: [newrelic]
 integration: [--]
+image: launchGuide-twitterLarge.png
 ---
 
 Congratulations on launching a site on Pantheon. Review next steps below for information on WordPress and Drupal launch checks, content staging, New Relic performance monitoring, load and performance testing, and secure development on the Pantheon platform.

diff --git a/source/content/guides/wordpress-git/01-introduction.md b/source/content/guides/wordpress-git/01-introduction.md
@@ -15,6 +15,7 @@ contributors: [scottmassey, rachelwhitton]
 permalink: docs/guides/wordpress-git/
 editpath: wordpress-Git/01-introduction.md
 reviewed: "2021-02-26"
+image: git-sftp-wp-docs-guide.png
 ---
 
 This guide demonstrates how SFTP users can build WordPress sites on Pantheon's Git-based platform. Don't use Git? No problem -- we'll show you how easy it is to use by demonstrating workflows for various development tasks, such as adding a new theme or plugin.

diff --git a/source/content/guides/wordpress-git/02-plugins.md b/source/content/guides/wordpress-git/02-plugins.md
@@ -14,6 +14,7 @@ type: guide
 permalink: docs/guides/wordpress-git/plugins/
 editpath: wordpress-git/02-plugins.md
 reviewed: "2020-02-26"
+image: git-sftp-wp-docs-guide.png
 ---
 
 This lesson demonstrates how to develop using the WordPress Dashboard in SFTP mode. We'll install a few plugins and submit each one to version control as individual commits.

diff --git a/source/content/guides/wordpress-git/03-themes.md b/source/content/guides/wordpress-git/03-themes.md
@@ -14,6 +14,7 @@ type: guide
 permalink: docs/guides/wordpress-git/themes/
 editpath: wordpress-git/03-themes.md
 reviewed: "2020-02-26"
+image: git-sftp-wp-docs-guide.png
 ---
 
 This lesson demonstrates how to utilize Git while developing over SFTP with a local file client and text editor. Often, premium plugins or themes need to be downloaded from the plugin provider and uploaded to your site. In this example, we will replicate that by uploading a new theme, creating a child theme, and then finally make some example customizations to the stylesheet -- all while submitting our work to version control along the way in sensibly grouped commits. ARE YOU UPDATING

diff --git a/source/content/guides/wordpress-git/04-media.md b/source/content/guides/wordpress-git/04-media.md
@@ -14,6 +14,7 @@ type: guide
 permalink: docs/guides/wordpress-git/media/
 editpath: wordpress-git/04-media.md
 reviewed: "2020-02-26"
+image: git-sftp-wp-docs-guide.png
 ---
 
 In this lesson, we'll demonstrate how media files are handled on Pantheon. Media refers to anything in the `wp-content/uploads/` directory, which is intentionally excluded from version control. Git isn't needed to manage content like this, so we won't use version control in this lesson.

diff --git a/source/content/guides/wordpress-git/05-remove-editor.md b/source/content/guides/wordpress-git/05-remove-editor.md
@@ -14,6 +14,7 @@ type: guide
 permalink: docs/guides/wordpress-git/remove-editor/
 editpath: wordpress-git/05-remove-editor.md
 reviewed: "2020-02-26"
+image: git-sftp-wp-docs-guide.png
 ---
 
 ## Remove Default WordPress Editor

diff --git a/source/content/guides/wordpress-git/06-next-steps.md b/source/content/guides/wordpress-git/06-next-steps.md
@@ -14,6 +14,7 @@ type: guide
 permalink: docs/guides/wordpress-git/next-steps/
 editpath: wordpress-git/06-next-steps.md
 reviewed: "2020-02-26"
+image: git-sftp-wp-docs-guide.png
 ---
 
 ## Deploy Code from Dev

diff --git a/src/templates/certificationpage.js b/src/templates/certificationpage.js
@@ -38,7 +38,7 @@ class CertificationTemplate extends React.Component {
           title={node.frontmatter.subtitle + ' | ' + node.frontmatter.title}
           description={node.frontmatter.description || node.excerpt}
           authors={node.frontmatter.contributors}
-          image={'/images/assets/terminus-thumbLarge.png'}
+          image={'/images/assets/default-thumb-cert.png'}
           reviewed={ifCommandsISO}
           type={node.frontmatter.type}
         />

diff --git a/src/templates/doc.js b/src/templates/doc.js
@@ -25,6 +25,10 @@ class DocTemplate extends React.Component {
       <div className="content-wrapper">{children}</div>
     );
     const ContentLayoutType = ContainerDiv;
+    let image = '/images/assets/' + node.frontmatter.image;
+    if (image === '/images/assets/null') {
+      image = '/images/assets/default-thumb-doc.png';
+    }
 
     return (
       <GuideLayout footerBorder>
@@ -33,7 +37,7 @@ class DocTemplate extends React.Component {
           title={node.frontmatter.title}
           description={node.frontmatter.description || node.excerpt}
           authors={node.frontmatter.contributors}
-          image={'/images/assets/default-thumb-doc.png'}
+          image={image}
           categories={node.frontmatter.categories}
           keywords={node.frontmatter.tags}
           reviewed={isoDate.frontmatter.reviewed}
@@ -100,6 +104,7 @@ export const pageQuery = graphql`
       }
       frontmatter {
         title
+        image
         description
         categories
         cms