Merge pull request #588 from unoplat/docs-revamp

feat: add dark mode, search and make docs efficient

Author: JayGhiya

.github/workflows/docs_deploy.yaml

@@ -51,7 +51,7 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-website-
 
-      - run: yarn install --frozen-lockfile
+      - run: yarn install --refresh-lockfile
       - run: yarn build      
 
       - name: Deploy

.github/workflows/docusaurus_build.yaml

@@ -30,7 +30,7 @@ jobs:
 
       - name: Install dependencies
         working-directory: code-confluence
-        run: yarn install --frozen-lockfile
+        run: yarn install --refresh-lockfile
 
       - name: Run tests
         working-directory: code-confluence

code-confluence/CLAUDE.md

@@ -0,0 +1,108 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is the documentation website for Unoplat Code Confluence, built with Docusaurus 3.8.1. Code Confluence is a universal code context engine that extracts, understands, and provides precise code context across repositories using Tree-sitter and LLM pipelines. The site is configured in docs-only mode, meaning visitors land directly on the documentation rather than a separate homepage.
+
+## Development Commands
+
+```bash
+# Install dependencies
+yarn install
+
+# Start development server (http://localhost:3000)
+yarn start
+
+# Build for production
+yarn build
+
+# Serve production build locally
+yarn serve
+
+# Clear Docusaurus cache
+yarn clear
+```
+
+## Architecture Overview
+
+### Technology Stack
+- **Docusaurus 3.8.1** - Static site generator optimized for documentation
+- **React 18** - Component framework
+- **SWC Compiler** - Rust-based compiler for 20x faster builds (replaces Babel)
+- **MDX** - Markdown with JSX for rich content
+- **EmailJS** - Contact form integration
+- **@visx** - Data visualization components for technical diagrams
+
+### Project Structure
+```
+docs/                    # Documentation content (MDX files)
+├── quickstart/         # Getting started guides
+├── deep-dive/          # Technical architecture and vision
+├── contribution/       # Contributor guidelines
+└── unoplat-oss-atlas/  # OSS Atlas documentation
+
+src/
+├── components/         # Custom React components
+├── css/               # Custom styling and themes
+└── pages/             # Custom pages (contact-us.js, index.js)
+
+static/                # Static assets (images, icons, SVGs)
+```
+
+### Key Features
+- **Docs-Only Mode** - Site serves documentation directly at root URL
+- **Dark Mode Support** - Toggle between light and dark themes with system preference detection
+- **Auto-generated Navigation** - File-system based sidebar generation
+- **Interactive SVG Diagrams** - Custom modal functionality for architecture diagrams
+- **Image Zoom Plugin** - Hover-to-zoom functionality for screenshots
+- **External Contact Link** - Contact Us navbar item links to main Unoplat site
+- **Mobile Responsive** - Fully responsive design
+- **SEO Optimized** - Proper meta tags and semantic HTML
+
+## Content Management
+
+### Adding Documentation
+- Create `.md` or `.mdx` files in appropriate `docs/` subdirectories
+- Use `_category_.json` files to configure sidebar sections
+- Follow existing naming conventions for consistency
+- Images should be placed in `static/` directory
+
+### Custom Components
+- React components in `src/components/` can be used in MDX files
+- Follow existing patterns for styling with CSS modules
+- Use `@visx` components for data visualizations and technical diagrams
+
+### Configuration Files
+- **`docusaurus.config.js`** - Main site configuration, theming, plugins, navbar/footer
+- **`sidebars.js`** - Navigation structure (currently using auto-generated mode)
+- **`package.json`** - Dependencies, scripts, and Node.js version requirements
+
+## Relationship to Code Confluence Ecosystem
+
+This documentation site is part of the larger Unoplat Code Confluence monorepo:
+
+- **Backend Services** (`unoplat-code-confluence-ingestion`) - Python-based code parsing and ingestion
+- **Frontend Application** (`unoplat-code-confluence-frontend`) - React-based web interface
+- **Infrastructure** - Neo4j graph database, PostgreSQL, Temporal workflows
+- **This Documentation Site** - User guides, technical docs, and developer resources
+
+The documentation covers the entire platform architecture, from quick 5-minute Docker setup to deep technical architecture explanations.
+
+## Development Notes
+
+### Performance Optimizations
+- Uses SWC compiler instead of Babel for significantly faster builds
+- Image optimization with WebP support
+- Automatic code splitting via Docusaurus
+
+### Content Guidelines
+- Keep documentation focused on practical implementation
+- Use interactive diagrams for complex architecture explanations
+- Maintain consistent tone between technical depth and accessibility
+- Update `CHANGELOG.md` for significant documentation changes
+
+### Environment Requirements
+- Node.js 18+ (specified in package.json engines)
+- Yarn package manager preferred over npm

code-confluence/docs/deep-dive/roadmap.mdx

@@ -7,7 +7,13 @@ description: "🗺️ Current roadmap and development status of Code Confluence"
 
 import RoadmapSvg from '@site/static/img/roadmap.svg';
 
-<div style={{ marginBottom: "2rem" }}>
+<div style={{ 
+  marginBottom: "2rem",
+  backgroundColor: "var(--ifm-card-background-color)",
+  padding: "1rem",
+  borderRadius: "8px",
+  boxShadow: "var(--ifm-global-shadow-lw)"
+}}>
   <RoadmapSvg 
     title="Code Confluence Roadmap"
     style={{ 

code-confluence/docs/deep-dive/vision.mdx

@@ -9,10 +9,10 @@ import VisionSvg from '@site/static/img/vision.svg';
 
 <div style={{ 
   marginBottom: "2rem",
-  backgroundColor: "#ffffff",
+  backgroundColor: "var(--ifm-card-background-color)",
   padding: "1rem",
   borderRadius: "8px",
-  boxShadow: "0 2px 4px rgba(0,0,0,0.1)"
+  boxShadow: "var(--ifm-global-shadow-lw)"
 }}>
   <VisionSvg 
     title="Code Confluence Vision"
@@ -54,17 +54,7 @@ Unoplat Code Confluence aims to be the definitive solution for extracting, under
    - Scalable and reliable processing
    - Production-ready architecture
 
-## 🔍 The OSS Atlas Initiative
-
-Our OSS Atlas project is designed to dramatically accelerate contributor onboarding and productivity in open-source projects. We aim to:
-
-### For Contributors
-- **Accelerate Onboarding**: Understand complex codebases in minutes instead of months
-- **Boost Contribution Velocity**: Make meaningful contributions faster with deep contextual insights
-- **Navigate Complex Systems**: Easily understand dependencies, patterns, and architectural decisions
-- **Learn Best Practices**: Study and adopt patterns from well-established open-source projects
-
-### For Integration Partners
+## 🤝 For Integration Partners
 
 Unoplat Code Confluence provides:
 - High-precision code context API powered by graph-based retrieval
@@ -78,9 +68,8 @@ We are committed to:
 1. Expanding language support beyond Python
 2. Enhancing our LLM pipelines for even better code understanding
 3. Building more integration points with popular development tools
-4. Growing our OSS Atlas initiative to support more open-source projects
-5. Developing advanced visualization and analysis capabilities
+4. Developing advanced visualization and analysis capabilities
 
 Our vision is to make codebases more accessible, understandable, and maintainable for developers worldwide, whether they're working on small projects or enterprise-scale systems.
 
-> Ready to get started? Check out our [Quick Start Guide](../quickstart/how-to-run) to begin your journey with Unoplat Code Confluence.
+> Ready to get started? Check out our [Quick Start Guide](/) to begin your journey with Unoplat Code Confluence.

code-confluence/docs/oss-atlas/_category_.json

@@ -1,5 +1,6 @@
 ---
 sidebar_position: 2
+slug: /
 ---
 
 # Quick Start Guide
@@ -14,7 +15,7 @@ While in alpha stage, it's best suited for developers and tech enthusiasts who e
 ## Introduction
 
 The current version supports parsing codebases and exporting a JSON representation of code graph. For more details, check out:
-- 📘 [**Vision »**](/docs/deep-dive/vision)
+- 📘 [**Vision »**](/deep-dive/vision)
 
 ## Prerequisites
 

code-confluence/docs/quickstart/how-to-run.md

@@ -5,7 +5,6 @@
 // See: https://docusaurus.io/docs/api/docusaurus-config
 
 import {themes as prismThemes} from 'prism-react-renderer';
-import React from 'react';
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -45,19 +44,82 @@ const config = {
       ({
         docs: {
           sidebarPath: './sidebars.js',
-          routeBasePath: 'docs',
+          routeBasePath: '/', // Serve the docs at the site's root
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
           editUrl:
             'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
         },
+        blog: false, // Disable the blog plugin
+        pages: false, // Disable pages plugin to avoid conflicts
         theme: {
           customCss: './src/css/custom.css',
         },
       }),
     ],
   ],
 
+  themes: [
+    [
+      require.resolve("@easyops-cn/docusaurus-search-local"),
+      /** @type {import("@easyops-cn/docusaurus-search-local").PluginOptions} */
+      ({
+        // Index docs only (since we disabled blog and pages)
+        indexDocs: true,
+        indexBlog: false,
+        indexPages: false,
+        
+        // For docs-only mode, use "/" as route base path
+        docsRouteBasePath: "/",
+        
+        // Language support
+        language: ["en"],
+        
+        // Position search in middle of navbar
+        searchBarPosition: "right",
+        
+        // Enable keyboard shortcuts
+        searchBarShortcut: true,
+        searchBarShortcutHint: true,
+        
+        // Highlight search terms on target page
+        highlightSearchTermsOnTargetPage: true,
+        
+        // Search result limits and context
+        searchResultLimits: 8,
+        searchResultContextMaxLength: 100,
+        
+        // Performance optimizations
+        hashed: true,
+        
+        // Remove default stop words for programming docs
+        removeDefaultStopWordFilter: ["en"],
+        
+        // Exclude files from indexing to avoid errors
+        ignoreFiles: [
+          // Image files
+          /.*\.(png|jpg|jpeg|gif|svg|ico|webp|bmp|tiff?)$/i,
+          // Document files
+          /.*\.(pdf|docx?|xlsx?|pptx?|odt|ods|odp)$/i,
+          // Archive files
+          /.*\.(zip|tar|gz|bz2|7z|rar)$/i,
+          // Media files
+          /.*\.(mp3|mp4|avi|mov|wmv|flv|mkv|webm|ogg|wav)$/i,
+          // Font files
+          /.*\.(woff2?|ttf|otf|eot)$/i,
+          // Exclude entire static directory
+          "static/**/*",
+          // Exclude build artifacts
+          "build/**/*",
+          ".docusaurus/**/*",
+          // Exclude yarn files
+          ".yarn/**/*",
+          ".pnp.*",
+        ],
+      }),
+    ],
+  ],
+
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
@@ -68,6 +130,7 @@ const config = {
         logo: {
           alt: 'Code Confluence',
           src: 'img/Unoplat_Logo.svg',
+          srcDark: 'img/Unoplat_Logo.svg', // Using same logo for dark mode
         },
         items: [
           {
@@ -76,15 +139,15 @@ const config = {
             position: 'left',
             label: 'Documentation',
           },
-          
           {
-            type: 'docSidebar',
-            sidebarId: 'tutorialSidebar',
-            position: 'left',
+            type: 'search',
+            position: 'right',
+          },
+          {
             label: 'Contact Us',
-            href: '/contact-us',
+            href: 'https://www.unoplat.io/contact/',
+            position: 'left',
           },
-          
         ],
       },
       // algolia: {
@@ -147,7 +210,8 @@ const config = {
       },
       colorMode: {
         defaultMode: 'light',
-        disableSwitch: true,
+        disableSwitch: false,
+        respectPrefersColorScheme: true,
       },
       zoom: {
         selector: '.zoomable',
@@ -163,11 +227,8 @@ const config = {
   stylesheets: [
     '/src/css/custom.css',
   ],
-  plugins: [
-    'docusaurus-plugin-image-zoom'
-  ],
   webpack: {
-    jsLoader: (isServer) => ({
+    jsLoader: () => ({
       loader: require.resolve('swc-loader'),
       options: {
         jsc: {