dealjus/justin.deal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add dropdowns to collapse homelab app categories

Browse Source
This commit is contained in:
Justin Deal 2025-05-02 22:49:06 -07:00
parent affc1b0dc9
commit 780b06b9cf
3 changed files with 42 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
node_modules/.vite/deps/_metadata.json generated vendored
View File

@ -1,25 +1,25 @@
{ {
"hash": "6c87a632", "hash": "7113b21e",
"configHash": "e55fbbff", "configHash": "2cd4a4ea",
"lockfileHash": "53cd0e09", "lockfileHash": "53cd0e09",
"browserHash": "e114ea7e", "browserHash": "f4d46c12",
"optimized": { "optimized": {
"astro > cssesc": { "astro > cssesc": {
"src": "../../.pnpm/cssesc@3.0.0/node_modules/cssesc/cssesc.js", "src": "../../.pnpm/cssesc@3.0.0/node_modules/cssesc/cssesc.js",
"file": "astro___cssesc.js", "file": "astro___cssesc.js",
"fileHash": "7ff5e5f3", "fileHash": "dc615560",
"needsInterop": true "needsInterop": true
}, },
"astro > aria-query": { "astro > aria-query": {
"src": "../../.pnpm/aria-query@5.3.2/node_modules/aria-query/lib/index.js", "src": "../../.pnpm/aria-query@5.3.2/node_modules/aria-query/lib/index.js",
"file": "astro___aria-query.js", "file": "astro___aria-query.js",
"fileHash": "c7870714", "fileHash": "53d05d83",
"needsInterop": true "needsInterop": true
}, },
"astro > axobject-query": { "astro > axobject-query": {
"src": "../../.pnpm/axobject-query@4.1.0/node_modules/axobject-query/lib/index.js", "src": "../../.pnpm/axobject-query@4.1.0/node_modules/axobject-query/lib/index.js",
"file": "astro___axobject-query.js", "file": "astro___axobject-query.js",
"fileHash": "dc6eafc6", "fileHash": "35e7ec58",
"needsInterop": true "needsInterop": true
} }
}, },

1
src/layouts/Layout.astro
View File

@ -16,6 +16,7 @@ import "../styles/global.css";
href="https://fonts.bunny.net/css?family=ibm-plex-mono:400,400i,500,500i,600,600i,700,700i" href="https://fonts.bunny.net/css?family=ibm-plex-mono:400,400i,500,500i,600,600i,700,700i"
rel="stylesheet" rel="stylesheet"
/> />
<script src="https://unpkg.com/alpinejs" defer></script>
<slot name="head" /> <slot name="head" />
</head> </head>
<body class="zag-bg zag-text zag-transition font-mono"> <body class="zag-bg zag-text zag-transition font-mono">

52
src/pages/homelab/index.astro
View File

@ -28,25 +28,43 @@ import { services } from "./services.ts";
<h1 class="font-display text-3xl sm:text-4xl leading-loose">Homelab</h1> <h1 class="font-display text-3xl sm:text-4xl leading-loose">Homelab</h1>
</div> </div>
{Object.entries(services).map(([category, apps]) => ( {Object.entries(services).map(([category, apps], index) => (
<div class="mb-8"> <div class="mb-8" x-data="{ open: true }" key={index}>
<h3 class="text-xl font-semibold mb-4">{category}</h3> <button
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4"> @click="open = !open"
{apps.length > 0 ? ( class="text-xl font-semibold mb-4 w-full text-left flex items-center justify-between"
apps.map(app => ( >
<ServiceCard {category}
name={app.name} <svg
href={app.link} :class="{ 'rotate-180': open }"
img={app.icon} class="w-5 h-5 transform transition-transform duration-300"
alt={app.name} fill="none"
key={app.link} stroke="currentColor"
/> viewBox="0 0 24 24"
)) >
) : ( <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
<p class="text-center col-span-full">Coming soon...</p> </svg>
)} </button>
<div x-show="open" x-transition>
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
{apps.length > 0 ? (
apps.map(app => (
<ServiceCard
name={app.name}
href={app.link}
img={app.icon}
alt={app.name}
key={app.link}
/>
))
) : (
<p class="text-center col-span-full">Coming soon...</p>
)}
</div>
</div> </div>
</div> </div>
))} ))}
</Section> </Section>
</Layout> </Layout>