kunthawat
2d1be52177
Fixes: 1. media.ts: wrap placeholder generation in try-catch 2. toolbar.ts: check r.ok, display error message in popover
171 lines
3.7 KiB
Plaintext
171 lines
3.7 KiB
Plaintext
---
|
|
import { getEmDashCollection, getSiteSettings } from "emdash";
|
|
import Base from "../layouts/Base.astro";
|
|
import ProjectCard from "../components/ProjectCard.astro";
|
|
|
|
// Fetch settings + the 4 featured projects in parallel. Limiting and
|
|
// sorting in the database avoids loading every project just to slice
|
|
// off the first 4 in JS (a full-table read on sites with lots of work).
|
|
const [settings, { entries: featuredProjects, cacheHint }] = await Promise.all([
|
|
getSiteSettings(),
|
|
getEmDashCollection("projects", {
|
|
orderBy: { published_at: "desc" },
|
|
limit: 4,
|
|
}),
|
|
]);
|
|
|
|
Astro.cache.set(cacheHint);
|
|
---
|
|
|
|
<Base>
|
|
<section class="hero">
|
|
<h1 class="hero-title">{settings?.title || "Studio"}</h1>
|
|
<p class="hero-tagline">{settings?.tagline || "Design & Development"}</p>
|
|
</section>
|
|
|
|
{
|
|
featuredProjects.length > 0 ? (
|
|
<section class="featured">
|
|
<header class="section-header">
|
|
<h2 class="section-title">Selected Work</h2>
|
|
<a href="/work" class="section-link">
|
|
View all projects →
|
|
</a>
|
|
</header>
|
|
<div class="projects-grid">
|
|
{featuredProjects.map((project) => (
|
|
<ProjectCard
|
|
title={project.data.title ?? "Untitled"}
|
|
summary={project.data.summary}
|
|
featuredImage={project.data.featured_image ?? ""}
|
|
href={`/work/${project.id}`}
|
|
client={project.data.client}
|
|
year={project.data.year}
|
|
/>
|
|
))}
|
|
</div>
|
|
</section>
|
|
) : (
|
|
<section class="empty-state">
|
|
<h2>No projects yet</h2>
|
|
<p>Add your first project in the admin panel.</p>
|
|
<a href="/_emdash/admin/content/projects/new" class="btn">
|
|
Add a project
|
|
</a>
|
|
</section>
|
|
)
|
|
}
|
|
</Base>
|
|
|
|
<style>
|
|
.hero {
|
|
max-width: var(--wide-width);
|
|
margin: 0 auto;
|
|
padding: var(--spacing-4xl) var(--spacing-lg);
|
|
text-align: center;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: var(--font-size-4xl);
|
|
font-weight: 500;
|
|
margin-bottom: var(--spacing-md);
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.hero-tagline {
|
|
font-size: var(--font-size-xl);
|
|
color: var(--color-muted);
|
|
font-family: var(--font-serif);
|
|
font-style: italic;
|
|
}
|
|
|
|
.featured {
|
|
max-width: var(--wide-width);
|
|
margin: 0 auto;
|
|
padding: 0 var(--spacing-lg) var(--spacing-4xl);
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
margin-bottom: var(--spacing-2xl);
|
|
padding-bottom: var(--spacing-md);
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
.section-title {
|
|
font-size: var(--font-size-lg);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.section-link {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-muted);
|
|
text-decoration: none;
|
|
transition: color var(--transition-fast);
|
|
}
|
|
|
|
.section-link:hover {
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.projects-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: var(--spacing-2xl);
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: var(--spacing-4xl) var(--spacing-lg);
|
|
max-width: 400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.empty-state h2 {
|
|
font-size: var(--font-size-xl);
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.empty-state p {
|
|
color: var(--color-muted);
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
padding: var(--spacing-sm) var(--spacing-lg);
|
|
background: var(--color-text);
|
|
color: var(--color-bg);
|
|
text-decoration: none;
|
|
border-radius: var(--radius);
|
|
font-size: var(--font-size-sm);
|
|
transition: opacity var(--transition-fast);
|
|
}
|
|
|
|
.btn:hover {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.hero {
|
|
padding: var(--spacing-3xl) var(--spacing-lg);
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: var(--font-size-3xl);
|
|
}
|
|
|
|
.projects-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.section-header {
|
|
flex-direction: column;
|
|
gap: var(--spacing-sm);
|
|
align-items: flex-start;
|
|
}
|
|
}
|
|
</style>
|