441 lines
21 KiB
Plaintext
441 lines
21 KiB
Plaintext
---
|
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
|
import Header from '../components/Header.astro';
|
|
import '../styles/card-animations.css';
|
|
import Footer from '../components/Footer.astro';
|
|
---
|
|
<BaseLayout title="Resources - LaForceIT">
|
|
<Header slot="header" />
|
|
|
|
<!-- Main Content from public/resources.html -->
|
|
<main>
|
|
<div class="container">
|
|
<div class="page-header">
|
|
<h1 class="page-title">Resources</h1>
|
|
<p class="page-description">
|
|
A comprehensive collection of technical resources, configuration templates, and guides for infrastructure, containerization, and DevOps automation.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Search & Filters -->
|
|
<div class="resource-search">
|
|
<div class="search-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="11" cy="11" r="8"></circle>
|
|
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
|
</svg>
|
|
</div>
|
|
<input type="text" placeholder="Search resources..." class="search-input" id="resource-search-input">
|
|
</div>
|
|
|
|
<div class="resource-filters">
|
|
<button class="filter-button active" data-filter="all">All Resources</button>
|
|
<button class="filter-button" data-filter="kubernetes">Kubernetes</button>
|
|
<button class="filter-button" data-filter="docker">Docker</button>
|
|
<button class="filter-button" data-filter="config">Configurations</button>
|
|
<button class="filter-button" data-filter="iac">Infrastructure</button>
|
|
<button class="filter-button" data-filter="tutorials">Tutorials</button>
|
|
</div>
|
|
|
|
<!-- Resources Grid -->
|
|
<div class="resources-grid">
|
|
<!-- K8s Configurations -->
|
|
<div class="resource-card" data-category="kubernetes">
|
|
<div class="resource-icon-wrapper">
|
|
<svg class="resource-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M17.8 19.2L16 11l3.5-3.5a2.1 2.1 0 0 0 0-3 2.1 2.1 0 0 0-3 0L13 8l-8.2-1.8a.8.8 0 0 0-.9 1.2l5 8-5 8a.8.8 0 0 0 .9 1.2L13 22.7l2.8-2.9m-2.9-2.9l-4-6.5m7.9 8.7a2 2 0 1 0 2.3-3.2m-6.2-9l4-3.8"></path>
|
|
</svg>
|
|
<div class="resource-icon-particles">
|
|
<div class="resource-icon-particle"></div> <div class="resource-icon-particle"></div> <div class="resource-icon-particle"></div> <div class="resource-icon-particle"></div> <div class="resource-icon-particle"></div>
|
|
</div>
|
|
</div>
|
|
<div class="resource-content">
|
|
<h2 class="resource-title">K8s Configurations</h2>
|
|
<p class="resource-description">Curated collection of production-ready Kubernetes configuration templates for deployments, services, ingress, storage, and more, optimized for home lab environments.</p>
|
|
<a href="/resources/kubernetes" class="resource-link">Explore K8s Configurations <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a>
|
|
<div class="resource-tags"><span class="resource-tag">Kubernetes</span><span class="resource-tag">YAML</span><span class="resource-tag">Configurations</span></div>
|
|
</div>
|
|
<div class="shine-effect"></div>
|
|
</div>
|
|
|
|
<!-- Docker Compose -->
|
|
<div class="resource-card" data-category="docker">
|
|
<div class="resource-icon-wrapper">
|
|
<svg class="resource-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12.5a2.5 2.5 0 0 1-2.5 2.5h-15a2.5 2.5 0 0 1 0-5h15a2.5 2.5 0 0 1 2.5 2.5Z"></path><path d="M5 10V7a1 1 0 0 1 1-1h4.586a1 1 0 0 1 .707.293l1.414 1.414a1 1 0 0 0 .707.293H15a1 1 0 0 1 1 1v1"></path><path d="M5 15v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2"></path></svg>
|
|
<div class="resource-icon-particles"><div class="resource-icon-particle"></div><div class="resource-icon-particle"></div><div class="resource-icon-particle"></div><div class="resource-icon-particle"></div><div class="resource-icon-particle"></div></div>
|
|
</div>
|
|
<div class="resource-content">
|
|
<h2 class="resource-title">Docker Compose</h2>
|
|
<p class="resource-description">Ready-to-use Docker Compose templates for running various services and applications. Includes networking, volume management, and resource optimization for home labs.</p>
|
|
<a href="/resources/docker-compose" class="resource-link">Explore Docker Compose <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a>
|
|
<div class="resource-tags"><span class="resource-tag">Docker</span><span class="resource-tag">Compose</span><span class="resource-tag">Containers</span></div>
|
|
</div>
|
|
<div class="shine-effect"></div>
|
|
</div>
|
|
|
|
<!-- Configuration Files -->
|
|
<div class="resource-card" data-category="config">
|
|
<div class="resource-icon-wrapper">
|
|
<svg class="resource-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><path d="M9 15v-1h6v1"></path><path d="M11 11v6"></path><path d="M9 11h6"></path></svg>
|
|
<div class="resource-icon-particles"><div class="resource-icon-particle"></div><div class="resource-icon-particle"></div><div class="resource-icon-particle"></div><div class="resource-icon-particle"></div><div class="resource-icon-particle"></div></div>
|
|
</div>
|
|
<div class="resource-content">
|
|
<h2 class="resource-title">Configuration Files</h2>
|
|
<p class="resource-description">Essential configuration files for popular services and tools like Nginx, HAProxy, Prometheus, Grafana, and more, optimized for home lab and personal infrastructure.</p>
|
|
<a href="/resources/config-files" class="resource-link">Explore Configuration Files <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a>
|
|
<div class="resource-tags"><span class="resource-tag">Config</span><span class="resource-tag">Services</span><span class="resource-tag">Tools</span></div>
|
|
</div>
|
|
<div class="shine-effect"></div>
|
|
</div>
|
|
|
|
<!-- Infrastructure Code -->
|
|
<div class="resource-card" data-category="iac">
|
|
<div class="resource-icon-wrapper">
|
|
<svg class="resource-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline><line x1="19" y1="12" x2="5" y2="12"></line></svg>
|
|
<div class="resource-icon-particles"><div class="resource-icon-particle"></div><div class="resource-icon-particle"></div><div class="resource-icon-particle"></div><div class="resource-icon-particle"></div><div class="resource-icon-particle"></div></div>
|
|
</div>
|
|
<div class="resource-content">
|
|
<h2 class="resource-title">Infrastructure Code</h2>
|
|
<p class="resource-description">Infrastructure as Code (IaC) templates using Terraform, Ansible, and other tools. Deploy virtualization, networking, storage, and services with automated, repeatable configurations.</p>
|
|
<a href="/resources/iac" class="resource-link">Explore Infrastructure Code <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a>
|
|
<div class="resource-tags"><span class="resource-tag">Terraform</span><span class="resource-tag">Ansible</span><span class="resource-tag">IaC</span></div>
|
|
</div>
|
|
<div class="shine-effect"></div>
|
|
</div>
|
|
|
|
<!-- Tutorials -->
|
|
<div class="resource-card" data-category="tutorials">
|
|
<div class="resource-icon-wrapper">
|
|
<svg class="resource-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg>
|
|
<div class="resource-icon-particles"><div class="resource-icon-particle"></div><div class="resource-icon-particle"></div><div class="resource-icon-particle"></div><div class="resource-icon-particle"></div><div class="resource-icon-particle"></div></div>
|
|
<div class="dots-animation"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>
|
|
</div>
|
|
<div class="resource-content">
|
|
<h2 class="resource-title">Tutorials</h2>
|
|
<p class="resource-description">Step-by-step guides and tutorials for setting up, configuring, and optimizing various infrastructure components. From beginner to advanced topics for home lab enthusiasts.</p>
|
|
<a href="/resources/tutorials" class="resource-link">Explore Tutorials <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a>
|
|
<div class="resource-tags"><span class="resource-tag">Guides</span><span class="resource-tag">Tutorials</span><span class="resource-tag">How-To</span></div>
|
|
</div>
|
|
<div class="shine-effect"></div>
|
|
</div>
|
|
|
|
<!-- Empty State (hidden by default) -->
|
|
<div class="no-results" style="display: none;">
|
|
<div class="no-results-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>
|
|
</div>
|
|
<h3>No matching resources found</h3>
|
|
<p>Try adjusting your search terms or filters to find what you're looking for.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<Footer slot="footer" />
|
|
</BaseLayout>
|
|
|
|
<script>
|
|
// Script from public/resources.html (for filtering/search)
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const filterButtons = document.querySelectorAll('.filter-button');
|
|
const resourceCards = document.querySelectorAll('.resource-card');
|
|
const noResults = document.querySelector('.no-results');
|
|
const searchInput = document.getElementById('resource-search-input');
|
|
|
|
function filterAndSearch() {
|
|
const searchTerm = searchInput ? searchInput.value.toLowerCase().trim() : '';
|
|
const activeFilter = document.querySelector('.filter-button.active')?.getAttribute('data-filter') || 'all';
|
|
let visibleCount = 0;
|
|
|
|
resourceCards.forEach(card => {
|
|
const title = card.querySelector('.resource-title')?.textContent.toLowerCase() || '';
|
|
const description = card.querySelector('.resource-description')?.textContent.toLowerCase() || '';
|
|
const tags = Array.from(card.querySelectorAll('.resource-tag')).map(tag => tag.textContent.toLowerCase());
|
|
const cardCategory = card.getAttribute('data-category');
|
|
|
|
const matchesSearch = searchTerm === '' || title.includes(searchTerm) || description.includes(searchTerm) || tags.some(tag => tag.includes(searchTerm));
|
|
const matchesFilter = activeFilter === 'all' || cardCategory === activeFilter;
|
|
|
|
if (matchesSearch && matchesFilter) {
|
|
card.style.display = 'flex'; // Use flex as cards are flex containers
|
|
visibleCount++;
|
|
} else {
|
|
card.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
if (noResults) {
|
|
noResults.style.display = visibleCount === 0 ? 'block' : 'none';
|
|
}
|
|
}
|
|
|
|
filterButtons.forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
filterButtons.forEach(btn => btn.classList.remove('active'));
|
|
button.classList.add('active');
|
|
filterAndSearch(); // Re-run search when filter changes
|
|
});
|
|
});
|
|
|
|
if (searchInput) {
|
|
searchInput.addEventListener('input', filterAndSearch);
|
|
}
|
|
|
|
// Initial filter/search on load
|
|
filterAndSearch();
|
|
|
|
// Card hover effect enhancement (particle animation)
|
|
resourceCards.forEach(card => {
|
|
card.addEventListener('mouseenter', () => {
|
|
const particles = card.querySelectorAll('.resource-icon-particle');
|
|
particles.forEach(particle => {
|
|
const x = Math.random() * 100;
|
|
const y = Math.random() * 100;
|
|
particle.style.top = `${y}%`;
|
|
particle.style.left = `${x}%`;
|
|
});
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
/* Styles specific to this page, if any, can go here */
|
|
/* Most styling should come from global.css and theme.css */
|
|
|
|
.page-header {
|
|
text-align: center;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 3rem;
|
|
font-weight: 700;
|
|
margin-bottom: 1rem;
|
|
background: linear-gradient(to right, var(--accent-primary), var(--accent-secondary));
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.page-title::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -10px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 100px;
|
|
height: 3px;
|
|
background: linear-gradient(to right, var(--accent-primary), var(--accent-secondary));
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.page-description {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
color: var(--text-secondary);
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
/* Resource Filtering */
|
|
.resource-filters {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 0.75rem;
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
.filter-button {
|
|
padding: 0.5rem 1.25rem;
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border-primary);
|
|
color: var(--text-secondary);
|
|
border-radius: 20px;
|
|
font-size: 0.9rem;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.filter-button:hover {
|
|
background: linear-gradient(90deg, rgba(6, 182, 212, 0.1), rgba(59, 130, 246, 0.1));
|
|
color: var(--text-primary);
|
|
border-color: var(--accent-primary);
|
|
box-shadow: 0 0 10px var(--glow-primary);
|
|
}
|
|
|
|
.filter-button.active {
|
|
background: linear-gradient(90deg, rgba(6, 182, 212, 0.2), rgba(59, 130, 246, 0.2));
|
|
color: var(--accent-primary);
|
|
border-color: var(--accent-primary);
|
|
box-shadow: 0 0 15px var(--glow-primary);
|
|
}
|
|
|
|
/* Search Box */
|
|
.resource-search {
|
|
display: flex;
|
|
margin: 0 auto 2rem;
|
|
max-width: 500px;
|
|
position: relative;
|
|
}
|
|
|
|
.search-input {
|
|
width: 100%;
|
|
padding: 0.75rem 1rem 0.75rem 2.75rem;
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border-primary);
|
|
border-radius: 8px;
|
|
color: var(--text-primary);
|
|
font-size: 1rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.search-input:focus {
|
|
outline: none;
|
|
border-color: var(--accent-primary);
|
|
box-shadow: 0 0 0 3px var(--glow-primary);
|
|
}
|
|
|
|
.search-icon {
|
|
position: absolute;
|
|
left: 1rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
/* Resources Grid */
|
|
.resources-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
gap: 2rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
/* Styles for .resource-card, .resource-icon-wrapper, etc. are now in card-animations.css */
|
|
|
|
.resource-content {
|
|
padding: 1.5rem;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.resource-title {
|
|
font-size: 1.3rem;
|
|
font-weight: 600;
|
|
margin-bottom: 0.75rem;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.resource-description {
|
|
color: var(--text-secondary);
|
|
margin-bottom: 1.5rem;
|
|
flex: 1;
|
|
}
|
|
|
|
.resource-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
color: var(--accent-primary);
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.resource-link::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -2px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 1px;
|
|
background: var(--accent-primary);
|
|
transform: scaleX(0);
|
|
transform-origin: right;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.resource-link:hover {
|
|
color: var(--accent-secondary);
|
|
}
|
|
|
|
.resource-link:hover::after {
|
|
transform: scaleX(1);
|
|
transform-origin: left;
|
|
}
|
|
|
|
.resource-link svg {
|
|
margin-left: 0.5rem;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.resource-link:hover svg {
|
|
transform: translateX(3px);
|
|
}
|
|
|
|
.resource-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
/* .resource-tag styling is now in card-animations.css */
|
|
|
|
|
|
/* Shine effect styling is now in card-animations.css */
|
|
|
|
/* Empty State */
|
|
.no-results {
|
|
text-align: center;
|
|
padding: 3rem;
|
|
color: var(--text-secondary);
|
|
background: var(--bg-tertiary);
|
|
border-radius: 12px;
|
|
border: 1px dashed var(--border-primary);
|
|
margin-top: 2rem;
|
|
display: none; /* Hidden by default */
|
|
}
|
|
|
|
.no-results-icon {
|
|
color: var(--text-tertiary);
|
|
margin-bottom: 1rem;
|
|
}
|
|
.no-results-icon svg {
|
|
width: 64px;
|
|
height: 64px;
|
|
stroke-width: 1;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Hovering dot animation */
|
|
.dots-animation {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
width: 50px;
|
|
height: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background-color: var(--accent-primary);
|
|
animation: dot-bounce 1.4s infinite ease-in-out both;
|
|
}
|
|
|
|
.dot:nth-child(1) { animation-delay: -0.32s; }
|
|
.dot:nth-child(2) { animation-delay: -0.16s; }
|
|
|
|
/* Keyframes are now in card-animations.css */
|
|
|
|
</style> |