쿼츠 블로그를 위해 대공사

quartz/components/scripts/callout.inline.ts

@@ -0,0 +1,27 @@
+function toggleCallout(this: HTMLElement) {
+  const outerBlock = this.parentElement!
+  outerBlock.classList.toggle("is-collapsed")
+  const content = outerBlock.getElementsByClassName("callout-content")[0] as HTMLElement
+  if (!content) return
+  const collapsed = outerBlock.classList.contains("is-collapsed")
+  content.style.gridTemplateRows = collapsed ? "0fr" : "1fr"
+}
+
+function setupCallout() {
+  const collapsible = document.getElementsByClassName(
+    `callout is-collapsible`,
+  ) as HTMLCollectionOf<HTMLElement>
+  for (const div of collapsible) {
+    const title = div.getElementsByClassName("callout-title")[0] as HTMLElement
+    const content = div.getElementsByClassName("callout-content")[0] as HTMLElement
+    if (!title || !content) continue
+
+    title.addEventListener("click", toggleCallout)
+    window.addCleanup(() => title.removeEventListener("click", toggleCallout))
+
+    const collapsed = div.classList.contains("is-collapsed")
+    content.style.gridTemplateRows = collapsed ? "0fr" : "1fr"
+  }
+}
+
+document.addEventListener("nav", setupCallout)