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

Add's the Ability to Search On Categories and Predefined Tags

Browse Source
This commit is contained in:
Justin Deal 2025-05-02 23:46:26 -07:00
parent dc75b39596
commit 4409625260
2 changed files with 126 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,51 +29,99 @@ import { services } from "./services.ts";
</Fragment>
<Section class="my-8">
<div x-data="{ searchQuery: '' }" x-init="
<div x-data="{ searchQuery: '', hasResults: true }" x-init="
$watch('searchQuery', (query) => {
query = query.toLowerCase();
let anyResults = false;
let visibleCount = 0;
// First, process all app cards
// Process all app cards
document.querySelectorAll('.app-card').forEach(card => {
const appName = card.getAttribute('data-app-name').toLowerCase();
if (query === '' || appName.includes(query)) {
const appName = card.getAttribute('data-app-name') || '';
const appTags = card.getAttribute('data-app-tags') || '';
const appCategory = card.getAttribute('data-app-category') || '';
if (query === '' ||
appName.includes(query) ||
appTags.includes(query) ||
appCategory.includes(query)) {
card.style.display = '';
anyResults = true;
visibleCount++;
} else {
card.style.display = 'none';
}
});
// Then, check each category to see if it has any visible apps
// Check each category
document.querySelectorAll('.category-section').forEach(category => {
const categoryName = category.getAttribute('data-category');
const hasVisibleApps = Array.from(
category.querySelectorAll('.app-card')
).some(card => card.style.display !== 'none');
// Show/hide the category based on whether it has visible apps
if (query === '' || hasVisibleApps) {
category.style.display = '';
} else {
category.style.display = 'none';
}
});
})
// Update results status
hasResults = query === '' || anyResults;
// Update screen reader status
const statusEl = document.getElementById('search-status');
if (statusEl) {
if (query === '') {
statusEl.textContent = 'Showing all apps';
} else if (hasResults) {
statusEl.textContent = 'Found ' + visibleCount + ' apps matching ' + query;
} else {
statusEl.textContent = 'No apps found matching ' + query;
}
}
});
// Add keyboard support for Escape key
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && searchQuery !== '') {
searchQuery = '';
document.getElementById('app-search').focus();
}
});
">
<div class="flex items-center gap-4 pt-8 pb-4">
<h1 class="font-display text-3xl sm:text-4xl leading-loose">Homelab</h1>
</div>
<div class="mb-6">
<!-- Hidden live region for screen readers -->
<div
id="search-status"
class="sr-only"
aria-live="polite"
aria-atomic="true"
>
Showing all apps
</div>
<div class="relative">
<label for="app-search" class="sr-only">Search apps</label>
<input
id="app-search"
type="text"
x-model="searchQuery"
placeholder="Search apps..."
role="searchbox"
aria-label="Search apps"
aria-describedby="search-status"
aria-controls="app-list"
class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 zag-bg zag-text"
/>
<button
x-show="searchQuery"
@click="searchQuery = ''"
aria-label="Clear search"
class="absolute right-3 top-1/2 transform -translate-y-1/2"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@ -82,13 +130,26 @@ import { services } from "./services.ts";
</button>
</div>
</div>
<!-- No results message -->
<div
x-show="searchQuery !== '' && !hasResults"
x-transition
class="text-center py-8 my-4 border-2 border-dashed border-gray-300 rounded-lg"
>
<p class="text-xl font-semibold">No Results</p>
</div>
{Object.entries(services).map(([category, apps], index) => (
<div class="mb-8 category-section" data-category={category} x-data="{ open: true }">
<button
@click="open = !open"
class="text-xl font-semibold mb-4 w-full text-left flex items-center justify-between"
>
<div id="app-list">
{Object.entries(services).map(([category, apps], index) => (
<div class="mb-8 category-section" data-category={category} x-data="{ open: true }">
<button
@click="open = !open"
class="text-xl font-semibold mb-4 w-full text-left flex items-center justify-between"
aria-expanded="true"
:aria-expanded="open.toString()"
:aria-controls="'category-' + '${category}'.toLowerCase().replace(/\\s+/g, '-')"
>
{category}
<svg
:class="{ 'rotate-180': open }"
@ -101,11 +162,20 @@ import { services } from "./services.ts";
</svg>
</button>
<div x-show="open" x-transition>
<div
x-show="open"
x-transition
:id="'category-' + '${category}'.toLowerCase().replace(/\\s+/g, '-')"
>
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
{apps.length > 0 ? (
apps.map(app => (
<div class="app-card" data-app-name={app.name.toLowerCase()}>
<div
class="app-card"
data-app-name={app.name.toLowerCase()}
data-app-tags={app.tags ? app.tags.join(' ').toLowerCase() : ''}
data-app-category={category.toLowerCase()}
>
<ServiceCard
name={app.name}
href={app.link}
@ -118,9 +188,10 @@ import { services } from "./services.ts";
<p class="text-center col-span-full">Coming soon...</p>
)}
</div>
</div>
</div>
</div>
))}
))}
</div>
</div>
</Section>

56
src/pages/homelab/services.ts
View File

@ -12,43 +12,50 @@ export const services = {
name: "Silverbullet",
link: "https://notes.justin.deal",
icon: "https://cdn.jsdelivr.net/gh/selfhst/icons/png/silverbullet.png",
alt: "Silverbullet"
alt: "Silverbullet",
tags: ["notes", "markdown", "knowledge base"]
},
{
name: "Vikunja",
link: "https://todo.justin.deal",
icon: "https://cdn.jsdelivr.net/gh/selfhst/icons/svg/vikunja.svg",
alt: "Vikunja"
alt: "Vikunja",
tags: ["todo", "tasks", "productivity"]
},
{
name: "Actual",
link: "https://budget.justin.deal",
icon: "https://cdn.jsdelivr.net/gh/selfhst/icons/svg/actual-budget.svg",
alt: "Actual"
alt: "Actual",
tags: ["finance", "budget", "money"]
},
{
name: "Searxng",
link: "https://search.justin.deal",
icon: "https://cdn.jsdelivr.net/gh/selfhst/icons/svg/searxng.svg",
alt: "Searxng"
alt: "Searxng",
tags: ["search", "privacy", "metasearch"]
},
{
name: "TeslaMate",
link: "https://tesla.justin.deal",
icon: "https://cdn.jsdelivr.net/gh/selfhst/icons/svg/teslamate.svg",
alt: "TeslaMate"
alt: "TeslaMate",
tags: []
},
{
name: "BaiKal",
link: "https://dav.justin.deal",
icon: "https://cdn.jsdelivr.net/gh/selfhst/icons/png/baikal.png",
alt: "BaiKal"
alt: "BaiKal",
tags: []
},
{
name: "Cryptpad",
link: "https://docs.justin.deal",
icon: "https://cdn.jsdelivr.net/gh/selfhst/icons/svg/cryptpad.svg",
alt: "Cryptpad"
alt: "Cryptpad",
tags: []
}
],
Development: [
@ -56,19 +63,22 @@ export const services = {
name: "Gitea",
link: "https://code.justin.deal",
icon: "https://cdn.jsdelivr.net/gh/selfhst/icons/svg/gitea.svg",
alt: "Gitea"
alt: "Gitea",
tags: []
},
{
name: "OpenGist",
link: "https://snippets.justin.deal",
icon: "https://cdn.jsdelivr.net/gh/selfhst/icons/svg/opengist.svg",
alt: "OpenGist"
alt: "OpenGist",
tags: []
},
{
name: "IT-Tools",
link: "https://tools.justin.deal",
icon: "https://cdn.jsdelivr.net/gh/selfhst/icons/svg/it-tools.svg",
alt: "IT-Tools"
alt: "IT-Tools",
tags: []
}
],
Media: [
@ -76,13 +86,15 @@ export const services = {
name: "Jellyfin",
link: "https://watch.justin.deal",
icon: "https://cdn.jsdelivr.net/gh/selfhst/icons/svg/jellyfin.svg",
alt: "Jellyfin"
alt: "Jellyfin",
tags: []
},
{
name: "Calibre-Web",
link: "https://books.justin.deal",
icon: "https://cdn.jsdelivr.net/gh/selfhst/icons/svg/calibre-web.svg",
alt: "Calibre-Web"
alt: "Calibre-Web",
tags: []
}
],
Infrastructure: [
@ -90,37 +102,43 @@ export const services = {
name: "Pi-hole",
link: "https://pihole.justin.deal",
icon: "https://cdn.jsdelivr.net/gh/selfhst/icons/svg/pi-hole.svg",
alt: "Pi-hole"
alt: "Pi-hole",
tags: []
},
{
name: "Ntfy",
link: "https://ntfy.justin.deal",
icon: "https://cdn.jsdelivr.net/gh/selfhst/icons/svg/ntfy.svg",
alt: "Ntfy"
alt: "Ntfy",
tags: []
},
{
name: "Vaultwarden",
link: "https://passwords.justin.deal",
icon: "https://cdn.jsdelivr.net/gh/selfhst/icons/svg/vaultwarden.svg",
alt: "Vaultwarden"
alt: "Vaultwarden",
tags: []
},
{
name: "Uptime Kuma",
link: "https://status.justin.deal",
icon: "https://cdn.jsdelivr.net/gh/selfhst/icons/svg/uptime-kuma.svg",
alt: "Uptime Kuma"
alt: "Uptime Kuma",
tags: []
},
{
name: "Authentik",
link: "https://auth.justin.deal",
icon: "https://cdn.jsdelivr.net/gh/selfhst/icons/svg/authentik.svg",
alt: "Authentik"
alt: "Authentik",
tags: []
},
{
name: "Traefik",
link: "https://proxy.justin.deal:8080",
icon: "https://cdn.jsdelivr.net/gh/selfhst/icons/svg/traefik.svg",
alt: "Traefik"
alt: "Traefik",
tags: []
}
]
};
};