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

ui redesign, markdown fix + metadata and auth header

Browse Source
This commit is contained in:
Nils Pukropp
2026-05-09 05:09:07 +02:00
parent 7f8a66f360
commit bc6a34cf1f
42 changed files with 3093 additions and 517 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/layouts/Layout.astro
+41 -17
View File
@@ -1,13 +1,20 @@
---
import '../styles/global.css';
import 'katex/dist/katex.min.css';
import 'highlight.js/styles/atom-one-dark.css';
import '@fontsource-variable/inter';
import '@fontsource-variable/jetbrains-mono';
import ThemeSwitcher from '../components/react/ThemeSwitcher';
interface Props {
title: string;
wide?: boolean;
description?: string;
image?: string;
type?: 'website' | 'article';
}
const { title, wide = false } = Astro.props;
const { title, wide = false, description, image, type = 'website' } = Astro.props;
const API_URL = process.env.PUBLIC_API_URL || 'http://backend:3000';
@@ -29,28 +36,42 @@ try {
console.error("Failed to fetch config:", e);
}
const fullTitle = `${title} | ${siteConfig.title}`;
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" href={siteConfig.favicon} />
<meta name="generator" content={Astro.generator} />
<title>{title} | {siteConfig.title}</title>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" href={siteConfig.favicon} />
<meta name="generator" content={Astro.generator} />
<title>{fullTitle}</title>
{description && <meta name="description" content={description} />}
<meta property="og:title" content={fullTitle} />
{description && <meta property="og:description" content={description} />}
<meta property="og:type" content={type} />
<meta property="og:site_name" content={siteConfig.title} />
<meta property="og:url" content={Astro.url.href} />
{image && <meta property="og:image" content={image} />}
<meta name="twitter:card" content={image ? 'summary_large_image' : 'summary'} />
<meta name="twitter:title" content={fullTitle} />
{description && <meta name="twitter:description" content={description} />}
{image && <meta name="twitter:image" content={image} />}
<link rel="alternate" type="application/rss+xml" title={siteConfig.title} href="/feed.xml" />
{siteConfig.custom_css && <style set:html={siteConfig.custom_css} />}
<script is:inline define:vars={{ defaultTheme: siteConfig.theme }}>
const savedTheme = localStorage.getItem('user-theme') || defaultTheme;
document.documentElement.className = savedTheme;
document.documentElement.classList.add(savedTheme);
</script>
</head>
<body class="bg-base text-text selection:bg-surface2 selection:text-text">
<!-- Dynamic Mesh Gradient Background -->
<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 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>
<slot name="head" />
</head>
<body class="bg-base text-text selection:bg-surface2 selection:text-text">
<!-- Static Mesh Gradient Background -->
<div class="fixed inset-0 z-[-1] overflow-hidden bg-base pointer-events-none">
<div class="absolute top-[-10%] left-[-10%] w-[55%] h-[45%] rounded-full bg-mauve/10 blur-[110px] opacity-60"></div>
<div class="absolute bottom-[-10%] right-[-10%] w-[55%] h-[55%] rounded-full bg-blue/10 blur-[110px] opacity-50"></div>
<div class="absolute top-[30%] right-[10%] w-[35%] h-[35%] rounded-full bg-teal/8 blur-[90px] opacity-40"></div>
</div>
<nav class="max-w-6xl mx-auto px-4 md:px-6 py-4 md:py-8">
@@ -70,14 +91,17 @@ try {
</nav>
<main class={`mx-auto px-4 md:px-6 py-4 md:py-8 ${wide ? 'max-w-[95vw]' : 'max-w-6xl'}`}>
<slot />
<slot />
</main>
<footer class="max-w-6xl mx-auto px-4 md:px-6 py-8 md:py-12 text-center text-xs md:text-sm text-subtext1 border-t border-white/5 mt-8 md:mt-12">
<p class="mb-2">{siteConfig.footer}</p>
<div class="text-xs text-subtext0 mb-2">
<a href="/feed.xml" class="hover:text-mauve transition-colors">RSS</a>
</div>
<div class="text-subtext0 opacity-50">
&copy; {new Date().getFullYear()} {siteConfig.title}
</div>
</footer>
</body>
</body>
</html>