🖊️ Nano Ink

A personal knowledge base for Computer Science — beautifully rendered, fast, and searchable.

🌐 Live → nanoink.suryapalanisamy.tech

✨ Features

Full-text search — instantly find topics across every note
Dark / Light theme — toggle with a single click, persisted across sessions
Markdown-driven — all content lives as .md files with frontmatter
Syntax highlighting — powered by highlight.js with a tuned dark theme
LaTeX math — KaTeX support for equations and formulas
Table of Contents — auto-generated from headings for easy navigation
PWA — installable as a standalone app with offline service worker
SEO optimized — sitemap, robots.txt, Open Graph & Twitter cards, structured metadata
Responsive — sidebar, cards, and reading layout adapt to any screen size

🛠 Tech Stack

Layer	Technology
Framework	Next.js 16 (App Router)
UI	React 19 · TypeScript
Styling	Tailwind CSS v4 · PostCSS
Fonts	Inter · JetBrains Mono (via `next/font`)
Markdown	marked · gray-matter
Math	KaTeX · marked-katex-extension
Code	highlight.js
SEO	next-sitemap · Google Analytics
PWA	Service Worker · Web App Manifest

📚 Content Areas

Topic	Notes
Computer Networks	OSI/TCP model, DNS, HTTP, routing, TLS, FTP, email protocols
Operating Systems	Processes, threads, scheduling, memory, virtual memory, IPC, deadlocks, file systems
Database	SQL and NoSQL fundamentals
DSA	Arrays, linked lists, trees, binary search, dynamic programming, sliding window, sorting, bit manipulation, Blind 75
Java	Core Java, OOP concepts
DevOps	Docker, Ansible, Terraform, Nginx, SSH, systemd, Linux administration
Web Development	HTML, CSS, JavaScript, Express.js, REST APIs
System Design	Scalability, Caching, Load Balancers, Kafka, Microservices, Databases, CAP theorem
Tools	Git & GitHub, Neovim, Markdown

🚀 Getting Started

Prerequisites

Node.js ≥ 18
npm or bun

Install & Run

# Install dependencies
npm install

# Start the dev server
npm run dev

Open http://localhost:3000 to view the site.

Scripts

Command	Description
`npm run dev`	Start local dev server
`npm run build`	Production build
`npm run start`	Serve production build
`npm run lint`	Lint the codebase

A sitemap is automatically generated after every build via next-sitemap.

📁 Project Structure

NanoInk/
├── src/
│   ├── app/               # Next.js App Router (routes, layout, global styles)
│   │   ├── api/            # API routes
│   │   └── docs/           # Documentation pages
│   ├── components/         # React components
│   │   ├── Header.tsx
│   │   ├── Sidebar.tsx
│   │   ├── SearchModal.tsx
│   │   ├── MarkdownContent.tsx
│   │   ├── TableOfContents.tsx
│   │   └── ThemeProvider.tsx
│   ├── lib/                # Utilities & data layer
│   │   ├── manifest.ts     # Topic manifest & navigation tree
│   │   ├── markdown.ts     # Markdown parsing pipeline
│   │   └── searchIndex.ts  # Full-text search index
│   └── types/              # TypeScript type definitions
├── ComputerNetworks/       # Markdown notes
├── Database/
├── DevOps/
├── DSA/
├── Java/
├── OperatingSystems/
├── Tools/
├── WebDev/
├── public/                 # Static assets, PWA manifest, service worker
├── images/                 # Content images
├── next.config.mjs         # Next.js config (headers, caching, security)
├── next-sitemap.config.js  # Sitemap & robots.txt generation
└── package.json

🤝 Contributing

Contributions are welcome!

Fork the repo and create your branch:
```
git checkout -b feature/my-change
```
Make your changes and ensure lint passes:
```
npm run lint
```

Commit with a clear message:

git commit -m "Add: description of change"

Push and open a pull request.

Adding a new topic

Create a new folder at the project root (e.g., SystemDesign/).
Add a README.md inside that folder with topic metadata.
Add your Markdown notes to the folder.
Update the manifest in src/lib/manifest.ts so the topic appears in navigation.

📄 License

MIT — see LICENSE.