@damourlabs-portfolio/docs-layer

A Nuxt layer for creating documentation sites using the shadcn-docs-nuxt theme.

Overview

This package provides a reusable Nuxt layer that extends the shadcn-docs-nuxt theme to create beautiful, customizable documentation sites. It includes pre-configured styling, components, and tooling optimized for technical documentation.

Features

• 🎨 Modern UI: Built on top of Shadcn UI components
• 🌙 Dark/Light Mode: Automatic theme switching support
• 📱 Responsive Design: Mobile-first responsive layout
• 🔧 Customizable: Easily configurable theme colors and layout
• ⚡ Fast: Powered by Nuxt 3 for optimal performance
• 🎯 TypeScript: Full TypeScript support

Installation

# Install dependencies
pnpm install

Usage

As a Nuxt Layer

Extend this layer in your Nuxt project:

// nuxt.config.ts
export default defineNuxtConfig({
  extends: ['@damourlabs-portfolio/docs-layer']
})

Development

# Start development server
pnpm dev

# Build for production
pnpm build

# Generate static site
pnpm generate

# Preview production build
pnpm preview

# Lint code
pnpm lint

Configuration

The layer can be customized through the app.config.ts file:

export default defineAppConfig({
  shadcnDocs: {
    // Theme configuration options from shadcn-docs-nuxt
    // https://shadcn-docs-nuxt.vercel.app/api/configuration/shadcn-docs
  }
})

Project Structure

docs-layer/
├── .playground/          # Development playground
├── assets/              # CSS and asset files
├── docs/               # Documentation app instance
├── app.config.ts       # Application configuration
├── nuxt.config.ts      # Nuxt configuration
├── tailwind.config.js  # TailwindCSS configuration
└── package.json        # Package dependencies

Dependencies

• Nuxt 3: The progressive Vue.js framework
• shadcn-docs-nuxt: Documentation theme with Shadcn UI
• TailwindCSS: Utility-first CSS framework
• nuxt-component-meta: Component documentation generation
• TypeScript: Type safety and enhanced development experience

Development Workflow

1. Playground: Use the .playground directory for testing and development
2. Docs Instance: The docs/ directory contains a documentation app instance

Integration

This layer is designed to work seamlessly with other packages in the DamourLabs portfolio monorepo:

• Extends documentation capabilities for other packages
• Provides consistent styling and theming
• Integrates with the overall build and development workflow

Contributing

This package is part of the DamourLabs portfolio monorepo. Follow the monorepo's contribution guidelines when making changes.

License

ISC License - Part of the DamourLabs Portfolio project.