Skip to content

Section and Subsection Navigation, Relative Import Refactor, and Internal API Simplification

Choose a tag to compare

released this 28 Jul 05:17
· 106 commits to working since this release

This release focuses on enhancing navigation flexibility in documentation sites by introducing support for nested section and subsection navigation. Additionally, the entire codebase migrates from TypeScript path aliases to relative imports, simplifying build and test configuration and improving compatibility. Type definitions are clarified, and related tests are updated to accommodate the new navigation and import approach. The release also removes legacy configuration for code quality tools and streamlines ESM resolution. These changes provide a more maintainable structure and pave the way for easier customization of documentation navigation hierarchies.

Navigation System Overhaul

Section and Subsection Navigation

  • Introduced explicit support for subsections within documentation sections:
    • Navigation now supports both primary sections and nested subsections, which can be independently navigated via the sidebar.
    • Subsections are displayed as indented buttons beneath their parent section with clear active states and custom styling.
  • Hash-based routing for subsections:
    • The URL hash now encodes both section and optional subsection IDs (e.g., #introduction/getting-started).
    • The application state syncs with the hash, enabling deep-linking directly to any subsection.
  • Content loading logic updated:
    • ContentLoader now loads and caches markdown for both sections and subsections.
    • Each (sectionId, subsectionId) combination maps to unique content, allowing distinct documentation files per subsection.
    • Fallbacks and placeholders are shown for missing content.
  • Current "context" resolution:
    • Determining the currently selected section and (optional) subsection for rendering and navigation highlighting.

Navigation UI and Styling

  • Navigation component revised:
    • Accepts currentSubsection and an updated onSectionChange callback with both section and optional subsection parameters.
    • Renders subsections nested within their parent section and manages active/hover states for clearer navigation feedback.
  • New CSS rules (base.css):
    • .nav-subsections, .nav-subitem, .nav-subitem.active, .nav-subitem-content, and .nav-description for improved sidebar appearance and accessibility.
    • Indentation, color, and border styling visually distinguish subsections.

Core Type Definitions and Internal API

  • Explicit DocumentSubsection type added:
    • Sections now optionally include a subsections array, each of type DocumentSubsection (with id, title, subtitle, and file).
    • Enhances clarity and future extensibility when defining documentation structure.

Internal Import and Build System Refactor

  • Replaced all @/ TypeScript path aliases with relative imports:
    • Ensures consistent import resolution in all environments.
    • Affects all React components, scripts, utility modules, and tests.
  • Removed path alias configuration:
    • tsconfig.json: Deleted baseUrl and paths settings.
    • vitest.config.ts: Eliminated resolve.alias configuration.
  • Updated tests:
    • All imports switch from path aliases to relative paths.
    • Adaptations to mocks and test setup in response to navigation changes.
  • Node script entrypoint (copy-docs) fixed:
    • Import for copy-docs-core now uses unambiguous relative path, improving ESM compatibility.

Documentation and UI Component Changes

  • Component and prop interface updates:
    • Props for DocsApp, Navigation, and ContentRenderer revised to handle subsection state and identifiers.
  • Robust error handling:
    • Fallback logic shows placeholders for missing section or subsection content.
  • Sidebar and header improvements:
    • UI components reference updated types and respond correctly to navigation state.
  • App version sourcing preserved:
    • Compatibility with both embedded window version and config version retained.

Project and Maintenance Updates

  • Cleaned up legacy and redundant config:
    • Removed .kodrdriv-link-backup.json and the legacy npm-referenced @fjell/eslint-config dependency in favor of a local file: reference.
  • No changes to project output, publishing, or API surface area outside of navigation/customization interface.

This release brings a more scalable and composable documentation structure, simplifies internal architecture for easier maintenance, and ensures improved navigation for end users exploring multi-level documentation sites.