248 lines
6.5 KiB
Plaintext
248 lines
6.5 KiB
Plaintext
---
|
|
// src/pages/projects/[slug].astro
|
|
import { getCollection } from 'astro:content';
|
|
import BaseLayout from '../../layouts/BaseLayout.astro';
|
|
|
|
// Required getStaticPaths function for dynamic routes
|
|
export async function getStaticPaths() {
|
|
try {
|
|
const projectEntries = await getCollection('projects', ({ data }) => {
|
|
// Filter out drafts in production
|
|
return import.meta.env.PROD ? !data.draft : true;
|
|
});
|
|
|
|
return projectEntries.map(entry => ({
|
|
params: { slug: entry.slug },
|
|
props: { entry },
|
|
}));
|
|
} catch (error) {
|
|
console.error('Error fetching projects:', error);
|
|
// Return empty array if collection doesn't exist or is empty
|
|
return [];
|
|
}
|
|
}
|
|
|
|
// Get the project from props
|
|
const { entry } = Astro.props;
|
|
|
|
// Format date helper
|
|
const formatDate = (date) => {
|
|
if (!date) return '';
|
|
const d = new Date(date);
|
|
return d.toLocaleDateString('en-US', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
});
|
|
};
|
|
|
|
// Generate datetime attribute safely
|
|
const getISODate = (date) => {
|
|
if (!date) return '';
|
|
// Handle various date formats
|
|
try {
|
|
// If already a Date object
|
|
if (date instanceof Date) {
|
|
return date.toISOString();
|
|
}
|
|
// If it's a string or number, convert to Date
|
|
return new Date(date).toISOString();
|
|
} catch (error) {
|
|
// Fallback if date is invalid
|
|
console.error('Invalid date format:', date);
|
|
return '';
|
|
}
|
|
};
|
|
|
|
// Get the Content component for rendering markdown
|
|
const { Content } = await entry.render();
|
|
---
|
|
|
|
<BaseLayout title={entry.data.title} description={entry.data.description || ''}>
|
|
<article class="container project-detail">
|
|
<header class="project-header">
|
|
<h1>{entry.data.title}</h1>
|
|
{entry.data.pubDate && <time datetime={getISODate(entry.data.pubDate)}>{formatDate(entry.data.pubDate)}</time>}
|
|
{entry.data.updatedDate && <div class="updated-date">Updated: {formatDate(entry.data.updatedDate)}</div>}
|
|
</header>
|
|
|
|
<div class="project-content">
|
|
<div class="project-body">
|
|
<Content />
|
|
</div>
|
|
|
|
<aside class="project-sidebar">
|
|
{entry.data.heroImage && (
|
|
<div class="project-image">
|
|
<img src={entry.data.heroImage} alt={entry.data.title} />
|
|
</div>
|
|
)}
|
|
|
|
{entry.data.technologies && entry.data.technologies.length > 0 && (
|
|
<div class="tech-section">
|
|
<h3>Technologies</h3>
|
|
<div class="technologies">
|
|
{entry.data.technologies.map(tech => (
|
|
<span class="technology">{tech}</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div class="project-links">
|
|
{entry.data.github && (
|
|
<a href={entry.data.github} target="_blank" rel="noopener noreferrer" class="project-link github">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
|
|
</svg>
|
|
GitHub Repository
|
|
</a>
|
|
)}
|
|
|
|
{entry.data.live && (
|
|
<a href={entry.data.live} target="_blank" rel="noopener noreferrer" class="project-link live">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
|
|
<polyline points="15 3 21 3 21 9"></polyline>
|
|
<line x1="10" y1="14" x2="21" y2="3"></line>
|
|
</svg>
|
|
Live Demo
|
|
</a>
|
|
)}
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</article>
|
|
</BaseLayout>
|
|
|
|
<style>
|
|
.container {
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
padding: 0 var(--container-padding, 1.5rem);
|
|
}
|
|
|
|
.project-detail {
|
|
padding: 2rem 0;
|
|
}
|
|
|
|
.project-header {
|
|
margin-bottom: 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.project-header h1 {
|
|
font-size: var(--font-size-3xl, 1.875rem);
|
|
margin-bottom: 0.5rem;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.project-header time, .updated-date {
|
|
color: var(--text-tertiary);
|
|
font-size: var(--font-size-sm, 0.875rem);
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.updated-date {
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.project-content {
|
|
display: grid;
|
|
grid-template-columns: 3fr 1fr;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.project-body {
|
|
background: var(--card-bg);
|
|
border-radius: 12px;
|
|
padding: 2rem;
|
|
border: 1px solid var(--border-primary);
|
|
}
|
|
|
|
.project-sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.project-image {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.project-image img {
|
|
width: 100%;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border-primary);
|
|
}
|
|
|
|
.tech-section, .project-links {
|
|
background: var(--card-bg);
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
border: 1px solid var(--border-primary);
|
|
}
|
|
|
|
.tech-section h3 {
|
|
font-size: var(--font-size-lg, 1.125rem);
|
|
margin-bottom: 1rem;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.technologies {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.technology {
|
|
display: inline-block;
|
|
padding: 0.25rem 0.75rem;
|
|
background: rgba(56, 189, 248, 0.1);
|
|
border-radius: 20px;
|
|
color: var(--accent-primary);
|
|
font-size: var(--font-size-xs, 0.75rem);
|
|
}
|
|
|
|
.project-links {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.project-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.75rem 1rem;
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.github {
|
|
background: #24292e;
|
|
color: white;
|
|
}
|
|
|
|
.live {
|
|
background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
|
|
color: white;
|
|
}
|
|
|
|
.project-link:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.project-content {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.project-header h1 {
|
|
font-size: var(--font-size-2xl, 1.5rem);
|
|
}
|
|
}
|
|
</style> |