|
1 |
| -# sv |
| 1 | +# Documentation Template |
2 | 2 |
|
3 |
| -Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli). |
| 3 | +A modern documentation template built with Svelte 5, MDSvex, and Tailwind CSS. |
4 | 4 |
|
5 |
| -## Creating a project |
| 5 | + |
6 | 6 |
|
7 |
| -If you're seeing this, you've probably already done this step. Congrats! |
| 7 | +## Overview |
8 | 8 |
|
9 |
| -```bash |
10 |
| -# create a new project in the current directory |
11 |
| -npx sv create |
| 9 | +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. |
| 10 | + |
| 11 | +## Features |
| 12 | + |
| 13 | +- **📚 MDSvex Integration** - Write documentation in Markdown with Svelte components |
| 14 | +- **🎨 Modern Design** - Built with Tailwind CSS and shadcn/ui components |
| 15 | +- **🌙 Dark Mode** - Automatic dark mode with system preference detection |
| 16 | +- **🔍 Search** - Built-in search functionality powered by FlexSearch |
| 17 | +- **📱 Responsive** - Mobile-first design that works on all devices |
| 18 | +- **📑 Auto-Navigation** - Automatic documentation structure generation |
| 19 | +- **📖 Table of Contents** - Dynamic table of contents for each page |
| 20 | +- **⚡ Fast** - Optimized for speed and performance |
| 21 | +- **🔒 Type Safe** - Full TypeScript support |
| 22 | + |
| 23 | +## Quick Start |
12 | 24 |
|
13 |
| -# create a new project in my-app |
14 |
| -npx sv create my-app |
| 25 | +1. Click the green "Use this template" button |
| 26 | +2. Create a new repository |
| 27 | +3. Clone your repository: |
| 28 | + ```bash |
| 29 | + git clone https://github.com/yourusername/your-repo-name.git |
| 30 | + ``` |
| 31 | +4. Install dependencies: |
| 32 | + ```bash |
| 33 | + cd your-repo-name |
| 34 | + npm install |
| 35 | + ``` |
| 36 | +5. Start the development server: |
| 37 | + ```bash |
| 38 | + npm run dev |
| 39 | + ``` |
| 40 | + |
| 41 | +## Project Structure |
| 42 | + |
| 43 | +``` |
| 44 | +your-project/ |
| 45 | +├── src/ |
| 46 | +│ ├── content/ # Documentation markdown files |
| 47 | +│ ├── lib/ |
| 48 | +│ │ ├── components/ # Core components |
| 49 | +│ │ │ ├── document/ # Document-related components |
| 50 | +│ │ │ ├── home/ # Home page components |
| 51 | +│ │ │ └── ui/ # UI components |
| 52 | +│ │ ├── hooks/ # Custom hooks |
| 53 | +│ │ ├── types/ # TypeScript type definitions |
| 54 | +│ │ ├── config.ts # Site configuration |
| 55 | +│ │ ├── index.ts # Library exports |
| 56 | +│ │ └── utils.ts # Utility functions |
| 57 | +│ ├── routes/ # SvelteKit routes |
| 58 | +│ ├── app.css # Global styles |
| 59 | +│ ├── app.d.ts # TypeScript declarations |
| 60 | +│ └── app.html # HTML template |
| 61 | +└── static/ # Static assets |
15 | 62 | ```
|
16 | 63 |
|
17 |
| -## Developing |
| 64 | +## Writing Documentation |
18 | 65 |
|
19 |
| -Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: |
| 66 | +Place your markdown files in the `src/content` directory. The folder structure will automatically generate the navigation. |
20 | 67 |
|
21 |
| -```bash |
22 |
| -npm run dev |
| 68 | +```markdown |
| 69 | +--- |
| 70 | +title: Getting Started |
| 71 | +description: Learn how to use this template |
| 72 | +--- |
| 73 | + |
| 74 | +# Getting Started |
23 | 75 |
|
24 |
| -# or start the server and open the app in a new browser tab |
25 |
| -npm run dev -- --open |
| 76 | +Write your documentation here... |
26 | 77 | ```
|
27 | 78 |
|
28 |
| -## Building |
| 79 | +## Customization |
| 80 | + |
| 81 | +### Themes |
| 82 | +Modify the theme in `src/app.css` or use pre-built themes from [shadcn-svelte](https://next.shadcn-svelte.com/themes). |
| 83 | + |
| 84 | +### Components |
| 85 | +Customize components in `src/lib/components` to match your brand. |
| 86 | + |
| 87 | +### Configuration |
| 88 | +Update site settings in `src/lib/config`: |
| 89 | +```typescript |
| 90 | +export const siteConfig = { |
| 91 | + title: 'Your Documentation', |
| 92 | + description: 'Your site description', |
| 93 | + // ...other settings |
| 94 | +}; |
| 95 | +``` |
29 | 96 |
|
30 |
| -To create a production version of your app: |
| 97 | +## Development |
31 | 98 |
|
32 | 99 | ```bash
|
| 100 | +# Start development server |
| 101 | +npm run dev |
| 102 | + |
| 103 | +# Build for production |
33 | 104 | npm run build
|
| 105 | + |
| 106 | +# Preview production build |
| 107 | +npm run preview |
34 | 108 | ```
|
35 | 109 |
|
36 |
| -You can preview the production build with `npm run preview`. |
| 110 | +## Deployment |
| 111 | + |
| 112 | +This template can be deployed to any static hosting platform: |
| 113 | + |
| 114 | +- Vercel |
| 115 | +- Netlify |
| 116 | +- GitHub Pages |
| 117 | +- Cloudflare Pages |
| 118 | + |
| 119 | +## Contributing |
| 120 | + |
| 121 | +Contributions are welcome! Please feel free to submit a Pull Request. |
| 122 | + |
| 123 | +## License |
| 124 | + |
| 125 | +MIT License - use this template for any project. |
| 126 | + |
| 127 | +## Acknowledgments |
| 128 | + |
| 129 | +- [Svelte](https://svelte.dev) |
| 130 | +- [shadcn-svelte](https://next.shadcn-svelte.com) |
| 131 | +- [Tailwind CSS](https://tailwindcss.com) |
| 132 | +- [MDSvex](https://mdsvex.com) |
| 133 | + |
| 134 | +## Support |
37 | 135 |
|
38 |
| -> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment. |
| 136 | +Need help with your documentation? [Contact us](mailto:info@codegio.com). |
0 commit comments