nvrl/narlblog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Nils Pukropp
2026-03-25 10:58:10 +01:00
commit 07c4c04eb7
23 changed files with 7365 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/src/layouts/Layout.astro Normal file
View File

@@ -0,0 +1,43 @@
---
import '../styles/global.css';
interface Props {
title: string;
}
const { title } = Astro.props;
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title} | Narlblog</title>
</head>
<body class="bg-base text-text selection:bg-surface2 selection:text-text">
<div class="fixed inset-0 z-[-1] bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-surface0 via-base to-base"></div>
<nav class="max-w-4xl mx-auto px-6 py-8">
<header class="glass px-6 py-4 flex items-center justify-between">
<a href="/" class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-mauve to-blue">
Narlblog
</a>
<div class="flex gap-4">
<a href="/" class="text-subtext0 hover:text-text transition-colors">Home</a>
<a href="https://github.com/narl" target="_blank" class="text-subtext0 hover:text-text transition-colors">About</a>
</div>
</header>
</nav>
<main class="max-w-4xl mx-auto px-6 py-8">
<slot />
</main>
<footer class="max-w-4xl mx-auto px-6 py-8 text-center text-sm text-subtext0">
&copy; {new Date().getFullYear()} Narlblog. Built with Rust & Astro.
</footer>
</body>
</html>

77
frontend/src/pages/index.astro Normal file
View File

@@ -0,0 +1,77 @@
---
import Layout from '../layouts/Layout.astro';
const API_URL = import.meta.env.PUBLIC_API_URL || 'http://localhost:3000';
interface Post {
slug: string;
}
let posts: Post[] = [];
let error = '';
try {
const response = await fetch(`${API_URL}/api/posts`);
if (response.ok) {
posts = await response.json();
} else {
error = 'Failed to fetch posts';
}
} catch (e) {
error = 'Could not connect to backend';
}
function formatSlug(slug: string) {
return slug
.split('-')
.map(word => word.charAt(0).toUpperCase() + word.slice(1))
.join(' ');
}
---
<Layout title="Home">
<div class="space-y-8">
<section class="text-center py-12">
<h1 class="text-5xl font-extrabold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-mauve via-blue to-teal">
Welcome to my blog
</h1>
<p class="text-subtext1 text-lg max-w-2xl mx-auto">
Thoughts on software, design, and building things with Rust and Astro.
</p>
</section>
<div class="grid gap-6">
{error && (
<div class="glass p-6 text-red text-center border-red/20">
{error}
</div>
)}
{posts.length === 0 && !error && (
<div class="glass p-12 text-center text-subtext0">
<p>No posts found yet. Add some .md files to the data/posts directory!</p>
</div>
)}
{posts.map((post) => (
<a href={`/posts/${post.slug}`} class="group">
<article class="glass p-8 transition-all hover:scale-[1.01] hover:bg-surface0/80 active:scale-[0.99]">
<div class="flex justify-between items-start">
<div>
<h2 class="text-2xl font-bold text-lavender group-hover:text-mauve transition-colors mb-2">
{formatSlug(post.slug)}
</h2>
<p class="text-subtext0">
Read more about {formatSlug(post.slug)}...
</p>
</div>
<div class="text-mauve opacity-0 group-hover:opacity-100 transition-opacity">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
</div>
</div>
</article>
</a>
))}
</div>
</div>
</Layout>

64
frontend/src/pages/posts/[slug].astro Normal file
View File

@@ -0,0 +1,64 @@
---
import Layout from '../../layouts/Layout.astro';
import { marked } from 'marked';
const { slug } = Astro.params;
const API_URL = import.meta.env.PUBLIC_API_URL || 'http://localhost:3000';
interface PostDetail {
slug: string;
content: string;
}
let post: PostDetail | null = null;
let html = '';
let error = '';
try {
const response = await fetch(`${API_URL}/api/posts/${slug}`);
if (response.ok) {
post = await response.json();
if (post) {
html = await marked.parse(post.content);
}
} else {
error = 'Post not found';
}
} catch (e) {
error = 'Could not connect to backend';
}
function formatSlug(slug: string) {
return slug
.split('-')
.map(word => word.charAt(0).toUpperCase() + word.slice(1))
.join(' ');
}
---
<Layout title={post ? formatSlug(post.slug) : 'Post'}>
<article class="glass p-12 mb-12 animate-in fade-in slide-in-from-bottom-4 duration-700">
<header class="mb-12 border-b border-white/5 pb-12">
<a href="/" class="text-blue hover:text-sky transition-colors mb-8 inline-flex items-center gap-2 group">
<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" class="transition-transform group-hover:-translate-x-1"><path d="m15 18-6-6 6-6"/></svg>
Back to list
</a>
{post && (
<h1 class="text-5xl font-extrabold text-mauve mt-4">
{formatSlug(post.slug)}
</h1>
)}
</header>
{error && (
<div class="text-red text-center py-12">
<h2 class="text-2xl font-bold mb-4">{error}</h2>
<a href="/" class="text-blue underline">Return home</a>
</div>
)}
{post && (
<div class="prose prose-invert max-w-none" set:html={html} />
)}
</article>
</Layout>

57
frontend/src/styles/global.css Normal file
View File

@@ -0,0 +1,57 @@
@import "tailwindcss";
@theme {
--color-crust: #11111b;
--color-mantle: #181825;
--color-base: #1e1e2e;
--color-surface0: #313244;
--color-surface1: #45475a;
--color-surface2: #585b70;
--color-overlay0: #6c7086;
--color-overlay1: #7f849c;
--color-overlay2: #9399b2;
--color-text: #cdd6f4;
--color-subtext0: #a6adc8;
--color-subtext1: #bac2de;
--color-blue: #8caaee;
--color-lavender: #b4befe;
--color-sapphire: #85c1dc;
--color-sky: #99d1db;
--color-teal: #81c8be;
--color-green: #a6d189;
--color-yellow: #e5c890;
--color-peach: #ef9f76;
--color-maroon: #ea999c;
--color-red: #e78284;
--color-mauve: #ca9ee6;
--color-pink: #f4b8e4;
--color-flamingo: #eebebe;
--color-rosewater: #f2d5cf;
}
body {
background-color: var(--color-base);
color: var(--color-text);
min-height: 100vh;
}
/* Typography styles for Markdown */
.prose h1 { @apply text-4xl font-bold mb-6 text-mauve; }
.prose h2 { @apply text-3xl font-semibold mb-4 mt-8 text-lavender; }
.prose h3 { @apply text-2xl font-medium mb-3 mt-6 text-blue; }
.prose p { @apply mb-4 leading-relaxed; }
.prose a { @apply text-blue hover:text-sky underline underline-offset-4 decoration-2 decoration-blue/30 hover:decoration-sky transition-colors; }
.prose ul { @apply list-disc list-inside mb-4; }
.prose ol { @apply list-decimal list-inside mb-4; }
.prose blockquote { @apply border-l-4 border-surface2 pl-4 italic text-subtext0 my-6; }
.prose pre { @apply bg-crust p-4 rounded-xl overflow-x-auto border border-white/5 my-6; }
.prose code { @apply bg-surface0 px-1.5 py-0.5 rounded text-sm font-mono text-peach; }
.prose img { @apply max-w-full h-auto rounded-xl shadow-lg border border-white/5 my-8; }
.glass {
background-color: color-mix(in srgb, var(--color-surface0) 60%, transparent);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
border-radius: 1rem;
}