Initial commit: EmDash blog template
Fixed index.astro: escaped curly braces in code display block to prevent Astro parser misinterpreting them as expressions. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kunthawat Greethong
544
src/pages/index.astro
Normal file
544
src/pages/index.astro
Normal file
@@ -0,0 +1,544 @@
|
||||
---
|
||||
import { getSiteSettings } from "emdash";
|
||||
import Base from "../layouts/Base.astro";
|
||||
|
||||
const settings = await getSiteSettings();
|
||||
---
|
||||
<Base title="EmDash CMS - Self-Hosted for Astro" description="Fully self-hosted CMS for Astro. No cloud required, fully local, with admin panel, authentication, and plugin system.">
|
||||
<main class="landing">
|
||||
<!-- Hero Section -->
|
||||
<section class="hero">
|
||||
<div class="hero-content">
|
||||
<div class="badge">Open Source • 10k+ Stars</div>
|
||||
<h1 class="hero-title">
|
||||
The CMS that<br />
|
||||
<span class="accent">runs on your server</span>
|
||||
</h1>
|
||||
<p class="hero-subtitle">
|
||||
EmDash is a full-stack TypeScript CMS built on Astro.
|
||||
No cloud account required, no external dependencies.
|
||||
Just a complete admin panel and your content.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="/_emdash/admin" class="btn btn-primary">
|
||||
<span class="btn-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2"/>
|
||||
<path d="M3 9h18M9 21V9"/>
|
||||
</svg>
|
||||
</span>
|
||||
Open Admin Panel
|
||||
</a>
|
||||
<a href="https://github.com/emdash-cms/emdash" class="btn btn-secondary" target="_blank">
|
||||
View on GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<div class="code-window">
|
||||
<div class="code-header">
|
||||
<span class="dot red"></span>
|
||||
<span class="dot yellow"></span>
|
||||
<span class="dot green"></span>
|
||||
<span class="code-title">astro.config.mjs</span>
|
||||
</div>
|
||||
<pre class="code-content"><code><span class="keyword">import</span> emdash <span class="keyword">from</span> <span class="string">"emdash/astro"</span>;
|
||||
<span class="keyword">import</span> { betterSqlite } <span class="keyword">from</span> <span class="string">"emdash/db"</span>;
|
||||
|
||||
<span class="keyword">export default</span> defineConfig({
|
||||
<span class="property">integrations</span>: [
|
||||
emdash({
|
||||
<span class="property">database</span>: betterSqlite({
|
||||
<span class="property">databasePath</span>: <span class="string">"./data.db"</span>
|
||||
}),
|
||||
}),
|
||||
],
|
||||
});</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section class="features" id="features">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Everything you need</h2>
|
||||
<p class="section-subtitle">A complete CMS without the vendor lock-in</p>
|
||||
</div>
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
|
||||
<path d="M2 17l10 5 10-5"/>
|
||||
<path d="M2 12l10 5 10-5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="feature-title">Fully Self-Hosted</h3>
|
||||
<p class="feature-desc">
|
||||
SQLite, D1, Turso, or PostgreSQL. Your data stays on your servers.
|
||||
No cloud account required.
|
||||
</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2"/>
|
||||
<path d="M3 9h18M9 21V9"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="feature-title">Admin Panel</h3>
|
||||
<p class="feature-desc">
|
||||
Visual schema builder, media library, navigation menus.
|
||||
Full admin at /_emdash/admin
|
||||
</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="feature-title">Passkey Auth</h3>
|
||||
<p class="feature-desc">
|
||||
WebAuthn passkey-first authentication with OAuth and magic link fallbacks.
|
||||
Role-based access control.
|
||||
</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<path d="M12 6v6l4 2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="feature-title">Built-in MCP</h3>
|
||||
<p class="feature-desc">
|
||||
Model Context Protocol server for AI tools.
|
||||
Claude and ChatGPT can interact with your site directly.
|
||||
</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="16 18 22 12 16 6"/>
|
||||
<polyline points="8 6 2 12 8 18"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="feature-title">Plugin System</h3>
|
||||
<p class="feature-desc">
|
||||
Sandboxed plugins on Cloudflare Workers.
|
||||
Define capabilities, run safely in isolation.
|
||||
</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||||
<polyline points="14 2 14 8 20 8"/>
|
||||
<line x1="16" y1="13" x2="8" y2="13"/>
|
||||
<line x1="16" y1="17" x2="8" y2="17"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="feature-title">WordPress Import</h3>
|
||||
<p class="feature-desc">
|
||||
Import posts, pages, media, and taxonomies from WXR exports,
|
||||
REST API, or WordPress.com.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Comparison Section -->
|
||||
<section class="comparison">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">EmDash vs Tina CMS</h2>
|
||||
<p class="section-subtitle">Both work with Astro, but differ in approach</p>
|
||||
</div>
|
||||
<div class="comparison-table">
|
||||
<div class="comparison-header">
|
||||
<div class="comparison-cell header">Feature</div>
|
||||
<div class="comparison-cell header">EmDash</div>
|
||||
<div class="comparison-cell header">Tina CMS</div>
|
||||
</div>
|
||||
<div class="comparison-row">
|
||||
<div class="comparison-cell label">Self-hosted</div>
|
||||
<div class="comparison-cell emdash">Fully local (SQLite)</div>
|
||||
<div class="comparison-cell tina">Needs Tina Cloud</div>
|
||||
</div>
|
||||
<div class="comparison-row">
|
||||
<div class="comparison-cell label">Admin URL</div>
|
||||
<div class="comparison-cell emdash">/_emdash/admin</div>
|
||||
<div class="comparison-cell tina">/admin</div>
|
||||
</div>
|
||||
<div class="comparison-row">
|
||||
<div class="comparison-cell label">Database</div>
|
||||
<div class="comparison-cell emdash">SQLite, D1, PostgreSQL</div>
|
||||
<div class="comparison-cell tina">Git-based</div>
|
||||
</div>
|
||||
<div class="comparison-row">
|
||||
<div class="comparison-cell label">Setup</div>
|
||||
<div class="comparison-cell emdash">Template-based</div>
|
||||
<div class="comparison-cell tina">Manual config</div>
|
||||
</div>
|
||||
<div class="comparison-row">
|
||||
<div class="comparison-cell label">Auth</div>
|
||||
<div class="comparison-cell emdash">Passkey + OAuth</div>
|
||||
<div class="comparison-cell tina">Git-based</div>
|
||||
</div>
|
||||
<div class="comparison-row">
|
||||
<div class="comparison-cell label">Price</div>
|
||||
<div class="comparison-cell emdash">Free (open source)</div>
|
||||
<div class="comparison-cell tina">Free tier + paid plans</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="cta">
|
||||
<div class="cta-content">
|
||||
<h2 class="cta-title">Ready to get started?</h2>
|
||||
<p class="cta-subtitle">
|
||||
Clone the template, run bootstrap, and you're ready to build.
|
||||
</p>
|
||||
<div class="cta-actions">
|
||||
<a href="/_emdash/admin" class="btn btn-primary btn-large">
|
||||
Try Admin Panel
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</Base>
|
||||
|
||||
<style>
|
||||
.landing {
|
||||
--color-bg: #0a0a0f;
|
||||
--color-surface: #14141f;
|
||||
--color-surface-hover: #1a1a2e;
|
||||
--color-border: #2a2a3e;
|
||||
--color-text: #f0f0f5;
|
||||
--color-text-secondary: #a0a0b0;
|
||||
--color-muted: #6a6a80;
|
||||
--color-accent: #6366f1;
|
||||
--color-accent-hover: #818cf8;
|
||||
--color-emdash: #10b981;
|
||||
--color-tina: #f59e0b;
|
||||
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 4rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 6rem 2rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 2rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 1.5rem;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.accent {
|
||||
color: var(--color-emdash);
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.7;
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.875rem 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--color-emdash);
|
||||
color: #0a0a0f;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #059669;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--color-surface-hover);
|
||||
}
|
||||
|
||||
.btn-large {
|
||||
padding: 1rem 2rem;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.code-window {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.code-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
background: var(--color-surface-hover);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.dot.red { background: #ef4444; }
|
||||
.dot.yellow { background: #eab308; }
|
||||
.dot.green { background: #22c55e; }
|
||||
|
||||
.code-title {
|
||||
margin-left: auto;
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-muted);
|
||||
}
|
||||
|
||||
.code-content {
|
||||
padding: 1.5rem;
|
||||
margin: 0;
|
||||
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.keyword { color: #c678dd; }
|
||||
.string { color: #98c379; }
|
||||
.property { color: #e5c07b; }
|
||||
|
||||
.features {
|
||||
padding: 6rem 2rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 1rem;
|
||||
padding: 2rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
border-color: var(--color-emdash);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, var(--color-emdash), #059669);
|
||||
border-radius: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.comparison {
|
||||
padding: 6rem 2rem;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.comparison-table {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.comparison-header {
|
||||
display: grid;
|
||||
grid-template-columns: 1.5fr 1fr 1fr;
|
||||
background: var(--color-surface-hover);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.comparison-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1.5fr 1fr 1fr;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.comparison-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.comparison-cell {
|
||||
padding: 1rem 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.comparison-cell.header {
|
||||
font-weight: 600;
|
||||
color: var(--color-muted);
|
||||
text-transform: uppercase;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.comparison-cell.label {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.comparison-cell.emdash {
|
||||
color: var(--color-emdash);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.comparison-cell.tina {
|
||||
color: var(--color-tina);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.cta {
|
||||
padding: 8rem 2rem;
|
||||
text-align: center;
|
||||
background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface) 100%);
|
||||
}
|
||||
|
||||
.cta-content {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.cta-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.cta-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.hero {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 4rem 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.comparison-header,
|
||||
.comparison-row {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.comparison-cell.header:last-child,
|
||||
.comparison-cell:last-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.hero-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user