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

updated theming and fixed warnings

Browse Source
This commit is contained in:
Nils Pukropp
2026-03-26 10:35:28 +01:00
parent 85549d41f8
commit 63cc84916e
11 changed files with 119 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
backend/src/auth.rs
View File

@@ -1,6 +1,6 @@
use crate::error::AppError;
use axum::http::HeaderMap; use axum::http::HeaderMap;
use tracing::warn; use tracing::warn;
use crate::error::AppError;
pub fn check_auth(headers: &HeaderMap, admin_token: &str) -> Result<(), AppError> { pub fn check_auth(headers: &HeaderMap, admin_token: &str) -> Result<(), AppError> {
let auth_header = headers.get("Authorization").and_then(|h| h.to_str().ok()); let auth_header = headers.get("Authorization").and_then(|h| h.to_str().ok());

2
backend/src/error.rs
View File

@@ -1,7 +1,7 @@
use axum::{ use axum::{
Json,
http::StatusCode, http::StatusCode,
response::{IntoResponse, Response}, response::{IntoResponse, Response},
Json,
}; };
use crate::models::ErrorResponse; use crate::models::ErrorResponse;

14
backend/src/handlers/config.rs
View File

@@ -1,18 +1,8 @@
use axum::{ use axum::{Json, extract::State, http::HeaderMap, response::IntoResponse};
extract::State,
http::HeaderMap,
response::IntoResponse,
Json,
};
use std::{fs, sync::Arc}; use std::{fs, sync::Arc};
use tracing::error; use tracing::error;
use crate::{ use crate::{AppState, auth::check_auth, error::AppError, models::SiteConfig};
auth::check_auth,
error::AppError,
models::SiteConfig,
AppState,
};
pub async fn get_config(State(state): State<Arc<AppState>>) -> impl IntoResponse { pub async fn get_config(State(state): State<Arc<AppState>>) -> impl IntoResponse {
let config_path = state.data_dir.join("config.json"); let config_path = state.data_dir.join("config.json");

25
backend/src/handlers/posts.rs
View File

@@ -1,17 +1,17 @@
use axum::{ use axum::{
Json,
extract::{Path, State}, extract::{Path, State},
http::{HeaderMap, StatusCode}, http::{HeaderMap, StatusCode},
response::IntoResponse, response::IntoResponse,
Json,
}; };
use std::{fs, sync::Arc}; use std::{fs, sync::Arc};
use tracing::{error, info, warn}; use tracing::{error, info, warn};
use crate::{ use crate::{
AppState,
auth::check_auth, auth::check_auth,
error::AppError, error::AppError,
models::{CreatePostRequest, PostDetail, PostInfo}, models::{CreatePostRequest, PostDetail, PostInfo},
AppState,
}; };
pub async fn create_post( pub async fn create_post(
@@ -25,7 +25,10 @@ pub async fn create_post(
return Err(AppError::BadRequest("Invalid slug".to_string())); return Err(AppError::BadRequest("Invalid slug".to_string()));
} }
let file_path = state.data_dir.join("posts").join(format!("{}.md", payload.slug)); let file_path = state
.data_dir
.join("posts")
.join(format!("{}.md", payload.slug));
let mut file_content = String::new(); let mut file_content = String::new();
if let Some(ref summary) = payload.summary { if let Some(ref summary) = payload.summary {
@@ -99,13 +102,17 @@ pub async fn list_posts(State(state): State<Arc<AppState>>) -> impl IntoResponse
let body = parts[2]; let body = parts[2];
let clean_content = body.replace("#", "").replace("\n", " "); let clean_content = body.replace("#", "").replace("\n", " ");
excerpt = clean_content.chars().take(200).collect::<String>(); excerpt = clean_content.chars().take(200).collect::<String>();
if clean_content.len() > 200 { excerpt.push_str("..."); } if clean_content.len() > 200 {
excerpt.push_str("...");
}
} }
} }
} else { } else {
let clean_content = content.replace("#", "").replace("\n", " "); let clean_content = content.replace("#", "").replace("\n", " ");
excerpt = clean_content.chars().take(200).collect::<String>(); excerpt = clean_content.chars().take(200).collect::<String>();
if clean_content.len() > 200 { excerpt.push_str("..."); } if clean_content.len() > 200 {
excerpt.push_str("...");
}
} }
} }
posts.push(PostInfo { posts.push(PostInfo {
@@ -145,8 +152,12 @@ pub async fn get_post(
} }
} }
Ok(Json(PostDetail { slug, summary, content })) Ok(Json(PostDetail {
}, slug,
summary,
content,
}))
}
Err(_) => Err(AppError::NotFound("Post not found".to_string())), Err(_) => Err(AppError::NotFound("Post not found".to_string())),
} }
} }

17
backend/src/handlers/upload.rs
View File

@@ -1,17 +1,16 @@
use axum::{ use axum::{
Json,
extract::{Multipart, State}, extract::{Multipart, State},
http::HeaderMap, http::HeaderMap,
response::IntoResponse,
Json,
}; };
use std::{fs, sync::Arc}; use std::{fs, sync::Arc};
use tracing::{error, info, warn}; use tracing::{error, info, warn};
use crate::{ use crate::{
AppState,
auth::check_auth, auth::check_auth,
error::AppError, error::AppError,
models::{FileInfo, UploadResponse}, models::{FileInfo, UploadResponse},
AppState,
}; };
pub async fn list_uploads( pub async fn list_uploads(
@@ -79,7 +78,12 @@ pub async fn upload_file(
file_path file_path
}; };
let final_name_str = final_path.file_name().unwrap().to_str().unwrap().to_string(); let final_name_str = final_path
.file_name()
.unwrap()
.to_str()
.unwrap()
.to_string();
let data = match field.bytes().await { let data = match field.bytes().await {
Ok(bytes) => bytes, Ok(bytes) => bytes,
@@ -91,7 +95,10 @@ pub async fn upload_file(
if let Err(e) = fs::write(&final_path, &data) { if let Err(e) = fs::write(&final_path, &data) {
error!("Failed to write file to {:?}: {}", final_path, e); error!("Failed to write file to {:?}: {}", final_path, e);
return Err(AppError::Internal("Write error".to_string(), Some(e.to_string()))); return Err(AppError::Internal(
"Write error".to_string(),
Some(e.to_string()),
));
} }
info!("File uploaded successfully to {:?}", final_path); info!("File uploaded successfully to {:?}", final_path);

19
backend/src/main.rs
View File

@@ -4,9 +4,9 @@ pub mod handlers;
pub mod models; pub mod models;
use axum::{ use axum::{
extract::DefaultBodyLimit,
routing::{delete, get, post},
Router, Router,
extract::DefaultBodyLimit,
routing::{get, post},
}; };
use std::{env, fs, path::PathBuf, sync::Arc}; use std::{env, fs, path::PathBuf, sync::Arc};
use tower_http::{ use tower_http::{
@@ -54,9 +54,18 @@ async fn main() {
.allow_headers(Any); .allow_headers(Any);
let app = Router::new() let app = Router::new()
.route("/api/config", get(handlers::config::get_config).post(handlers::config::update_config)) .route(
.route("/api/posts", get(handlers::posts::list_posts).post(handlers::posts::create_post)) "/api/config",
.route("/api/posts/{slug}", get(handlers::posts::get_post).delete(handlers::posts::delete_post)) get(handlers::config::get_config).post(handlers::config::update_config),
)
.route(
"/api/posts",
get(handlers::posts::list_posts).post(handlers::posts::create_post),
)
.route(
"/api/posts/{slug}",
get(handlers::posts::get_post).delete(handlers::posts::delete_post),
)
.route("/api/uploads", get(handlers::upload::list_uploads)) .route("/api/uploads", get(handlers::upload::list_uploads))
.route("/api/upload", post(handlers::upload::upload_file)) .route("/api/upload", post(handlers::upload::upload_file))
.nest_service("/uploads", ServeDir::new(uploads_dir)) .nest_service("/uploads", ServeDir::new(uploads_dir))

3
backend/src/models.rs
View File

@@ -18,7 +18,8 @@ impl Default for SiteConfig {
title: "Narlblog".to_string(), title: "Narlblog".to_string(),
subtitle: "A clean, modern blog".to_string(), subtitle: "A clean, modern blog".to_string(),
welcome_title: "Welcome to my blog".to_string(), welcome_title: "Welcome to my blog".to_string(),
welcome_subtitle: "Thoughts on software, design, and building things with Rust and Astro.".to_string(), welcome_subtitle:
"Thoughts on software, design, and building things with Rust and Astro.".to_string(),
footer: "Built with Rust & Astro".to_string(), footer: "Built with Rust & Astro".to_string(),
favicon: "/favicon.svg".to_string(), favicon: "/favicon.svg".to_string(),
theme: "mocha".to_string(), theme: "mocha".to_string(),

25
frontend/src/components/ThemeSwitcher.astro Normal file
View File

@@ -0,0 +1,25 @@
---
const { defaultTheme } = Astro.props;
---
<select id="user-theme-switcher" class="bg-surface0/50 text-text border border-surface1 rounded px-2 py-1 text-xs focus:outline-none focus:border-mauve transition-colors cursor-pointer">
<option value="mocha">Mocha</option>
<option value="macchiato">Macchiato</option>
<option value="frappe">Frappe</option>
<option value="latte">Latte</option>
<option value="scaled-and-icy">Scaled and Icy</option>
</select>
<script is:inline define:vars={{ defaultTheme }}>
const switcher = document.getElementById('user-theme-switcher');
if (switcher) {
const savedTheme = localStorage.getItem('user-theme') || defaultTheme;
switcher.value = savedTheme;
switcher.addEventListener('change', (e) => {
const newTheme = e.target.value;
localStorage.setItem('user-theme', newTheme);
document.documentElement.className = newTheme;
});
}
</script>

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

@@ -1,5 +1,6 @@
--- ---
import '../styles/global.css'; import '../styles/global.css';
import ThemeSwitcher from '../components/ThemeSwitcher.astro';
interface Props { interface Props {
title: string; title: string;
@@ -45,7 +46,7 @@ try {
</head> </head>
<body class="bg-base text-text selection:bg-surface2 selection:text-text"> <body class="bg-base text-text selection:bg-surface2 selection:text-text">
<!-- Dynamic Mesh Gradient Background --> <!-- Dynamic Mesh Gradient Background -->
<div class="fixed inset-0 z-[-1] overflow-hidden bg-base"> <div class="fixed inset-0 z-[-1] overflow-hidden bg-base text-text">
<div class="absolute top-[-10%] left-[-10%] w-[60%] h-[50%] rounded-full bg-mauve/15 blur-[120px] opacity-70 animate-pulse" style="animation-duration: 10s;"></div> <div class="absolute top-[-10%] left-[-10%] w-[60%] h-[50%] rounded-full bg-mauve/15 blur-[120px] opacity-70 animate-pulse" style="animation-duration: 10s;"></div>
<div class="absolute bottom-[-10%] right-[-10%] w-[60%] h-[60%] rounded-full bg-blue/15 blur-[120px] opacity-60 animate-pulse" style="animation-duration: 15s;"></div> <div class="absolute bottom-[-10%] right-[-10%] w-[60%] h-[60%] rounded-full bg-blue/15 blur-[120px] opacity-60 animate-pulse" style="animation-duration: 15s;"></div>
<div class="absolute top-[30%] right-[10%] w-[40%] h-[40%] rounded-full bg-teal/10 blur-[100px] opacity-50 animate-pulse" style="animation-duration: 12s;"></div> <div class="absolute top-[30%] right-[10%] w-[40%] h-[40%] rounded-full bg-teal/10 blur-[100px] opacity-50 animate-pulse" style="animation-duration: 12s;"></div>
@@ -62,13 +63,7 @@ try {
<div class="flex gap-3 md:gap-4 items-center text-sm md:text-base w-full md:w-auto justify-center md:justify-end"> <div class="flex gap-3 md:gap-4 items-center text-sm md:text-base w-full md:w-auto justify-center md:justify-end">
<a href="/" class="text-subtext0 hover:text-text transition-colors">Home</a> <a href="/" class="text-subtext0 hover:text-text transition-colors">Home</a>
<a href="/admin" class="text-subtext0 hover:text-mauve transition-colors">Admin</a> <a href="/admin" class="text-subtext0 hover:text-mauve transition-colors">Admin</a>
<select id="user-theme-switcher" class="bg-surface0/50 text-text border border-surface1 rounded px-2 py-1 text-xs focus:outline-none focus:border-mauve transition-colors cursor-pointer"> <ThemeSwitcher defaultTheme={siteConfig.theme} />
<option value="mocha">Mocha</option>
<option value="macchiato">Macchiato</option>
<option value="frappe">Frappe</option>
<option value="latte">Latte</option>
<option value="scaled-and-icy">Scaled and Icy</option>
</select>
</div> </div>
</header> </header>
</nav> </nav>
@@ -83,21 +78,5 @@ try {
&copy; {new Date().getFullYear()} {siteConfig.title} &copy; {new Date().getFullYear()} {siteConfig.title}
</div> </div>
</footer> </footer>
<script is:inline define:vars={{ defaultTheme: siteConfig.theme }}>
document.addEventListener('DOMContentLoaded', () => {
const switcher = document.getElementById('user-theme-switcher');
if (switcher) {
const savedTheme = localStorage.getItem('user-theme') || defaultTheme;
switcher.value = savedTheme;
switcher.addEventListener('change', (e) => {
const newTheme = e.target.value;
localStorage.setItem('user-theme', newTheme);
document.documentElement.className = newTheme;
});
}
});
</script>
</body> </body>
</html> </html>

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

@@ -3,7 +3,7 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
--- ---
<AdminLayout title="Write Post"> <AdminLayout title="Write Post">
<p slot="header-subtitle" id="post-status" class="text-subtext1 mt-2 text-sm md:text-base">Create/Edit post.</p> <p slot="header-subtitle" id="post-status" class="mt-2 text-sm md:text-base" style="color: var(--text) !important;">Create/Edit post.</p>
<div slot="header-actions" class="flex gap-4 w-full"> <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"> <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">

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

@@ -1,5 +1,10 @@
@import "tailwindcss"; @import "tailwindcss";
/*
* NARLBLOG PROFESSIONAL THEME ENGINE
* All UI components are automatically linked to these tokens.
*/
@theme { @theme {
--color-crust: var(--crust); --color-crust: var(--crust);
--color-mantle: var(--mantle); --color-mantle: var(--mantle);
@@ -65,11 +70,12 @@
--flamingo: #eebebe; --rosewater: #f2d5cf; --flamingo: #eebebe; --rosewater: #f2d5cf;
} }
/* Highly optimized light mode colors */
.latte { .latte {
--crust: #e6e9ef; --mantle: #dce0e8; --base: #eff1f5; --crust: #e6e9ef; --mantle: #dce0e8; --base: #eff1f5;
--surface0: #ccd0da; --surface1: #bcc0cc; --surface2: #acb0be; --surface0: #ccd0da; --surface1: #bcc0cc; --surface2: #acb0be;
--overlay0: #9ca0b0; --overlay1: #8c8fa1; --overlay2: #7c7f93; --overlay0: #9ca0b0; --overlay1: #8c8fa1; --overlay2: #7c7f93;
--text: #4c4f69; --subtext0: #5c5f77; --subtext1: #6c6f85; --text: #1e1e2e; --subtext0: #4c4f69; --subtext1: #5c5f77;
--blue: #1e66f5; --lavender: #7287fd; --sapphire: #209fb5; --blue: #1e66f5; --lavender: #7287fd; --sapphire: #209fb5;
--sky: #04a5e5; --teal: #179299; --green: #40a02b; --sky: #04a5e5; --teal: #179299; --green: #40a02b;
--yellow: #df8e1d; --peach: #fe640b; --maroon: #e64553; --yellow: #df8e1d; --peach: #fe640b; --maroon: #e64553;
@@ -96,57 +102,18 @@ body {
transition: background-color 0.3s ease, color 0.3s ease; transition: background-color 0.3s ease, color 0.3s ease;
} }
/* Dynamic CodeMirror Theme */ /* Professional Typography */
.cm-s-narlblog.CodeMirror {
background: var(--crust) !important;
color: var(--text) !important;
border: 1px solid var(--surface1);
}
.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; }
.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); }
/* Dynamic Highlight.js Theme */
.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; }
.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; }
/* Typography styles for Markdown */
.prose { color: var(--text) !important; } .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 h1 { @apply text-3xl md:text-4xl font-bold mb-4 md:mb-6; 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 h2 { @apply text-2xl md:text-3xl font-semibold mb-3 md:mb-4 mt-6 md:mt-8; 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 h3 { @apply text-xl md:text-2xl font-medium mb-2 md:mb-3 mt-4 md:mt-6; color: var(--blue) !important; }
.prose p { @apply mb-3 md:mb-4 leading-relaxed text-sm md:text-base; color: var(--text) !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 blockquote { @apply border-l-4 border-surface2 pl-4 italic my-4 md:my-6; color: var(--subtext0) !important; }
.prose ul { @apply list-disc list-inside mb-3 md:mb-4 text-sm md:text-base; color: var(--text) !important; } .prose pre { @apply 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 ol { @apply list-decimal list-inside mb-3 md:mb-4 text-sm md:text-base; color: var(--text) !important; } .prose code { @apply bg-surface0 px-1.5 py-0.5 rounded text-xs md:text-sm font-mono; color: var(--peach) !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 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; }
/* Dynamic UI Components */
.glass { .glass {
background-color: color-mix(in srgb, var(--surface0) 60%, transparent); background-color: color-mix(in srgb, var(--surface0) 60%, transparent);
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
@@ -154,3 +121,18 @@ body {
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
border-radius: 1rem; border-radius: 1rem;
} }
.cm-s-narlblog.CodeMirror {
background: var(--crust) !important;
color: var(--text) !important;
border: 1px solid var(--surface1);
}
.cm-s-narlblog .cm-header { color: var(--mauve) !important; }
.cm-s-narlblog .cm-string { color: var(--green) !important; }
.cm-s-narlblog .cm-keyword { color: var(--mauve) !important; font-weight: bold; }
.cm-s-narlblog .CodeMirror-cursor { border-left-color: var(--text) !important; }
.hljs { color: var(--text) !important; background: transparent !important; }
.hljs-keyword, .hljs-selector-tag { color: var(--mauve) !important; font-weight: bold; }
.hljs-string { color: var(--green) !important; }
.hljs-comment { color: var(--subtext0) !important; font-style: italic; }