Emdash source with visual editor image upload fix

Fixes: 1. media.ts: wrap placeholder generation in try-catch 2. toolbar.ts: check r.ok, display error message in popover
2026-05-03 10:44:54 +07:00
parent 78f81bebb6
commit 2d1be52177
2352 changed files with 662964 additions and 0 deletions
--- a/templates/portfolio/src/pages/index.astro
+++ b/templates/portfolio/src/pages/index.astro
@@ -0,0 +1,170 @@
+---
+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 &rarr;
+					</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>