From cb25593071febed8beb4763b70f8a094402bfec1 Mon Sep 17 00:00:00 2001 From: zejzejzej3 Date: Tue, 5 Aug 2025 23:44:02 -0400 Subject: [PATCH] feat: implement comprehensive documentation page with responsive navigation Add complete documentation system with: - Desktop fixed sidebar with scrollable sections - Mobile responsive header with hamburger menu and breadcrumbs - Reusable components (DocsNavbar, DocsHeader, DocsBreadcrumbs, etc.) - Proper BASE_URL handling for links and hash anchors - Tailwind-inspired mobile navigation design - Sample documentation content with installation and configuration guides Components created: - DocsBreadcrumbs: hierarchical navigation breadcrumbs - DocsHeader: mobile-specific header with hamburger menu - DocsNavLink: individual navigation link component - DocsNavbar: desktop fixed sidebar navigation - DocsSectionHeader: consistent section headers with anchor links - docs.astro layout: documentation-specific page layout --- src/components/DocsBreadcrumbs.astro | 31 ++++++ src/components/DocsHeader.astro | 52 ++++++++++ src/components/DocsNavLink.astro | 35 +++++++ src/components/DocsNavbar.astro | 43 ++++++++ src/components/DocsSectionHeader.astro | 43 ++++++++ src/layouts/docs.astro | 93 +++++++++++++++++ src/pages/docs.astro | 137 +++++++++++++++++++++++-- 7 files changed, 427 insertions(+), 7 deletions(-) create mode 100644 src/components/DocsBreadcrumbs.astro create mode 100644 src/components/DocsHeader.astro create mode 100644 src/components/DocsNavLink.astro create mode 100644 src/components/DocsNavbar.astro create mode 100644 src/components/DocsSectionHeader.astro create mode 100644 src/layouts/docs.astro diff --git a/src/components/DocsBreadcrumbs.astro b/src/components/DocsBreadcrumbs.astro new file mode 100644 index 0000000..d923302 --- /dev/null +++ b/src/components/DocsBreadcrumbs.astro @@ -0,0 +1,31 @@ +--- +export interface Props { + items: Array<{ + label: string; + href?: string; + }>; +} + +const { items } = Astro.props; +--- + + \ No newline at end of file diff --git a/src/components/DocsHeader.astro b/src/components/DocsHeader.astro new file mode 100644 index 0000000..2d371cb --- /dev/null +++ b/src/components/DocsHeader.astro @@ -0,0 +1,52 @@ +--- +import DocsBreadcrumbs from './DocsBreadcrumbs.astro'; + +export interface Props { + currentPage?: string; + breadcrumbs?: Array<{ + label: string; + href?: string; + }>; +} + +const { currentPage = 'Documentation', breadcrumbs = [] } = Astro.props; +--- + + +
+ +
+
+ + +
+ + 0 ? breadcrumbs : [{label: currentPage}]} /> +
+
+ + +
+ +
+
\ No newline at end of file diff --git a/src/components/DocsNavLink.astro b/src/components/DocsNavLink.astro new file mode 100644 index 0000000..cdc9beb --- /dev/null +++ b/src/components/DocsNavLink.astro @@ -0,0 +1,35 @@ +--- +export interface Props { + href: string; + label: string; + active?: boolean; + badge?: string; + icon?: string; + nested?: boolean; +} + +const { href, label, active = false, badge, icon, nested = false } = Astro.props; +--- + + + + {icon && ( + + )} + {label} + + {badge && ( + + {badge} + + )} + \ No newline at end of file diff --git a/src/components/DocsNavbar.astro b/src/components/DocsNavbar.astro new file mode 100644 index 0000000..3604153 --- /dev/null +++ b/src/components/DocsNavbar.astro @@ -0,0 +1,43 @@ +--- +export interface Props { + sections: Array<{ + title: string; + items: Array<{ + label: string; + href: string; + active?: boolean; + }>; + }>; +} + +const { sections } = Astro.props; +--- + + + \ No newline at end of file diff --git a/src/components/DocsSectionHeader.astro b/src/components/DocsSectionHeader.astro new file mode 100644 index 0000000..109692b --- /dev/null +++ b/src/components/DocsSectionHeader.astro @@ -0,0 +1,43 @@ +--- +export interface Props { + id?: string; + level?: 'h1' | 'h2' | 'h3' | 'h4'; + title: string; + description?: string; +} + +const { id, level = 'h2', title, description } = Astro.props; +const Tag = level; + +const headingClasses = { + h1: 'text-4xl font-bold text-gray-900 dark:text-white', + h2: 'text-3xl font-semibold text-gray-900 dark:text-white', + h3: 'text-2xl font-semibold text-gray-800 dark:text-gray-100', + h4: 'text-xl font-medium text-gray-800 dark:text-gray-100', +}; +--- + +
+ + {title} + {id && ( + + + + + + )} + + {description && ( +

+ {description} +

+ )} +
\ No newline at end of file diff --git a/src/layouts/docs.astro b/src/layouts/docs.astro new file mode 100644 index 0000000..1cd5b16 --- /dev/null +++ b/src/layouts/docs.astro @@ -0,0 +1,93 @@ +--- +import Navbar from '../components/Navbar.astro'; +import DocsNavbar from '../components/DocsNavbar.astro'; +import DocsHeader from '../components/DocsHeader.astro'; + +export interface Props { + title: string; + description?: string; + keywords?: string; + githubUrl?: string; + currentPage?: string; + breadcrumbs?: Array<{ + label: string; + href?: string; + }>; + sections: Array<{ + title: string; + items: Array<{ + label: string; + href: string; + active?: boolean; + }>; + }>; +} + +const { + title, + description = "LuxVim Documentation", + keywords = "vim, neovim, Luxvim, documentation", + githubUrl = "https://github.com/LuxVim/LuxVim", + currentPage = "Documentation", + breadcrumbs = [], + sections +} = Astro.props; + +const navLinks = [ + { href: 'docs', label: 'Documentation', active: true }, + { href: 'donate', label: 'Donate' }, +]; +--- + + + + + + + + + + {title} + + + + + + + + +
+ + +
+
+ +
+
+
+ + \ No newline at end of file diff --git a/src/pages/docs.astro b/src/pages/docs.astro index eeafc1e..44af111 100644 --- a/src/pages/docs.astro +++ b/src/pages/docs.astro @@ -1,11 +1,134 @@ --- import '../styles/global.css'; -import Main from '../layouts/main.astro'; +import DocsLayout from '../layouts/docs.astro'; +import DocsSectionHeader from '../components/DocsSectionHeader.astro'; +import CodeBlock from '../components/CodeBlock.astro'; + +const sections = [ + { + title: 'Getting Started', + items: [ + { label: 'Introduction', href: '#introduction', active: true }, + { label: 'Installation', href: '#installation' }, + { label: 'Quick Start', href: '#quick-start' }, + { label: 'Configuration', href: '#configuration' }, + ] + }, + { + title: 'Core Features', + items: [ + { label: 'File Navigation', href: '#file-navigation' }, + { label: 'Search & Replace', href: '#search-replace' }, + { label: 'Code Completion', href: '#code-completion' }, + { label: 'Syntax Highlighting', href: '#syntax-highlighting' }, + ] + }, + { + title: 'Advanced', + items: [ + { label: 'Custom Keybindings', href: '#keybindings' }, + { label: 'Plugin System', href: '#plugins' }, + { label: 'Themes', href: '#themes' }, + { label: 'Language Servers', href: '#language-servers' }, + ] + }, + { + title: 'Reference', + items: [ + { label: 'Commands', href: '#commands' }, + { label: 'API', href: '#api' }, + { label: 'Troubleshooting', href: '#troubleshooting' }, + { label: 'FAQ', href: '#faq' }, + ] + } +]; --- -
-
+ + +
+

+ LuxVim is a lightweight, fast, and highly customizable Vim IDE that provides a modern development experience while maintaining the power and efficiency of Vim. +

+
+ + + +
+

Prerequisites

+
    +
  • Neovim 0.9.0 or higher
    • +
  • Git
    • +
  • A Nerd Font (optional but recommended)
    • +
+ +

Quick Install

+
+ + + + + +
+

+ After installation, LuxVim will automatically install all required plugins on first launch. Here are some essential commands to get you started: +

+ +

Essential Commands

+
    +
  • Space - Leader key
    • +
  • Space + e - Toggle file explorer
    • +
  • Space + f + f - Find files
    • +
  • Space + f + g - Live grep
    • +
+
+ + + +
+

+ LuxVim uses a modular configuration system. Configuration files are located in ~/.config/nvim/lua/ +

+
+ + +