From 4bd38a74615a22cd5a964cbd86fd19aae20a41d6 Mon Sep 17 00:00:00 2001
From: Nathan Arthur <nathan@nathanarthur.com>
Date: Wed, 20 Mar 2024 15:21:44 -0400
Subject: [PATCH] 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;
 ---
 
 <div
+  id={id}
   class:list={["shadowbox", className]}
   style={{
     "--gap-multiplier": padding,
diff --git a/src/components/Sidebar.astro b/src/components/Sidebar.astro
index 78be7eb..9651c49 100644
--- 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/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<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>
-