Merge pull request #479 from beeminder/snap

Add snap param to increase puppeteer diffing reliability
beeminder · Mar 20, 2024 · 41292a0 · 41292a0
2 parents c42d8f4 + b900180
commit 41292a0
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 44 deletions.
diff --git a/scripts/puppeteer.ts b/scripts/puppeteer.ts
@@ -44,8 +44,12 @@ async function handleUrl(browser: Browser, url: string) {
   const pathname = new URL(url).pathname;
   console.time(pathname);
 
-  const path1 = await snap(browser, url, "base");
-  const path2 = await snap(browser, url.replace(base, compare), "compare");
+  const path1 = await snap(browser, `${url}?snap`, "base");
+  const path2 = await snap(
+    browser,
+    `${url.replace(base, compare)}?snap`,
+    "compare",
+  );
   const img1 = readScreenshot(path1);
   const img2 = readScreenshot(path2);
   const meta1 = await img1.metadata();

diff --git a/src/components/Shadowbox.astro b/src/components/Shadowbox.astro
@@ -2,12 +2,14 @@
 interface Props {
   padding?: number;
   class?: string | undefined;
+  id?: string | undefined;
 }
 
-const { padding = 1, class: className } = Astro.props;
+const { padding = 1, class: className, id } = Astro.props;
 ---
 
 <div
+  id={id}
   class:list={["shadowbox", className]}
   style={{
     "--gap-multiplier": padding,

diff --git a/src/components/Sidebar.astro b/src/components/Sidebar.astro
@@ -116,7 +116,11 @@ const sha: string | undefined = import.meta.env.RENDER_GIT_COMMIT;
   </Shadowbox>
   {
     sha && (
-      <a class="sha" href={`https://github.com/beeminder/blog/commit/${sha}`}>
+      <a
+        id="sha"
+        class="sha"
+        href={`https://github.com/beeminder/blog/commit/${sha}`}
+      >
         {sha.slice(0, 7)}
       </a>
     )

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -29,7 +29,7 @@ const {
 const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
 ---
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <link
@@ -83,6 +83,7 @@ const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
       async
       src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
 
+    <script src="../scripts/snap.ts"></script>
     <script src="../scripts/slideshow.ts"></script>
     <script src="../scripts/hotkeys.ts"></script>
 

diff --git a/src/pages/[slug].astro b/src/pages/[slug].astro
@@ -1,5 +1,5 @@
 ---
-import type {  InferGetStaticPropsType } from "astro";
+import type { InferGetStaticPropsType } from "astro";
 import Tags from "../components/Tags.astro";
 import getPosts from "../lib/getPosts";
 import Shadowbox from "../components/Shadowbox.astro";
@@ -12,10 +12,10 @@ import Paginated from "../layouts/Paginated.astro";
 export async function getStaticPaths() {
   const posts = await getPosts({
     includeUnpublished: true,
-    sort: true
+    sort: true,
   });
 
-  const published = (p: Post) => p.status === "publish"
+  const published = (p: Post) => p.status === "publish";
 
   return posts.map((post: Post, i: number) => ({
     params: {
@@ -31,22 +31,9 @@ export async function getStaticPaths() {
 
 type Props = InferGetStaticPropsType<typeof getStaticPaths>;
 
-const {
-  post,
-  newer,
-  older
-} = Astro.props as Props;
+const { post, newer, older } = Astro.props as Props;
 
-const {
-  content,
-  title,
-  tags,
-  disqus_id,
-  excerpt,
-  image,
-  status,
-  slug,
-} = post
+const { content, title, tags, disqus_id, excerpt, image, status, slug } = post;
 
 const isDraft = status === "draft";
 const className = isDraft ? "draft" : undefined;
@@ -66,32 +53,39 @@ const { extracted, ...imageProps } = image || {};
     url: `/${older.slug}`,
   }}
 >
-<div class="post">
-  <Shadowbox padding={2} class={className}>
-    <PostMeta
-      post={{
-        ...post,
-        title,
-      }}
-      includeExcerpt={false}
-      linkTitle={false}
-      Heading="h1"
-    />
-    {extracted ? undefined : <img class="aligncenter" {...imageProps} />}
-    <Typography set:html={content} />
-    <Tags tags={tags} />
-  </Shadowbox>
+  <div class="post">
+    <Shadowbox padding={2} class={className}>
+      <PostMeta
+        post={{
+          ...post,
+          title,
+        }}
+        includeExcerpt={false}
+        linkTitle={false}
+        Heading="h1"
+      />
+      {extracted ? undefined : <img class="aligncenter" {...imageProps} />}
+      <Typography set:html={content} />
+      <Tags tags={tags} />
+    </Shadowbox>
 
-  <Shadowbox padding={2}>
-    {isDraft ? <p>Comments are disabled on DRAFT pages.</p> : <Comments id={disqus_id} url={`https://blog.beeminder.com/${slug}/`} />}
-  </Shadowbox>
-</div>
+    <Shadowbox id="comments" padding={2}>
+      {
+        isDraft ? (
+          <p>Comments are disabled on DRAFT pages.</p>
+        ) : (
+          <Comments
+            id={disqus_id}
+            url={`https://blog.beeminder.com/${slug}/`}
+          />
+        )
+      }
+    </Shadowbox>
+  </div>
 </Paginated>
 
-
 <style>
   .post :global(.draft) {
     border: 1rem solid #ff700a;
   }
 </style>
-
diff --git a/src/scripts/snap.ts b/src/scripts/snap.ts
@@ -0,0 +1,8 @@
+// Purpose: Improve reliability of puppeteer diffing
+
+const urlParams = new URLSearchParams(window.location.search);
+
+if (urlParams.has("snap")) {
+  const body = document.querySelector("body");
+  body?.classList.add("snap");
+}
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -177,3 +177,14 @@ ol {
   margin-left: auto;
   margin-right: auto;
 }
+
+/* .snap purpose: improve puppeteer diffing reliability */
+
+body.snap #comments,
+body.snap #sha {
+  display: none;
+}
+
+body.snap img {
+  filter: brightness(0);
+}