Add image meta tags to De-risking Guide pages

[nateborr]

Changes proposed in this pull request:

Summary

• In the de-risking guide, replace a PNG image used in software solution pages with an equivalent SVG. This should discourage social sites from pulling the image from the page content and using it within link preview cards.
• Implement optional og:image and og:image:alt meta tags that are configurable per guide. Details are in the updated development doc.
• Add an og:image with empty alt text for the de-risking guide.

Resolves #705 .

Approach

For the guide-level configuration, I added a new _data/meta_images.yaml file whose contents are available to Eleventy as key/value data during the build process. A guide will default to the current production behavior unless a meta image is explicitly configured: When a page is built, if there is no meta_images value for the page's guide name, then no og:image or og:image:alt tag is rendered.

During the build process, the eleventy-img package modifies and anonymizes the name of the image file within the assets directory. The Image() javascript call in index.js returns the processed image's URL. In order to access that URL within the page template file code, I've exposed it as a new Eleventy shortcode.

Testing

Testing is manual and indirect, since image URLs are environment-specific and we don't have direct control over whether platforms use our pages' og:image metadata.

In the PR preview build

• Confirm that the images on the introduction and software solutions pages are rendered correctly.
• For any de-risking guide page, open the page source and confirm:
  • A meta og:image tag with content set to a relative path to an image file
  • A meta og:image:alt tag with content set to ""
• Paste the relative image path onto the base URL for this PR build (https://federalist-8bc0b42c-5fd0-4ae8-9366-cd9c265a4446.sites.pages.cloud.gov/) and confirm that it serves a jpeg image of the De-risking Guide logo on a blue background.
• For any page in a guide other than de-risking, confirm that no og:image or og:image:alt meta tag is present.

In a local build environment

• Run NODE_ENV=production npm run dev
• For any de-risking guide page, view the page source and confirm a meta og:image tag is present and has its content set to an absolute image URL, beginning with https://guides.18f.gov/

security considerations

No security considerations; these changes use the existing Eleventy framework and OpenGraph standards.

In particular, the mechanism for determining whether the build the site for a production environment is already used to generate sitemap.xml.

[edwintorres]

Tested locally and on Pages. LGTM.