-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
359 lines (332 loc) · 20.2 KB
/
index.html
File metadata and controls
359 lines (332 loc) · 20.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neo-Blog Documentation</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<!-- Sidebar Navigation -->
<nav class="sidebar">
<div class="logo">
<h2></> Neo-Blog</h2>
<p>Documentation</p>
<button id="theme-toggle" class="theme-btn" aria-label="Toggle Theme">
<svg id="sun-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
style="display: none;">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
<svg id="moon-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
</button>
</div>
<ul class="nav-links">
<li><a href="#introduction" class="active">Introduction</a></li>
<li><a href="#features">Key Features</a></li>
<li><a href="#tech-stack">Tech Stack</a></li>
<li><a href="#project-structure">Project Structure</a></li>
<li><a href="#writing-posts">Writing Blog Posts</a></li>
<li><a href="#components">Key Components</a></li>
<li><a href="#deployment">Deployment</a></li>
<li><a href="#editing-code">How to Edit Code</a></li>
<li><a href="#updates">Updates & Roadmap</a></li>
</ul>
</nav>
<!-- Main Content -->
<main class="content">
<header>
<h1>Neo-Blog Project Documentation</h1>
<p>A comprehensive guide to understanding, modifying, and deploying the Nirmal Magar personal blogger site.
</p>
</header>
<!-- Introduction -->
<section id="introduction" class="doc-section">
<h2>1. Introduction</h2>
<div class="card">
<p>Welcome to the <strong>Neo-Blog</strong> documentation. This project is a premium, beautifully
crafted personal portfolio and blog site designed for <strong>Nirmal Magar (@iam-neo)</strong>.</p>
<p>It utilizes the modern React ecosystem, prioritizing performance, SEO, and visual aesthetics through
glassmorphism, dynamic animations, and dark-mode optimization.</p>
</div>
</section>
<!-- Key Features -->
<section id="features" class="doc-section">
<h2>2. Key Features</h2>
<div class="card">
<ul>
<li><strong>Blazing Fast Performance:</strong> Fully statically generated (SSG) utilizing Next.js
App Router.</li>
<li><strong>MDX Blog System:</strong> Write posts in Markdown while seamlessly embedding React
components.</li>
<li><strong>Premium UI/UX:</strong> Dark-themed aesthetic featuring glassmorphism, Tailwind CSS
styling, and Framer Motion micro-interactions.</li>
<li><strong>SEO Optimized:</strong> Built-in dynamic Open Graph tags, canonical URLs, and structured
metadata.</li>
<li><strong>Responsive Layout:</strong> Flawless rendering across Mobile, Tablet, and Desktop
resolutions.</li>
</ul>
</div>
</section>
<!-- Tech Stack -->
<section id="tech-stack" class="doc-section">
<h2>3. Tech Stack</h2>
<div class="card grid-layout">
<div class="tech-item">
<h3>Frontend Framework</h3>
<p>Next.js 16 (App Router) + React 19</p>
</div>
<div class="tech-item">
<h3>Language</h3>
<p>TypeScript (Strict Mode)</p>
</div>
<div class="tech-item">
<h3>Styling</h3>
<p>Tailwind CSS v4 + PostCSS</p>
</div>
<div class="tech-item">
<h3>UI Library</h3>
<p>shadcn/ui (Radix Primitives)</p>
</div>
<div class="tech-item">
<h3>Animations</h3>
<p>Framer Motion</p>
</div>
<div class="tech-item">
<h3>Content</h3>
<p>next-mdx-remote + gray-matter</p>
</div>
</div>
</section>
<!-- Project Structure -->
<section id="project-structure" class="doc-section">
<h2>4. Project Structure</h2>
<div class="card">
<pre><code>blog/
├── public/ # Static assets (images, icons)
│ └── images/blog/ # Blog post cover images
├── src/
│ ├── app/ # Next.js App Router pages
│ │ ├── about/ # About page route
│ │ ├── blog/ # Blog listing & individual post routes
│ │ ├── sections/ # Homepage sectional components
│ │ ├── globals.css # Global Tailwind & base styling
│ │ ├── layout.tsx # Root layout (Header, Footer, Theme)
│ │ └── page.tsx # Homepage
│ ├── components/ # Reusable React components
│ │ ├── layout/ # Header, Footer, ThemeProvider
│ │ ├── ui/ # shadcn/ui raw components
│ │ └── mdx-components # Custom renderers for MDX posts
│ ├── content/posts/ # Actual MDX blog post files live here
│ └── lib/ # Utility functions (e.g., posts parsing)
├── netlify.toml # Netlify Deployment Configuration
└── next.config.ts # Next.js build config (Image domains)</code></pre>
</div>
</section>
<!-- Writing Posts -->
<section id="writing-posts" class="doc-section">
<h2>5. Writing Blog Posts</h2>
<div class="card">
<p>The blog is powered by local `.mdx` files. To create a new post, simply follow these steps:</p>
<ol>
<li>Navigate to the <code>src/content/posts/</code> directory.</li>
<li>Create a new file with a <code>.mdx</code> extension (e.g., <code>my-new-post.mdx</code>).</li>
<li>Add the necessary YAML frontmatter at the very top of the file:</li>
</ol>
<pre><code>---
title: "Your Awesome Blog Post Title"
date: "2026-02-22"
excerpt: "A brief, compelling summary of what the post is about."
tags: ["react", "web-dev", "tips"]
---
# Hello World
Here is where your Markdown content goes. You can write **bold text**, *italic text*, and use code blocks.</code></pre>
<p>Once you commit and push this new file to GitHub, the site will automatically rebuild on Netlify and
the new post will appear in the <code>/blog</code> feed.</p>
</div>
</section>
<!-- Key Components -->
<section id="components" class="doc-section">
<h2>6. Key Components</h2>
<div class="card">
<ul>
<li><strong><code>lib/posts.ts</code></strong>: Parses MDX files from the filesystem, extracts the
frontmatter using <code>gray-matter</code>, calculates reading time, and handles related posts
logic.</li>
<li><strong><code>app/blog/[slug]/page.tsx</code></strong>: Dynamically generates static pages (SSG)
for every post utilizing <code>generateStaticParams()</code>.</li>
<li><strong><code>components/mdx-components.tsx</code></strong>: Maps standard HTML tags inside
Markdown to custom, styled React components ensuring the blog text matches the site's premium
aesthetic.</li>
</ul>
</div>
</section>
<!-- Deployment -->
<section id="deployment" class="doc-section">
<h2>7. Deployment</h2>
<div class="card">
<p>The application is pre-configured for seamless deployment to <strong>Netlify</strong>.</p>
<ol>
<li>Push the repository to GitHub.</li>
<li>Log into your Netlify dashboard and click "Add new site" -> "Import an existing project".</li>
<li>Select the GitHub repository.</li>
<li>Netlify will automatically detect the <code>netlify.toml</code> configuration file.</li>
<li>Click <strong>Deploy site</strong>.</li>
</ol>
<p>The build command executed will be <code>npm run build</code>, and the output directory deployed will
be <code>.next</code>.</p>
</div>
</section>
<!-- How to Edit Code -->
<section id="editing-code" class="doc-section">
<h2>8. How to Edit Code</h2>
<div class="card">
<p>This section provides guided instructions on how to modify dynamic content sections such as Blog
Series and the interactive About page journeys.</p>
<h3>Managing Blog Series</h3>
<p>You can group related blog posts into a numbered series. This automatically links them together at
the bottom of each post.</p>
<ol>
<li><strong>Adding to an Existing Series:</strong> Open the <code>.mdx</code> file of your new post.
Add two lines to the frontmatter:
<pre><code>series: "Name of Existing Series"
seriesPart: 3</code></pre>
Make sure the <code>seriesPart</code> number corresponds to the logical order in the series.
</li>
<li><strong>Creating a New Series:</strong> There is no centralized registry to create a series. You
simply define a new series name in the frontmatter of any post.
<pre><code>series: "My Brand New Series"
seriesPart: 1</code></pre>
The system will automatically detect the new series, generate an index page for it, and list it
globally.
</li>
</ol>
<h3>Editing "Choose Your Adventure" (About Page)</h3>
<p>The interactive journey selector on the About page is driven by a hardcoded configuration object.</p>
<ol>
<li>Navigate to <code>src/components/interactive-path-selector.tsx</code>.</li>
<li>Locate the <code>const paths</code> object near the top of the file.</li>
<li>To add a new article to a path (e.g., <code>frontend</code>), simply add an object to the
<code>articles</code> array:
<pre><code>articles: [
{ title: "New Blog Post", url: "/blog/new-post-slug", readTime: "5 min" },
...
]</code></pre>
</li>
<li>To add an entirely new journey path, add a new key to the <code>paths</code> object with the
required <code>id</code>, <code>label</code>, <code>icon</code>, <code>color</code>,
<code>bg</code>, <code>description</code>, and <code>articles</code> properties.
</li>
</ol>
</div>
</section>
<!-- Updates & Roadmap -->
<section id="updates" class="doc-section">
<h2>9. Current & Future Updates (Roadmap)</h2>
<div class="card">
<p>This section outlines the current state of <strong>Neo-Blog</strong> and features planned for future
releases. We believe in continuous improvement to deliver the best possible experience.</p>
<h3>v1.0.0 (Current Version)</h3>
<ul>
<li>Initial release with Next.js App Router and static generation (SSG).</li>
<li>Complete premium glassmorphism dark theme using Tailwind CSS and shadcn/ui.</li>
<li>Core pages: Home, Blog, About.</li>
<li>Git-based MDX authoring workflow with integrated frontmatter parsing.</li>
<li>Framer Motion powered micro-interactions and scroll animations.</li>
<li>Responsive design and foundational SEO optimizations.</li>
</ul>
<h3>v2.0.0 (Editorial Theme Redesign)</h3>
<ul>
<li><strong>Color Palette:</strong> Transitioned to a light-first editorial style with warm
off-white backgrounds (<code>#FAFAF7</code>), soft slate-gray dark mode (<code>#2A2826</code>),
and a unified terracotta/burnt orange accent (<code>#C45D3E</code>). Removed all cyan/violet
gradients.</li>
<li><strong>Typography:</strong> Changed body font to <strong>DM Sans</strong> for improved
readability, retaining <strong>Playfair Display</strong> for headings. Hero section explicitly
retains original <strong>Geist Sans</strong>.</li>
<li><strong>Layout Redesign:</strong> Replaced logo with serif text, implemented magazine-style
2-column featured posts grid, vertical image-forward blog cards, and a minimalist footer.</li>
<li><strong>Hero Section Isolation:</strong> Maintained the iconic terminal aesthetic and original
dark background explicitly for the Hero section, bridging the new editorial style with the
original technical feel.</li>
<li><strong>Badges & Tags:</strong> Replaced default UI badges with clean, accent-colored text
labels and interactive flat pills.</li>
</ul>
<h3>v1.1.0 (Previous Updates)</h3>
<ul>
<li><strong>Homepage Overhaul:</strong> Completely revamped the homepage with a dynamic animated
hero section, a live <code>TerminalWidget</code> simulating system status, a showcase of the
tech stack, and a redesigned masonry-style featured posts grid.</li>
<li><strong>Series & Guides Functionality:</strong> Added robust support for grouping blog posts
into Series, with a dedicated index page, dynamic routing, and a <code>SeriesNavigation</code>
component for sequential reading.</li>
<li><strong>Global Navigation:</strong> Integrated 'Series' links into the global header navigation
for better discoverability.</li>
<li><strong>About Page Interactive Features:</strong> Redesigned the About page with an interactive
Framer Motion 3D Tech Stack 'Exploded View' and a terminal-style 'Choose Your Adventure' path
selector.</li>
<li><strong>Homepage Redesign:</strong> Redesigned the homepage to feature a premium editorial hero
layout.</li>
<li><strong>Visuals:</strong> Added cover image thumbnails to featured blog cards and inline posts.
</li>
<li><strong>Mobile Experience:</strong> Implemented a responsive, collapsible Table of Contents view
for smaller screens.</li>
<li><strong>Blog Post Navigation:</strong> Added a sticky, auto-generating Table of Contents sidebar
for MDX blog posts with active section scroll-spy.</li>
</ul>
<h3>Recent Git Commits</h3>
<ul>
<li><code>861bd30</code> style: lighten dark theme for improved reading comfort</li>
<li><code>a5b9734</code> style: restore original typography and background to Hero Section</li>
<li><code>917059e</code> refactor: redesign about and series pages for editorial theme</li>
<li><code>71fde4d</code> refactor: update supporting components to editorial accent colors</li>
<li><code>d165e2b</code> refactor: redesign blog post page, blog listing, and section heading</li>
<li><code>0172dce</code> refactor: redesign homepage, featured posts, blog cards, and footer</li>
<li><code>66f0586</code> refactor: redesign header with clean editorial style</li>
<li><code>5597fe7</code> refactor: redesign color system and typography for editorial theme</li>
<li><code>638b092</code> refactor(home): assemble new sections on homepage</li>
<li><code>d6a1007</code> style(home): redesign featured posts grid layout</li>
<li><code>41ffed6</code> feat(home): add tech stack showcase section</li>
<li><code>b1a8386</code> feat(home): add new hero section with animations</li>
<li><code>09465a7</code> feat(ui): add terminal status widget</li>
<li><code>f82f2e4</code> feat(about): add interactive path selector and 3D tech stack showcase</li>
<li><code>c7313da</code> feat: add series and guides functionality</li>
<li><code>a962f26</code> feat: redesign about page to focus on blog mission and topics</li>
</ul>
<h3>Planned Future Updates</h3>
<ol>
<li><strong>Comments Registration & Integration:</strong> Integrate a lightweight component (like
Giscus or Disqus) to enable interactive reader feedback on blog posts.</li>
<li><strong>Content Search & Pagination:</strong> Introduce full-text search capability and
pagination for the blog listing page as the number of posts grows.</li>
<li><strong>CMS Integration:</strong> Migrate from a local MDX folder structure to a Headless CMS
(like Sanity or Contentlayer) for easier content management without needing code commits.</li>
<li><strong>Advanced Analytics & Tracking:</strong> Add custom dashboard hooks to monitor post
views, reading duration, and visitor analytics directly within the platform.</li>
<li><strong>Newsletter Subscription:</strong> Implement a form component to capture emails for a
newsletter using an external API service (e.g., Mailchimp, Resend).</li>
<li><strong>Dynamic GitHub Stats:</strong> Instead of static repositories, fetch real-time GitHub
profile data via the GitHub API to display dynamic pinned repositories and contribution graphs.
</li>
</ol>
</div>
</section>
<footer>
<p>Neo-Blog Documentation © 2026 Nirmal Magar</p>
</footer>
</main>
<script src="script.js"></script>
</body>
</html>