The Vision

When managing multiple open-source projects, context switching becomes the enemy. I found myself maintaining three different documentation sites, each with slightly different build systems, themes, and deployment pipelines.

Noddev was born from the need to unify these distinct entities—Omni, ApiShield, and Terminal-RichJS—under a single, cohesive brand identity.

Architecture Decisions

1. Next.js App Router

We chose the App Router for its robust server-side rendering capabilities. Documentation is static by nature, but we wanted the flexibility to add dynamic features (like search and interactive playgrounds) later.

2. MDX for Content

Markdown is great, but MDX is better. It allows us to embed React components directly into our docs. For example, the Callout components you see in the documentation are just React components imported globally.

<Callout type="warning">
  This is a custom React component rendered inside Markdown!
</Callout>

3. Styling with Tailwind

We moved away from utility-first CSS Frameworks that enforce a specific "look". Instead, we built a custom design system on top of Tailwind, defining semantic colors like var(--color-border) and var(--color-muted) to support seamless dark mode.

Challenges

The "Sidebar" Problem

One tricky part was the fixed sidebar layout. We wanted the sidebar to be sticky but also scrollable independently of the main content.

/* The Solution */
aside {
  position: sticky;
  top: 4rem; /* Below navbar */
  height: calc(100vh - 4rem);
  overflow-y: auto;
}

What's Next?

We are currently working on Phase 6: Polish & Optimization. Stay tuned for better mobile navigation and search improvements!