Welcome to rohitdhakane.me
A minimal portfolio, component registry, and blog to showcase my work as a Design Engineer.
Hello and welcome!
This is the very first post on my blog, built with Next.js, MDX, and a custom rendering system that makes reading and learning a joy.
What Makes This Blog Special? π€
Thanks to my setup, youβll see:
- Headings with beautiful typography
- Tables for comparing features
- Rich syntax-highlighted code blocks
- A copy button for quick code copying
- Multi-package manager command rendering
- Automatic external link handling
- Language icons in figcaptions
- And custom React components embedded directly in posts
Example: JavaScript Function
function greet(name) {
return `Hello, ${name}! π`;
}
console.log(greet("Developer"));Figcaption: JavaScript code example for greeting a user
Installing Dependencies in Any Package Manager
pnpm add next react react-dom
Thanks to the CodeBlockCommand component, these commands are neatly organized and easy to switch between.
Table of Features
| Feature | Available | Description |
|---|---|---|
| Headings | β | h1 through h6 all styled via custom <Heading> |
| Syntax Highlighting | β | Powered by rehype-pretty-code |
| Copy Button | β | Added to all pre code blocks |
| Multi-Package Command UI | β | Rendered with CodeBlockCommand component |
| Tables | β | Styled via custom <Table> set |
| External Links | β | Open in new tabs with proper rel attributes |
| Language Icons in Captions | β | Automatically rendered if code block language is detected |
| Inline Code Styling | β | Uses <Code> typography component for inline snippets |
Inline Code Examples
When you see something like const port = 3000;,
thatβs an inline code example using the <Code> typography component.
Code with Figcaption & Language Icon
type User = {
id: string;
name: string;
};
function getUser(id: string): User {
return { id, name: "Rohit" };
}Figcaption: TypeScript function example with language icon
Final Thoughts π
This setup isnβt just about looks β itβs about better communication. By combining good design with developer-friendly features, I can share articles that are easy to read, easy to use, and fun to explore.
Thanks for joining me on this journey β and get ready for some exciting posts ahead!