add alphine

superpage/astro.config.mjs

@@ -13,7 +13,7 @@ export default defineConfig({
   integrations: [
     sitemap(),
     icon(),
-    alpinejs(),
+    alpinejs({ entrypoint: '/src/entrypoint' }),
     partytown({
       config: {
         forward: ['dataLayer.push', 'fbq'],

superpage/package-lock.json

@@ -8,6 +8,7 @@
       "name": "eduseg",
       "version": "0.0.1",
       "dependencies": {
+        "@alpinejs/collapse": "^3.14.9",
         "@astrojs/alpinejs": "^0.4.6",
         "@astrojs/partytown": "^2.1.4",
         "@astrojs/sitemap": "^3.3.0",
@@ -21,6 +22,12 @@
         "tailwindcss": "^4.0.13"
       }
     },
+    "node_modules/@alpinejs/collapse": {
+      "version": "3.14.9",
+      "resolved": "https://registry.npmjs.org/@alpinejs/collapse/-/collapse-3.14.9.tgz",
+      "integrity": "sha512-cUjbBVo4KR/CfFg0cLB+Q7a8SnjmD4MdxmtZvFjh25Dlf/ZWYPSPx/28b+aAykuX/SUoDPQRmdFiVVvq+iILHw==",
+      "license": "MIT"
+    },
     "node_modules/@antfu/install-pkg": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-1.0.0.tgz",

superpage/package.json

@@ -9,6 +9,7 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@alpinejs/collapse": "^3.14.9",
     "@astrojs/alpinejs": "^0.4.6",
     "@astrojs/partytown": "^2.1.4",
     "@astrojs/sitemap": "^3.3.0",

superpage/src/entrypoint.ts

@@ -0,0 +1,6 @@
+import type { Alpine } from 'alpinejs'
+import collapse from '@alpinejs/collapse'
+
+export default (Alpine: Alpine) => {
+  Alpine.plugin(collapse)
+}

superpage/src/env.d.ts

@@ -0,0 +1,3 @@
+interface Window {
+  Alpine: import('alpinejs').Alpine
+}

superpage/src/pages/[slug].astro

@@ -179,15 +179,27 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
             <div class="lg:col-span-2 flex flex-col gap-1.5">
                 {
                     data.course.modules.map((summary) => (
-                        <details class="bg-white/10 rounded-lg w-full px-5 py-3 open:bg-white/15 open:[&_svg]:-rotate-180">
+                        <div
-                            <summary class="cursor-pointer flex items-center justify-between marker:content-['']">
+                            x-data="{expanded: false}"
+                            class="bg-white/10 rounded-lg w-full px-5 py-3"
+                            :class="{'bg-white/15': expanded === true}"
+                        >
+                            <div
+                                @click="expanded = ! expanded"
+                                class="cursor-pointer flex items-center justify-between"
+                            >
                                 <span>{summary}</span>
                                 <Icon
                                     name="chevron"
                                     class="size-4 fill-white/60 group-data-[hover]:fill-white/50 shrink-0"
+                                    :class="{'-rotate-180': expanded === true}"
                                 />
-                            </summary>
+                            </div>
-                            <div class="text-sm/6 text-white/70 space-y-2 mt-2">
+                            <div
+                                x-show="expanded"
+                                class="text-sm/6 text-white/70 space-y-2 mt-2"
+                                style="display: none;"
+                            >
                                 <p>
                                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet neque id
                                     libero semper vulputate a ut ex. Pellentesque semper ultrices mi in efficitur.
@@ -198,7 +210,7 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
                                     sed consequat augue convallis et.
                                 </p>
                             </div>
-                        </details>
+                        </div>
                     ))
                 }
             </div>