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

fixed code highlight

Browse Source
This commit is contained in:
Nils Pukropp
2026-03-26 01:32:17 +01:00
parent 7296638091
commit 53db329cc5
5 changed files with 116 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/layouts/Layout.astro
View File

@@ -30,7 +30,7 @@ try {
---
<!doctype html>
<html lang="en">
<html lang="en" class={siteConfig.theme}>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />

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

@@ -35,6 +35,16 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
/>
</div>
<div>
<label for="summary" class="block text-sm font-medium text-subtext1 mb-2">Custom Summary (Optional)</label>
<textarea
id="summary"
rows="2"
placeholder="A brief description of this post for the frontpage..."
class="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors resize-none"
></textarea>
</div>
<div class="relative">
<div class="flex flex-col md:flex-row justify-between items-start md:items-end mb-2 gap-2">
<label for="content" class="block text-sm font-medium text-subtext1 italic">Tip: Type '/' to browse your assets</label>
@@ -108,6 +118,7 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
const token = e.detail.token;
const slugInput = document.getElementById('slug') as HTMLInputElement;
const summaryInput = document.getElementById('summary') as HTMLTextAreaElement;
const contentInput = document.getElementById('content') as HTMLTextAreaElement;
const fileInput = document.getElementById('file-upload') as HTMLInputElement;
const saveBtn = document.getElementById('save-btn');
@@ -267,8 +278,8 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
}
});
fileInput?.addEventListener('change', async (e) => {
const file = (e.target as HTMLInputElement).files?.[0];
fileInput?.addEventListener('change', async (ev) => {
const file = (ev.target as HTMLInputElement).files?.[0];
if (!file) return;
const formData = new FormData();
@@ -289,14 +300,18 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
const err = await res.json();
showAlert(`Upload failed: ${err.error}`, 'error');
}
} catch (e) {
} catch (err) {
showAlert('Network error during upload.', 'error');
}
fileInput.value = '';
});
saveBtn?.addEventListener('click', async () => {
const payload = { slug: slugInput.value, content: editor.getValue() };
const payload = {
slug: slugInput.value,
summary: summaryInput.value || null,
content: editor.getValue()
};
if (!payload.slug || !payload.content) {
showAlert('Slug and content are required.', 'error');
return;
@@ -312,7 +327,7 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
});
if (res.ok) showAlert('Post saved!', 'success');
else showAlert('Error saving post.', 'error');
} catch (e) {
} catch (err) {
showAlert('Failed to connect to server.', 'error');
}
});
@@ -326,7 +341,7 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
});
if (res.ok) window.location.href = '/admin';
else showAlert('Error deleting post.', 'error');
} catch (e) {
} catch (err) {
showAlert('Connection error.', 'error');
}
}
@@ -341,6 +356,9 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
fetch(`/api/posts/${encodeURIComponent(editSlug)}`)
.then(res => res.json())
.then(data => {
if (data.summary) {
summaryInput.value = data.summary;
}
if (data.content) {
editor.setValue(data.content);
}

77
frontend/src/styles/global.css
View File

@@ -79,59 +79,54 @@
body {
background-color: var(--base);
color: var(--text);
color: var(--text) !important;
min-height: 100vh;
transition: background-color 0.3s ease, color 0.3s ease;
}
/* Dynamic CodeMirror Theme */
.cm-s-narlblog.CodeMirror {
background: var(--crust);
color: var(--text);
background: var(--crust) !important;
color: var(--text) !important;
border: 1px solid var(--surface1);
}
.cm-s-narlblog .cm-header { color: var(--mauve); font-weight: bold; }
.cm-s-narlblog .cm-string { color: var(--green); }
.cm-s-narlblog .cm-link { color: var(--blue); text-decoration: underline; }
.cm-s-narlblog .cm-url { color: var(--sky); }
.cm-s-narlblog .cm-comment { color: var(--subtext0); font-style: italic; }
.cm-s-narlblog .cm-quote { color: var(--peach); }
.cm-s-narlblog .CodeMirror-cursor { border-left-color: var(--text); }
.cm-s-narlblog.cm-fat-cursor .CodeMirror-cursor { background: var(--text); }
.cm-s-narlblog .CodeMirror-selected { background: var(--surface2); }
.cm-s-narlblog .CodeMirror-line::selection, .cm-s-narlblog .CodeMirror-line > span::selection, .cm-s-narlblog .CodeMirror-line > span > span::selection { background: var(--surface2); }
.cm-s-narlblog .CodeMirror-line::-moz-selection, .cm-s-narlblog .CodeMirror-line > span::-moz-selection, .cm-s-narlblog .CodeMirror-line > span > span::-moz-selection { background: var(--surface2); }
.cm-s-narlblog .cm-header { color: var(--mauve) !important; font-weight: bold; }
.cm-s-narlblog .cm-string { color: var(--green) !important; }
.cm-s-narlblog .cm-link { color: var(--blue) !important; text-decoration: underline; }
.cm-s-narlblog .cm-url { color: var(--sky) !important; }
.cm-s-narlblog .cm-comment { color: var(--subtext0) !important; font-style: italic; }
.cm-s-narlblog .cm-quote { color: var(--peach) !important; }
.cm-s-narlblog .CodeMirror-cursor { border-left-color: var(--text) !important; }
.cm-s-narlblog.cm-fat-cursor .CodeMirror-cursor { background: var(--text) !important; }
.cm-s-narlblog .CodeMirror-selected { background: var(--surface2) !important; }
/* Dynamic Highlight.js Theme */
.hljs { color: var(--text); background: transparent; }
.hljs-comment, .hljs-quote { color: var(--subtext0); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-subst { color: var(--mauve); font-weight: bold; }
.hljs-number, .hljs-literal, .hljs-variable, .hljs-template-variable, .hljs-tag .hljs-attr { color: var(--peach); }
.hljs-string, .hljs-doctag { color: var(--green); }
.hljs-title, .hljs-section, .hljs-selector-id { color: var(--blue); font-weight: bold; }
.hljs-subst { font-weight: normal; }
.hljs-type, .hljs-class .hljs-title { color: var(--yellow); font-weight: bold; }
.hljs-tag, .hljs-name, .hljs-attribute { color: var(--blue); font-weight: normal; }
.hljs-regexp, .hljs-link { color: var(--sky); }
.hljs-symbol, .hljs-bullet { color: var(--pink); }
.hljs-built_in, .hljs-builtin-name { color: var(--red); }
.hljs-meta { color: var(--overlay1); font-weight: bold; }
.hljs-deletion { background: var(--maroon); color: var(--crust); }
.hljs-addition { background: var(--green); color: var(--crust); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: bold; }
.hljs { color: var(--text) !important; background: transparent !important; }
.hljs-comment, .hljs-quote { color: var(--subtext0) !important; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-subst { color: var(--mauve) !important; font-weight: bold; }
.hljs-number, .hljs-literal, .hljs-variable, .hljs-template-variable, .hljs-tag .hljs-attr { color: var(--peach) !important; }
.hljs-string, .hljs-doctag { color: var(--green) !important; }
.hljs-title, .hljs-section, .hljs-selector-id { color: var(--blue) !important; font-weight: bold; }
.hljs-type, .hljs-class .hljs-title { color: var(--yellow) !important; font-weight: bold; }
.hljs-tag, .hljs-name, .hljs-attribute { color: var(--blue) !important; font-weight: normal; }
.hljs-regexp, .hljs-link { color: var(--sky) !important; }
.hljs-symbol, .hljs-bullet { color: var(--pink) !important; }
.hljs-built_in, .hljs-builtin-name { color: var(--red) !important; }
.hljs-meta { color: var(--overlay1) !important; font-weight: bold; }
/* Typography styles for Markdown */
.prose h1 { @apply text-3xl md:text-4xl font-bold mb-4 md:mb-6 text-mauve; }
.prose h2 { @apply text-2xl md:text-3xl font-semibold mb-3 md:mb-4 mt-6 md:mt-8 text-lavender; }
.prose h3 { @apply text-xl md:text-2xl font-medium mb-2 md:mb-3 mt-4 md:mt-6 text-blue; }
.prose p { @apply mb-3 md:mb-4 leading-relaxed text-sm md:text-base; }
.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-3 md:mb-4 text-sm md:text-base; }
.prose ol { @apply list-decimal list-inside mb-3 md:mb-4 text-sm md:text-base; }
.prose blockquote { @apply border-l-4 border-surface2 pl-4 italic text-subtext0 my-4 md:my-6 text-sm md:text-base; }
.prose pre { @apply bg-crust p-3 md:p-4 rounded-xl overflow-x-auto border border-white/5 my-4 md:my-6 text-xs md:text-sm; }
.prose code { @apply bg-surface0 px-1.5 py-0.5 rounded text-xs md:text-sm font-mono text-peach; }
.prose { color: var(--text) !important; }
.prose h1 { @apply text-3xl md:text-4xl font-bold mb-4 md:mb-6 text-mauve; color: var(--mauve) !important; }
.prose h2 { @apply text-2xl md:text-3xl font-semibold mb-3 md:mb-4 mt-6 md:mt-8 text-lavender; color: var(--lavender) !important; }
.prose h3 { @apply text-xl md:text-2xl font-medium mb-2 md:mb-3 mt-4 md:mt-6 text-blue; color: var(--blue) !important; }
.prose p { @apply mb-3 md:mb-4 leading-relaxed text-sm md:text-base; color: var(--text) !important; }
.prose a { @apply text-blue hover:text-sky underline underline-offset-4 decoration-2 decoration-blue/30 hover:decoration-sky transition-colors; color: var(--blue) !important; }
.prose ul { @apply list-disc list-inside mb-3 md:mb-4 text-sm md:text-base; color: var(--text) !important; }
.prose ol { @apply list-decimal list-inside mb-3 md:mb-4 text-sm md:text-base; color: var(--text) !important; }
.prose blockquote { @apply border-l-4 border-surface2 pl-4 italic text-subtext0 my-4 md:my-6 text-sm md:text-base; color: var(--subtext0) !important; }
.prose pre { @apply bg-crust p-3 md:p-4 rounded-xl overflow-x-auto border border-white/5 my-4 md:my-6 text-xs md:text-sm; background-color: var(--crust) !important; }
.prose code { @apply bg-surface0 px-1.5 py-0.5 rounded text-xs md:text-sm font-mono text-peach; color: var(--peach) !important; }
.prose pre code { background-color: transparent !important; padding: 0 !important; border-radius: 0 !important; color: inherit !important; }
.prose img { @apply max-w-full h-auto rounded-xl shadow-lg border border-white/5 my-6 md:my-8; }
.glass {