637 lines
45 KiB
HTML
637 lines
45 KiB
HTML
|
<!DOCTYPE html><html lang="en"> <head><!-- Theme flash prevention script - must be first in head --><script>
|
|||
|
|
// Immediately apply the saved theme to prevent flash
|
|||
|
|
(function() {
|
|||
|
|
function getThemePreference() {
|
|||
|
|
if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
|
|||
|
|
return localStorage.getItem('theme');
|
|||
|
|
}
|
|||
|
|
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const theme = getThemePreference();
|
|||
|
|
|
|||
|
|
// Apply theme immediately to prevent flash
|
|||
|
|
if (theme === 'dark') {
|
|||
|
|
document.documentElement.classList.add('dark');
|
|||
|
|
} else {
|
|||
|
|
document.documentElement.classList.remove('dark');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Store the theme in localStorage for future visits
|
|||
|
|
if (typeof localStorage !== 'undefined') {
|
|||
|
|
localStorage.setItem('theme', theme);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Add a class to indicate JS is loaded and theme is applied
|
|||
|
|
document.documentElement.classList.add('theme-loaded');
|
|||
|
|
})();
|
|||
|
|
</script><!-- Service worker registration --><script>
|
|||
|
|
// Register service worker for offline support and caching
|
|||
|
|
if ('serviceWorker' in navigator) {
|
|||
|
|
window.addEventListener('load', () => {
|
|||
|
|
navigator.serviceWorker.register('/service-worker.js')
|
|||
|
|
.then(registration => {
|
|||
|
|
console.log('SW registered: ', registration.scope);
|
|||
|
|
})
|
|||
|
|
.catch(error => {
|
|||
|
|
console.log('SW registration failed: ', error);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
</script><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="generator" content="Astro v5.7.5"><!-- Favicons --><link rel="icon" type="image/svg+xml" href="/favicons/favicon.png"><link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png"><link rel="manifest" href="/site.webmanifest"><!-- Theme colors --><meta name="theme-color" content="#282828" media="(prefers-color-scheme: dark)"><meta name="theme-color" content="#ebdbb2" media="(prefers-color-scheme: light)"><!-- Preconnect to external resources --><link rel="preconnect" href="https://fonts.bunny.net" crossorigin><link rel="dns-prefetch" href="https://fonts.bunny.net"><link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin><link rel="dns-prefetch" href="https://cdn.jsdelivr.net"><link rel="preconnect" href="https://unpkg.com" crossorigin><link rel="dns-prefetch" href="https://unpkg.com"><!-- Preload critical fonts with font-display: swap --><link rel="preload" href="https://fonts.bunny.net/css?family=ibm-plex-mono:400,400i,500,500i,600,600i,700,700i&display=swap" as="style"><link href="https://fonts.bunny.net/css?family=ibm-plex-mono:400,400i,500,500i,600,600i,700,700i&display=swap" rel="stylesheet"><!-- Preload critical font files --><link rel="preload" href="https://cdn.jsdelivr.net/fontsource/fonts/press-start-2p@latest/latin-400-normal.woff2" as="font" type="font/woff2" crossorigin><!-- Preload Alpine.js --><link rel="preload" href="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" as="script"><script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script><!-- Font loading observer --><script>
|
|||
|
|
if ("fonts" in document) {
|
|||
|
|
Promise.all([
|
|||
|
|
document.fonts.load("1em IBM Plex Mono"),
|
|||
|
|
document.fonts.load("1em press-start-2p")
|
|||
|
|
]).then(() => {
|
|||
|
|
document.documentElement.classList.add("fonts-loaded");
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
document.documentElement.classList.add("fonts-loaded");
|
|||
|
|
}
|
|||
|
|
</script><!-- Time-based theme scheduler --><script>
|
|||
|
|
// Time-based theme switching
|
|||
|
|
(function() {
|
|||
|
|
// Only run if user has selected auto mode
|
|||
|
|
const themeMode = localStorage.getItem('theme-mode');
|
|||
|
|
|
|||
|
|
if (themeMode === 'auto') {
|
|||
|
|
const checkTime = () => {
|
|||
|
|
const hour = new Date().getHours();
|
|||
|
|
const isDayTime = hour >= 7 && hour < 19; // 7 AM to 7 PM
|
|||
|
|
|
|||
|
|
const theme = isDayTime ? 'light' : 'dark';
|
|||
|
|
const currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
|
|||
|
|
|
|||
|
|
if (theme !== currentTheme) {
|
|||
|
|
if (theme === 'dark') {
|
|||
|
|
document.documentElement.classList.add('dark');
|
|||
|
|
} else {
|
|||
|
|
document.documentElement.classList.remove('dark');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
localStorage.setItem('theme', theme);
|
|||
|
|
|
|||
|
|
// Dispatch theme changed event
|
|||
|
|
window.dispatchEvent(new CustomEvent('theme-changed', {
|
|||
|
|
detail: { theme, automatic: true, mode: 'auto' }
|
|||
|
|
}));
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Check immediately
|
|||
|
|
checkTime();
|
|||
|
|
|
|||
|
|
// Check every hour
|
|||
|
|
setInterval(checkTime, 60 * 60 * 1000);
|
|||
|
|
|
|||
|
|
// Also check at specific times (7 AM and 7 PM)
|
|||
|
|
const scheduleCheck = () => {
|
|||
|
|
const now = new Date();
|
|||
|
|
const hours = now.getHours();
|
|||
|
|
const minutes = now.getMinutes();
|
|||
|
|
|
|||
|
|
// Calculate time until next check (either 7 AM or 7 PM)
|
|||
|
|
let nextCheckHour;
|
|||
|
|
if (hours < 7) {
|
|||
|
|
nextCheckHour = 7; // Next check at 7 AM
|
|||
|
|
} else if (hours < 19) {
|
|||
|
|
nextCheckHour = 19; // Next check at 7 PM
|
|||
|
|
} else {
|
|||
|
|
nextCheckHour = 7; // Next check at 7 AM tomorrow
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Calculate milliseconds until next check
|
|||
|
|
let msUntilNextCheck;
|
|||
|
|
if (hours >= 19) {
|
|||
|
|
// After 7 PM, next check is 7 AM tomorrow
|
|||
|
|
msUntilNextCheck = ((24 - hours + 7) * 60 - minutes) * 60 * 1000;
|
|||
|
|
} else {
|
|||
|
|
// Before 7 PM, next check is either 7 AM or 7 PM today
|
|||
|
|
msUntilNextCheck = ((nextCheckHour - hours) * 60 - minutes) * 60 * 1000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Schedule the next check
|
|||
|
|
setTimeout(() => {
|
|||
|
|
checkTime();
|
|||
|
|
scheduleCheck(); // Schedule the next check after this one
|
|||
|
|
}, msUntilNextCheck);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Start the scheduling
|
|||
|
|
scheduleCheck();
|
|||
|
|
}
|
|||
|
|
})();
|
|||
|
|
</script><!-- Theme transition script --><script type="module">document.addEventListener("DOMContentLoaded",()=>{window.addEventListener("theme-changed",t=>{const a=(t instanceof CustomEvent?t:null)?.detail?.theme||(document.documentElement.classList.contains("dark")?"dark":"light");window.matchMedia("(prefers-reduced-motion: reduce)").matches||(document.querySelectorAll("h1, h2, h3").forEach((e,o)=>{e.classList.remove("theme-animate-slide"),e.offsetWidth,setTimeout(()=>{e.classList.add("theme-animate-slide")},50+o*30)}),document.querySelectorAll(".card, article, section:not(section section)").forEach((e,o)=>{e.classList.remove("theme-animate-scale"),e.offsetWidth,setTimeout(()=>{e.classList.add("theme-animate-scale")},100+o*40)}),document.querySelectorAll("img, svg").forEach((e,o)=>{e.classList.remove("theme-animate-fade"),e.offsetWidth,setTimeout(()=>{e.classList.add("theme-animate-fade")},150+o*20)}),a==="dark"?(document.querySelectorAll("code, pre").forEach(e=>{e.classList.add("dark-theme-code")}),document.querySelectorAll(".button-primary, .cta-button").forEach(e=>{e.classList.add("dark-theme-glow")})):(document.querySelectorAll("code, pre").forEach(e=>{e.classList.remove("dark-theme-code")}),document.querySelectorAll(".button-primary, .cta-button").forEach(e=>{e.classList.remove("dark-theme-glow")})))})});const d=()=>{const t=document.createElement("style");t.textContent=`
|
|||
|
|
.dark-theme-code {
|
|||
|
|
box-shadow: 0 0 8px rgba(254, 128, 25, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dark-theme-glow {
|
|||
|
|
box-shadow: 0 0 12px rgba(254, 128, 25, 0.4);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (prefers-reduced-motion: reduce) {
|
|||
|
|
.theme-animate-fade,
|
|||
|
|
.theme-animate-slide,
|
|||
|
|
.theme-animate-scale {
|
|||
|
|
animation: none !important;
|
|||
|
|
transition: none !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
`,document.head.appendChild(t)};document.addEventListener("DOMContentLoaded",d);</script><script>
|
|||
|
|
/**
|
|||
|
|
* Initialize search functionality for any content type
|
|||
|
|
* @returns {Object} Alpine.js data object with search functionality
|
|||
|
|
*/
|
|||
|
|
function initializeSearch(contentSelector = '.searchable-item', options = {}) {
|
|||
|
|
const defaults = {
|
|||
|
|
nameAttribute: 'data-name',
|
|||
|
|
tagsAttribute: 'data-tags',
|
|||
|
|
categoryAttribute: 'data-category',
|
|||
|
|
additionalAttributes: [],
|
|||
|
|
noResultsMessage: 'No results found',
|
|||
|
|
allItemsMessage: 'Showing all items',
|
|||
|
|
resultCountMessage: (count) => `Found ${count} items`,
|
|||
|
|
itemLabel: 'items'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const config = { ...defaults, ...options };
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
searchQuery: '',
|
|||
|
|
hasResults: true,
|
|||
|
|
visibleCount: 0,
|
|||
|
|
loading: false, // Start with loading state false - the LoadingManager will control this
|
|||
|
|
|
|||
|
|
init() {
|
|||
|
|
// Initialize the visible count
|
|||
|
|
this.visibleCount = document.querySelectorAll(contentSelector).length;
|
|||
|
|
this.setupWatchers();
|
|||
|
|
this.setupKeyboardShortcuts();
|
|||
|
|
|
|||
|
|
// Handle theme changes
|
|||
|
|
window.addEventListener('theme-changed', () => {
|
|||
|
|
this.filterContent(this.searchQuery);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
setupWatchers() {
|
|||
|
|
this.$watch('searchQuery', (query) => {
|
|||
|
|
// Filter content immediately - no artificial delay
|
|||
|
|
this.filterContent(query);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
setupKeyboardShortcuts() {
|
|||
|
|
// Track the currently focused item index
|
|||
|
|
this.focusedItemIndex = -1;
|
|||
|
|
|
|||
|
|
document.addEventListener('keydown', (e) => {
|
|||
|
|
// '/' key focuses the search input
|
|||
|
|
if (e.key === '/' && document.activeElement.id !== 'app-search') {
|
|||
|
|
e.preventDefault();
|
|||
|
|
document.getElementById('app-search').focus();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Escape key clears the search
|
|||
|
|
if (e.key === 'Escape' && this.searchQuery !== '') {
|
|||
|
|
this.searchQuery = '';
|
|||
|
|
document.getElementById('app-search').focus();
|
|||
|
|
this.focusedItemIndex = -1;
|
|||
|
|
this.clearItemFocus();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Arrow key navigation through results
|
|||
|
|
if (this.searchQuery && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
|
|||
|
|
const visibleItems = this.getVisibleItems();
|
|||
|
|
if (visibleItems.length === 0) return;
|
|||
|
|
|
|||
|
|
// Update focused item index
|
|||
|
|
if (e.key === 'ArrowDown') {
|
|||
|
|
this.focusedItemIndex = Math.min(this.focusedItemIndex + 1, visibleItems.length - 1);
|
|||
|
|
} else {
|
|||
|
|
this.focusedItemIndex = Math.max(this.focusedItemIndex - 1, -1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Clear previous focus
|
|||
|
|
this.clearItemFocus();
|
|||
|
|
|
|||
|
|
// If we're back at -1, focus the search input
|
|||
|
|
if (this.focusedItemIndex === -1) {
|
|||
|
|
document.getElementById('app-search').focus();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Focus the new item
|
|||
|
|
const itemToFocus = visibleItems[this.focusedItemIndex];
|
|||
|
|
this.focusItem(itemToFocus);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Enter key selects the focused item
|
|||
|
|
if (e.key === 'Enter' && this.focusedItemIndex >= 0) {
|
|||
|
|
const visibleItems = this.getVisibleItems();
|
|||
|
|
if (visibleItems.length === 0) return;
|
|||
|
|
|
|||
|
|
const selectedItem = visibleItems[this.focusedItemIndex];
|
|||
|
|
const link = selectedItem.querySelector('a');
|
|||
|
|
if (link) {
|
|||
|
|
link.click();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
getVisibleItems() {
|
|||
|
|
return Array.from(document.querySelectorAll(contentSelector))
|
|||
|
|
.filter(item => item.style.display !== 'none');
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
clearItemFocus() {
|
|||
|
|
// Remove focus styling from all items
|
|||
|
|
document.querySelectorAll(`${contentSelector}.keyboard-focus`).forEach(item => {
|
|||
|
|
item.classList.remove('keyboard-focus');
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
focusItem(item) {
|
|||
|
|
// Add focus styling
|
|||
|
|
item.classList.add('keyboard-focus');
|
|||
|
|
item.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
filterContent(query) {
|
|||
|
|
query = query.toLowerCase();
|
|||
|
|
let anyResults = false;
|
|||
|
|
let visibleCount = 0;
|
|||
|
|
|
|||
|
|
// Process all content items
|
|||
|
|
document.querySelectorAll(contentSelector).forEach((item) => {
|
|||
|
|
// Get searchable attributes
|
|||
|
|
const name = (item.getAttribute(config.nameAttribute) || '').toLowerCase();
|
|||
|
|
const tags = (item.getAttribute(config.tagsAttribute) || '').toLowerCase();
|
|||
|
|
const category = (item.getAttribute(config.categoryAttribute) || '').toLowerCase();
|
|||
|
|
|
|||
|
|
// Check additional attributes if specified
|
|||
|
|
const additionalMatches = config.additionalAttributes.some(attr => {
|
|||
|
|
const value = (item.getAttribute(attr) || '').toLowerCase();
|
|||
|
|
return value.includes(query);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const isMatch = query === '' ||
|
|||
|
|
name.includes(query) ||
|
|||
|
|
tags.includes(query) ||
|
|||
|
|
category.includes(query) ||
|
|||
|
|
additionalMatches;
|
|||
|
|
|
|||
|
|
if (isMatch) {
|
|||
|
|
item.style.display = '';
|
|||
|
|
anyResults = true;
|
|||
|
|
visibleCount++;
|
|||
|
|
} else {
|
|||
|
|
item.style.display = 'none';
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Update category visibility for homelab page
|
|||
|
|
this.updateCategoryVisibility(query);
|
|||
|
|
|
|||
|
|
// Update parent containers if needed
|
|||
|
|
this.updateContainerVisibility(query);
|
|||
|
|
this.updateResultsStatus(query, anyResults, visibleCount);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
updateCategoryVisibility(query) {
|
|||
|
|
// Only proceed if we have category sections (homelab page)
|
|||
|
|
const categorySections = document.querySelectorAll('.category-section');
|
|||
|
|
if (categorySections.length === 0) return;
|
|||
|
|
|
|||
|
|
// For each category section, check if it has any visible app cards
|
|||
|
|
categorySections.forEach((categorySection) => {
|
|||
|
|
const categoryId = categorySection.getAttribute('data-category');
|
|||
|
|
const appCards = categorySection.querySelectorAll('.app-card');
|
|||
|
|
|
|||
|
|
// Count visible app cards in this category
|
|||
|
|
const visibleApps = Array.from(appCards).filter(card =>
|
|||
|
|
card.style.display !== 'none'
|
|||
|
|
).length;
|
|||
|
|
|
|||
|
|
// If no visible apps and we're searching, hide the category
|
|||
|
|
if (query !== '' && visibleApps === 0) {
|
|||
|
|
categorySection.style.display = 'none';
|
|||
|
|
} else {
|
|||
|
|
categorySection.style.display = '';
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
updateContainerVisibility(query) {
|
|||
|
|
// If there are container elements that should be hidden when empty
|
|||
|
|
const containers = document.querySelectorAll('.content-container');
|
|||
|
|
if (containers.length > 0) {
|
|||
|
|
containers.forEach((container) => {
|
|||
|
|
const hasVisibleItems = Array.from(
|
|||
|
|
container.querySelectorAll(contentSelector)
|
|||
|
|
).some((item) => item.style.display !== 'none');
|
|||
|
|
|
|||
|
|
if (query === '' || hasVisibleItems) {
|
|||
|
|
container.style.display = '';
|
|||
|
|
} else {
|
|||
|
|
container.style.display = 'none';
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
updateResultsStatus(query, anyResults, count) {
|
|||
|
|
// Update results status
|
|||
|
|
this.hasResults = query === '' || anyResults;
|
|||
|
|
this.visibleCount = count;
|
|||
|
|
|
|||
|
|
// Update screen reader status
|
|||
|
|
const statusEl = document.getElementById('search-status');
|
|||
|
|
if (statusEl) {
|
|||
|
|
if (query === '') {
|
|||
|
|
statusEl.textContent = config.allItemsMessage;
|
|||
|
|
this.visibleCount = document.querySelectorAll(contentSelector).length;
|
|||
|
|
} else if (this.hasResults) {
|
|||
|
|
statusEl.textContent = config.resultCountMessage(count);
|
|||
|
|
} else {
|
|||
|
|
statusEl.textContent = config.noResultsMessage;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Register Alpine.js data components when Alpine is loaded
|
|||
|
|
document.addEventListener('alpine:init', () => {
|
|||
|
|
// Homelab search
|
|||
|
|
window.Alpine.data('searchServices', () => {
|
|||
|
|
const baseSearch = initializeSearch('.app-card', {
|
|||
|
|
nameAttribute: 'data-app-name',
|
|||
|
|
tagsAttribute: 'data-app-tags',
|
|||
|
|
categoryAttribute: 'data-app-category',
|
|||
|
|
noResultsMessage: 'No services found',
|
|||
|
|
allItemsMessage: 'Showing all services',
|
|||
|
|
resultCountMessage: (count) => `Found ${count} services`,
|
|||
|
|
itemLabel: 'services'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Add icon size slider functionality
|
|||
|
|
return {
|
|||
|
|
...baseSearch,
|
|||
|
|
iconSizeValue: 2, // Slider value: 1=small, 2=medium, 3=large
|
|||
|
|
iconSize: 'medium', // small, medium, large
|
|||
|
|
viewMode: 'grid', // grid or list
|
|||
|
|
displayMode: 'both', // both, image, or name
|
|||
|
|
debounceTimeout: null, // For debouncing slider changes
|
|||
|
|
|
|||
|
|
init() {
|
|||
|
|
baseSearch.init.call(this);
|
|||
|
|
|
|||
|
|
// Apply initial icon size, view mode, and display mode
|
|||
|
|
this.applyIconSize();
|
|||
|
|
this.applyViewMode();
|
|||
|
|
this.applyDisplayMode();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// Icon size methods
|
|||
|
|
setIconSize(size) {
|
|||
|
|
if (typeof size === 'string') {
|
|||
|
|
// Handle legacy string values (small, medium, large)
|
|||
|
|
this.iconSize = size;
|
|||
|
|
this.iconSizeValue = size === 'small' ? 1 : size === 'medium' ? 2 : 3;
|
|||
|
|
} else {
|
|||
|
|
// Handle slider numeric values
|
|||
|
|
this.iconSizeValue = parseFloat(size);
|
|||
|
|
|
|||
|
|
// Map slider value to size name
|
|||
|
|
if (this.iconSizeValue <= 1.33) {
|
|||
|
|
this.iconSize = 'small';
|
|||
|
|
} else if (this.iconSizeValue <= 2.33) {
|
|||
|
|
this.iconSize = 'medium';
|
|||
|
|
} else {
|
|||
|
|
this.iconSize = 'large';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.applyIconSize();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// Handle slider input with debounce
|
|||
|
|
handleSliderChange(event) {
|
|||
|
|
const value = event.target.value;
|
|||
|
|
|
|||
|
|
// Clear any existing timeout
|
|||
|
|
if (this.debounceTimeout) {
|
|||
|
|
clearTimeout(this.debounceTimeout);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Set a new timeout
|
|||
|
|
this.debounceTimeout = setTimeout(() => {
|
|||
|
|
this.setIconSize(value);
|
|||
|
|
}, 50); // 50ms debounce
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
applyIconSize() {
|
|||
|
|
const appList = document.getElementById('app-list');
|
|||
|
|
if (!appList) return;
|
|||
|
|
|
|||
|
|
// Remove existing size classes
|
|||
|
|
appList.classList.remove('icon-size-small', 'icon-size-medium', 'icon-size-large');
|
|||
|
|
|
|||
|
|
// Add the new size class
|
|||
|
|
appList.classList.add(`icon-size-${this.iconSize}`);
|
|||
|
|
|
|||
|
|
// Apply custom CSS variable for fine-grained control
|
|||
|
|
appList.style.setProperty('--icon-scale', this.iconSizeValue);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// View mode methods
|
|||
|
|
toggleViewMode() {
|
|||
|
|
this.viewMode = this.viewMode === 'grid' ? 'list' : 'grid';
|
|||
|
|
this.applyViewMode();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
setViewMode(mode) {
|
|||
|
|
this.viewMode = mode;
|
|||
|
|
this.applyViewMode();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
applyViewMode() {
|
|||
|
|
const appList = document.getElementById('app-list');
|
|||
|
|
if (!appList) return;
|
|||
|
|
|
|||
|
|
// Remove existing view mode classes
|
|||
|
|
appList.classList.remove('view-mode-grid', 'view-mode-list');
|
|||
|
|
|
|||
|
|
// Add the new view mode class
|
|||
|
|
appList.classList.add(`view-mode-${this.viewMode}`);
|
|||
|
|
|
|||
|
|
// Update all category sections
|
|||
|
|
document.querySelectorAll('.category-section').forEach(section => {
|
|||
|
|
const gridContainer = section.querySelector('.grid');
|
|||
|
|
if (gridContainer) {
|
|||
|
|
// Update grid classes based on view mode
|
|||
|
|
if (this.viewMode === 'grid') {
|
|||
|
|
gridContainer.classList.remove('grid-cols-1');
|
|||
|
|
gridContainer.classList.add('grid-cols-2', 'sm:grid-cols-3', 'lg:grid-cols-4');
|
|||
|
|
} else {
|
|||
|
|
gridContainer.classList.remove('grid-cols-2', 'sm:grid-cols-3', 'lg:grid-cols-4');
|
|||
|
|
gridContainer.classList.add('grid-cols-1');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// Display mode methods
|
|||
|
|
setDisplayMode(mode) {
|
|||
|
|
this.displayMode = mode;
|
|||
|
|
this.applyDisplayMode();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
applyDisplayMode() {
|
|||
|
|
const appList = document.getElementById('app-list');
|
|||
|
|
if (!appList) return;
|
|||
|
|
|
|||
|
|
// Remove existing display mode classes
|
|||
|
|
appList.classList.remove('display-both', 'display-image-only', 'display-name-only');
|
|||
|
|
|
|||
|
|
// Add the new display mode class
|
|||
|
|
if (this.displayMode === 'image') {
|
|||
|
|
appList.classList.add('display-image-only');
|
|||
|
|
} else if (this.displayMode === 'name') {
|
|||
|
|
appList.classList.add('display-name-only');
|
|||
|
|
} else {
|
|||
|
|
appList.classList.add('display-both');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Update all category sections
|
|||
|
|
document.querySelectorAll('.category-section').forEach(section => {
|
|||
|
|
const gridContainer = section.querySelector('.grid');
|
|||
|
|
if (gridContainer) {
|
|||
|
|
// Update grid classes based on view mode
|
|||
|
|
if (this.viewMode === 'grid') {
|
|||
|
|
gridContainer.classList.remove('grid-cols-1');
|
|||
|
|
gridContainer.classList.add('grid-cols-2', 'sm:grid-cols-3', 'lg:grid-cols-4');
|
|||
|
|
} else {
|
|||
|
|
gridContainer.classList.remove('grid-cols-2', 'sm:grid-cols-3', 'lg:grid-cols-4');
|
|||
|
|
gridContainer.classList.add('grid-cols-1');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Blog search
|
|||
|
|
window.Alpine.data('searchArticles', () => {
|
|||
|
|
return initializeSearch('.article-item', {
|
|||
|
|
nameAttribute: 'data-title',
|
|||
|
|
tagsAttribute: 'data-tags',
|
|||
|
|
additionalAttributes: ['data-description'],
|
|||
|
|
noResultsMessage: 'No articles found',
|
|||
|
|
allItemsMessage: 'Showing all articles',
|
|||
|
|
resultCountMessage: (count) => `Found ${count} articles`,
|
|||
|
|
itemLabel: 'articles'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Projects search
|
|||
|
|
window.Alpine.data('searchProjects', () => {
|
|||
|
|
return initializeSearch('.project-item', {
|
|||
|
|
nameAttribute: 'data-title',
|
|||
|
|
tagsAttribute: 'data-tags',
|
|||
|
|
additionalAttributes: ['data-description', 'data-github', 'data-live'],
|
|||
|
|
noResultsMessage: 'No projects found',
|
|||
|
|
allItemsMessage: 'Showing all projects',
|
|||
|
|
resultCountMessage: (count) => `Found ${count} projects`,
|
|||
|
|
itemLabel: 'projects'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
</script> <title>This Website • Justin Deal</title> <meta name="description" content="My personal blog, portfolio, and homelab dashboard built with Astro, TypeScript, TailwindCSS, and Alpine.js featuring smart loading, advanced search, and accessibility features."> <meta property="og:title" content="This Website • Justin Deal"> <meta property="og:description" content="My personal blog, portfolio, and homelab dashboard built with Astro, TypeScript, TailwindCSS, and Alpine.js featuring smart loading, advanced search, and..."> <meta property="og:image" content="https://justin.deal/pixel_avatar.png"> <meta property="og:url" content="/projects/this-site"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="This Website • Justin Deal"> <meta name="twitter:description" content="My personal blog, portfolio, and homelab dashboard built with Astro, TypeScript, TailwindCSS, and Alpine.js featuring smart loading, advanced search, and..."> <meta name="twitter:image" content="https://justin.deal/pixel_avatar.png"> <meta http-equiv="content-language" content="en"> <meta name="language" content="English"> <link rel="canonical" href="https://justin.deal/projects/this-site"> <link rel="stylesheet" href="/_astro/jellyfin-at-home.z5IOlzDh.css"></head> <body class="zag-bg zag-text zag-transition font-mono"> <!-- Loading overlay for long loading times --> <div class="loading-overlay fixed inset-0 flex flex-col items-center justify-center z-50 bg-opacity-90 zag-bg " role="alert" aria-live="polite" data-astro-cid-veun55td> <div class="loading-content text-center p-8 rounded-lg" data-astro-cid-veun55td> <!-- Enhanced loading indicator --> <div class="mb-6 flex justify-center" data-astro-cid-veun55td> <div class="loading-dots w-12 h-12" style="--dots-color:var(--color-zag-accent-dark)" data-astro-cid-ypbmo55r><div class="dot" data-astro-cid-ypbmo55r></div><div class="dot" data-astro-cid-ypbmo55r></div><div class="dot" data-astro-cid-ypbmo55r></div></div> </div> <!-- Messages with animation --> <div class="messages-container" data-astro-cid-veun55td> <p class="text-xl font-semibold mb-2 zag-text message-animate" data-astro-cid-veun55td>This is taking longer than expected...</p> <p class="text-base zag-text-muted message-animate-delay" data-astro-cid-veun55td>Still working on loading your content</p> </div> </div> </div> <script type="module">class e{overlay=null;timeoutId=null;longLoadingTimeoutId=null;constructor(){this.overlay=document.querySelector(".loading-overlay"),this.setupNavigationListeners()}setupNavigationListeners(){"navigation"in window?(window.navigation.addEventListener("navigate",i=>{new URL(i.destination.url).origin===window.location.origin&&this.showLoading()}),window.navigation.addEventListener("navigatesuccess",()=>{this.hideLoading()}),window.navigation.addEventListener("navigateerror",()=>{this.hideLoading()})):(window.addEventListener("beforeunload",()=>{this.showLoading()}),document.addEventListener("astro:page-load",()=>{this.hideLoading()})),document.addEventListener("astro:before-swap",()=>{this.showLoading()}),document.addEventListener("astro:after-swap",()=>{this.hideLoading()})}showLoading(){this.timeoutId&&(clearTimeout(this.timeoutId),this.timeoutId=null),this.longLoadingTimeoutId&&(clearTimeout(this.longLoadingTimeoutId),this.longLoadingTimeoutId=null);const i=this.getConnectionBasedDelay();this.timeoutId=setTimeout(()=>{document.querySelectorAll("[x-data]").forEach(t=>{t.__x&&typeof t.__x.$data.loading<"u"&&(t.__x.$data.loading=!0)})},i),this.longLoadingTimeoutId=setTimeout(()=>{this.overlay&&this.overlay.classList.add("visible")},5e3)}hideLoading(){this.timeoutId&&(clearTimeout(this.timeoutId),this.timeoutId=null),this.longLoadingTimeoutId&&(clearTimeout(this.longLoadingTimeoutId),this.longLoadingTimeoutId=null),this.overlay&&this.overlay.classList.remove("visible"),setTimeout(()=>{document.querySelectorAll("[x-data]").forEach(i=>{i.__x&&typeof i.__x.$data.loading<"u"&&(i.__x.$data.loading=!1)})},100)}getConnectionBasedDelay(){const i=navigator.connection||navigat
|
|||
|
|
Source
|
|||
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 512 512"> <path class="zag-fill zag-transition" fill-rule="evenodd" d="M362.666 149.333V320H320l-.001-97.831l-154.51 154.51l-30.169-30.17L289.829 192h-97.83v-42.666z"></path> </svg> </a> </div> </div> <div class="w-full font-mono prose prose-headings:font-mono prose-img:rounded-none prose-p:text-[var(--color-zag-dark)] prose-p:dark:text-[var(--color-zag-light)] prose-a:underline-offset-4 prose-h1:text-2xl prose-a:text-[var(--color-zag-dark)] dark:prose-a:text-[var(--color-zag-light)] prose-headings:text-[var(--color-zag-dark)] prose-headings:dark:text-[var(--color-zag-light)] prose-p:text-justify prose-code:text-[var(--color-zag-dark)] dark:prose-code:text-[var(--color-zag-light)] prose-h2:text-2xl prose-h3:text-xl prose-h4:text-lg prose-h5:text-base prose-h6:text-sm prose-strong:text-[var(--color-zag-dark)] dark:prose-strong:text-[var(--color-zag-light)] prose-li:text-[var(--color-zag-dark)] dark:prose-li:text-[var(--color-zag-light)] prose-ul:marker:text-[var(--color-zag-dark)] prose-ul:dark:marker:text-[var(--color-zag-light)] prose-ol:marker:text-[var(--color-zag-dark)] prose-ol:dark:marker:text-[var(--color-zag-light)] prose-a:offset-[var(--zag-offset)] prose-a:focus:outline-2 prose-a:focus:outline-offset-2 prose-a:focus:outline-zag-dark prose-a:dark:focus:outline-zag-light"> <h2 id="the-details">The Details</h2>
|
|||
|
|
<p>This website serves as my personal digital space, combining a blog, project portfolio, and homelab dashboard in one cohesive experience. Built on Astro for performance and flexibility, it leverages TypeScript for type safety, TailwindCSS for styling, and Alpine.js for interactive components.</p>
|
|||
|
|
<p>The architecture follows a component-based approach with a focus on reusability and maintainability. The site features a custom Gruvbox-inspired theme system that supports both dark and light modes while maintaining accessibility standards. The responsive design ensures a seamless experience across all device sizes.</p>
|
|||
|
|
<h2 id="the-features">The Features</h2>
|
|||
|
|
<h3 id="content--navigation">Content & Navigation</h3>
|
|||
|
|
<ul>
|
|||
|
|
<li><strong>Multi-purpose platform</strong>: Blog, portfolio, and homelab dashboard integration</li>
|
|||
|
|
<li><strong>Dark & light mode</strong> with smooth transitions and flash prevention</li>
|
|||
|
|
<li><strong>Gruvbox-inspired color scheme</strong> with customizable theme variables</li>
|
|||
|
|
<li><strong>Fully responsive design</strong> optimized for all screen sizes</li>
|
|||
|
|
</ul>
|
|||
|
|
<h3 id="performance--user-experience">Performance & User Experience</h3>
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<p><strong>Smart loading system</strong>:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>Connection-aware loading states that adapt to network speed</li>
|
|||
|
|
<li>Skeleton loaders that match content layout during loading</li>
|
|||
|
|
<li>Extended loading fallback UI for slow connections</li>
|
|||
|
|
<li>Navigation API integration for accurate loading states</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p><strong>Advanced search functionality</strong>:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>Real-time content filtering across all sections</li>
|
|||
|
|
<li>Keyboard navigation with arrow keys and shortcuts</li>
|
|||
|
|
<li>Category-aware filtering for structured content</li>
|
|||
|
|
<li>Accessible search results with screen reader support</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<h3 id="technical-implementation">Technical Implementation</h3>
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<p><strong>Component architecture</strong>:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>Reusable UI components with TypeScript interfaces</li>
|
|||
|
|
<li>Consistent styling patterns using CSS custom properties</li>
|
|||
|
|
<li>Modular structure for easy maintenance and extension</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p><strong>Accessibility features</strong>:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>ARIA attributes for screen reader compatibility</li>
|
|||
|
|
<li>Keyboard navigation throughout the site</li>
|
|||
|
|
<li>Reduced motion support for animations</li>
|
|||
|
|
<li>High contrast theme options</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p><strong>Performance optimizations</strong>:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>Optimized page transitions with minimal flicker</li>
|
|||
|
|
<li>Network-aware resource loading</li>
|
|||
|
|
<li>Efficient DOM updates using Alpine.js</li>
|
|||
|
|
<li>Astro’s static site generation for fast initial loads</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<h3 id="homelab-integration">Homelab Integration</h3>
|
|||
|
|
<ul>
|
|||
|
|
<li><strong>Self-hosted services dashboard</strong> with categorized listings</li>
|
|||
|
|
<li><strong>Service search and filtering</strong> by name, category, and tags</li>
|
|||
|
|
<li><strong>Visual indicators</strong> for service status and information</li>
|
|||
|
|
</ul>
|
|||
|
|
<h2 id="the-technology-stack">The Technology Stack</h2>
|
|||
|
|
<ul>
|
|||
|
|
<li><strong>Framework</strong>: Astro 5.6</li>
|
|||
|
|
<li><strong>Languages</strong>: TypeScript, JavaScript</li>
|
|||
|
|
<li><strong>Styling</strong>: TailwindCSS 4.1, Custom CSS Variables</li>
|
|||
|
|
<li><strong>Interactivity</strong>: Alpine.js</li>
|
|||
|
|
<li><strong>Build Tools</strong>: Vite, npm/pnpm</li>
|
|||
|
|
<li><strong>Deployment</strong>: Self-hosted</li>
|
|||
|
|
</ul>
|
|||
|
|
<h2 id="the-future">The Future</h2>
|
|||
|
|
<p>Future enhancements will include expanded blog functionality, integration with more homelab services, and additional interactive features. The component library will continue to grow with new UI elements and patterns.</p> </div> </section> </main> <footer class="mt-16 mb-8"> <section class="p-4 max-w-2xl mx-auto mb-4"> <div class="flex flex-col gap-6"> <!-- Social icons row - now above the links --> <div class="flex justify-center gap-4"> <a href="https://github.com/justindeal" class="zag-link zag-interactive font-medium flex items-center" target="_self" aria-label="GitHub Profile"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"> <path class="zag-fill zag-transition" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"></path> </svg> </a> <a href="https://code.justin.deal/dealjus" class="zag-link zag-interactive font-medium flex items-center" target="_self" aria-label="Gitea Profile"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"> <path class="zag-fill zag-transition" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"></path> </svg> </a> <a href="https://www.linkedin.com/in/justin-deal/" class="zag-link zag-interactive font-medium flex items-center" target="_self" aria-label="LinkedIn Profile"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"> <path class="zag-fill zag-transition" fill="currentColor" d="M19 0h-14c-2.76 0-5 2.24-5 5v14c0 2.76 2.24 5 5 5h14c2.76 0 5-2.24 5-5v-14c0-2.76-2.24-5-5-5zm-11.12 19h-3.08v-9h3.08v9zm-1.54-10.29c-.99 0-1.79-.8-1.79-1.79s.8-1.79 1.79-1.79 1.79.8 1.79 1.79-.8 1.79-1.79 1.79zm13.16 10.29h-3.08v-4.89c0-1.16-.02-2.64-1.61-2.64s-1.86 1.26-1.86 2.57v4.96h-3.08v-9h2.96v1.23h.04c.41-.78 1.4-1.6 2.88-1.6 3.08 0 3.65 2.03 3.65 4.66v4.71z"></path> </svg> </a> </div> <!-- Navigation links row - now below the icons --> <div class="zag-border-b zag-transition pb-4"> <ul class="flex flex-wrap justify-center gap-4 sm:gap-6"> <li> <a href="/" class="zag-link zag-interactive font-medium flex items-center" target="_self"> home </a> </li><li> <a href="/about" class="zag-link zag-interactive font-medium flex items-center" target="_self"> about </a> </li><li> <a href="/blog" class="zag-link zag-interactive font-medium flex items-center" target="_self"> blog </a> </li><li> <a href="/projects" class="zag-link zag-interactive font-medium flex items-center" target="_self"> projects </a> </li><li> <a href="/homelab" class="zag-link zag-interactive font-medium flex items-center" target="_self"> homelab </a> </li><li> <a href="https://code.justin.deal" class="zag-link zag-interactive font-medium flex items-center" target="_self"> code </a> </li> </ul> </div> </div> </section> <p class="zag-text zag-transition text-center text-sm font-medium">
|
|||
|
|
© 2025 Justin Deal. All rights reserved.
|
|||
|
|
</p> </footer> </body></html>
|