Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/code-gio/svelte-docs-starter
A modern documentation template built with Svelte 5, MDSvex, and TailwindCSS. Create beautiful, accessible documentation with features like automatic navigation, dark mode, search, and more.
https://github.com/code-gio/svelte-docs-starter
documentation-template mdsvex svelte sveltekit
Last synced: 5 days ago
JSON representation
A modern documentation template built with Svelte 5, MDSvex, and TailwindCSS. Create beautiful, accessible documentation with features like automatic navigation, dark mode, search, and more.
- Host: GitHub
- URL: https://github.com/code-gio/svelte-docs-starter
- Owner: code-gio
- Created: 2024-12-09T08:36:41.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-12-26T03:41:19.000Z (20 days ago)
- Last Synced: 2024-12-26T04:21:29.603Z (20 days ago)
- Topics: documentation-template, mdsvex, svelte, sveltekit
- Language: Svelte
- Homepage: https://svelte-docs.codegio.com/
- Size: 227 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-svelte - svelte-docs-starter - A modern documentation template built with Svelte 5, MDSvex, and Tailwind CSS. (Scaffold / Miscellaneous)
- trackawesomelist - svelte-docs-starter (⭐12) - A modern documentation template built with Svelte 5, MDSvex, and Tailwind CSS. (Recently Updated / [Dec 27, 2024](/content/2024/12/27/README.md))
README
# Documentation Template
A modern documentation template built with Svelte 5, MDSvex, and Tailwind CSS.
[Template Preview](https://svelte-docs.codegio.com/)
## Overview
Create beautiful, modern documentation sites with minimal setup. This template combines the power of Svelte 5 with the flexibility of Markdown to deliver a superior documentation experience.
## Features
- **📚 MDSvex Integration** - Write documentation in Markdown with Svelte components
- **🎨 Modern Design** - Built with Tailwind CSS and shadcn/ui components
- **🌙 Dark Mode** - Automatic dark mode with system preference detection
- **🔍 Search** - Built-in search functionality powered by FlexSearch
- **📱 Responsive** - Mobile-first design that works on all devices
- **📑 Auto-Navigation** - Automatic documentation structure generation
- **📖 Table of Contents** - Dynamic table of contents for each page
- **⚡ Fast** - Optimized for speed and performance
- **🔒 Type Safe** - Full TypeScript support
## Quick Start
1. Click the green "Use this template" button
2. Create a new repository
3. Clone your repository:
```bash
git clone https://github.com/yourusername/your-repo-name.git
```
4. Install dependencies:
```bash
cd your-repo-name
npm install
```
5. Start the development server:
```bash
npm run dev
```
## Project Structure
```
your-project/
├── src/
│ ├── content/ # Documentation markdown files
│ ├── lib/
│ │ ├── components/ # Core components
│ │ │ ├── document/ # Document-related components
│ │ │ ├── home/ # Home page components
│ │ │ └── ui/ # UI components
│ │ ├── hooks/ # Custom hooks
│ │ ├── types/ # TypeScript type definitions
│ │ ├── config.ts # Site configuration
│ │ ├── index.ts # Library exports
│ │ └── utils.ts # Utility functions
│ ├── routes/ # SvelteKit routes
│ ├── app.css # Global styles
│ ├── app.d.ts # TypeScript declarations
│ └── app.html # HTML template
└── static/ # Static assets
```
## Writing Documentation
Place your markdown files in the `src/content` directory. The folder structure will automatically generate the navigation.
```markdown
---
title: Getting Started
description: Learn how to use this template
---
# Getting Started
Write your documentation here...
```
## Customization
### Themes
Modify the theme in `src/app.css` or use pre-built themes from [shadcn-svelte](https://next.shadcn-svelte.com/themes).
### Components
Customize components in `src/lib/components` to match your brand.
### Configuration
Update site settings in `src/lib/config`:
```typescript
export const siteConfig = {
title: 'Your Documentation',
description: 'Your site description',
// ...other settings
};
```
## Development
```bash
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview
```
## Deployment
This template can be deployed to any static hosting platform:
- Vercel
- Netlify
- GitHub Pages
- Cloudflare Pages
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
MIT License - use this template for any project.
## Acknowledgments
- [Svelte](https://svelte.dev)
- [shadcn-svelte](https://next.shadcn-svelte.com)
- [Tailwind CSS](https://tailwindcss.com)
- [MDSvex](https://mdsvex.com)
## Support
Need help with your documentation? [Contact us](mailto:[email protected]).