Mask embeds during VRT (#37)

3rd party embeds' async, flaky loading distracts from 1st party diffs.

lostpixel.config.ts

@@ -2,6 +2,13 @@ import { CustomProjectConfig } from 'lost-pixel'
 import { readFileSync } from 'fs'
 import { join } from 'path'
 
+/**
+ * Mask 3rd party embeds.
+ *
+ * They're a distraction from 1st party diffs.
+ */
+const mask = [{ selector: '.embed' }, { selector: '.twitter-tweet' }]
+
 function pagePaths(): string[] {
   const siteUrl = 'https://johnkurkowski.com'
   const sitemapXml = readFileSync(
@@ -25,7 +32,7 @@ export const config: CustomProjectConfig = {
   breakpoints: [414, 1280],
   lostPixelProjectId: 'clud602ae10romo0e861bvpv2',
   pageShots: {
-    pages: pagePaths().map((path) => ({ path, name: slugify(path) })),
+    pages: pagePaths().map((path) => ({ path, mask, name: slugify(path) })),
     baseUrl: 'http://172.17.0.1:9000',
   },
 }

src/content/posts/2014-02-25-ongoing-learning-in-breadth-&-depth.md

@@ -18,7 +18,7 @@ First, a frustrating, inspiring anecdote.
 I gave a talk at the [Ember-SC meetup] comparing 6 different JavaScript build tools,
 and glossing over several more. The final slide rated each tool on 6 factors.
 
-<div className="mt-4">
+<div className="embed mt-4">
   <script async className="speakerdeck-embed" data-slide="41" data-id="724a7e007bd6013119ba66337b7b74ec" data-ratio="1.77469670710572" src="//speakerdeck.com/assets/embed.js"></script>
 </div>