Implement blurred image placeholders

[wackerow]

Markdown images (dynamically loaded)

• Parsed during getStaticProps inside [...slug].tsx
• plaiceholder package used to generate base64 encoded blurred image placeholder

Hero image (from frontmatter, not part of markdown AST)

• If frontmatter.image is available, blurDataURL is generated and attached as frontmatter.blurDataUrl
• ImageInfo interface updated to include blurDataURL property, alongside image and alt properties
• Should always be internal image

Internal markdown content images

• Uses rehypeImg.ts plugin to walk markdown AST, looking for all img tags, adding to an array
• Cached blurDataURL data, stored as JSON files inside src/data/placeholders checked first to see if base64 data is already available
• If cached base64 data is not yet available, image node is passed to getPlaiceholder to generate base64 encoded placeholder, which is then saved to cache for future usage.
• Hashing utility function added to generate a SHA-1 hash of the image itself, to ensure that we re-generate the base64 placeholder data if the image changes while keeping the same file name. (SHA-1 chose for speed over security as these are not used for anything security-related, only as an image fingerprint)
• Resulting value is assigned to the blurDataUrl node property

External markdown content images (http*)

• External images are skipped by rehypeImg.ts plugin

Statically loaded images in React pages/components

• Statically imported images (ie. import SomeImage from "/path/to/image.ext") include blurDataURL in the image component (SomeImage.blurDataURL), which is passed as image src

All images

• Image component updated to look for an available props.src.blurDataURL (statically imported images) or props.blurDataURL (markdown images); if available, set placeholder="blur" else placeholder="empty"

Other updates

• Some front matter image references were broken—these have been updated
• Resulting placeholder data files have been committed. This is intentional, as these will be referenced by Netlify during the build process with the intention of limiting the need for Netlify to run the getPlaiceholder async function during the build process, which resulted in failed/timed-out builds during dev/testing.
• Note, it is not a requirement that cached data is available. When new images are added and referenced in a markdown page, a placeholder will be generated during build time. If a contributor does not build the site, this just means only those new images will need to be processed by Netlify until they are built locally and committed.

Preview URL

• https://deploy-preview-273--ethereum-org-fork.netlify.app/

Related Issue

https://www.notion.so/efdn/Blurred-images-placeholder-49351ac3288e4dad90c244b3e6365ba7?pvs=4

[netlify]

✅ Deploy Preview for ethereum-org-fork ready!

Name	Link
🔨 Latest commit	970af49
🔍 Latest deploy log	https://app.netlify.com/sites/ethereum-org-fork/deploys/65a04d2a38d3800008966676
😎 Deploy Preview	https://deploy-preview-273--ethereum-org-fork.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[pettinarip]

Great job @wackerow!

LGTM!

[wackerow]

Bringing in and will open a PR with remaining Next.js fork repo changes against ethereum/ethereum-org-website:dev