fixed theming issues
This commit is contained in:
@@ -9,33 +9,6 @@ import Layout from '../../layouts/Layout.astro';
|
||||
<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>
|
||||
|
||||
<style is:global>
|
||||
.CodeMirror {
|
||||
height: auto;
|
||||
min-height: 400px;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
border-radius: 0.5rem;
|
||||
background: var(--crust);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--surface1);
|
||||
padding: 1rem;
|
||||
}
|
||||
.CodeMirror-focused {
|
||||
border-color: var(--mauve);
|
||||
}
|
||||
.CodeMirror-scroll {
|
||||
min-height: 400px;
|
||||
}
|
||||
.cm-s-default .cm-header { color: var(--mauve); font-weight: bold; }
|
||||
.cm-s-default .cm-string { color: var(--green); }
|
||||
.cm-s-default .cm-link { color: var(--blue); text-decoration: underline; }
|
||||
.cm-s-default .cm-url { color: var(--sky); }
|
||||
.cm-s-default .cm-comment { color: var(--subtext0); font-style: italic; }
|
||||
.cm-s-default .cm-quote { color: var(--peach); }
|
||||
.cm-fat-cursor .CodeMirror-cursor { background: var(--text); }
|
||||
.cm-animate-fat-cursor { background-color: var(--text); }
|
||||
</style>
|
||||
|
||||
<div class="glass p-12 mb-12" id="editor-content" style="display: none;">
|
||||
<header class="mb-12 border-b border-white/5 pb-12 flex justify-between items-center">
|
||||
@@ -406,3 +379,31 @@ import Layout from '../../layouts/Layout.astro';
|
||||
}
|
||||
</script>
|
||||
</Layout>
|
||||
ect slug on edit
|
||||
delBtn?.classList.remove('hidden');
|
||||
fetch(`/api/posts/${encodeURIComponent(editSlug)}`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if (data.content) {
|
||||
editor.setValue(data.content);
|
||||
}
|
||||
})
|
||||
.catch(() => showAlert('Failed to load post.', 'error'));
|
||||
}
|
||||
|
||||
function showAlert(msg: string, type: 'success' | 'error') {
|
||||
const alertEl = document.getElementById('alert');
|
||||
if (alertEl) {
|
||||
alertEl.textContent = msg;
|
||||
alertEl.className = `p-4 rounded-lg mb-6 ${type === 'success' ? 'bg-green/20 text-green border border-green/30' : 'bg-red/20 text-red border border-red/30'}`;
|
||||
alertEl.classList.remove('hidden');
|
||||
setTimeout(() => { alertEl.classList.add('hidden'); }, 4000);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</Layout>
|
||||
setTimeout(() => { alertEl.classList.add('hidden'); }, 4000);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</Layout>
|
||||
|
||||
@@ -22,14 +22,20 @@ import Layout from '../../layouts/Layout.astro';
|
||||
<h2 class="text-xl font-bold text-lavender border-l-4 border-lavender pl-4">General Identity</h2>
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label for="title" class="block text-sm font-medium text-subtext1 mb-2">Blog Title</label>
|
||||
<label for="title" class="block text-sm font-medium text-subtext1 mb-2">Blog Title (Nav)</label>
|
||||
<input type="text" id="title" required class="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors" />
|
||||
<p class="text-[10px] text-subtext0 mt-1">Main name of your blog.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label for="subtitle" class="block text-sm font-medium text-subtext1 mb-2">Subtitle</label>
|
||||
<label for="subtitle" class="block text-sm font-medium text-subtext1 mb-2">Nav Subtitle</label>
|
||||
<input type="text" id="subtitle" required class="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors" />
|
||||
<p class="text-[10px] text-subtext0 mt-1">Short description shown under the title.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label for="welcome_title" class="block text-sm font-medium text-subtext1 mb-2">Welcome Title (Frontpage)</label>
|
||||
<input type="text" id="welcome_title" required class="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="welcome_subtitle" class="block text-sm font-medium text-subtext1 mb-2">Welcome Subtitle</label>
|
||||
<input type="text" id="welcome_subtitle" required class="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@@ -10,14 +10,26 @@ interface Post {
|
||||
|
||||
let posts: Post[] = [];
|
||||
let error = '';
|
||||
let siteConfig = {
|
||||
welcome_title: "Welcome to my blog",
|
||||
welcome_subtitle: "Thoughts on software, design, and building things with Rust and Astro."
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_URL}/api/posts`);
|
||||
if (response.ok) {
|
||||
posts = await response.json();
|
||||
const [postsRes, configRes] = await Promise.all([
|
||||
fetch(`${API_URL}/api/posts`),
|
||||
fetch(`${API_URL}/api/config`)
|
||||
]);
|
||||
|
||||
if (postsRes.ok) {
|
||||
posts = await postsRes.json();
|
||||
} else {
|
||||
error = 'Failed to fetch posts';
|
||||
}
|
||||
|
||||
if (configRes.ok) {
|
||||
siteConfig = await configRes.json();
|
||||
}
|
||||
} catch (e) {
|
||||
const cause = (e as any)?.cause;
|
||||
error = `Could not connect to backend at ${API_URL}: ${e instanceof Error ? e.message : String(e)}${cause ? ' (Cause: ' + (cause.message || cause.code || JSON.stringify(cause)) + ')' : ''}`;
|
||||
@@ -25,6 +37,7 @@ try {
|
||||
}
|
||||
|
||||
function formatSlug(slug: string) {
|
||||
if (!slug) return '';
|
||||
return slug
|
||||
.split('-')
|
||||
.map(word => word.charAt(0).toUpperCase() + word.slice(1))
|
||||
@@ -36,10 +49,10 @@ function formatSlug(slug: string) {
|
||||
<div class="space-y-6 md:space-y-8">
|
||||
<section class="text-center py-6 md:py-12">
|
||||
<h1 class="text-3xl md:text-5xl font-extrabold mb-3 md:mb-4 pb-2 md:pb-4 leading-tight bg-clip-text text-transparent bg-gradient-to-r from-mauve via-blue to-teal">
|
||||
Welcome to my blog
|
||||
{siteConfig.welcome_title}
|
||||
</h1>
|
||||
<p class="text-subtext1 text-base md:text-lg max-w-2xl mx-auto px-4 md:px-0">
|
||||
Thoughts on software, design, and building things with Rust and Astro.
|
||||
{siteConfig.welcome_subtitle}
|
||||
</p>
|
||||
</section>
|
||||
|
||||
@@ -49,9 +62,9 @@ function formatSlug(slug: string) {
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{posts.length === 0 && !error && (
|
||||
<div class="glass p-8 md:p-12 text-center text-subtext0 text-sm md:text-base">
|
||||
<div class="glass p-8 md:p-12 text-center text-subtext1 text-sm md:text-base">
|
||||
<p>No posts found yet. Add some .md files to the data/posts directory!</p>
|
||||
</div>
|
||||
)}
|
||||
@@ -63,7 +76,7 @@ function formatSlug(slug: string) {
|
||||
<h2 class="text-xl md:text-3xl font-bold text-lavender group-hover:text-mauve transition-colors mb-2 md:mb-3">
|
||||
{formatSlug(post.slug)}
|
||||
</h2>
|
||||
<p class="text-subtext1 text-sm md:text-base leading-relaxed line-clamp-3">
|
||||
<p class="text-text text-sm md:text-base leading-relaxed line-clamp-3">
|
||||
{post.excerpt || `Read more about ${formatSlug(post.slug)}...`}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user