fix: Update annotation config spacing and iterations (#173)

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();
   }

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,
+  },
+};

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>

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>