🖼️ update blog post styles
This commit is contained in:
RJ
@@ -1,4 +1,4 @@
|
||||
import { Breadcrumbs } from '@/components/layout/breadcrumbs';
|
||||
import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
|
||||
|
||||
export default function AboutBreadcrumb() {
|
||||
return (
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Breadcrumbs } from '@/components/layout/breadcrumbs';
|
||||
import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
|
||||
import { getPostBySlug } from '@/lib/markdown';
|
||||
|
||||
interface BreadcrumbItem {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Breadcrumbs } from '@/components/layout/breadcrumbs';
|
||||
import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
|
||||
|
||||
export default function BlogBreadcrumb() {
|
||||
return (
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { Breadcrumbs } from '@/components/layout/breadcrumbs';
|
||||
import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
|
||||
|
||||
export default function DefaultBreadcrumb() {
|
||||
return <Breadcrumbs />;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Breadcrumbs } from '@/components/layout/breadcrumbs';
|
||||
import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
|
||||
|
||||
export default async function TagBreadcrumb({
|
||||
params,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Breadcrumbs } from '@/components/layout/breadcrumbs';
|
||||
import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
|
||||
|
||||
export default function TagsBreadcrumb() {
|
||||
return (
|
||||
|
||||
@@ -3,6 +3,10 @@ import { notFound } from 'next/navigation'
|
||||
import Link from 'next/link'
|
||||
import { getAllPosts, getPostBySlug, getRelatedPosts } from '@/lib/markdown'
|
||||
import { formatDate, formatRelativeDate } from '@/lib/utils'
|
||||
import { TableOfContents } from '@/components/blog/table-of-contents'
|
||||
import { ReadingProgress } from '@/components/blog/reading-progress'
|
||||
import { StickyFooter } from '@/components/blog/sticky-footer'
|
||||
import MarkdownRenderer from '@/components/blog/markdown-renderer'
|
||||
|
||||
export async function generateStaticParams() {
|
||||
const posts = await getAllPosts()
|
||||
@@ -39,41 +43,19 @@ export async function generateMetadata({ params }: { params: Promise<{ slug: str
|
||||
}
|
||||
}
|
||||
|
||||
function AuthorInfo({ author, date }: { author: string; date: string }) {
|
||||
return (
|
||||
<div className="flex items-center space-x-4 py-6 border-y border-gray-200 dark:border-gray-700">
|
||||
<div className="w-12 h-12 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center">
|
||||
<span className="text-xl font-bold text-primary-600 dark:text-primary-400">
|
||||
{author.charAt(0).toUpperCase()}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold">{author}</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
Publicat {formatRelativeDate(date)} • {formatDate(date)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
function extractHeadings(content: string) {
|
||||
const headingRegex = /^(#{2,3})\s+(.+)$/gm
|
||||
const headings: { id: string; text: string; level: number }[] = []
|
||||
let match
|
||||
|
||||
function RelatedPosts({ posts }: { posts: any[] }) {
|
||||
if (posts.length === 0) return null
|
||||
while ((match = headingRegex.exec(content)) !== null) {
|
||||
const level = match[1].length
|
||||
const text = match[2]
|
||||
const id = text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '')
|
||||
headings.push({ id, text, level })
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="mt-12 pt-8 border-t border-gray-200 dark:border-gray-700">
|
||||
<h2 className="text-2xl font-bold mb-6">Articole similare</h2>
|
||||
<div className="grid gap-6 md:grid-cols-3">
|
||||
{posts.map((post) => (
|
||||
<Link key={post.slug} href={`/blog/${post.slug}`} className="block p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:shadow-lg transition">
|
||||
<h3 className="font-semibold mb-2 line-clamp-2">{post.frontmatter.title}</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">{post.frontmatter.description}</p>
|
||||
<p className="text-xs text-gray-500 mt-2">{formatDate(post.frontmatter.date)}</p>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
return headings
|
||||
}
|
||||
|
||||
export default async function BlogPostPage({ params }: { params: Promise<{ slug: string[] }> }) {
|
||||
@@ -86,44 +68,118 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
|
||||
}
|
||||
|
||||
const relatedPosts = await getRelatedPosts(slugPath)
|
||||
const headings = extractHeadings(post.content)
|
||||
const fullUrl = `https://yourdomain.com/blog/${slugPath}`
|
||||
|
||||
return (
|
||||
<article className="max-w-4xl mx-auto">
|
||||
<header className="mb-8">
|
||||
{post.frontmatter.image && (
|
||||
<img src={post.frontmatter.image} alt={post.frontmatter.title} className="w-full h-64 md:h-96 object-cover rounded-lg mb-8" />
|
||||
)}
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-4">{post.frontmatter.title}</h1>
|
||||
<p className="text-xl text-gray-600 dark:text-gray-400 mb-6">{post.frontmatter.description}</p>
|
||||
{post.frontmatter.tags && post.frontmatter.tags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mb-6">
|
||||
{post.frontmatter.tags.map((tag: string) => (
|
||||
<Link key={tag} href={`/tags/${tag.toLowerCase().replace(/\s+/g, '-')}`} className="px-3 py-1 bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300 rounded-full text-sm hover:bg-primary-200 dark:hover:bg-primary-800 transition">
|
||||
#{tag}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<AuthorInfo author={post.frontmatter.author} date={post.frontmatter.date} />
|
||||
</header>
|
||||
<>
|
||||
<ReadingProgress />
|
||||
|
||||
<div className="prose dark:prose-invert max-w-none">
|
||||
<div className="flex items-center justify-between text-sm text-gray-500 mb-6">
|
||||
<span>Timp estimat de citire: {post.readingTime} minute</span>
|
||||
<div className="max-w-7xl mx-auto px-6 py-16">
|
||||
<div className="flex gap-12">
|
||||
<TableOfContents headings={headings} />
|
||||
|
||||
<article className="flex-1 min-w-0">
|
||||
<header className="mb-16 border border-[var(--neon-cyan)] bg-[rgb(var(--bg-primary))] p-8 relative">
|
||||
<div className="border-b border-[var(--neon-pink)] pb-4 mb-6 relative">
|
||||
<div className="flex items-center gap-3 mb-3 justify-end">
|
||||
<p className="font-mono text-xs text-[var(--neon-cyan)] uppercase tracking-widest">
|
||||
>> CLASSIFIED_DOC://PUBLIC_ACCESS
|
||||
</p>
|
||||
<div className="flex gap-1.5">
|
||||
<div className="w-4 h-4 border border-[rgb(var(--border-primary))] hover:bg-red-500/10 cursor-pointer" />
|
||||
<div className="w-4 h-4 border border-[rgb(var(--border-primary))] hover:bg-yellow-500/10 cursor-pointer" />
|
||||
<div className="w-4 h-4 border border-[rgb(var(--border-primary))] hover:bg-green-500/10 cursor-pointer" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 mb-2">
|
||||
{post.frontmatter.tags.map((tag: string) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="px-3 py-1 bg-cyan-500/5 border border-[var(--neon-cyan)] text-cyan-400 text-xs font-mono uppercase shadow-[0_0_8px_rgba(90,139,149,0.3)] hover:shadow-[0_0_12px_rgba(90,139,149,0.5)] transition-all"
|
||||
>
|
||||
#{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-l border-[var(--neon-magenta)] pl-6 relative">
|
||||
<h1 className="text-4xl md:text-5xl font-mono font-bold text-[var(--neon-cyan)] uppercase tracking-tight leading-tight mb-6">
|
||||
{post.frontmatter.title}
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-[rgb(var(--text-secondary))] leading-relaxed mb-6 font-mono">
|
||||
<span className="text-[var(--neon-pink)]">>></span> {post.frontmatter.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 pt-6 border-t border-[var(--neon-purple)] relative">
|
||||
<div className="w-12 h-12 border border-[var(--neon-cyan)] bg-[rgb(var(--bg-secondary))] flex items-center justify-center">
|
||||
<span className="font-mono text-[var(--neon-cyan)] text-xs">
|
||||
{post.frontmatter.author.charAt(0).toUpperCase()}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-mono font-bold text-[var(--neon-cyan)] uppercase text-sm">{post.frontmatter.author}</p>
|
||||
<div className="flex items-center gap-2 text-xs text-[rgb(var(--text-muted))] font-mono">
|
||||
<time className="text-[var(--neon-magenta)]">{formatDate(post.frontmatter.date)}</time>
|
||||
<span className="text-[var(--neon-pink)]">//</span>
|
||||
<span className="text-[var(--neon-cyan)]">{post.readingTime}min READ</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{post.frontmatter.image && (
|
||||
<div className="relative aspect-video mb-16 border border-[var(--neon-pink)] overflow-hidden">
|
||||
<img
|
||||
src={post.frontmatter.image}
|
||||
alt={post.frontmatter.title}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="prose prose-invert prose-lg max-w-none cyberpunk-prose">
|
||||
<MarkdownRenderer content={post.content} />
|
||||
</div>
|
||||
|
||||
{relatedPosts.length > 0 && (
|
||||
<section className="mt-12 pt-8 border-t border-zinc-800">
|
||||
<h2 className="text-2xl font-mono font-bold uppercase text-[var(--neon-cyan)] mb-6">// Articole similare</h2>
|
||||
<div className="grid gap-6 md:grid-cols-3">
|
||||
{relatedPosts.map((relatedPost) => (
|
||||
<Link
|
||||
key={relatedPost.slug}
|
||||
href={`/blog/${relatedPost.slug}`}
|
||||
className="block p-4 border border-zinc-800 bg-zinc-950 hover:border-[var(--neon-cyan)] transition-all hover:shadow-[0_0_8px_rgba(90,139,149,0.2)]"
|
||||
>
|
||||
<h3 className="font-mono font-semibold text-cyan-400 mb-2 line-clamp-2">{relatedPost.frontmatter.title}</h3>
|
||||
<p className="text-sm text-zinc-400 line-clamp-2">{relatedPost.frontmatter.description}</p>
|
||||
<p className="text-xs text-zinc-600 mt-2 font-mono">{formatDate(relatedPost.frontmatter.date)}</p>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<nav className="flex justify-between items-center mt-12 pt-8 border-t border-zinc-800">
|
||||
<Link
|
||||
href="/blog"
|
||||
className="flex items-center text-[var(--neon-pink)] hover:text-[var(--neon-magenta)] transition-all font-mono text-sm uppercase border border-[var(--neon-pink)] px-4 py-2 hover:shadow-[0_0_6px_rgba(155,90,110,0.3)]"
|
||||
>
|
||||
<svg className="mr-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
[BACK TO BLOG]
|
||||
</Link>
|
||||
</nav>
|
||||
</article>
|
||||
</div>
|
||||
<div dangerouslySetInnerHTML={{ __html: post.content }} />
|
||||
</div>
|
||||
|
||||
<nav className="flex justify-between items-center mt-12 pt-8 border-t border-gray-200 dark:border-gray-700">
|
||||
<Link href="/blog" className="flex items-center text-primary-600 hover:text-primary-700 transition">
|
||||
<svg className="mr-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
Înapoi la blog
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
<RelatedPosts posts={relatedPosts} />
|
||||
</article>
|
||||
<StickyFooter url={fullUrl} title={post.frontmatter.title} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -65,22 +65,21 @@ export default function BlogPageClient({ posts, allTags }: BlogPageClientProps)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-zinc-900">
|
||||
<Navbar />
|
||||
<div className="min-h-screen bg-[rgb(var(--bg-primary))]">
|
||||
|
||||
<div className="max-w-7xl mx-auto px-6 py-12">
|
||||
{/* Header */}
|
||||
<div className="border-l-4 border-cyan-400 pl-6 mb-12">
|
||||
<p className="font-mono text-xs text-zinc-500 uppercase tracking-widest mb-2">
|
||||
<div className="border-l border-[var(--neon-cyan)] pl-6 mb-12">
|
||||
<p className="font-mono text-xs text-[rgb(var(--text-muted))] uppercase tracking-widest mb-2">
|
||||
DATABASE QUERY // SEARCH RESULTS
|
||||
</p>
|
||||
<h1 className="text-4xl md:text-6xl font-mono font-bold text-zinc-100 uppercase tracking-tight">
|
||||
<h1 className="text-4xl md:text-6xl font-mono font-bold text-[rgb(var(--text-primary))] uppercase tracking-tight">
|
||||
> BLOG ARCHIVE_
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Search Bar */}
|
||||
<div className="border-4 border-slate-700 bg-slate-900 p-6 mb-8">
|
||||
<div className="border border-[rgb(var(--border-primary))] bg-[rgb(var(--bg-secondary))] p-6 mb-8">
|
||||
<div className="flex flex-col lg:flex-row gap-4">
|
||||
<SearchBar
|
||||
searchQuery={searchQuery}
|
||||
@@ -109,7 +108,7 @@ export default function BlogPageClient({ posts, allTags }: BlogPageClientProps)
|
||||
|
||||
{/* Results Count */}
|
||||
<div className="mb-6">
|
||||
<p className="font-mono text-sm text-zinc-500 uppercase">
|
||||
<p className="font-mono text-sm text-[rgb(var(--text-muted))] uppercase">
|
||||
FOUND {filteredAndSortedPosts.length} {filteredAndSortedPosts.length === 1 ? 'POST' : 'POSTS'}
|
||||
</p>
|
||||
</div>
|
||||
@@ -131,8 +130,8 @@ export default function BlogPageClient({ posts, allTags }: BlogPageClientProps)
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="border-4 border-slate-700 bg-slate-900 p-12 text-center">
|
||||
<p className="font-mono text-lg text-zinc-400 uppercase">
|
||||
<div className="border border-[rgb(var(--border-primary))] bg-[rgb(var(--bg-secondary))] p-12 text-center">
|
||||
<p className="font-mono text-lg text-[rgb(var(--text-muted))] uppercase">
|
||||
NO POSTS FOUND // TRY DIFFERENT SEARCH TERMS
|
||||
</p>
|
||||
</div>
|
||||
@@ -140,12 +139,12 @@ export default function BlogPageClient({ posts, allTags }: BlogPageClientProps)
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<div className="border-4 border-slate-700 bg-slate-900 p-6">
|
||||
<div className="border border-[rgb(var(--border-primary))] bg-[rgb(var(--bg-secondary))] p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<button
|
||||
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
|
||||
disabled={currentPage === 1}
|
||||
className="px-6 py-3 font-mono text-sm uppercase border-2 border-slate-700 text-zinc-100 disabled:opacity-30 disabled:cursor-not-allowed hover:border-cyan-400 hover:text-cyan-400 transition-colors cursor-pointer"
|
||||
className="px-6 py-3 font-mono text-sm uppercase border border-[rgb(var(--border-primary))] text-[rgb(var(--text-primary))] disabled:opacity-30 disabled:cursor-not-allowed hover:border-[var(--neon-cyan)] hover:text-[var(--neon-cyan)] transition-colors cursor-pointer"
|
||||
>
|
||||
< PREV
|
||||
</button>
|
||||
@@ -154,10 +153,10 @@ export default function BlogPageClient({ posts, allTags }: BlogPageClientProps)
|
||||
<button
|
||||
key={page}
|
||||
onClick={() => setCurrentPage(page)}
|
||||
className={`w-12 h-12 font-mono text-sm border-2 transition-colors cursor-pointer ${
|
||||
className={`w-12 h-12 font-mono text-sm border transition-colors cursor-pointer ${
|
||||
currentPage === page
|
||||
? 'bg-cyan-400 border-cyan-400 text-slate-900'
|
||||
: 'border-slate-700 text-zinc-400 hover:border-cyan-400 hover:text-cyan-400'
|
||||
? 'bg-[var(--neon-cyan)] border-[var(--neon-cyan)] text-white'
|
||||
: 'border-[rgb(var(--border-primary))] text-[rgb(var(--text-muted))] hover:border-[var(--neon-cyan)] hover:text-[var(--neon-cyan)]'
|
||||
}`}
|
||||
>
|
||||
{String(page).padStart(2, '0')}
|
||||
@@ -167,7 +166,7 @@ export default function BlogPageClient({ posts, allTags }: BlogPageClientProps)
|
||||
<button
|
||||
onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
|
||||
disabled={currentPage === totalPages}
|
||||
className="px-6 py-3 font-mono text-sm uppercase border-2 border-slate-700 text-zinc-100 disabled:opacity-30 disabled:cursor-not-allowed hover:border-cyan-400 hover:text-cyan-400 transition-colors cursor-pointer"
|
||||
className="px-6 py-3 font-mono text-sm uppercase border border-[rgb(var(--border-primary))] text-[rgb(var(--text-primary))] disabled:opacity-30 disabled:cursor-not-allowed hover:border-[var(--neon-cyan)] hover:text-[var(--neon-cyan)] transition-colors cursor-pointer"
|
||||
>
|
||||
NEXT >
|
||||
</button>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { Metadata } from 'next'
|
||||
import { Navbar } from '@/components/blog/navbar'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Blog',
|
||||
@@ -6,5 +7,10 @@ export const metadata: Metadata = {
|
||||
}
|
||||
|
||||
export default function BlogLayout({ children }: { children: React.ReactNode }) {
|
||||
return <>{children}</>
|
||||
return (
|
||||
<>
|
||||
<Navbar />
|
||||
{children}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
169
app/globals.css
169
app/globals.css
@@ -9,19 +9,20 @@
|
||||
@layer base {
|
||||
:root {
|
||||
/* Light mode colors */
|
||||
--bg-primary: 241 245 249;
|
||||
--bg-secondary: 226 232 240;
|
||||
--bg-tertiary: 203 213 225;
|
||||
--text-primary: 15 23 42;
|
||||
--text-secondary: 51 65 85;
|
||||
--text-muted: 100 116 139;
|
||||
--border-primary: 203 213 225;
|
||||
--border-subtle: 226 232 240;
|
||||
--bg-primary: 250 250 250;
|
||||
--bg-secondary: 240 240 243;
|
||||
--bg-tertiary: 228 228 231;
|
||||
--text-primary: 24 24 27;
|
||||
--text-secondary: 63 63 70;
|
||||
--text-muted: 113 113 122;
|
||||
--border-primary: 212 212 216;
|
||||
--border-subtle: 228 228 231;
|
||||
|
||||
--neon-pink: #8b4a5e;
|
||||
--neon-cyan: #4a7b85;
|
||||
--neon-purple: #6b5583;
|
||||
--neon-magenta: #8b4a7e;
|
||||
/* Desaturated cyberpunk for light mode - darker for readability */
|
||||
--neon-pink: #7a3d52;
|
||||
--neon-cyan: #2d5a63;
|
||||
--neon-purple: #5a4670;
|
||||
--neon-magenta: #7a3d6b;
|
||||
}
|
||||
|
||||
.dark {
|
||||
@@ -35,10 +36,11 @@
|
||||
--border-primary: 71 85 105;
|
||||
--border-subtle: 30 41 59;
|
||||
|
||||
--neon-pink: #9b5a6e;
|
||||
--neon-cyan: #5a8b95;
|
||||
--neon-purple: #7b6593;
|
||||
--neon-magenta: #9b5a8e;
|
||||
/* Desaturated cyberpunk for dark mode */
|
||||
--neon-pink: #8a5568;
|
||||
--neon-cyan: #4d7580;
|
||||
--neon-purple: #6a5685;
|
||||
--neon-magenta: #8a5579;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -322,5 +324,140 @@
|
||||
inset 0 0 10px rgba(255, 0, 128, 0.1);
|
||||
border-color: var(--neon-pink);
|
||||
}
|
||||
|
||||
/* Cyberpunk Prose Styling */
|
||||
.cyberpunk-prose {
|
||||
color: rgb(212 212 216);
|
||||
}
|
||||
|
||||
.cyberpunk-prose h1,
|
||||
.cyberpunk-prose h2,
|
||||
.cyberpunk-prose h3 {
|
||||
color: var(--neon-cyan);
|
||||
font-family: var(--font-jetbrains-mono);
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
.cyberpunk-prose h1 {
|
||||
font-size: 2.25rem;
|
||||
margin-bottom: 2rem;
|
||||
margin-top: 3rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 2px solid var(--neon-cyan);
|
||||
}
|
||||
|
||||
.cyberpunk-prose h2 {
|
||||
font-size: 1.875rem;
|
||||
margin-bottom: 1.5rem;
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
.cyberpunk-prose h3 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.cyberpunk-prose p {
|
||||
color: rgb(212 212 216);
|
||||
line-height: 1.625;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.cyberpunk-prose a {
|
||||
color: var(--neon-magenta);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.cyberpunk-prose a:hover {
|
||||
color: var(--neon-pink);
|
||||
}
|
||||
|
||||
.cyberpunk-prose ul,
|
||||
.cyberpunk-prose ol {
|
||||
color: rgb(212 212 216);
|
||||
padding-left: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cyberpunk-prose ul > * + *,
|
||||
.cyberpunk-prose ol > * + * {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.cyberpunk-prose li {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.cyberpunk-prose blockquote {
|
||||
border-left: 4px solid var(--neon-magenta);
|
||||
padding-left: 1.5rem;
|
||||
font-style: italic;
|
||||
color: rgb(161 161 170);
|
||||
background-color: #000;
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
position: relative;
|
||||
box-shadow: -4px 0 15px rgba(155,90,142,0.3), inset 0 0 20px rgba(155,90,142,0.05);
|
||||
}
|
||||
|
||||
.cyberpunk-prose blockquote::before {
|
||||
content: '"';
|
||||
position: absolute;
|
||||
top: -0.5rem;
|
||||
left: 0.5rem;
|
||||
font-size: 3.75rem;
|
||||
color: var(--neon-magenta);
|
||||
opacity: 0.3;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.cyberpunk-prose code {
|
||||
color: var(--neon-cyan);
|
||||
background-color: #000;
|
||||
padding: 0.125rem 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-family: monospace;
|
||||
border: 2px solid var(--neon-cyan);
|
||||
box-shadow: 0 0 8px rgba(90,139,149,0.3);
|
||||
text-shadow: 0 0 6px rgba(90,139,149,0.6);
|
||||
}
|
||||
|
||||
.cyberpunk-prose pre {
|
||||
background-color: #000;
|
||||
border: 4px solid var(--neon-purple);
|
||||
padding: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
overflow-x: auto;
|
||||
box-shadow: 0 0 25px rgba(123,101,147,0.6), inset 0 0 25px rgba(123,101,147,0.1);
|
||||
}
|
||||
|
||||
.cyberpunk-prose pre code {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cyberpunk-prose img {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
border: 4px solid var(--neon-pink);
|
||||
box-shadow: 0 0 20px rgba(155,90,110,0.5);
|
||||
}
|
||||
|
||||
.cyberpunk-prose hr {
|
||||
border-color: rgb(39 39 42);
|
||||
border-top-width: 2px;
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -14,8 +14,8 @@ export function BlogCard({ post, variant }: BlogCardProps) {
|
||||
if (!hasImage || variant === 'text-only') {
|
||||
return (
|
||||
<Link href={`/blog/${post.slug}`} className="block cursor-pointer">
|
||||
<article className="border-4 border-slate-700 bg-slate-900 p-6 h-full cyber-glitch-hover">
|
||||
<div className="border-l-4 pl-4 mb-4" style={{ borderColor: 'var(--neon-pink)' }}>
|
||||
<article className="border border-slate-700 bg-slate-900 p-6 h-full cyber-glitch-hover">
|
||||
<div className="border-l-2 pl-4 mb-4" style={{ borderColor: 'var(--neon-pink)' }}>
|
||||
<span className="font-mono text-xs text-zinc-100 uppercase tracking-wider">
|
||||
{post.frontmatter.category} <span style={{ color: 'var(--neon-cyan)' }}>//</span> {formatDate(post.frontmatter.date)}
|
||||
</span>
|
||||
@@ -44,7 +44,7 @@ export function BlogCard({ post, variant }: BlogCardProps) {
|
||||
if (variant === 'image-side') {
|
||||
return (
|
||||
<Link href={`/blog/${post.slug}`} className="block cursor-pointer">
|
||||
<article className="border-4 border-slate-700 bg-slate-900 overflow-hidden h-full cyber-glitch-hover">
|
||||
<article className="border border-slate-700 bg-slate-900 overflow-hidden h-full cyber-glitch-hover">
|
||||
<div className="flex flex-col md:flex-row h-full">
|
||||
<div className="md:w-1/3 relative h-64 md:h-auto bg-zinc-900">
|
||||
<Image
|
||||
@@ -56,7 +56,7 @@ export function BlogCard({ post, variant }: BlogCardProps) {
|
||||
<div className="absolute inset-0 bg-zinc-900/60" />
|
||||
</div>
|
||||
<div className="md:w-2/3 p-6">
|
||||
<div className="border-l-4 border-cyan-400 pl-4 mb-4">
|
||||
<div className="border-l-2 border-cyan-400 pl-4 mb-4">
|
||||
<span className="font-mono text-xs text-zinc-100 uppercase tracking-wider">
|
||||
{post.frontmatter.category} // {formatDate(post.frontmatter.date)}
|
||||
</span>
|
||||
@@ -86,7 +86,7 @@ export function BlogCard({ post, variant }: BlogCardProps) {
|
||||
|
||||
return (
|
||||
<Link href={`/blog/${post.slug}`} className="block cursor-pointer">
|
||||
<article className="border-4 border-slate-700 bg-slate-900 overflow-hidden transition-all duration-300 cyber-glitch-hover h-full">
|
||||
<article className="border border-slate-700 bg-slate-900 overflow-hidden transition-all duration-300 cyber-glitch-hover h-full">
|
||||
<div className="relative h-64 bg-zinc-900">
|
||||
<Image
|
||||
src={post.frontmatter.image!}
|
||||
@@ -97,7 +97,7 @@ export function BlogCard({ post, variant }: BlogCardProps) {
|
||||
<div className="absolute inset-0 bg-zinc-900/60" />
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<div className="border-l-4 pl-4 mb-4" style={{ borderColor: 'var(--neon-pink)' }}>
|
||||
<div className="border-l-2 pl-4 mb-4" style={{ borderColor: 'var(--neon-pink)' }}>
|
||||
<span className="font-mono text-xs text-zinc-100 uppercase tracking-wider">
|
||||
{post.frontmatter.category} <span style={{ color: 'var(--neon-cyan)' }}>//</span> {formatDate(post.frontmatter.date)}
|
||||
</span>
|
||||
|
||||
55
components/blog/code-block.tsx
Normal file
55
components/blog/code-block.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
|
||||
interface CodeBlockProps {
|
||||
code: string
|
||||
language: string
|
||||
filename?: string
|
||||
showLineNumbers?: boolean
|
||||
}
|
||||
|
||||
export function CodeBlock({ code, language, filename, showLineNumbers = true }: CodeBlockProps) {
|
||||
const [copied, setCopied] = useState(false)
|
||||
|
||||
const handleCopy = async () => {
|
||||
await navigator.clipboard.writeText(code)
|
||||
setCopied(true)
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="not-prose my-8 border-2 border-[var(--neon-purple)] bg-[rgb(var(--bg-primary))] dark:bg-black relative overflow-hidden">
|
||||
<div className="flex items-center justify-between px-4 py-2 bg-[rgb(var(--bg-secondary))] dark:bg-zinc-950 border-b-2 border-[var(--neon-purple)] relative">
|
||||
<div className="flex items-center gap-3">
|
||||
{filename && (
|
||||
<span className="text-[var(--neon-cyan)] font-mono text-sm uppercase">>> {filename}</span>
|
||||
)}
|
||||
<span className="px-2 py-1 border border-[var(--neon-purple)] text-[var(--neon-purple)] text-xs font-mono uppercase">
|
||||
[{language}]
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={handleCopy}
|
||||
className="px-3 py-1 bg-[rgb(var(--bg-primary))] dark:bg-black hover:bg-purple-900/30 border border-[var(--neon-purple)] text-[var(--neon-purple)] text-xs font-mono uppercase transition-all"
|
||||
>
|
||||
{copied ? '[COPIED✓]' : '[COPY]'}
|
||||
</button>
|
||||
<div className="flex gap-1">
|
||||
<div className="w-3 h-3 border border-[rgb(var(--border-primary))]" />
|
||||
<div className="w-3 h-3 border border-[rgb(var(--border-primary))]" />
|
||||
<div className="w-3 h-3 border border-[rgb(var(--border-primary))]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative overflow-x-auto">
|
||||
<pre className="p-6 text-sm leading-relaxed bg-[rgb(var(--bg-primary))] dark:bg-black text-[var(--neon-cyan)] font-mono">
|
||||
<code>{code}</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -4,8 +4,7 @@ import ReactMarkdown from 'react-markdown';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
|
||||
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
|
||||
import { CodeBlock } from './code-block';
|
||||
|
||||
interface MarkdownRendererProps {
|
||||
content: string;
|
||||
@@ -16,55 +15,33 @@ export default function MarkdownRenderer({ content }: MarkdownRendererProps) {
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm]}
|
||||
components={{
|
||||
h1: ({ children }) => (
|
||||
<h1 className="text-4xl font-bold mt-8 mb-4">{children}</h1>
|
||||
),
|
||||
h2: ({ children }) => (
|
||||
<h2 className="text-3xl font-bold mt-6 mb-3">{children}</h2>
|
||||
),
|
||||
h3: ({ children }) => (
|
||||
<h3 className="text-2xl font-bold mt-4 mb-2">{children}</h3>
|
||||
),
|
||||
h4: ({ children }) => (
|
||||
<h4 className="text-xl font-bold mt-3 mb-2">{children}</h4>
|
||||
),
|
||||
h5: ({ children }) => (
|
||||
<h5 className="text-lg font-bold mt-2 mb-1">{children}</h5>
|
||||
),
|
||||
h6: ({ children }) => (
|
||||
<h6 className="text-base font-bold mt-2 mb-1">{children}</h6>
|
||||
),
|
||||
p: ({ children }) => (
|
||||
<p className="my-4 leading-7">{children}</p>
|
||||
),
|
||||
ul: ({ children }) => (
|
||||
<ul className="list-disc list-inside my-4 space-y-2">{children}</ul>
|
||||
),
|
||||
ol: ({ children }) => (
|
||||
<ol className="list-decimal list-inside my-4 space-y-2">{children}</ol>
|
||||
),
|
||||
li: ({ children }) => (
|
||||
<li className="ml-4">{children}</li>
|
||||
),
|
||||
blockquote: ({ children }) => (
|
||||
<blockquote className="border-l-4 border-gray-300 pl-4 my-4 italic text-gray-700">
|
||||
{children}
|
||||
</blockquote>
|
||||
),
|
||||
h1: ({ children }) => {
|
||||
const text = String(children);
|
||||
const id = text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
|
||||
return <h1 id={id}>{children}</h1>;
|
||||
},
|
||||
h2: ({ children }) => {
|
||||
const text = String(children);
|
||||
const id = text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
|
||||
return <h2 id={id}>{children}</h2>;
|
||||
},
|
||||
h3: ({ children }) => {
|
||||
const text = String(children);
|
||||
const id = text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
|
||||
return <h3 id={id}>{children}</h3>;
|
||||
},
|
||||
code: ({ inline, className, children, ...props }: any) => {
|
||||
const match = /language-(\w+)/.exec(className || '');
|
||||
return !inline && match ? (
|
||||
<SyntaxHighlighter
|
||||
style={vscDarkPlus}
|
||||
language={match[1]}
|
||||
PreTag="div"
|
||||
className="my-4 rounded-lg"
|
||||
{...props}
|
||||
>
|
||||
{String(children).replace(/\n$/, '')}
|
||||
</SyntaxHighlighter>
|
||||
) : (
|
||||
<code className="bg-gray-100 px-1.5 py-0.5 rounded text-sm font-mono" {...props}>
|
||||
if (!inline && match) {
|
||||
return (
|
||||
<CodeBlock
|
||||
code={String(children).replace(/\n$/, '')}
|
||||
language={match[1]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<code {...props}>
|
||||
{children}
|
||||
</code>
|
||||
);
|
||||
@@ -78,19 +55,18 @@ export default function MarkdownRenderer({ content }: MarkdownRendererProps) {
|
||||
<img
|
||||
src={src}
|
||||
alt={alt || ''}
|
||||
className="my-4 rounded-lg max-w-full h-auto"
|
||||
className="w-full h-auto"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="my-4 relative w-full h-auto">
|
||||
<div className="relative w-full h-auto">
|
||||
<Image
|
||||
src={src}
|
||||
alt={alt || ''}
|
||||
width={800}
|
||||
height={600}
|
||||
className="rounded-lg"
|
||||
style={{ width: '100%', height: 'auto' }}
|
||||
/>
|
||||
</div>
|
||||
@@ -106,7 +82,6 @@ export default function MarkdownRenderer({ content }: MarkdownRendererProps) {
|
||||
href={href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-600 hover:underline"
|
||||
>
|
||||
{children}
|
||||
</a>
|
||||
@@ -114,35 +89,11 @@ export default function MarkdownRenderer({ content }: MarkdownRendererProps) {
|
||||
}
|
||||
|
||||
return (
|
||||
<Link href={href} className="text-blue-600 hover:underline">
|
||||
<Link href={href}>
|
||||
{children}
|
||||
</Link>
|
||||
);
|
||||
},
|
||||
table: ({ children }) => (
|
||||
<div className="overflow-x-auto my-4">
|
||||
<table className="min-w-full border-collapse border border-gray-300">
|
||||
{children}
|
||||
</table>
|
||||
</div>
|
||||
),
|
||||
thead: ({ children }) => (
|
||||
<thead className="bg-gray-100">{children}</thead>
|
||||
),
|
||||
tbody: ({ children }) => (
|
||||
<tbody>{children}</tbody>
|
||||
),
|
||||
tr: ({ children }) => (
|
||||
<tr className="border-b border-gray-300">{children}</tr>
|
||||
),
|
||||
th: ({ children }) => (
|
||||
<th className="border border-gray-300 px-4 py-2 text-left font-bold">
|
||||
{children}
|
||||
</th>
|
||||
),
|
||||
td: ({ children }) => (
|
||||
<td className="border border-gray-300 px-4 py-2">{children}</td>
|
||||
),
|
||||
}}
|
||||
>
|
||||
{content}
|
||||
|
||||
40
components/blog/reading-progress.tsx
Normal file
40
components/blog/reading-progress.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
export function ReadingProgress() {
|
||||
const [progress, setProgress] = useState(0)
|
||||
|
||||
useEffect(() => {
|
||||
const updateProgress = () => {
|
||||
const scrollTop = window.scrollY
|
||||
const docHeight = document.documentElement.scrollHeight - window.innerHeight
|
||||
const scrollPercent = (scrollTop / docHeight) * 100
|
||||
setProgress(Math.min(scrollPercent, 100))
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', updateProgress, { passive: true })
|
||||
updateProgress()
|
||||
return () => window.removeEventListener('scroll', updateProgress)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="fixed top-0 left-0 right-0 h-1.5 bg-[rgb(var(--bg-secondary))] dark:bg-black z-50 border-b-2 border-[rgb(var(--border-primary))]">
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-[var(--neon-cyan)] via-[var(--neon-magenta)] to-[var(--neon-pink)] transition-all duration-150"
|
||||
style={{
|
||||
width: `${progress}%`,
|
||||
boxShadow: progress > 0 ? '0 0 8px var(--neon-cyan)' : 'none'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="fixed top-4 right-4 z-50 px-3 py-1.5 bg-[rgb(var(--bg-primary))] border-2 border-[var(--neon-cyan)] text-xs font-mono font-bold text-[var(--neon-cyan)] relative">
|
||||
<span className="relative z-10">
|
||||
[{Math.round(progress)}%]
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -5,7 +5,7 @@ interface SearchBarProps {
|
||||
|
||||
export function SearchBar({ searchQuery, onSearchChange }: SearchBarProps) {
|
||||
return (
|
||||
<div className="flex-1 flex items-center border-2 border-slate-700 bg-zinc-900 transition-all focus-within:border-[var(--neon-cyan)] focus-within:shadow-[0_0_10px_var(--neon-cyan),0_0_20px_rgba(0,255,255,0.5),inset_0_0_10px_rgba(0,255,255,0.1)]">
|
||||
<div className="flex-1 flex items-center border border-slate-700 bg-zinc-900 transition-all focus-within:border-[var(--neon-cyan)] focus-within:shadow-[0_0_6px_rgba(0,255,255,0.4),inset_0_0_6px_rgba(0,255,255,0.05)]">
|
||||
<span className="pl-4 pr-2 font-mono text-lg" style={{ color: 'var(--neon-cyan)' }}>></span>
|
||||
<input
|
||||
type="text"
|
||||
|
||||
109
components/blog/sticky-footer.tsx
Normal file
109
components/blog/sticky-footer.tsx
Normal file
@@ -0,0 +1,109 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
interface StickyFooterProps {
|
||||
url: string
|
||||
title: string
|
||||
}
|
||||
|
||||
export function StickyFooter({ url, title }: StickyFooterProps) {
|
||||
const [isVisible, setIsVisible] = useState(true)
|
||||
const [lastScrollY, setLastScrollY] = useState(0)
|
||||
const [copied, setCopied] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
const currentScrollY = window.scrollY
|
||||
setIsVisible(currentScrollY < lastScrollY || currentScrollY < 100)
|
||||
setLastScrollY(currentScrollY)
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', handleScroll, { passive: true })
|
||||
return () => window.removeEventListener('scroll', handleScroll)
|
||||
}, [lastScrollY])
|
||||
|
||||
const shareLinks = {
|
||||
twitter: `https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}&url=${url}`,
|
||||
linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${url}`,
|
||||
}
|
||||
|
||||
const handleCopyLink = async () => {
|
||||
await navigator.clipboard.writeText(url)
|
||||
setCopied(true)
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
}
|
||||
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
}
|
||||
|
||||
return (
|
||||
<footer
|
||||
className={`
|
||||
fixed bottom-0 left-0 right-0 z-40
|
||||
bg-black/98 backdrop-blur-sm
|
||||
border-t-4 border-[var(--neon-magenta)]
|
||||
transition-transform duration-200 ease-in-out
|
||||
${isVisible ? 'translate-y-0' : 'translate-y-full'}
|
||||
`}
|
||||
style={{
|
||||
boxShadow: isVisible ? '0 -8px 30px rgba(155,90,142,0.5), inset 0 4px 20px rgba(155,90,142,0.1)' : 'none'
|
||||
}}
|
||||
>
|
||||
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-[var(--neon-magenta)] to-transparent opacity-70" />
|
||||
|
||||
<div className="max-w-7xl mx-auto px-6 py-4 relative">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="hidden md:flex items-center gap-3">
|
||||
<div className="flex gap-1.5">
|
||||
<div className="w-2 h-2 bg-[var(--neon-cyan)] shadow-[0_0_6px_rgba(90,139,149,1)]" />
|
||||
<div className="w-2 h-2 bg-[var(--neon-pink)] shadow-[0_0_6px_rgba(155,90,110,1)]" />
|
||||
</div>
|
||||
<span className="text-[var(--neon-cyan)] font-mono text-xs uppercase tracking-wider" style={{ textShadow: '0 0 8px rgba(90,139,149,0.6)' }}>
|
||||
>> SHARE:
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 mx-auto md:mx-0">
|
||||
<a
|
||||
href={shareLinks.twitter}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-2 px-4 py-2 bg-black border-4 border-cyan-400 text-cyan-400 font-mono text-xs uppercase tracking-wider transition-all hover:shadow-[0_0_25px_rgba(29,161,242,0.8)] hover:bg-cyan-900/20"
|
||||
style={{ textShadow: '0 0 8px rgba(56,189,248,0.6)' }}
|
||||
>
|
||||
[X]
|
||||
</a>
|
||||
|
||||
<a
|
||||
href={shareLinks.linkedin}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-2 px-4 py-2 bg-black border-4 border-blue-400 text-blue-400 font-mono text-xs uppercase tracking-wider transition-all hover:shadow-[0_0_25px_rgba(10,102,194,0.8)] hover:bg-blue-900/20"
|
||||
style={{ textShadow: '0 0 8px rgba(96,165,250,0.6)' }}
|
||||
>
|
||||
[IN]
|
||||
</a>
|
||||
|
||||
<button
|
||||
onClick={handleCopyLink}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-black border-4 border-[var(--neon-pink)] text-[var(--neon-pink)] font-mono text-xs uppercase tracking-wider transition-all hover:shadow-[0_0_25px_rgba(155,90,110,0.8)] hover:bg-pink-900/20"
|
||||
style={{ textShadow: copied ? '0 0 10px rgba(155,90,110,1)' : '0 0 8px rgba(155,90,110,0.6)' }}
|
||||
>
|
||||
{copied ? '[✓ COPIED]' : '[COPY]'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={scrollToTop}
|
||||
className="hidden md:flex items-center gap-2 px-4 py-2 bg-black border-4 border-[var(--neon-cyan)] text-[var(--neon-cyan)] font-mono text-xs uppercase tracking-wider transition-all hover:shadow-[0_0_25px_rgba(90,139,149,0.8)] hover:bg-cyan-900/20"
|
||||
style={{ textShadow: '0 0 8px rgba(90,139,149,0.6)' }}
|
||||
>
|
||||
[↑ TOP]
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
79
components/blog/table-of-contents.tsx
Normal file
79
components/blog/table-of-contents.tsx
Normal file
@@ -0,0 +1,79 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
interface Heading {
|
||||
id: string
|
||||
text: string
|
||||
level: number
|
||||
}
|
||||
|
||||
interface TOCProps {
|
||||
headings: Heading[]
|
||||
}
|
||||
|
||||
export function TableOfContents({ headings }: TOCProps) {
|
||||
const [activeId, setActiveId] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
setActiveId(entry.target.id)
|
||||
}
|
||||
})
|
||||
},
|
||||
{ rootMargin: '-100px 0px -66%' }
|
||||
)
|
||||
|
||||
headings.forEach(({ id }) => {
|
||||
const element = document.getElementById(id)
|
||||
if (element) observer.observe(element)
|
||||
})
|
||||
|
||||
return () => observer.disconnect()
|
||||
}, [headings])
|
||||
|
||||
return (
|
||||
<aside className="hidden lg:block sticky top-24 w-64 h-fit">
|
||||
<div className="bg-black border border-[var(--neon-cyan)] p-6 relative overflow-hidden shadow-[0_0_15px_rgba(90,139,149,0.3),inset_0_0_15px_rgba(90,139,149,0.05)]">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-cyan-500/5 via-magenta-500/3 to-transparent pointer-events-none" />
|
||||
<div className="absolute top-0 left-0 w-full h-0.5 bg-gradient-to-r from-transparent via-[var(--neon-cyan)] to-transparent opacity-50" />
|
||||
|
||||
<div className="border-b border-[var(--neon-magenta)] pb-3 mb-4 relative">
|
||||
<div className="flex gap-1.5 mb-2 justify-end">
|
||||
<div className="w-3 h-3 border border-[var(--neon-cyan)]/40 hover:bg-[var(--neon-cyan)]/10 transition-colors cursor-pointer" title="Minimize" />
|
||||
<div className="w-3 h-3 border border-[var(--neon-cyan)]/40 hover:bg-[var(--neon-cyan)]/10 transition-colors cursor-pointer" title="Maximize" />
|
||||
<div className="w-3 h-3 border border-[var(--neon-pink)]/40 hover:bg-[var(--neon-pink)]/10 transition-colors cursor-pointer" title="Close" />
|
||||
</div>
|
||||
<h3 className="text-xs font-mono font-bold text-[var(--neon-cyan)] uppercase tracking-wider" style={{ textShadow: '0 0 6px rgba(90,139,149,0.5)' }}>
|
||||
>> NAVIGATION
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<nav className="space-y-1 relative">
|
||||
{headings.map((heading) => (
|
||||
<a
|
||||
key={heading.id}
|
||||
href={`#${heading.id}`}
|
||||
className={`
|
||||
block text-sm font-mono py-2 border-l-2 transition-all duration-150
|
||||
${heading.level === 2 ? 'pl-3' : 'pl-6'}
|
||||
${activeId === heading.id
|
||||
? 'text-[var(--neon-cyan)] border-[var(--neon-cyan)] bg-cyan-500/5 shadow-[0_0_8px_rgba(90,139,149,0.3)]'
|
||||
: 'text-zinc-500 border-zinc-900 hover:border-[var(--neon-magenta)] hover:text-[var(--neon-magenta)] hover:bg-magenta-500/3 hover:shadow-[0_0_4px_rgba(155,90,142,0.2)]'
|
||||
}
|
||||
`}
|
||||
style={activeId === heading.id ? { textShadow: '0 0 4px rgba(90,139,149,0.5)' } : {}}
|
||||
>
|
||||
<span className="inline-block">{activeId === heading.id ? '▶ ' : '◆ '}</span>{heading.text}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-transparent via-[var(--neon-purple)] to-transparent opacity-40" />
|
||||
</div>
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
@@ -9,7 +9,7 @@ export function TagFilter({ allTags, selectedTags, onToggleTag, onClearTags }: T
|
||||
if (allTags.length === 0) return null
|
||||
|
||||
return (
|
||||
<div className="border-4 border-slate-700 bg-slate-900 p-6 mb-12">
|
||||
<div className="border border-slate-700 bg-slate-900 p-6 mb-12">
|
||||
<p className="font-mono text-xs text-zinc-500 uppercase tracking-widest mb-4">
|
||||
FILTER BY TAG
|
||||
</p>
|
||||
@@ -18,7 +18,7 @@ export function TagFilter({ allTags, selectedTags, onToggleTag, onClearTags }: T
|
||||
<button
|
||||
key={tag}
|
||||
onClick={() => onToggleTag(tag)}
|
||||
className={`px-4 py-2 font-mono text-xs uppercase border-2 transition-colors cursor-pointer ${
|
||||
className={`px-4 py-2 font-mono text-xs uppercase border transition-colors cursor-pointer ${
|
||||
selectedTags.includes(tag)
|
||||
? 'bg-cyan-400 border-cyan-400 text-slate-900'
|
||||
: 'bg-zinc-900 border-slate-700 text-zinc-400 hover:border-cyan-400 hover:text-cyan-400'
|
||||
|
||||
Reference in New Issue
Block a user