Ink & Code 🌌

A technical storytelling observatory and dynamic log garden built on Next.js 15, MDX, and interactive SVG topological canopies.

Ink & Code is a personal portfolio and blog site designed for developers who appreciate aesthetic layouts, rich typography, and interactive canvas components. It replaces generic blog indexes with an organic, animated tree canopy (The Grove) that maps technical transmissions to interactive nodes.

---

🛠️ Tech Stack

• Framework: Next.js 15+ App Router (utilizing Turbopack and React Server Components).
• Styling: Tailwind CSS v4 (fully CSS-variables driven theme tokens).
• Content Engine: MDX Remote + gray-matter for a server-compiled, database-free content system.
• Syntax Highlighting: Shiki (via rehype-pretty-code with the one-dark-pro theme).
• Linting: ESLint v9 Flat Configurations (standard neostandard rules).

---

✨ Core Features

1. The Grove Canvas (SVG Map):
   • An interactive SVG tree overlays a nebulous cosmic background.
   • Energy Currents: CSS keyframe animations glide glowing golden currents along the branch lines.
   • Compass Stars: Native SVG SMIL-animated 4-point rotating compass stars sit at the tips of active post branches.
   • Glassmorphic Popovers: Dynamic, non-squishing HTML overlays track node triggers using page viewport bounding offsets, with built-in top collision flip detection.
2. Multiform Layout Templates:
   • PostLayout: Clean, focused reading column for short updates.
   • BlogLayout: Medium-width layout featuring a prominent header graphic block.
   • ArticleLayout: Double-column layout with server-rendered header anchors and a sticky Zero-JS Table of Contents scroll rail.
3. URL-Driven Index Grid:
   • Filters by categories, tags, sorting metrics, and search keywords directly in the URL search params, ensuring every search state is bookmarkable and shareable.
4. Revalidation API Webhook:
   • An authenticated endpoint (/api/webhook) that triggers Next.js static path revalidation when commits are pushed, enabling instant content refreshes without full redeployments.

---

🚀 Getting Started

1. Prerequisites

Ensure you have Node.js installed (v18.x or later recommended).

2. Installation

Clone the repository and install the dependencies:

git clone https://github.com/CodeCrafterAdi2006/Ink-and-Code.git
cd Ink-and-Code
npm install

3. Development Server

Run the local development server:

npm run dev

Open http://localhost:3000 in your browser to view the observatory.

4. Production Build

Validate compile readiness and check typescript interfaces:

npm run build
npm run start

5. Quality Control (Linting)

Run ESLint flat config validation checks:

npm run lint

---

📁 Repository Structure

├── app/                  # Next.js App Router routes & API endpoints
│   ├── api/webhook/      # Secure static revalidation POST webhook
│   ├── archive/          # Search, filter, and index grid
│   ├── grove/            # The interactive SVG topological tree
│   └── now/              # Current focus logs and cards
├── components/           # Reusable React components & templates
│   ├── layouts/          # Post, Blog, and Article layouts
│   ├── Callout.tsx       # Custom MDX component
│   └── GroveCanvas.tsx   # SVG tree renderer
├── content/              # Raw MDX article logs (posts, blogs, articles)
├── diary/                # V1 post-mortem logs and V2/V3/V4 roadmaps
├── lib/                  # Theme tokens, type definitions, and loader utilities
└── public/               # Static images, covers, and vector assets

---

🗺️ Roadmap

• V2 (Immersive Art): Three.js/WebGL background shader, organic path blooming animations, and smooth Framer Motion transitions.
• V3 (Automation): Git hooks triggering LLM metadata compilers, image generator APIs for cover photos, and automatic layout mapping.
• V4 (Integrations): Linking active focus cards on the /now page to Spotify and Goodreads live API logs.