DEV Community: Prantik Ghosh

Revamping My Portfolio - Markdown Engine, DOM Hydration Fixes, and LLM Discovery

Prantik Ghosh — Fri, 09 Oct 2026 11:17:00 +0000

Why the Redesign?

My previous portfolio had become outdated and didn't represent the quality or complexity of the systems I build today[cite: 3]. Beyond giving the UI a cleaner visual hierarchy and tighter typography[cite: 4], this rebuild was about making the platform functional: adding a dedicated technical blog, ensuring dark mode works across all dynamic media, and making the site discoverable by both search engines and AI models.

Here are the key engineering updates and solutions implemented during the rebuild:

flowchart TD
    subgraph Discovery ["Discovery Layer"]
        A["Googlebot / Crawlers"] -->|"Parses Graph"| B["JSON-LD Schema @id: #person"]
        C["AI Engines (Perplexity / ChatGPT)"] -->|"Fetches Summary"| D["/llms.txt Spec"]
    end

    subgraph ContentEngine ["Blog & Rendering Pipeline"]
        E["Vite glob (.md files)"] --> F["Custom blogLoader.ts (YAML Frontmatter)"]
        F --> G["Streamdown Engine"]
        G --> H["ZoomPanImage (createPortal Lightbox)"]
        G --> I["Mermaid Diagrams (Dark Mode Reactive)"]
    end

    B --> ContentEngine
    D --> ContentEngine

1. Custom Markdown Blog Engine with Resilient Error Handling

Instead of relying on an external CMS, the blog runs directly off local Markdown files parsed at build/runtime using Vite's import.meta.glob:

// blogLoader.ts
const rawFiles = import.meta.glob('/src/content/blogs/*.md', {
    query: '?raw',
    import: 'default',
    eager: true,
}) as Record<string, string>;

Preventing Empty File Crashes

During development, creating a blank .md draft or omitting frontmatter dividers caused js-yaml to crash with YAMLException: expected a document, but the input is empty. We hardened the loader with guarded string checks and fallback meta defaults so draft files fail silently instead of taking down the entire route:

const parseYamlMeta = (block: string): Record<string, any> => {
    const trimmed = block.trim();
    if (!trimmed) return {};

    try {
        const parsed = load(trimmed);
        return parsed && typeof parsed === 'object' ? parsed : {};
    }
    catch {
        return {};
    }
};

2. Solving React DOM Nesting & Hydration Bugs in Markdown

When adding interactive image zoom (ZoomPanImage) to Markdown posts, React began throwing hydration and nesting errors:

In HTML, <figure> cannot be a descendant of <p>.
In HTML, <div> cannot be a descendant of <p>.

Because CommonMark parsers automatically wrap standalone images in <p> tags, rendering block-level wrappers (<figure>, <div>) causes browser HTML parsers to split the DOM, breaking React's hydration tree.

The Fix

Swap outer wrappers to inline spans: Styled with block or inline-block, elements satisfy HTML phrasing content rules while keeping exact layout styling intact.
Mount the lightbox via createPortal: Teleporting the fullscreen zoom/pan modal directly to document.body keeps it completely outside the article's <p> hierarchy and eliminates z-index fights with sticky headers:

// Inside ZoomPanImage.tsx
return (
    <>
        <span className='my-6 block w-full text-center'>
            <span className='inline-block cursor-zoom-in' onClick={() => setIsOpen(true)}>
                <img src={src} alt={alt} className='rounded-xl mx-auto' />
                {alt && <span className='mt-2 block text-xs font-mono text-slate-400'>Fig. {alt}</span>}
            </span>
        </span>

        {isOpen && createPortal(
            <div className='fixed inset-0 z-50 flex items-center justify-center bg-slate-950/80 backdrop-blur-md'>
                {/* Fullscreen Zoom & Pan Canvas */}
            </div>,
            document.body
        )}
    </>
);

3. Dark-Mode Compatible Mermaid Diagrams

Standard Mermaid diagrams output SVG elements calculated with dark fills and strokes (#333333) by default, making text unreadable against dark backgrounds.

Because Mermaid compiles SVGs via its own JavaScript engine rather than CSS utility classes, we synchronized diagram rendering with our theme store by dynamically instantiating the plugin and keying the container on theme change:

const mermaidPlugin = useMemo(() => {
    return createMermaidPlugin({
        config: {
            theme: isDarkMode ? 'dark' : 'default',
        },
    });
}, [isDarkMode]);

<Streamdown 'dark' 'light'} : ? cjk, code, key="{isDarkMode" math, mermaid: mermaidPlugin plugins="{{" }}>
    {post.rawContent}
</Streamdown>

Passing key={isDarkMode ? 'dark' : 'light'} forces the container to invalidate the cached light SVG and freshly render crisp, readable dark-mode diagrams on toggle.

4. Modern Discovery: Linked JSON-LD & `llms.txt`

For discoverability, the site uses a linked two-tier architecture:

Unified Schema Graph (#person): Instead of repeating fragmented author fields across subpages, sub-routes (/experience, /projects, /blogs) link their mainEntity or author back to a permanent URI anchor (https://prantikghosh.vercel.app/#person). This prevents duplicate entity warnings in Google Search Console.
/llms.txt: Added an /llms.txt manifest at the site root to give modern LLMs (Perplexity, ChatGPT, Gemini) clean, factual context about my skill set, background, and production work without relying on unpredictable web scraping.

Wrapping Up

A portfolio redesign is a great opportunity to audit practical edge cases: handling invalid DOM nesting in Markdown content, building robust YAML loaders, and keeping SVG diagram renderers reactive to dark mode. The result is a faster, cleaner, and more resilient platform.

Key Takeaways:

Watch Markdown DOM Nesting: Use inline elements (span) and createPortal to prevent invalid block-element hydration mismatches inside <p> tags.
Guard Dynamic Loaders: Always wrap frontmatter and YAML parsers in null-checks and try/catch blocks to prevent blank draft files from breaking routes.
Sync Canvas & SVG Themes: Rerender SVG generators like Mermaid with explicit keys so they track your app's theme state properly.
Structure for AI Discovery: Use llms.txt alongside linked JSON-LD schemas so both search crawlers and AI answer engines index your information cleanly.

What is Aggregation Pipeline in MongoDB?

Prantik Ghosh — Sun, 14 Dec 2025 14:47:15 +0000

Aggregation in MongoDB is referred as the process of performing different types of operations on multiple documents within a collection. This is done by using pipelines, which is made up of different stages. One stage output is the input for another/next stage.

Types of Aggregation pipelines:

$match: This is a fundamental pipeline stage used within the Aggregation to filter documents. It functions similarly to the standard find() query but is designed to work as a step in a multi-stage data processing pipeline.

Example:

const channel = await User.aggregate([
        {
            $match: {
                username: username?.toLowerCase()
            }
        },

$lookup: This is an aggregation stage used to perform a left outer join between two collections in the same database. It allows us to merge data from a foreign collection into documents from a local collection, enriching them with related information. The $lookup passes the reshaped stage to next stage.

Example:

        {
            $lookup: {
                from: 'subscriptions',
                localField: '_id',
                foreignField: 'channel',
                as: 'subscribers'
            }
        },
        {
            $lookup: {
                from: 'subscriptions',
                localField: '_id',
                foreignField: 'subscriber',
                as: 'subscribedTo'
            }
        },

$addFields: This is an aggregation pipeline stage that adds new fields to documents or overwrites existing ones. It is particularly useful when we want to include all existing fields in the output while only modifying or adding a few specific ones. Note: As per the docs, we can also use $set, as $set is an alias of $addFields.

Example:

        {
            $addFields: {
                subscribersCount: {
                    $size: '$subscribers'
                },
                channelsSubscribedToCount: {
                    $size: '$subscribedTo'
                },
                isSubscribed: {
                    $cond: {
                        if: {$in: [req.user?._id, '$subscribers.subscribers']},
                        then: true,
                        else: false
                    }
                }
            }
        }

In the above example, $cond is a ternary aggregation operator that allows us to implement if-then-else logic within aggregation pipelines, projections, and updates. It evaluates a boolean expression and returns one of two specified values based on the result.

$project: This is an aggregation pipeline stage that passes only specified fields to the next stage. It is used to:
include or exclude fields: 1(true) to include a field and 0(false) to exclude.
create new fields: add computed fields or rename existing ones by assigning an expression to a new field name.
reshape data: it can extract sub-fields from nested documents or create new array fields.

Example:

{
            $project: {
                fullName: 1,
                username: 1,
                subscribersCount: 1,
                channelsSubscribedToCount: 1,
                isSubscribed: 1,
                avatar: 1,
                coverImage: 1,
                email: 1,
            }
        }
    ]);

🌦️ 𝗝𝘂𝘀𝘁 𝗯𝘂𝗶𝗹𝘁 𝗮 𝗺𝗶𝗻𝗶 𝗪𝗲𝗮𝘁𝗵𝗲𝗿 𝗔𝗽𝗽 𝘄𝗶𝘁𝗵 𝗥𝗲𝗮𝗰𝘁 + 𝗧𝗮𝗻𝗦𝘁𝗮𝗰𝗸 𝗤𝘂𝗲𝗿𝘆 – 𝗮𝗻𝗱 𝗶𝘁'𝘀 𝗮 𝗣𝗪𝗔! 📱💻

Prantik Ghosh — Mon, 23 Jun 2025 19:32:21 +0000

Wanted to explore efficient data fetching & caching with TanStack Query (React Query) made it smooth and powerful. 💡

🔹 Real-time weather data
🔹 Clean API handling
🔹 Auto-detect your curent location and show real-time weather instantly — thanks to the 𝗚𝗲𝗼𝗹𝗼𝗰𝗮𝘁𝗶𝗼𝗻 𝗔𝗣𝗜 + 𝗧𝗮𝗻𝗦𝘁𝗮𝗰𝗸 𝗤𝘂𝗲𝗿𝘆! ⚡
🔹 Built with React, Tailwind CSS & OpenWeatherMap API

📌 𝗖𝗵𝗲𝗰𝗸 𝗶𝘁 𝗼𝘂𝘁:
• Live Demo
• GitHub Repo

👨‍💻 𝗠𝗼𝗿𝗲 𝗣𝗿𝗼𝗷𝗲𝗰𝘁𝘀:
Portfolio

Always learning, always building. Feedback welcome! 🙌

LinkedIn Post

#reactJS #TanStackQuery #ReactQuery #FrontendDev #JavaScript #WeatherApp

𝗥𝗲𝗮𝗰𝘁’𝘀 `𝙠𝙚𝙮` 𝗽𝗿𝗼𝗽 𝗶𝘀 𝗼𝗻𝗲 𝗼𝗳 𝘁𝗵𝗲 𝗺𝗼𝘀𝘁 𝗺𝗶𝘀𝘂𝗻𝗱𝗲𝗿𝘀𝘁𝗼𝗼𝗱 𝘁𝗵𝗶𝗻𝗴𝘀 — 𝗮𝗻𝗱 𝘁𝗼𝗱𝗮𝘆 𝗜 𝗱𝗲𝗰𝗶𝗱𝗲𝗱 𝘁𝗼 𝗯𝗿𝗲𝗮𝗸 𝗶𝘁 𝗱𝗼𝘄𝗻 𝗶𝗻 𝘁𝗵𝗲 𝘀𝗶𝗺𝗽𝗹𝗲𝘀𝘁 𝗽𝗼𝘀𝘀𝗶𝗯𝗹𝗲 𝘄𝗮𝘆 👇

Prantik Ghosh — Thu, 24 Apr 2025 14:56:02 +0000

🔑 What is `key` in React?

Whenever you render a list in React, you need to assign a key to each item:

const items = ['🚀', '🔥', '💻'];
items.map((item, index) => (
  <li key={index}> {item} </li>
));

At first glance, using the index as the key seems fine...

But here’s the truth: this can lead to subtle UI bugs and performance issues when items are added, removed, or reordered.

💥 Why?

React uses key to:

Identify which items have changed
Reuse DOM elements efficiently
Avoid unnecessary re-renders

When keys are unstable (like shifting indexes), React gets confused and might:

Update the wrong component
Lose input focus
Animate incorrectly

✅ The Better Way

const items = [
  { id: 1, emoji: '🚀' },
  { id: 2, emoji: '🔥' },
  { id: 3, emoji: '💻' },
];

items.map(({id, emoji}) => (
  <li key={id}>
     {emoji} {console.log(id)}
  </li>
));

🧠 This way, each item has a stable identity. React can now confidently handle changes without weird UI glitches.

🚨 Summary

Don’t just use index for the sake of removing a warning.
Use unique and stable keys to unlock React’s full rendering power.
This small habit will save you from big bugs later!

💬 Did this clarify something for you?

Let me know in the comments — or just drop a 🔥 if you’ve learned something new!

Click ME to get the original post on LinkedIn.

DEV Community: Prantik Ghosh

Revamping My Portfolio - Markdown Engine, DOM Hydration Fixes, and LLM Discovery

Why the Redesign?

1. Custom Markdown Blog Engine with Resilient Error Handling

Preventing Empty File Crashes

2. Solving React DOM Nesting & Hydration Bugs in Markdown

The Fix

3. Dark-Mode Compatible Mermaid Diagrams

4. Modern Discovery: Linked JSON-LD & llms.txt

Wrapping Up

Key Takeaways:

What is Aggregation Pipeline in MongoDB?

🌦️ 𝗝𝘂𝘀𝘁 𝗯𝘂𝗶𝗹𝘁 𝗮 𝗺𝗶𝗻𝗶 𝗪𝗲𝗮𝘁𝗵𝗲𝗿 𝗔𝗽𝗽 𝘄𝗶𝘁𝗵 𝗥𝗲𝗮𝗰𝘁 + 𝗧𝗮𝗻𝗦𝘁𝗮𝗰𝗸 𝗤𝘂𝗲𝗿𝘆 – 𝗮𝗻𝗱 𝗶𝘁'𝘀 𝗮 𝗣𝗪𝗔! 📱💻

🔑 What is key in React?

4. Modern Discovery: Linked JSON-LD & `llms.txt`

🔑 What is `key` in React?