From a9fb516f29d983d6dbcb4262a0cd4b201dac3952 Mon Sep 17 00:00:00 2001
From: hypha <ramble.dalloway@gmail.com>
Date: Wed, 5 Feb 2025 18:19:48 +0000
Subject: [PATCH 1/5] Make accordion styling as a component

---
 src/components/accordion/accordion.tsx | 29 ++++++++++++++++++++++++++
 src/components/accordion/index.tsx     |  1 +
 src/pages/[...slug].astro              |  2 ++
 3 files changed, 32 insertions(+)
 create mode 100644 src/components/accordion/accordion.tsx
 create mode 100644 src/components/accordion/index.tsx

diff --git a/src/components/accordion/accordion.tsx b/src/components/accordion/accordion.tsx
new file mode 100644
index 000000000..9bc6b9401
--- /dev/null
+++ b/src/components/accordion/accordion.tsx
@@ -0,0 +1,29 @@
+import { clsx } from "clsx";
+
+export const Accordion = ({
+  title,
+  children,
+  id,
+}: {
+  title: string;
+  children: React.ReactNode;
+  id: string;
+}) => {
+  return (
+    <details className="group mb-4">
+      <summary
+        aria-expanded="false"
+        aria-controls={id}
+        className={clsx(
+          "cursor-pointer flex justify-between p-2 rounded-md border-t border-b focus:ring-2"
+        )}
+      >
+        <span className="font-semibold">{title}</span>
+        <span aria-hidden="true" className="group-open:hidden">+</span>
+        <span aria-hidden="true" className="group-open:block hidden">−</span>
+      </summary>
+
+      <div id={id} className="pl-4">{children}</div>
+    </details>
+  );
+};
diff --git a/src/components/accordion/index.tsx b/src/components/accordion/index.tsx
new file mode 100644
index 000000000..d10af4183
--- /dev/null
+++ b/src/components/accordion/index.tsx
@@ -0,0 +1 @@
+export { Accordion } from "./accordion";
\ No newline at end of file
diff --git a/src/pages/[...slug].astro b/src/pages/[...slug].astro
index 56a77d50b..db73844b9 100644
--- a/src/pages/[...slug].astro
+++ b/src/pages/[...slug].astro
@@ -14,6 +14,7 @@ import BenefitItem from "../components/benefits-list/benefit-item.astro";
 import { ButtonWithTitle } from "../components/button-with-title";
 import { Note } from "../components/note";
 import { SponsorTiers } from "../components/sponsor-tiers";
+import { Accordion } from "../components/accordion";
 
 export async function getStaticPaths() {
   const posts = await getCollection("pages");
@@ -48,6 +49,7 @@ const description = post.data.subtitle;
         Note,
         SponsorTiers,
         hr: Separator,
+        Accordion
       }}
     />
   </Prose>

From 92c7d9834879a00fe4559023df3d5499ae7890d5 Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Wed, 5 Feb 2025 18:50:01 +0000
Subject: [PATCH 2/5] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 src/components/accordion/accordion.tsx | 12 +++++++++---
 src/components/accordion/index.tsx     |  2 +-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/accordion/accordion.tsx b/src/components/accordion/accordion.tsx
index 9bc6b9401..e3a17e883 100644
--- a/src/components/accordion/accordion.tsx
+++ b/src/components/accordion/accordion.tsx
@@ -19,11 +19,17 @@ export const Accordion = ({
         )}
       >
         <span className="font-semibold">{title}</span>
-        <span aria-hidden="true" className="group-open:hidden">+</span>
-        <span aria-hidden="true" className="group-open:block hidden">−</span>
+        <span aria-hidden="true" className="group-open:hidden">
+          +
+        </span>
+        <span aria-hidden="true" className="group-open:block hidden">
+          −
+        </span>
       </summary>
 
-      <div id={id} className="pl-4">{children}</div>
+      <div id={id} className="pl-4">
+        {children}
+      </div>
     </details>
   );
 };
diff --git a/src/components/accordion/index.tsx b/src/components/accordion/index.tsx
index d10af4183..7382d6f08 100644
--- a/src/components/accordion/index.tsx
+++ b/src/components/accordion/index.tsx
@@ -1 +1 @@
-export { Accordion } from "./accordion";
\ No newline at end of file
+export { Accordion } from "./accordion";

From 4e5afa1e5e4d7059649e03e841fae59ccb31a607 Mon Sep 17 00:00:00 2001
From: hypha <ramble.dalloway@gmail.com>
Date: Thu, 13 Feb 2025 17:34:48 +0000
Subject: [PATCH 3/5] convert to astro component

---
 src/components/accordion/accordion.astro | 24 ++++++++++++++++
 src/components/accordion/accordion.tsx   | 35 ------------------------
 src/components/accordion/index.tsx       |  1 -
 src/pages/[...slug].astro                |  2 +-
 4 files changed, 25 insertions(+), 37 deletions(-)
 create mode 100644 src/components/accordion/accordion.astro
 delete mode 100644 src/components/accordion/accordion.tsx
 delete mode 100644 src/components/accordion/index.tsx

diff --git a/src/components/accordion/accordion.astro b/src/components/accordion/accordion.astro
new file mode 100644
index 000000000..9de73ebce
--- /dev/null
+++ b/src/components/accordion/accordion.astro
@@ -0,0 +1,24 @@
+---
+export interface Props {
+  title: string;
+  id: string;
+}
+
+const { title, id } = Astro.props;
+---
+
+<details class="group mb-4">
+  <summary
+    aria-expanded="false"
+    aria-controls={id}
+    class="cursor-pointer flex justify-between p-2 rounded-md border-t border-b focus:ring-2"
+  >
+    <span class="font-semibold">{title}</span>
+    <span aria-hidden="true" class="group-open:hidden">+</span>
+    <span aria-hidden="true" class="group-open:block hidden">−</span>
+  </summary>
+
+  <div id={id} class="pl-4">
+    <slot />
+  </div>
+</details>
diff --git a/src/components/accordion/accordion.tsx b/src/components/accordion/accordion.tsx
deleted file mode 100644
index e3a17e883..000000000
--- a/src/components/accordion/accordion.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { clsx } from "clsx";
-
-export const Accordion = ({
-  title,
-  children,
-  id,
-}: {
-  title: string;
-  children: React.ReactNode;
-  id: string;
-}) => {
-  return (
-    <details className="group mb-4">
-      <summary
-        aria-expanded="false"
-        aria-controls={id}
-        className={clsx(
-          "cursor-pointer flex justify-between p-2 rounded-md border-t border-b focus:ring-2"
-        )}
-      >
-        <span className="font-semibold">{title}</span>
-        <span aria-hidden="true" className="group-open:hidden">
-          +
-        </span>
-        <span aria-hidden="true" className="group-open:block hidden">
-          −
-        </span>
-      </summary>
-
-      <div id={id} className="pl-4">
-        {children}
-      </div>
-    </details>
-  );
-};
diff --git a/src/components/accordion/index.tsx b/src/components/accordion/index.tsx
deleted file mode 100644
index 7382d6f08..000000000
--- a/src/components/accordion/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { Accordion } from "./accordion";
diff --git a/src/pages/[...slug].astro b/src/pages/[...slug].astro
index db73844b9..709e18a2a 100644
--- a/src/pages/[...slug].astro
+++ b/src/pages/[...slug].astro
@@ -14,7 +14,7 @@ import BenefitItem from "../components/benefits-list/benefit-item.astro";
 import { ButtonWithTitle } from "../components/button-with-title";
 import { Note } from "../components/note";
 import { SponsorTiers } from "../components/sponsor-tiers";
-import { Accordion } from "../components/accordion";
+import Accordion from "../components/accordion/accordion.astro";
 
 export async function getStaticPaths() {
   const posts = await getCollection("pages");

From ca4cf0169f7547e7d5ddc2f1b9a46aed484f0ba3 Mon Sep 17 00:00:00 2001
From: hypha <ramble.dalloway@gmail.com>
Date: Mon, 10 Mar 2025 14:38:34 +0000
Subject: [PATCH 4/5] Add accordion example

---
 src/content/pages/test.mdx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/content/pages/test.mdx b/src/content/pages/test.mdx
index 8a6fcc845..2311c7d42 100644
--- a/src/content/pages/test.mdx
+++ b/src/content/pages/test.mdx
@@ -270,3 +270,23 @@ Barking up the right tree
 
 ## YouTube
 <YouTube id="j5a0jTc9S10" alt="Mood lifter" />
+
+## Accordion
+#### What do the dogs say?
+
+<Accordion title="Spanish-speaking dogs" id="spanish">
+  **Guau guau!**
+</Accordion>
+
+<Accordion title="Italian-speaking dogs" id="italian">
+  *Bau bau!*
+</Accordion>
+
+<Accordion title="Japanese-speaking dogs" id="japanese">
+  ワンワン
+</Accordion>
+
+<Accordion title="Finnish-speaking dogs" id="finnish">
+  ***Hau hau!***
+</Accordion>
+

From 1e324bc6a5f5c13ea3fb1cc1922b4b4d098a3827 Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Mon, 10 Mar 2025 14:40:39 +0000
Subject: [PATCH 5/5] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 src/content/pages/test.mdx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/content/pages/test.mdx b/src/content/pages/test.mdx
index 2311c7d42..3b8b959fc 100644
--- a/src/content/pages/test.mdx
+++ b/src/content/pages/test.mdx
@@ -289,4 +289,3 @@ Barking up the right tree
 <Accordion title="Finnish-speaking dogs" id="finnish">
   ***Hau hau!***
 </Accordion>
-