463 lines
14 KiB
Plaintext
463 lines
14 KiB
Plaintext
---
|
|
// src/pages/resources/docker-compose.astro
|
|
import BaseLayout from '../../layouts/BaseLayout.astro';
|
|
import Header from '../../components/Header.astro';
|
|
import Footer from '../../components/Footer.astro';
|
|
import '../../styles/card-animations.css'; // Assuming cards might be used
|
|
|
|
const title = "Docker Compose Resources | ArgoBox";
|
|
const description = "A collection of Docker Compose files for various services and applications, optimized for home lab environments.";
|
|
|
|
// Placeholder data - replace with actual data
|
|
const composeFiles = [
|
|
{
|
|
title: "Media Server Stack",
|
|
description: "Compose file for Plex, Sonarr, Radarr, and Prowlarr.",
|
|
filename: "media-stack.yml",
|
|
code: `# docker-compose.yml for Media Stack
|
|
version: "3.8"
|
|
services:
|
|
plex:
|
|
image: lscr.io/linuxserver/plex:latest
|
|
container_name: plex
|
|
sonarr:
|
|
image: lscr.io/linuxserver/sonarr:latest
|
|
container_name: sonarr
|
|
radarr:
|
|
image: lscr.io/linuxserver/radarr:latest
|
|
container_name: radarr
|
|
prowlarr:
|
|
image: lscr.io/linuxserver/prowlarr:develop
|
|
container_name: prowlarr`,
|
|
tags: ["docker-compose", "media-server", "plex", "arr-stack"],
|
|
lastUpdated: "April 20, 2025",
|
|
docLink: "#"
|
|
},
|
|
// Add more compose file objects here
|
|
];
|
|
|
|
const filters = ["all", "media", "networking", "utilities"]; // Example filters
|
|
---
|
|
|
|
<BaseLayout {title} {description}>
|
|
<Header slot="header" />
|
|
|
|
<div class="container">
|
|
<div class="page-header">
|
|
<h1>Docker Compose Resources</h1>
|
|
<div class="header-accent"></div>
|
|
</div>
|
|
|
|
<div class="resources-container">
|
|
<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 compose files..." class="search-input" id="compose-search-input">
|
|
</div>
|
|
|
|
<div class="resource-filters">
|
|
{filters.map(filter => (
|
|
<button class={`filter-button ${filter === 'all' ? 'active' : ''}`} data-filter={filter}>
|
|
{filter.charAt(0).toUpperCase() + filter.slice(1)}
|
|
</button>
|
|
))}
|
|
{/* <button class="filter-button active" data-filter="all">All</button> */} {/* Remove Placeholder */}
|
|
</div>
|
|
|
|
<h2 class="section-title">Docker Compose Files</h2>
|
|
<p class="section-description">
|
|
Ready-to-use Docker Compose templates for running various services and applications. Includes networking, volume management, and resource optimization for home labs.
|
|
</p>
|
|
|
|
<div class="resources-grid">
|
|
{composeFiles.length > 0 ? composeFiles.map(compose => (
|
|
<div class="resource-card" data-category={compose.tags.includes('media-server') ? 'media' : 'utilities'}> {/* Example category logic */}
|
|
<div class="resource-header">
|
|
<div class="resource-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
|
|
<div>
|
|
<h3 class="resource-title">{compose.title}</h3>
|
|
{/* <p class="resource-description">{compose.description}</p> */}
|
|
</div>
|
|
</div>
|
|
<div class="resource-body">
|
|
<p class="resource-description">{compose.description}</p>
|
|
<div class="code-preview">
|
|
<div class="code-header">
|
|
<span class="filename">{compose.filename}</span>
|
|
<div class="code-actions">
|
|
<button class="code-action copy-button">Copy</button>
|
|
</div>
|
|
</div>
|
|
<pre class="code-block"><code>{compose.code}</code></pre>
|
|
</div>
|
|
<div class="tags">
|
|
{compose.tags.map(tag => <span class="tag">{tag}</span>)}
|
|
</div>
|
|
</div>
|
|
<div class="resource-footer">
|
|
<span class="last-updated">Last updated: {compose.lastUpdated}</span>
|
|
<a href={compose.docLink} class="resource-link" target="_blank" rel="noopener noreferrer">
|
|
View Documentation
|
|
<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>
|
|
</div>
|
|
)) : (
|
|
<p>Docker Compose resources coming soon...</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Footer slot="footer" />
|
|
</BaseLayout>
|
|
|
|
<style is:global>
|
|
/* Styles specific to this page, if any, can go here */
|
|
/* Most styling should come from global.css, theme.css, and card-animations.css */
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 1.5rem;
|
|
}
|
|
|
|
.page-header {
|
|
margin: 3rem 0 4rem;
|
|
position: relative;
|
|
}
|
|
|
|
h1 {
|
|
font-size: var(--font-size-4xl);
|
|
background: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary));
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
display: inline-block;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.header-accent {
|
|
width: 80px;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary));
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.resources-container {
|
|
padding: 1rem 0 4rem;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.section-title {
|
|
font-size: var(--font-size-2xl);
|
|
margin-bottom: 1rem;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.section-description {
|
|
font-size: var(--font-size-lg);
|
|
color: var(--text-secondary);
|
|
margin-bottom: 2rem;
|
|
max-width: 800px;
|
|
}
|
|
|
|
.resources-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.resource-header {
|
|
padding: 1.25rem;
|
|
border-bottom: 1px solid var(--border-secondary);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.resource-icon {
|
|
color: var(--accent-secondary);
|
|
flex-shrink: 0;
|
|
}
|
|
.resource-icon svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.resource-title {
|
|
font-size: var(--font-size-xl);
|
|
color: var(--text-primary);
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.resource-description {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-secondary);
|
|
margin-top: 0.5rem;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.resource-body {
|
|
padding: 1.25rem;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.code-preview {
|
|
background: var(--bg-code);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
margin-top: 1rem;
|
|
border: 1px solid var(--border-secondary);
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 200px;
|
|
}
|
|
|
|
.code-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.75rem 1rem;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-bottom: 1px solid var(--border-secondary);
|
|
}
|
|
|
|
.filename {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.code-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.code-action {
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-secondary);
|
|
background: rgba(30, 41, 59, 0.5);
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
border: none;
|
|
}
|
|
|
|
.code-action:hover {
|
|
background: rgba(59, 130, 246, 0.2);
|
|
color: var(--accent-secondary);
|
|
}
|
|
|
|
.code-block {
|
|
margin: 0 !important;
|
|
padding: 1rem !important;
|
|
background: transparent !important;
|
|
font-family: var(--font-mono) !important;
|
|
font-size: var(--font-size-sm) !important;
|
|
line-height: 1.6 !important;
|
|
overflow: auto !important;
|
|
color: var(--text-secondary) !important;
|
|
flex-grow: 1;
|
|
max-height: 300px;
|
|
}
|
|
.code-block pre {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.resource-footer {
|
|
padding: 1rem 1.25rem;
|
|
border-top: 1px solid var(--border-secondary);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: auto;
|
|
}
|
|
|
|
.last-updated {
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.resource-link {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--accent-secondary);
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.resource-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.resources-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
h1 { font-size: var(--font-size-3xl); }
|
|
.section-title { font-size: var(--font-size-xl); }
|
|
.section-description { font-size: var(--font-size-base); }
|
|
}
|
|
</style>
|
|
|
|
<script is:inline>
|
|
// Copy button functionality & Filter functionality
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// Copy Button
|
|
document.querySelectorAll('.copy-button').forEach(button => {
|
|
button.addEventListener('click', (event) => {
|
|
const codeBlock = event.target.closest('.code-preview').querySelector('.code-block code');
|
|
if (codeBlock) {
|
|
navigator.clipboard.writeText(codeBlock.textContent || '')
|
|
.then(() => {
|
|
event.target.textContent = 'Copied!';
|
|
setTimeout(() => { event.target.textContent = 'Copy'; }, 2000);
|
|
})
|
|
.catch(err => {
|
|
console.error('Failed to copy text: ', err);
|
|
event.target.textContent = 'Error';
|
|
setTimeout(() => { event.target.textContent = 'Copy'; }, 2000);
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// Filter Functionality
|
|
const filterButtons = document.querySelectorAll('.filter-button');
|
|
const resourceCards = document.querySelectorAll('.resource-card');
|
|
const noResults = document.querySelector('.no-results'); // Assuming you might add this later
|
|
const searchInput = document.getElementById('compose-search-input');
|
|
const filters = ["all", "media", "networking", "utilities"]; // Match filters defined in frontmatter
|
|
|
|
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('.tag')).map(tag => tag.textContent.toLowerCase());
|
|
const cardCategory = card.getAttribute('data-category') || ''; // Get category from data attribute
|
|
|
|
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';
|
|
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();
|
|
});
|
|
});
|
|
|
|
if (searchInput) {
|
|
searchInput.addEventListener('input', filterAndSearch);
|
|
}
|
|
|
|
// Initial filter/search on load
|
|
filterAndSearch();
|
|
});
|
|
</script> |