From 14625c8a5624d88bf68f1f53901c81aa5005faf1 Mon Sep 17 00:00:00 2001 From: Nathan Arthur Date: Wed, 20 Mar 2024 15:20:52 -0400 Subject: [PATCH 1/6] add snap class on snap param --- src/scripts/snap.ts | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 src/scripts/snap.ts diff --git a/src/scripts/snap.ts b/src/scripts/snap.ts new file mode 100644 index 0000000..2d1e5c3 --- /dev/null +++ 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"); +} From 9068f2e0719885e7cb6636c6f05847754b7a6521 Mon Sep 17 00:00:00 2001 From: Nathan Arthur Date: Wed, 20 Mar 2024 15:21:25 -0400 Subject: [PATCH 2/6] register snap script --- src/layouts/Layout.astro | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 37e44f5..0937467 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -29,7 +29,7 @@ const { const canonicalUrl = new URL(Astro.url.pathname, Astro.site); --- - + + From 4bd38a74615a22cd5a964cbd86fd19aae20a41d6 Mon Sep 17 00:00:00 2001 From: Nathan Arthur Date: Wed, 20 Mar 2024 15:21:44 -0400 Subject: [PATCH 3/6] id elements to hide on snap --- src/components/Shadowbox.astro | 4 +- src/components/Sidebar.astro | 6 ++- src/pages/[slug].astro | 72 ++++++++++++++++------------------ 3 files changed, 41 insertions(+), 41 deletions(-) diff --git a/src/components/Shadowbox.astro b/src/components/Shadowbox.astro index 3831fbd..88090d9 100644 --- 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; ---
{ sha && ( - + {sha.slice(0, 7)} ) diff --git a/src/pages/[slug].astro b/src/pages/[slug].astro index f0ece14..715200f 100644 --- 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; -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}`, }} > -
- - - {extracted ? undefined : } - - - +
+ + + {extracted ? undefined : } + + + - - {isDraft ?

Comments are disabled on DRAFT pages.

: } - -
+ + { + isDraft ? ( +

Comments are disabled on DRAFT pages.

+ ) : ( + + ) + } + +
- - From 7165f9c26e9ef91aad6fcd35532a98feea00e318 Mon Sep 17 00:00:00 2001 From: Nathan Arthur Date: Wed, 20 Mar 2024 15:21:53 -0400 Subject: [PATCH 4/6] hide elements on snap --- src/styles/global.css | 39 ++++++++++++++++++++++----------------- 1 file changed, 22 insertions(+), 17 deletions(-) diff --git a/src/styles/global.css b/src/styles/global.css index 0ef04e6..862df66 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -13,10 +13,8 @@ font-display: block; font-weight: 700; src: - url(@fontsource/source-sans-pro/files/source-sans-pro-latin-700-normal.woff2) - format("woff2"), - url(@fontsource/source-sans-pro/files/source-sans-pro-latin-700-normal.woff) - format("woff"); + url(@fontsource/source-sans-pro/files/source-sans-pro-latin-700-normal.woff2) format("woff2"), + url(@fontsource/source-sans-pro/files/source-sans-pro-latin-700-normal.woff) format("woff"); } @font-face { @@ -25,10 +23,8 @@ font-display: block; font-weight: 900; src: - url(@fontsource/source-sans-pro/files/source-sans-pro-latin-900-normal.woff2) - format("woff2"), - url(@fontsource/source-sans-pro/files/source-sans-pro-latin-900-normal.woff) - format("woff"); + url(@fontsource/source-sans-pro/files/source-sans-pro-latin-900-normal.woff2) format("woff2"), + url(@fontsource/source-sans-pro/files/source-sans-pro-latin-900-normal.woff) format("woff"); } @font-face { @@ -36,8 +32,7 @@ font-style: normal; font-display: block; font-weight: 400 700; - src: url(@fontsource-variable/lora/files/lora-latin-wght-normal.woff2) - format("woff2-variations"); + src: url(@fontsource-variable/lora/files/lora-latin-wght-normal.woff2) format("woff2-variations"); } @font-face { @@ -45,8 +40,7 @@ font-style: italic; font-display: block; font-weight: 50 100 200 300 500; - src: url(@fontsource-variable/lora/files/lora-latin-wght-italic.woff2) - format("woff2-variations"); + src: url(@fontsource-variable/lora/files/lora-latin-wght-italic.woff2) format("woff2-variations"); } :root { @@ -83,11 +77,11 @@ h2, h3, h4, h5, -h1 > *, -h2 > *, -h3 > *, -h4 > *, -h5 > * { +h1>*, +h2>*, +h3>*, +h4>*, +h5>* { line-height: var(--line-height-headings); font-family: "Source Sans Pro", sans-serif; font-weight: 700; @@ -177,3 +171,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); +} \ No newline at end of file From ae970705f13f9df0a5e6ab131ee600a7a5bfb018 Mon Sep 17 00:00:00 2001 From: Nathan Arthur Date: Wed, 20 Mar 2024 15:23:25 -0400 Subject: [PATCH 5/6] use snap in puppeteer script --- scripts/puppeteer.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/scripts/puppeteer.ts b/scripts/puppeteer.ts index a6c0f58..43389f3 100644 --- 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(); From b90018074ac6302e4fcebac8bfec9ed416b8c1f7 Mon Sep 17 00:00:00 2001 From: Nathan Arthur Date: Wed, 20 Mar 2024 15:25:52 -0400 Subject: [PATCH 6/6] format fixes --- src/styles/global.css | 30 ++++++++++++++++++------------ 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/src/styles/global.css b/src/styles/global.css index 862df66..2e1a2a2 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -13,8 +13,10 @@ font-display: block; font-weight: 700; src: - url(@fontsource/source-sans-pro/files/source-sans-pro-latin-700-normal.woff2) format("woff2"), - url(@fontsource/source-sans-pro/files/source-sans-pro-latin-700-normal.woff) format("woff"); + url(@fontsource/source-sans-pro/files/source-sans-pro-latin-700-normal.woff2) + format("woff2"), + url(@fontsource/source-sans-pro/files/source-sans-pro-latin-700-normal.woff) + format("woff"); } @font-face { @@ -23,8 +25,10 @@ font-display: block; font-weight: 900; src: - url(@fontsource/source-sans-pro/files/source-sans-pro-latin-900-normal.woff2) format("woff2"), - url(@fontsource/source-sans-pro/files/source-sans-pro-latin-900-normal.woff) format("woff"); + url(@fontsource/source-sans-pro/files/source-sans-pro-latin-900-normal.woff2) + format("woff2"), + url(@fontsource/source-sans-pro/files/source-sans-pro-latin-900-normal.woff) + format("woff"); } @font-face { @@ -32,7 +36,8 @@ font-style: normal; font-display: block; font-weight: 400 700; - src: url(@fontsource-variable/lora/files/lora-latin-wght-normal.woff2) format("woff2-variations"); + src: url(@fontsource-variable/lora/files/lora-latin-wght-normal.woff2) + format("woff2-variations"); } @font-face { @@ -40,7 +45,8 @@ font-style: italic; font-display: block; font-weight: 50 100 200 300 500; - src: url(@fontsource-variable/lora/files/lora-latin-wght-italic.woff2) format("woff2-variations"); + src: url(@fontsource-variable/lora/files/lora-latin-wght-italic.woff2) + format("woff2-variations"); } :root { @@ -77,11 +83,11 @@ h2, h3, h4, h5, -h1>*, -h2>*, -h3>*, -h4>*, -h5>* { +h1 > *, +h2 > *, +h3 > *, +h4 > *, +h5 > * { line-height: var(--line-height-headings); font-family: "Source Sans Pro", sans-serif; font-weight: 700; @@ -181,4 +187,4 @@ body.snap #sha { body.snap img { filter: brightness(0); -} \ No newline at end of file +}