Skip to content

Commit ba233d5

Browse files
Mirix-AIMirix-AI
committed
update code
1 parent 314b73d commit ba233d5

2 files changed

Lines changed: 31 additions & 30 deletions

File tree

‎src/BlogPost.tsx‎

Lines changed: 28 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -27,17 +27,18 @@ function BlogPost() {
2727
}, [slug]);
2828

2929
return (
30-
<div className="min-h-screen bg-[#050505] text-white font-sans selection:bg-white/20">
31-
{/* Grid Background */}
32-
<div className="fixed inset-0 z-0 pointer-events-none">
33-
<div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"></div>
30+
<div className="min-h-screen bg-[#050812] text-white font-sans selection:bg-blue-300/30 selection:text-white">
31+
{/* Background */}
32+
<div className="fixed inset-0 z-0 pointer-events-none overflow-hidden">
33+
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(37,99,235,0.16),transparent_52%),radial-gradient(circle_at_80%_15%,rgba(14,165,233,0.12),transparent_40%)]" />
34+
<div className="absolute inset-0 bg-[linear-gradient(to_right,#33415518_1px,transparent_1px),linear-gradient(to_bottom,#33415518_1px,transparent_1px)] bg-[size:28px_28px]" />
3435
</div>
3536

3637
{/* Navigation */}
37-
<nav className="fixed top-0 left-0 right-0 z-50 border-b border-white/5 bg-[#050505]/80 backdrop-blur-md">
38-
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
38+
<nav className="fixed top-0 left-0 right-0 z-50 border-b border-slate-800/80 bg-[#050812]/85 backdrop-blur-xl">
39+
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
3940
<div className="flex items-center justify-between h-14">
40-
<Link to="/blog" className="flex items-center gap-2 text-zinc-400 hover:text-white transition-colors text-sm">
41+
<Link to="/blog" className="flex items-center gap-2 text-slate-300 hover:text-white transition-colors text-sm font-medium">
4142
<ArrowLeft className="w-4 h-4" />
4243
<span>Back to Blog</span>
4344
</Link>
@@ -53,16 +54,16 @@ function BlogPost() {
5354
</nav>
5455

5556
{/* Blog Post Content */}
56-
<div className="relative z-10 pt-32 pb-24 px-4">
57+
<div className="relative z-10 pt-28 pb-24 px-4">
5758
<div className="max-w-4xl mx-auto">
5859
{loading ? (
5960
<div className="text-center py-20">
60-
<div className="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-white/20"></div>
61-
<p className="text-zinc-400 mt-4 text-sm">Loading...</p>
61+
<div className="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-300/30"></div>
62+
<p className="text-slate-400 mt-4 text-sm">Loading...</p>
6263
</div>
6364
) : (
6465
<motion.article
65-
className="prose prose-invert prose-lg max-w-none"
66+
className="max-w-none rounded-2xl border border-slate-800/80 bg-[#060d1a]/85 shadow-[0_0_0_1px_rgba(30,41,59,0.45),0_18px_60px_rgba(2,8,23,0.55)] p-6 md:p-10"
6667
initial={{ opacity: 0, y: 20 }}
6768
animate={{ opacity: 1, y: 0 }}
6869
transition={{ duration: 0.5 }}
@@ -71,27 +72,27 @@ function BlogPost() {
7172
rehypePlugins={[rehypeHighlight]}
7273
components={{
7374
// Customize markdown rendering
74-
h1: ({node, children, ...props}) => <h1 className="text-4xl md:text-5xl font-bold text-white mb-6 tracking-tight" {...props}>{children}</h1>,
75-
h2: ({node, children, ...props}) => <h2 className="text-3xl md:text-4xl font-bold text-white mt-12 mb-6 tracking-tight" {...props}>{children}</h2>,
76-
h3: ({node, children, ...props}) => <h3 className="text-2xl md:text-3xl font-bold text-white mt-8 mb-4 tracking-tight" {...props}>{children}</h3>,
77-
h4: ({node, children, ...props}) => <h4 className="text-xl md:text-2xl font-bold text-white mt-6 mb-3" {...props}>{children}</h4>,
78-
p: ({node, ...props}) => <p className="text-zinc-300 leading-relaxed mb-6" {...props} />,
79-
a: ({node, children, ...props}) => <a className="text-white underline hover:text-zinc-300 transition-colors" {...props}>{children}</a>,
80-
ul: ({node, ...props}) => <ul className="text-zinc-300 space-y-2 mb-6 ml-6" {...props} />,
81-
ol: ({node, ...props}) => <ol className="text-zinc-300 space-y-2 mb-6 ml-6" {...props} />,
82-
li: ({node, ...props}) => <li className="text-zinc-300" {...props} />,
75+
h1: ({node, children, ...props}) => <h1 className="text-4xl md:text-5xl font-semibold text-white mb-4 tracking-tight leading-tight" {...props}>{children}</h1>,
76+
h2: ({node, children, ...props}) => <h2 className="text-3xl md:text-4xl font-semibold text-white mt-12 mb-4 tracking-tight leading-tight" {...props}>{children}</h2>,
77+
h3: ({node, children, ...props}) => <h3 className="text-2xl md:text-3xl font-semibold text-white mt-8 mb-3 tracking-tight" {...props}>{children}</h3>,
78+
h4: ({node, children, ...props}) => <h4 className="text-xl md:text-2xl font-semibold text-white mt-6 mb-3" {...props}>{children}</h4>,
79+
p: ({node, ...props}) => <p className="text-slate-300/95 leading-8 mb-5 text-[1.05rem]" {...props} />,
80+
a: ({node, children, ...props}) => <a className="text-sky-300 underline underline-offset-4 decoration-sky-400/50 hover:text-sky-200 transition-colors" {...props}>{children}</a>,
81+
ul: ({node, ...props}) => <ul className="text-slate-300 space-y-2 mb-6 ml-6 list-disc marker:text-sky-400" {...props} />,
82+
ol: ({node, ...props}) => <ol className="text-slate-300 space-y-2 mb-6 ml-6 list-decimal marker:text-sky-400" {...props} />,
83+
li: ({node, ...props}) => <li className="text-slate-300 pl-1" {...props} />,
8384
code: ({node, inline, ...props}: any) =>
8485
inline ? (
85-
<code className="bg-white/10 text-white px-2 py-0.5 rounded text-sm font-mono" {...props} />
86+
<code className="bg-slate-900/90 text-amber-200 px-2 py-1 rounded-md text-sm font-mono border border-slate-700/70" {...props} />
8687
) : (
87-
<code className="block bg-[#0A0A0A] text-zinc-300 p-4 rounded-lg overflow-x-auto text-sm font-mono" {...props} />
88+
<code className="block bg-transparent text-slate-200 p-5 rounded-xl overflow-x-auto text-sm leading-7 font-mono" {...props} />
8889
),
89-
pre: ({node, ...props}) => <pre className="bg-[#0A0A0A] rounded-lg overflow-hidden mb-6 border border-white/10" {...props} />,
90-
blockquote: ({node, ...props}) => <blockquote className="border-l-4 border-white/20 pl-4 italic text-zinc-400 my-6" {...props} />,
91-
hr: ({node, ...props}) => <hr className="border-white/10 my-8" {...props} />,
90+
pre: ({node, ...props}) => <pre className="bg-[#0a1324] rounded-xl overflow-hidden mb-7 border border-slate-700/70 shadow-[inset_0_1px_0_rgba(148,163,184,0.06)]" {...props} />,
91+
blockquote: ({node, ...props}) => <blockquote className="border-l-4 border-sky-500/50 pl-4 italic text-slate-400 my-6" {...props} />,
92+
hr: ({node, ...props}) => <hr className="border-slate-700/80 my-8" {...props} />,
9293
strong: ({node, ...props}) => <strong className="text-white font-bold" {...props} />,
93-
em: ({node, ...props}) => <em className="text-zinc-300 italic" {...props} />,
94-
img: ({node, alt, ...props}) => <img alt={alt || ''} className="rounded-lg border border-white/10 my-8" {...props} />,
94+
em: ({node, ...props}) => <em className="text-slate-200 italic" {...props} />,
95+
img: ({node, alt, ...props}) => <img alt={alt || ''} className="rounded-xl border border-slate-700/70 my-8" {...props} />,
9596
}}
9697
>
9798
{content}

‎src/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom/client';
3-
import { BrowserRouter, Routes, Route } from 'react-router-dom';
3+
import { HashRouter, Routes, Route } from 'react-router-dom';
44
import './index.css';
55
import App from './App';
66
import Blog from './Blog';
@@ -11,12 +11,12 @@ const root = ReactDOM.createRoot(
1111
);
1212
root.render(
1313
<React.StrictMode>
14-
<BrowserRouter>
14+
<HashRouter>
1515
<Routes>
1616
<Route path="/" element={<App />} />
1717
<Route path="/blog" element={<Blog />} />
1818
<Route path="/blog/:slug" element={<BlogPost />} />
1919
</Routes>
20-
</BrowserRouter>
20+
</HashRouter>
2121
</React.StrictMode>
2222
);

0 commit comments

Comments
 (0)