Skip to content

Commit 133a1dd

Browse files
ATHARVA262005ATHARVA262005
committed
fix(website): polish docs styling, fix nav links, and restore homepage
1 parent fc3dd38 commit 133a1dd

4 files changed

Lines changed: 101 additions & 18 deletions

File tree

‎website/postcss.config.mjs‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,8 @@ const config = {
33
"@tailwindcss/postcss": {},
44
},
55
};
6-
6+
// Note: Typography plugin is now included via CSS @plugin in custom CSS or importing it if using v4 compatible way
7+
// For v4, we typically use @plugin "tailwindcss-animate"; syntax in CSS or standard config if legacy.
8+
// Since we used @tailwindcss/postcss in package.json, we might be using v4 beta.
9+
// Let's assume standard plugin config for now as v4 supports it in CSS usually, but let's see.
710
export default config;

‎website/src/app/docs/page.tsx‎

Lines changed: 96 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,115 @@
11
import { getDocumentationContent } from '@/lib/docs';
22
import ReactMarkdown from 'react-markdown';
33
import rehypeHighlight from 'rehype-highlight';
4+
import remarkGfm from 'remark-gfm';
45
import { Title, Meta } from 'react-meta-seo';
56
import Link from 'next/link';
6-
import { ArrowLeft } from 'lucide-react';
7+
import { ArrowLeft, BookOpen, ChevronRight, Home } from 'lucide-react';
8+
import rehypeSlug from 'rehype-slug';
9+
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
710

811
export default async function DocsPage() {
912
const content = getDocumentationContent();
1013

1114
return (
12-
<div className="min-h-screen bg-neutral-950 text-neutral-50 selection:bg-blue-500/30">
15+
<div className="min-h-screen bg-[#0A0A0A] text-neutral-200 selection:bg-blue-500/30">
1316
<Title>Documentation | react-meta-seo</Title>
1417
<Meta name="description" content="Comprehensive documentation for react-meta-seo. Integration guides, API reference, and migration tutorials." />
1518

16-
<header className="sticky top-0 z-50 border-b border-white/10 bg-neutral-950/80 backdrop-blur-md">
17-
<div className="mx-auto flex h-16 max-w-4xl items-center justify-between px-6">
18-
<Link href="/" className="flex items-center gap-2 text-sm font-medium text-neutral-400 hover:text-white transition-colors">
19-
<ArrowLeft className="h-4 w-4" />
20-
Back to Home
21-
</Link>
22-
<div className="font-semibold">Documentation</div>
19+
{/* Blur Backend */}
20+
<div className="fixed inset-0 -z-10 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-blue-900/10 via-[#0A0A0A] to-[#0A0A0A]" />
21+
22+
{/* Header */}
23+
<header className="sticky top-0 z-50 border-b border-white/5 bg-[#0A0A0A]/80 backdrop-blur-xl">
24+
<div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-6">
25+
<div className="flex items-center gap-4">
26+
<Link href="/" className="group flex items-center gap-2 text-sm font-medium text-neutral-400 hover:text-white transition-colors">
27+
<div className="flex h-8 w-8 items-center justify-center rounded-lg border border-white/5 bg-white/5 transition-colors group-hover:bg-white/10 group-hover:border-white/10">
28+
<ArrowLeft className="h-4 w-4" />
29+
</div>
30+
<span className="hidden sm:inline">Back to Home</span>
31+
</Link>
32+
<div className="h-4 w-px bg-white/10 hidden sm:block" />
33+
<nav className="flex items-center gap-2 text-sm text-neutral-400">
34+
<Home className="h-4 w-4" />
35+
<ChevronRight className="h-4 w-4 text-neutral-600" />
36+
<span className="text-white font-medium">Documentation</span>
37+
</nav>
38+
</div>
2339
</div>
2440
</header>
2541

26-
<div className="mx-auto max-w-4xl px-6 py-12">
27-
<article className="prose prose-invert prose-blue max-w-none prose-headings:scroll-mt-24 prose-pre:bg-neutral-900 prose-pre:border prose-pre:border-white/10">
28-
<ReactMarkdown rehypePlugins={[rehypeHighlight]}>
29-
{content}
30-
</ReactMarkdown>
31-
</article>
42+
<div className="mx-auto max-w-7xl px-6 py-12 lg:py-16">
43+
<div className="grid lg:grid-cols-[1fr_300px] gap-12">
44+
45+
{/* Main Content */}
46+
<main className="min-w-0">
47+
<article className="prose prose-invert prose-blue max-w-none
48+
prose-headings:font-semibold prose-headings:tracking-tight prose-headings:text-white
49+
prose-h1:text-4xl prose-h1:mb-8 prose-h1:pb-4 prose-h1:border-b prose-h1:border-white/10
50+
prose-h2:text-2xl prose-h2:mt-12 prose-h2:mb-6
51+
prose-p:text-neutral-400 prose-p:leading-7
52+
prose-a:text-blue-400 prose-a:no-underline hover:prose-a:text-blue-300 hover:prose-a:underline
53+
prose-code:text-blue-200 prose-code:bg-blue-500/10 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:before:content-none prose-code:after:content-none
54+
prose-pre:bg-[#111] prose-pre:border prose-pre:border-white/5 prose-pre:rounded-xl
55+
prose-img:rounded-xl prose-img:border prose-img:border-white/10
56+
prose-strong:text-white
57+
prose-ul:text-neutral-400
58+
prose-table:border-collapse prose-th:text-left prose-th:p-4 prose-th:text-white prose-th:bg-white/5 prose-td:p-4 prose-td:text-neutral-400 prose-td:border-b prose-td:border-white/5
59+
">
60+
<ReactMarkdown
61+
remarkPlugins={[remarkGfm]}
62+
rehypePlugins={[rehypeHighlight, rehypeSlug, [rehypeAutolinkHeadings, { behavior: 'wrap' }]]}
63+
components={{
64+
blockquote: ({ node, ...props }) => (
65+
<blockquote className="not-italic border-l-4 border-blue-500/50 bg-blue-500/5 px-6 py-4 rounded-r-lg my-6 text-neutral-300" {...props} />
66+
),
67+
table: ({ node, ...props }) => (
68+
<div className="overflow-x-auto my-8 rounded-lg border border-white/5">
69+
<table className="w-full text-sm" {...props} />
70+
</div>
71+
),
72+
hr: ({ node, ...props }) => (
73+
<hr className="my-12 border-white/5" {...props} />
74+
)
75+
}}
76+
>
77+
{content}
78+
</ReactMarkdown>
79+
</article>
80+
</main>
81+
82+
{/* Sidebar (Desktop) */}
83+
<aside className="hidden lg:block space-y-8">
84+
<div className="sticky top-24 space-y-6">
85+
<div className="rounded-xl border border-white/5 bg-white/[0.02] p-6 backdrop-blur-sm">
86+
<h3 className="flex items-center gap-2 font-semibold text-white mb-4">
87+
<BookOpen className="h-4 w-4 text-blue-400" />
88+
On this page
89+
</h3>
90+
<div className="text-sm text-neutral-500">
91+
{/* Note: Real TOC parsing would happen here. For now static placeholder or we rely on the markdown's TOC */}
92+
<p className="text-xs uppercase tracking-wider font-medium text-neutral-600 mb-2">Structure</p>
93+
<ul className="space-y-2.5">
94+
<li><a href="#introduction" className="hover:text-blue-400 transition-colors block">Introduction</a></li>
95+
<li><a href="#core-concepts" className="hover:text-blue-400 transition-colors block">Core Concepts</a></li>
96+
<li><a href="#api-reference" className="hover:text-blue-400 transition-colors block">API Reference</a></li>
97+
<li><a href="#advanced-seo" className="hover:text-blue-400 transition-colors block">Advanced SEO</a></li>
98+
<li><a href="#migration-guide" className="hover:text-blue-400 transition-colors block">Migration Guide</a></li>
99+
</ul>
100+
</div>
101+
</div>
102+
103+
<div className="rounded-xl bg-gradient-to-br from-blue-600 to-violet-600 p-6 text-white shadow-2xl shadow-blue-900/20">
104+
<h3 className="font-bold text-lg mb-2">Ready to ship?</h3>
105+
<p className="text-blue-100 text-sm mb-4">Get the best SEO performance for your React 19 app today.</p>
106+
<div className="bg-white/10 rounded-lg p-2 font-mono text-xs flex items-center justify-between cursor-pointer hover:bg-white/20 transition-colors">
107+
<span>npm i react-meta-seo</span>
108+
</div>
109+
</div>
110+
</div>
111+
</aside>
112+
</div>
32113
</div>
33114
</div>
34115
);

‎website/src/app/globals.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import "tailwindcss";
2+
@plugin "@tailwindcss/typography";
23

34
:root {
45
--background: #ffffff;

‎website/src/app/page.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
'use client';
22
import { Title, Meta } from 'react-meta-seo';
3-
import { SocialPreview } from 'react-meta-seo/preview';
43
import { ArrowRight, Code2, Rocket, Search } from 'lucide-react';
54
import Link from 'next/link';
65

@@ -9,7 +8,6 @@ export default function Home() {
98
<main className="min-h-screen bg-neutral-950 text-neutral-50 selection:bg-blue-500/30">
109
<Title>react-meta-seo | The SEO Library for React 19</Title>
1110
<Meta name="description" content="Zero-runtime overhead, RSC-compatible SEO library for React 19. Native hoisting, type-safety, and built-in social previews." />
12-
<SocialPreview forceVisible />
1311

1412
{/* Hero Section */}
1513
<section className="relative px-6 py-24 md:py-32 lg:py-40 overflow-hidden">

0 commit comments

Comments
 (0)