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

migrated to react

Browse Source
This commit is contained in:
Nils Pukropp
2026-03-27 22:15:50 +01:00
parent 11ac1e008f
commit 176f821598
24 changed files with 2281 additions and 888 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
frontend/src/pages/posts/[slug].astro
View File

@@ -1,6 +1,6 @@
---
import Layout from '../../layouts/Layout.astro';
import { marked } from 'marked';
import PostContent from '../../components/react/PostContent';
const { slug } = Astro.params;
const API_URL = (typeof process !== 'undefined' ? process.env.PUBLIC_API_URL : import.meta.env.PUBLIC_API_URL) || 'http://localhost:3000';
@@ -11,16 +11,12 @@ interface PostDetail {
}
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';
}
@@ -41,29 +37,6 @@ function formatSlug(slug: string) {
<Layout title={post ? formatSlug(post.slug) : 'Post'}>
<article class="glass p-6 md:p-12 mb-8 md:mb-12 animate-in fade-in slide-in-from-bottom-4 duration-700">
<header class="mb-8 md:mb-12 border-b border-white/5 pb-8 md:pb-12">
<a href="/" class="text-blue hover:text-sky transition-colors mb-6 md:mb-8 inline-flex items-center gap-2 group text-sm md:text-base" style="color: var(--blue) !important;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="md:w-5 md:h-5 transition-transform group-hover:-translate-x-1"><path d="m15 18-6-6 6-6"/></svg>
Back to list
</a>
{post && (
<div class="flex flex-col md:flex-row md:justify-between md:items-start mt-2 md:mt-4 gap-4">
<h1 class="text-3xl md:text-5xl font-extrabold text-mauve">
{formatSlug(post.slug)}
</h1>
<a
href={`/admin/editor?edit=${post.slug}`}
id="edit-btn"
class="hidden bg-surface0 hover:bg-surface1 text-blue px-3 py-1.5 md:px-4 md:py-2 rounded border border-surface1 transition-colors items-center gap-2 text-sm md:text-base self-start"
style="color: var(--blue) !important;"
>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="md:w-4 md:h-4"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
Edit
</a>
</div>
)}
</header>
{error && (
<div class="text-red text-center py-12">
<h2 class="text-2xl font-bold mb-4">{error}</h2>
@@ -72,44 +45,7 @@ function formatSlug(slug: string) {
)}
{post && (
<div class="prose max-w-none" id="post-content" set:html={html} />
<PostContent client:load content={post.content} slug={post.slug} />
)}
</article>
<!-- KaTeX for LaTeX Math Rendering -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css" crossorigin="anonymous">
<script is:inline src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.js" crossorigin="anonymous"></script>
<script is:inline src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/auto-render.min.js" crossorigin="anonymous"></script>
<!-- Highlight.js for Code Blocks -->
<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>
if (localStorage.getItem('admin_token')) {
const editBtn = document.getElementById('edit-btn');
if (editBtn) {
editBtn.style.display = 'inline-flex';
}
}
// Initialize KaTeX and Highlight.js
document.addEventListener("DOMContentLoaded", function() {
const content = document.getElementById('post-content');
if (content) {
// @ts-ignore
renderMathInElement(content, {
delimiters: [
{left: '$$', right: '$$', display: true},
{left: '$', right: '$', display: false},
{left: '\\(', right: '\\)', display: false},
{left: '\\[', right: '\\]', display: true}
],
throwOnError: false
});
// @ts-ignore
hljs.highlightAll();
}
});
</script>
</Layout>