From 761052560ff1b465577a1d840b45e56b2b249ff9 Mon Sep 17 00:00:00 2001
From: Eva Decker <eva@namesake.fyi>
Date: Fri, 13 Dec 2024 12:21:25 -0500
Subject: [PATCH] fix: Update annotation config spacing and iterations (#173)

---
 src/components/PageHeader.astro |  5 ++--
 src/helpers/helpers.ts          | 46 +++++++++++++++++++++++++++++++++
 src/pages/abuse.astro           |  1 +
 src/pages/terms.astro           |  1 +
 4 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/src/components/PageHeader.astro b/src/components/PageHeader.astro
index bc15fa1..0d6ee77 100644
--- a/src/components/PageHeader.astro
+++ b/src/components/PageHeader.astro
@@ -32,6 +32,7 @@ const { title, date, description, annotation = "circle" } = Astro.props;
 <script>
   import { annotate } from "rough-notation";
   import type { RoughAnnotationType } from "rough-notation/lib/model";
+  import { annotationConfig } from "~/helpers/helpers";
 
   const header: HTMLElement | null = document.querySelector(".page-head h1");
 
@@ -40,9 +41,7 @@ const { title, date, description, annotation = "circle" } = Astro.props;
 
     const highlight = annotate(header, {
       type: annotation,
-      iterations: annotation === "highlight" ? 1 : 2,
-      padding: 10,
-      multiline: true,
+      ...annotationConfig[annotation],
     });
     highlight.show();
   }
diff --git a/src/helpers/helpers.ts b/src/helpers/helpers.ts
index e734bec..24cc691 100644
--- a/src/helpers/helpers.ts
+++ b/src/helpers/helpers.ts
@@ -1,4 +1,8 @@
 import { marked } from "marked";
+import type {
+  RoughAnnotationConfig,
+  RoughAnnotationType,
+} from "rough-notation/lib/model";
 
 export const smartquotes = (str: string) => {
   return str
@@ -19,3 +23,45 @@ export const fetchPolicy = async (slug: string) => {
   const content = marked.parse(markdownWithoutH1);
   return content;
 };
+
+export const annotationConfig: Record<
+  RoughAnnotationType,
+  Omit<RoughAnnotationConfig, "type">
+> = {
+  highlight: {
+    multiline: true,
+    iterations: 1,
+    padding: 0,
+  },
+  underline: {
+    multiline: true,
+    iterations: 3,
+    padding: 0,
+  },
+  box: {
+    multiline: false,
+    iterations: 3,
+    padding: [0, 8, 0, 8],
+  },
+  bracket: {
+    multiline: false,
+    iterations: 1,
+    padding: [0, 4, 0, 4],
+    brackets: ["left", "right"],
+  },
+  circle: {
+    multiline: false,
+    iterations: 2,
+    padding: [0, 16, 0, 16],
+  },
+  "strike-through": {
+    multiline: true,
+    iterations: 3,
+    padding: 0,
+  },
+  "crossed-off": {
+    multiline: false,
+    iterations: 4,
+    padding: 0,
+  },
+};
diff --git a/src/pages/abuse.astro b/src/pages/abuse.astro
index 57c742b..a0c9220 100644
--- a/src/pages/abuse.astro
+++ b/src/pages/abuse.astro
@@ -9,6 +9,7 @@ const content = await fetchPolicy("abuse");
   title="Use Restrictions Policy"
   description="It is not okay to use Namesake for these restricted purposes."
   color="brown"
+  annotation="crossed-off"
 >
   <article set:html={content} />
 </ProseLayout>
diff --git a/src/pages/terms.astro b/src/pages/terms.astro
index bdfd513..a067c87 100644
--- a/src/pages/terms.astro
+++ b/src/pages/terms.astro
@@ -9,6 +9,7 @@ const content = await fetchPolicy("terms");
   title="Terms of Service"
   description="All the terms that you agree to when you sign up for Namesake."
   color="brown"
+  annotation="box"
 >
   <article set:html={content} />
 </ProseLayout>