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

fixed back button and coloring

Browse Source
This commit is contained in:
Nils Pukropp
2026-03-26 01:38:00 +01:00
parent 53db329cc5
commit 37c8e231c3
4 changed files with 53 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/PostCard.astro
View File

@@ -14,7 +14,7 @@ const { slug, excerpt, formatSlug } = Astro.props;
<h2 class="text-xl md:text-3xl font-bold text-lavender group-hover:text-mauve transition-colors mb-2 md:mb-3">
{formatSlug(slug)}
</h2>
<p class="text-text text-sm md:text-base leading-relaxed line-clamp-3">
<p class="text-text text-sm md:text-base leading-relaxed line-clamp-3" style="color: var(--text) !important;">
{excerpt || `Read more about ${formatSlug(slug)}...`}
</p>
</div>

19
frontend/src/layouts/AdminLayout.astro
View File

@@ -9,12 +9,18 @@ const { title } = Astro.props;
---
<Layout title={title}>
<!-- CodeMirror Assets -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css">
<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/markdown/markdown.min.js"></script>
<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/keymap/vim.min.js"></script>
<div class="glass p-6 md:p-12 mb-12" id="admin-content" style="display: none;">
<header class="mb-8 md:mb-12 border-b border-white/5 pb-8 md:pb-12 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
<div>
<a href="/admin" class="text-blue hover:text-sky transition-colors mb-4 md:mb-8 inline-flex items-center gap-2 group text-sm md:text-base">
<a id="back-link" href="/admin" class="text-blue hover:text-sky transition-colors mb-4 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>
Dashboard
Back
</a>
<h1 class="text-3xl md:text-4xl font-extrabold text-mauve">
{title}
@@ -37,6 +43,15 @@ const { title } = Astro.props;
} else {
const content = document.getElementById('admin-content');
if (content) content.style.display = 'block';
// Smart Back Link
const backLink = document.getElementById('back-link');
if (backLink && document.referrer && document.referrer.includes(window.location.host) && !document.referrer.includes('/admin/login')) {
backLink.addEventListener('click', (ev) => {
ev.preventDefault();
window.history.back();
});
}
// Dispatch custom event for child components to know token is ready
document.dispatchEvent(new CustomEvent('admin-auth-ready', { detail: { token } }));

43
frontend/src/pages/admin/editor.astro
View File

@@ -3,11 +3,7 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
---
<AdminLayout title="Write Post">
<!-- CodeMirror Assets -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css" slot="header-subtitle">
<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js" slot="header-subtitle"></script>
<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/markdown/markdown.min.js" slot="header-subtitle"></script>
<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/keymap/vim.min.js" slot="header-subtitle"></script>
<p slot="header-subtitle" id="post-status" class="text-subtext1 mt-2 text-sm md:text-base">Create a new masterpiece.</p>
<div slot="header-actions" class="flex gap-4 w-full">
<button id="delete-btn" class="hidden text-red hover:bg-red/10 px-6 py-3 rounded-lg transition-colors font-bold border border-red/20 w-full md:w-auto">
@@ -19,6 +15,15 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
>
Save Post
</button>
<a
id="view-post-btn"
href="#"
target="_blank"
class="hidden bg-blue text-crust font-bold py-3 px-8 rounded-lg hover:bg-sky transition-all transform hover:scale-105 w-full md:w-auto whitespace-nowrap items-center justify-center gap-2"
>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" x2="14" y2="10" x2="21" y2="3"/></svg>
View Post
</a>
</div>
<div id="alert" class="hidden p-4 rounded-lg mb-6"></div>
@@ -123,6 +128,7 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
const fileInput = document.getElementById('file-upload') as HTMLInputElement;
const saveBtn = document.getElementById('save-btn');
const delBtn = document.getElementById('delete-btn');
const viewPostBtn = document.getElementById('view-post-btn') as HTMLAnchorElement;
const browseBtn = document.getElementById('browse-btn');
const assetsModal = document.getElementById('assets-modal');
const closeModal = document.getElementById('close-modal');
@@ -150,8 +156,8 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
if (res.ok) {
allAssets = await res.json();
}
} catch (e) {
console.error("Failed to fetch assets", e);
} catch (err) {
console.error("Failed to fetch assets", err);
}
}
@@ -272,8 +278,8 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
autocomplete?.classList.add('hidden');
}
window.addEventListener('click', (e) => {
if (!autocomplete?.contains(e.target as Node)) {
window.addEventListener('click', (ev) => {
if (!autocomplete?.contains(ev.target as Node)) {
hideAutocomplete();
}
});
@@ -325,8 +331,16 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
},
body: JSON.stringify(payload)
});
if (res.ok) showAlert('Post saved!', 'success');
else showAlert('Error saving post.', 'error');
if (res.ok) {
showAlert('Post saved!', 'success');
if (viewPostBtn) {
viewPostBtn.href = `/posts/${payload.slug}`;
viewPostBtn.classList.remove('hidden');
viewPostBtn.classList.add('inline-flex');
}
} else {
showAlert('Error saving post.', 'error');
}
} catch (err) {
showAlert('Failed to connect to server.', 'error');
}
@@ -353,6 +367,13 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
slugInput.value = editSlug;
slugInput.disabled = true; // Protect slug on edit
delBtn?.classList.remove('hidden');
if (viewPostBtn) {
viewPostBtn.href = `/posts/${editSlug}`;
viewPostBtn.classList.remove('hidden');
viewPostBtn.classList.add('inline-flex');
}
fetch(`/api/posts/${encodeURIComponent(editSlug)}`)
.then(res => res.json())
.then(data => {

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

@@ -42,7 +42,7 @@ 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">
<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>
@@ -55,6 +55,7 @@ function formatSlug(slug: string) {
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
@@ -71,7 +72,7 @@ function formatSlug(slug: string) {
)}
{post && (
<div class="prose prose-invert max-w-none" id="post-content" set:html={html} />
<div class="prose max-w-none" id="post-content" set:html={html} />
)}
</article>