Introduction

Noddev is a documentation hub and project showcase for a collection of developer tools: Omni (OSINT platform), ApiShield (API security scanner), and Terminal-RichJS (rich terminal output library).

This site is built with Next.js 16 (App Router), React 19, Tailwind CSS v4, and MDX for content.

Site Architecture

Content Structure

Documentation lives in src/content/docs/ with the following structure:

• introduction.mdx - This page
• architecture.mdx - Ecosystem overview
• omni/ - Omni OSINT platform docs
• apishield/ - ApiShield security docs
• terminal-richjs/ - Terminal-RichJS library docs

Routing

The docs use Next.js dynamic catch-all routing via src/app/docs/[...slug]/page.tsx. This file:

1. Resolves the slug to an MDX file in src/content/docs/
2. Parses frontmatter with gray-matter
3. Extracts headings for the Table of Contents
4. Renders content with next-mdx-remote/rsc

Layouts

Two layout files handle structure:

The docs layout uses a responsive grid: sidebar (260px) + content + TOC (240px on XL screens).

UI Patterns

MDX Components

Custom components in src/components/mdx/mdx-components.tsx override default HTML elements:

• Headings (h1, h2, h3) - White text with tight tracking
• Paragraphs - Muted gray text with proper leading
• Links - White text with underline animation
• Code blocks - Language label header + copy button + rounded container
• Tables - Bordered container with header background and hover states
• Callout - Alert boxes with icons and colored borders

Code Block Features

Code blocks include:

1. Language label - Displayed in a header bar above the code
2. Copy button - One-click copy with icon
3. Syntax highlighting - Via rehype-pretty-code with github-dark theme
4. Rounded borders - Consistent with site design system

Callout Component

<Callout type="success" title="Ready for Production">
  Content here
</Callout>

Types: success, warning, error, info

Animations

Tracer SVG

Located in src/components/ui/tracer.tsx, this creates the animated vertical line in the docs sidebar:

• Uses SVG with a linear gradient (#0070f3 blue)
• CSS animation animate-tracer moves the gradient vertically
• Renders alongside the sidebar in docs layout

Other Animations

• fadeIn keyframes for page load transitions
• Scroll-triggered navbar background blur
• Link hover transitions with transition-colors

Navigation System

Sidebar Configuration

Defined in src/lib/docs-config.ts as a flat array of categories:

export const DOCS_CONFIG = [
  {
    title: "Welcome",
    items: [
      { title: "Introduction", href: "/docs/introduction" },
      { title: "Ecosystem Overview", href: "/docs/architecture" },
    ],
  },
  // ... more categories
];

Command Menu

Cmd+K / Ctrl+K opens a search modal (src/components/ui/command-menu.tsx) that searches across docs pages.

Instant Navigation

Page transitions feel fast because:

1. Next.js Link prefetching - Links prefetch on hover/viewport
2. Client-side navigation - No full page reloads
3. RSC streaming - React Server Components stream content
4. Static generation - Docs pages are statically built

Styling System

CSS Variables

Defined in src/app/globals.css:

Typography

• Sans: Geist (headings, body)
• Mono: Geist Mono (code blocks)
• Tight letter-spacing on headings (-0.02em)

Next Steps

• Ecosystem Overview - Project relationships
• Omni Overview - OSINT platform documentation
• ApiShield - API security scanner
• Terminal-RichJS - Terminal output library