Make query param switch a generic util

src/pages/events/[id].astro

@@ -187,16 +187,8 @@ let location = event.location ?? null
   </div>
 </PageLayout>
 
-<style>
-  [hidden] {
-    display: none;
-  }
-</style>
-
 <script>
-  const display = new URLSearchParams(location.search).has('email')
-    ? 'email'
-    : 'page'
+  import { initializeSwitch } from '@/scripts/queryParamSwitch'
 
   document
     .getElementById('copy-html-btn')
@@ -206,10 +198,8 @@ let location = event.location ?? null
       await navigator.clipboard.writeText(holder.innerHTML)
     })
 
-  const pageContainer = document.getElementById('event-page-container')
-  const emailContainer = document.getElementById('email-container')
-  if (display == 'email') {
-    pageContainer?.setAttribute('hidden', '')
-    emailContainer?.removeAttribute('hidden')
-  }
+  initializeSwitch([
+    ['email', '#email-container'],
+    ['', '#event-page-container'],
+  ])
 </script>

src/scripts/queryParamSwitch.ts

@@ -0,0 +1,32 @@
+/**
+ * Show certain elements only when certain query parameters are available. This
+ * function takes an array of queryKey to element selector mappings and shows
+ * the element corresponding to the first queryKey that is present in the URL.
+ *
+ *  They are mutually exclusive, so only one element will be shown at a time.
+ *
+ * A key of empty string will represent the default case, which will be shown
+ * when no other query parameters are present.
+ *
+ * @param cases - A mapping of query parameter values to element selectors.
+ */
+export function initializeSwitch(
+  cases: Array<[queryKey: string, selector: string]>,
+): void {
+  const searchParams = new URLSearchParams(location.search)
+  const queryKey =
+    cases.map(([key]) => key).find(key => searchParams.has(key)) || ''
+
+  for (const [key, selector] of cases) {
+    const elements = document.querySelectorAll<HTMLElement>(selector)
+    for (const element of elements) {
+      if (key === queryKey) {
+        element.removeAttribute('hidden')
+        element.style.display = 'block'
+      } else {
+        element.setAttribute('hidden', '')
+        element.style.display = 'none'
+      }
+    }
+  }
+}

src/styles/main.css

@@ -72,6 +72,10 @@ a[target='_blank']:after {
   content: '\f35d';
 }
 
+[hidden] {
+  display: none;
+}
+
 #page {
   padding: 8px 24px;
 }

src/utils/markdown.ts

@@ -0,0 +1,5 @@
+import { marked } from 'marked'
+
+export function toHTML(markdown: string): string {
+  return marked(markdown, { async: false })
+}