id elements to hide on snap

beeminder · Mar 20, 2024 · 4bd38a7 · 4bd38a7
1 parent 9068f2e
commit 4bd38a7
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 41 deletions.
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/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>
-