feat: change collapse to preline

bun.lock

@@ -14,6 +14,7 @@
         "@iconify-json/pajamas": "1.2.15",
         "@iconify-json/simple-icons": "1.2.83",
         "@playform/compress": "0.2.3",
+        "@preline/collapse": "^4.2.0",
         "@swup/astro": "1.8.0",
         "@tailwindcss/postcss": "4.3.0",
         "@tailwindcss/vite": "4.3.0",
@@ -574,6 +575,8 @@
 
     "@pnpm/npm-conf": ["@pnpm/npm-conf@3.0.2", "", { "dependencies": { "@pnpm/config.env-replace": "^1.1.0", "@pnpm/network.ca-file": "^1.0.1", "config-chain": "^1.1.11" } }, "sha512-h104Kh26rR8tm+a3Qkc5S4VLYint3FE48as7+/5oCEcKR2idC/pF1G6AhIXKI+eHPJa/3J9i5z0Al47IeGHPkA=="],
 
+    "@preline/collapse": ["@preline/collapse@4.2.0", "", {}, "sha512-ge7sUQiHRGb7DOyl8q6KnybJDVL7R/kv9ah8svgmDslpmGYK7LIGR/H68mZyWbhh75mRTeoxhlnXGZEii/3Y0A=="],
+
     "@rollup/plugin-alias": ["@rollup/plugin-alias@3.1.9", "", { "dependencies": { "slash": "^3.0.0" }, "peerDependencies": { "rollup": "^1.20.0||^2.0.0" } }, "sha512-QI5fsEvm9bDzt32k39wpOwZhVzRcL5ydcffUHMyLVaVaLeC70I8TJZ17F1z1eMoLu4E/UOcH9BWVkKpIKdrfiw=="],
 
     "@rollup/plugin-babel": ["@rollup/plugin-babel@5.3.1", "", { "dependencies": { "@babel/helper-module-imports": "^7.10.4", "@rollup/pluginutils": "^3.1.0" }, "peerDependencies": { "@babel/core": "^7.0.0", "@types/babel__core": "^7.1.9", "rollup": "^1.20.0||^2.0.0" }, "optionalPeers": ["@types/babel__core"] }, "sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q=="],

package.json

@@ -38,6 +38,7 @@
     "@iconify-json/pajamas": "1.2.15",
     "@iconify-json/simple-icons": "1.2.83",
     "@playform/compress": "0.2.3",
+    "@preline/collapse": "^4.2.0",
     "@swup/astro": "1.8.0",
     "@tailwindcss/postcss": "4.3.0",
     "@tailwindcss/vite": "4.3.0",

src/components/sections/ExperienceSection.astro

@@ -19,7 +19,7 @@ const experiences = ((await directus.request(
     Experience
   </h3>
   <ul class="flex flex-col w-full ml-8 pr-8">
-    {experiences.map((experience: Experience) => {
+    {experiences.map((experience: Experience, index: number) => {
     const startYear = new Date(experience.startDate).getFullYear();
     const endYear = experience.endDate != null ? new Date(experience.endDate).getFullYear() : 'Present';
 
@@ -64,9 +64,9 @@ const experiences = ((await directus.request(
             {experience.location} {experience.location && experience.location_type && '-'} {experience.location_type}
           </div>
           )}
-          <div class="text-md mt-4 flex flex-col gap-4" x-data="{ expanded: false }">
+          <div class="text-md mt-4 flex flex-col">
             {experience.summary && (
-            <div class="flex flex-col gap-1">
+            <div class="flex flex-col gap-1 mb-4">
               <h4 class="text-header font-semibold">
                 Summary:
               </h4>
@@ -78,7 +78,8 @@ const experiences = ((await directus.request(
             </div>
             )}
             {(experience.responsibilities || experience.achievements) &&  (
-            <div class="relative flex flex-col gap-4" :class="expanded ? '' : 'mask-[linear-gradient(to_bottom,black_50%,transparent)]'" x-show="expanded" x-collapse.min.50px>
+            <div id={`hs-show-hide-collapse-heading-${index}`} class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-500">
+              <div class="relative flex flex-col gap-4 pb-4">
               {experience.responsibilities && (
               <div class="flex flex-col gap-1">
                 <h4 class="text-header font-semibold">
@@ -107,29 +108,39 @@ const experiences = ((await directus.request(
                 </ul>
               </div>
               )}
+              </div>
             </div>
 
-            <button @click="expanded = ! expanded" class="group/more flex items-center justify-center text-primary hover:text-primary-hover text-xs underline transition-all gap-1.5 w-fit cursor-pointer">
+            <p class="mb-4">
-              <span x-text="expanded ? 'Show less' : 'Show more'">
+              <button
-                Show more
+                type="button"
-              </span>
+                class="hs-collapse-toggle inline-flex items-center gap-x-1 text-sm rounded-lg text-primary hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none"
-              <svg
+                id="hs-show-hide-collapse"
-                class="group-hover/more:translate-y-0.5 ease-out duration-300 h-4 w-4"
+                aria-expanded="false"
-                :class="{ 'rotate-180': expanded }"
+                aria-controls={`hs-show-hide-collapse-heading-${index}`}
-                viewBox="0 0 24 24"
+                data-hs-collapse={`#hs-show-hide-collapse-heading-${index}`}
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
               >
-                <polyline points="6 9 12 15 18 9" />
+                <span class="hs-collapse-open:hidden">Read more</span>
-              </svg>
+                <span class="hs-collapse-open:block hidden">Read less</span>
-            </button>
+                <svg
+                  class="hs-collapse-open:rotate-180 shrink-0 size-4"
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                    <path d="m6 9 6 6 6-6"/>
+                </svg>
+              </button>
+            </p>
 
             <ul
-              class="flex print:hidden flex-wrap gap-2 mt-2"
+              class="flex print:hidden flex-wrap gap-2"
               aria-label="Technologies used"
             >
               {experience.skills && experience.skills.map(skill => {
@@ -152,8 +163,6 @@ const experiences = ((await directus.request(
   </ul>
 </section>
 
-<!-- Alpine Plugins -->
+<script>
-<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
+  import "@preline/collapse/index.js";
-
+</script>
-<!-- Alpine Core -->
-<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

src/styles/global.css

@@ -6,6 +6,11 @@
 @plugin '@tailwindcss/typography';
 @plugin '@tailwindcss/forms';
 
+/* Preline */
+@source "../../node_modules/@preline/collapse/*.js";
+@import "../../node_modules/@preline/collapse/variants.css";
+@import "../../node_modules/@preline/collapse/theme.css";
+
 /* Dark mode support for Tailwind CSS v4 */
 /* https://tailwindcss.com/docs/dark-mode */
 @custom-variant dark (&:where(.dark, .dark *));