alexlebens/site-profile
1
0
Fork 0
Code Issues 1 Pull Requests 4 Actions Packages Releases 34 Activity

feat: change collapse to preline
test-build / build (push) Successful in 2m38s
Details
test-build / guarddog (push) Successful in 1m21s
Details

Browse Source
This commit is contained in:
Alex Lebens
2026-05-21 16:50:48 -05:00
parent 28ed0f2fa0
commit b7787cb723
4 changed files with 45 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bun.lock
+3
View File
@@ -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
+1
View File
@@ -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
+36 -27
View File
@@ -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">
<span x-text="expanded ? 'Show less' : 'Show more'">
Show more
</span>
<svg
class="group-hover/more:translate-y-0.5 ease-out duration-300 h-4 w-4"
:class="{ 'rotate-180': expanded }"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
<p class="mb-4">
<button
type="button"
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"
id="hs-show-hide-collapse"
aria-expanded="false"
aria-controls={`hs-show-hide-collapse-heading-${index}`}
data-hs-collapse={`#hs-show-hide-collapse-heading-${index}`}
>
<polyline points="6 9 12 15 18 9" />
</svg>
</button>
<span class="hs-collapse-open:hidden">Read more</span>
<span class="hs-collapse-open:block hidden">Read less</span>
<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 defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
<!-- Alpine Core -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>
import "@preline/collapse/index.js";
</script>
src/styles/global.css
+5
View File
@@ -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 *));