├── .npmrc
├── server
    └── tsconfig.json
├── public
    ├── favicon.ico
    ├── example.webp
    └── og-image.webp
├── eslint.config.mjs
├── .gitignore
├── tsconfig.json
├── components
    └── content
    │   ├── ProseHr.vue
    │   ├── SmallAlert.vue
    │   ├── ProseA.vue
    │   └── ProsePre.vue
├── app.vue
├── tailwind.config.js
├── assets
    └── css
    │   └── tailwind.css
├── README.md
├── package.json
├── content
    ├── 1.getting-started
    │   ├── 2.how-it-works.md
    │   └── 1.installation.md
    └── index.md
├── nuxt.config.ts
├── .vscode
    └── settings.json
└── pages
    └── [...slug].vue


/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | strict-peer-dependencies=false
3 | 


--------------------------------------------------------------------------------
/server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../.nuxt/tsconfig.server.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Teygeta/nuxt-doc/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/example.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Teygeta/nuxt-doc/HEAD/public/example.webp


--------------------------------------------------------------------------------
/public/og-image.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Teygeta/nuxt-doc/HEAD/public/og-image.webp


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
1 | import antfu from '@antfu/eslint-config'
2 | 
3 | export default antfu()
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log*
3 | .nuxt
4 | .nitro
5 | .cache
6 | .output
7 | .data
8 | .env
9 | dist


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://v3.nuxtjs.org/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/components/content/ProseHr.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="my-6 border-t">
3 |     <slot />
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/components/content/SmallAlert.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="border-l-4 opacity-60 pl-2">
3 |     <ContentSlot :use="$slots.default" unwrap="p" />
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/app.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | // Use SSR-safe IDs for Headless UI
 3 | provideHeadlessUseId(() => useId())
 4 | </script>
 5 | 
 6 | <template>
 7 |   <div>
 8 |     <NuxtPage />
 9 |   </div>
10 | </template>
11 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | import typography from '@tailwindcss/typography'
 3 | 
 4 | export default {
 5 |   content: [],
 6 |   theme: {
 7 |     extend: {
 8 |       colors: {
 9 |         primary: '##5EA2F4',
10 |       },
11 |     },
12 |   },
13 |   plugins: [typography],
14 | }
15 | 


--------------------------------------------------------------------------------
/assets/css/tailwind.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer components {
 6 |   .prose-edit {
 7 |     @apply prose
 8 |   !text-white/90 
 9 |   [&_*]:text-white/90
10 |     prose-headings:font-bold
11 |     prose-a:prose-headings:font-bold
12 |     prose-a:no-underline
13 |     prose-img:rounded
14 |     !max-w-none
15 |   }
16 | }
17 | 
18 | @layer base {
19 |   html {
20 |     @apply bg-[#0e0e0e] !text-white
21 |   }
22 | 
23 |   h3 {
24 |     @apply font-semibold
25 |   }
26 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | ![readme-img](https://github.com/user-attachments/assets/5fe504e0-576f-43db-b39a-c31bfad118c0)
 3 | 
 4 | ## Installation
 5 | 
 6 | Install this template by running the following command:
 7 | 
 8 | ```bash
 9 | pnpm dlx giget@latest gh:teygeta/nuxt-doc doc
10 | ```
11 | 
12 | Then, navigate to the project directory and install the dependencies:
13 | 
14 | ```bash
15 | cd doc
16 | pnpm install
17 | ```
18 | 
19 | After that, you can start the development server:
20 | 
21 | ```bash
22 | pnpm dev
23 | ```
24 | 
25 | That's it! You can now start writing your documentation.
26 | 


--------------------------------------------------------------------------------
/components/content/ProseA.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { PropType } from 'vue'
 3 | 
 4 | defineProps({
 5 |   href: {
 6 |     type: String,
 7 |     default: '',
 8 |   },
 9 |   target: {
10 |     type: String as PropType<'_blank' | '_parent' | '_self' | '_top' | (string & object) | null | undefined>,
11 |     default: undefined,
12 |     required: false,
13 |   },
14 | })
15 | </script>
16 | 
17 | <template>
18 |   <NuxtLink
19 |     class="border-b !text-[#5EA2F4] border-neutral-300 dark:border-neutral-700 hover:opacity-80 transition-opacity"
20 |     :href="href"
21 |     :target="target"
22 |   >
23 |     <slot />
24 |   </NuxtLink>
25 | </template>
26 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "type": "module",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "build": "nuxt build",
 6 |     "dev": "nuxt dev",
 7 |     "generate": "nuxt generate",
 8 |     "preview": "nuxt preview",
 9 |     "lint": "eslint .",
10 |     "lint:fix": "eslint . --fix"
11 |   },
12 |   "dependencies": {
13 |     "@heroicons/vue": "^2.1.5",
14 |     "@nuxt/content": "^2.13.2",
15 |     "@nuxtjs/tailwindcss": "^6.12.1",
16 |     "@vueuse/core": "^11.0.3",
17 |     "nuxt": "^3.13.0"
18 |   },
19 |   "devDependencies": {
20 |     "@antfu/eslint-config": "^3.2.0",
21 |     "@tailwindcss/typography": "^0.5.15",
22 |     "eslint": "^9.9.1",
23 |     "nuxt-headlessui": "^1.2.0"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/content/1.getting-started/2.how-it-works.md:
--------------------------------------------------------------------------------
 1 | # How it works
 2 | 
 3 | Exactly how the Nuxt [Content Directory](https://content.nuxt.com/usage/content-directory){target="_blank"} system works, create a directory structure that matches your URL structure, and Nuxt Content will automatically generate the routes for you.
 4 | 
 5 | For example:
 6 | 
 7 | ```
 8 | content/
 9 |   1.getting-started/
10 |     1.installation.md
11 |     2.how-it-works.md
12 |   2.examples/
13 |     1.vercel.md
14 |     2.netlify.md
15 |     3.heroku.md
16 |   index.md
17 | ```
18 | 
19 | ::small-alert
20 | See the [Nuxt Content documentation](https://content.nuxtjs.org/){target="_blank"} for more information.
21 | ::
22 | 
23 | That's it!
24 | 


--------------------------------------------------------------------------------
/components/content/ProsePre.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useClipboard } from '@vueuse/core'
 3 | 
 4 | defineProps({
 5 |   code: {
 6 |     type: String,
 7 |     default: '',
 8 |   },
 9 |   class: {
10 |     type: String,
11 |     default: null,
12 |   },
13 | })
14 | 
15 | const { copy, copied } = useClipboard()
16 | </script>
17 | 
18 | <template>
19 |   <div class="relative">
20 |     <div class="absolute text-xs right-2 top-1">
21 |       <div v-if="!copied" class="cursor-pointer opacity-50" :size="16" @click="copy(code)">
22 |         Copy
23 |       </div>
24 |       <div v-else class="opacity-50">
25 |         Copied!
26 |       </div>
27 |     </div>
28 |     <pre class="border border-neutral-800 bg-neutral-900 font-[500] leading-normal font-mono" :class="$props.class"><slot /></pre>
29 |   </div>
30 | </template>
31 | 
32 | <style>
33 | pre code .line {
34 |   display: block;
35 | }
36 | </style>
37 | 


--------------------------------------------------------------------------------
/content/index.md:
--------------------------------------------------------------------------------
 1 | # The Easiest Documentation Template
 2 | Welcome to the easiest documentation template, built with one of the most popular frameworks.
 3 | 
 4 | But you don't need to know anything about it to use this template. You can start writing your documentation right away.
 5 | 
 6 | This template is designed to help you create the most effective documentation for your projects.
 7 | It is built with [Nuxt Content](https://content.nuxtjs.org/){target="_blank"} for the best performance and developer experience.
 8 | 
 9 | You can use this template to create documentation for your open source projects, libraries, frameworks, or any other kind of project.
10 | 
11 | This template was created with ❤️ by [Vittorio Gioda](https://vittoriogioda.it){target="_blank"}
12 | <br>
13 | <br>
14 | ::small-alert
15 | This is the V0, so it may have some bugs or missing features. If you find any issues, please create an issue on the [GitHub repository](https://github.com/Teygeta/nuxt-doc/issues/new)
16 | ::
17 | 


--------------------------------------------------------------------------------
/content/1.getting-started/1.installation.md:
--------------------------------------------------------------------------------
 1 | ## Installation
 2 | 
 3 | Install this template by running the following command:
 4 | 
 5 | ```bash
 6 | pnpm dlx giget@latest gh:teygeta/nuxt-doc <project-name>
 7 | ```
 8 | 
 9 | Then, navigate to the project directory and install the dependencies:
10 | 
11 | ```bash
12 | cd <project-name>
13 | pnpm install
14 | ```
15 | 
16 | After that, you can start the development server:
17 | 
18 | ```bash
19 | pnpm dev
20 | ```
21 | 
22 | That's it! You can now start writing your documentation.
23 | 
24 | ## Custom components
25 | 
26 | Some custom components are used in this documentation. You can find them in the `components/content` directory.
27 | 
28 | Here's an example of `ProsePre` component:
29 | ```ts
30 | import { Lucia } from 'lucia'
31 | 
32 | const adapter = new BetterSQLite3Adapter(db) // your adapter
33 | 
34 | export const lucia = new Lucia(adapter, {
35 |   sessionCookie: {
36 |     attributes: {
37 |       // set to `true` when using HTTPS
38 |       secure: process.env.NODE_ENV === 'production'
39 |     }
40 |   }
41 | })
42 | 
43 | // IMPORTANT!
44 | declare module 'lucia' {
45 |   interface Register {
46 |     Lucia: typeof lucia
47 |   }
48 | }
49 | ```
50 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | // https://nuxt.com/docs/api/configuration/nuxt-config
 2 | export default defineNuxtConfig({
 3 |   modules: [
 4 |     '@nuxt/content',
 5 |     '@nuxtjs/tailwindcss',
 6 |     'nuxt-headlessui',
 7 |   ],
 8 | 
 9 |   headlessui: {
10 |     prefix: 'Headless',
11 |   },
12 | 
13 |   app: {
14 |     rootId: 'app',
15 |     head: {
16 |       title: 'The Easiest Documentation Template',
17 |       meta: [
18 |         { charset: 'utf-8' },
19 |         { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1' },
20 |         { name: 'description', content: 'This template is designed to help you create the most effective documentation for your projects' },
21 |         { name: 'format-detection', content: 'telephone=no' },
22 |         { key: 'og:image', property: 'og:image', content: '/og-image.webp' },
23 |       ],
24 |       link: [
25 |         { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
26 |       ],
27 |     },
28 |   },
29 | 
30 |   routeRules: {
31 |     '/': { prerender: true },
32 |   },
33 | 
34 |   content: {
35 |     highlight: {
36 |       theme: {
37 |         default: 'github-dark',
38 |       },
39 |     },
40 |   },
41 | 
42 |   compatibilityDate: '2024-09-04',
43 | 
44 |   devtools: { enabled: true },
45 | })
46 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // Disable the default formatter, use eslint instead
 3 |   "prettier.enable": false,
 4 |   "editor.formatOnSave": false,
 5 | 
 6 |   // Auto fix
 7 |   "editor.codeActionsOnSave": {
 8 |     "source.fixAll.eslint": "explicit",
 9 |     "source.organizeImports": "never"
10 |   },
11 | 
12 |   "files.associations": {
13 |     "*.css": "tailwindcss"
14 |   },
15 |   "editor.quickSuggestions": {
16 |     "strings": true
17 |   },
18 |   // Silent the stylistic rules in you IDE, but still auto fix them
19 |   "eslint.rules.customizations": [
20 |     { "rule": "style/*", "severity": "off" },
21 |     { "rule": "format/*", "severity": "off" },
22 |     { "rule": "*-indent", "severity": "off" },
23 |     { "rule": "*-spacing", "severity": "off" },
24 |     { "rule": "*-spaces", "severity": "off" },
25 |     { "rule": "*-order", "severity": "off" },
26 |     { "rule": "*-dangle", "severity": "off" },
27 |     { "rule": "*-newline", "severity": "off" },
28 |     { "rule": "*quotes", "severity": "off" },
29 |     { "rule": "*semi", "severity": "off" }
30 |   ],
31 | 
32 |   // Enable eslint for all supported languages
33 |   "eslint.validate": [
34 |     "javascript",
35 |     "javascriptreact",
36 |     "typescript",
37 |     "typescriptreact",
38 |     "vue",
39 |     "html",
40 |     "markdown",
41 |     "json",
42 |     "jsonc",
43 |     "yaml",
44 |     "toml",
45 |     "xml",
46 |     "gql",
47 |     "graphql",
48 |     "astro",
49 |     "css",
50 |     "less",
51 |     "scss",
52 |     "pcss",
53 |     "postcss"
54 |   ],
55 |   "files.exclude": {
56 |     "**/node_modules": true,
57 |     "**/dist": true,
58 |     "**/.nuxt": true,
59 |     "**/.output": true
60 |   },
61 |   "cSpell.words": [
62 |     "Nuxt"
63 |   ]
64 | }
65 | 


--------------------------------------------------------------------------------
/pages/[...slug].vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import {
  3 |   Bars3Icon,
  4 |   XMarkIcon,
  5 | } from '@heroicons/vue/24/outline'
  6 | 
  7 | const sidebarOpen = ref(false)
  8 | 
  9 | const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
 10 | const router = useRouter()
 11 | 
 12 | const githubStars = ref(0)
 13 | 
 14 | function animateStars(target: number) {
 15 |   let current = 0
 16 |   const duration = 5000
 17 |   const start = performance.now()
 18 | 
 19 |   function step(now: number) {
 20 |     const progress = Math.min((now - start) / duration, 1)
 21 |     const eased = 1 - (1 - progress) ** 3
 22 |     current = Math.floor(eased * target)
 23 |     githubStars.value = current
 24 |     if (progress < 1) {
 25 |       requestAnimationFrame(step)
 26 |     }
 27 |     else {
 28 |       githubStars.value = target
 29 |     }
 30 |   }
 31 | 
 32 |   requestAnimationFrame(step)
 33 | }
 34 | 
 35 | onMounted(async () => {
 36 |   const res = await fetch('https://api.github.com/repos/teygeta/nuxt-doc')
 37 |   const data = await res.json()
 38 |   animateStars(data.stargazers_count)
 39 | })
 40 | </script>
 41 | 
 42 | <template>
 43 |   <div>
 44 |     <div
 45 |       class="fixed h-[350px] -z-10 inset-0 w-full [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_60%,transparent_100%)] bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"
 46 |     />
 47 | 
 48 |     <HeadlessTransitionRoot as="template" :show="sidebarOpen">
 49 |       <HeadlessDialog class="relative z-50 lg:hidden" @close="sidebarOpen = false">
 50 |         <HeadlessTransitionChild as="template" enter="transition-opacity ease-linear duration-300" enter-from="opacity-0" enter-to="opacity-100" leave="transition-opacity ease-linear duration-300" leave-from="opacity-100" leave-to="opacity-0">
 51 |           <div class="fixed inset-0 backdrop-blur-sm" />
 52 |         </HeadlessTransitionChild>
 53 | 
 54 |         <div class="fixed inset-0 flex">
 55 |           <HeadlessTransitionChild as="template" enter="transition ease-in-out duration-300 transform" enter-from="-translate-x-full" enter-to="translate-x-0" leave="transition ease-in-out duration-300 transform" leave-from="translate-x-0" leave-to="-translate-x-full">
 56 |             <HeadlessDialogPanel class="relative flex flex-1 w-full max-w-xs mr-16 bg-black">
 57 |               <HeadlessTransitionChild as="template" enter="ease-in-out duration-300" enter-from="opacity-0" enter-to="opacity-100" leave="ease-in-out duration-300" leave-from="opacity-100" leave-to="opacity-0">
 58 |                 <div class="absolute top-0 flex justify-center w-16 pt-5 left-full ">
 59 |                   <button type="button" class="-m-2.5 p-2.5" @click="sidebarOpen = false">
 60 |                     <span class="sr-only">Close sidebar</span>
 61 |                     <XMarkIcon class="w-6 h-6 text-white" aria-hidden="true" />
 62 |                   </button>
 63 |                 </div>
 64 |               </HeadlessTransitionChild>
 65 |               <nav class="m-5 space-y-6 text-sm">
 66 |                 <NuxtLink to="/" class="mb-5 text-2xl font-semibold">
 67 |                   Documentation
 68 |                 </NuxtLink>
 69 |                 <section v-for="(item, index) in navigation" :key="index">
 70 |                   <NuxtLink
 71 |                     v-if="!item.children && item._path !== '/'"
 72 |                     :to="item._path"
 73 |                     class="hover:underline"
 74 |                     :class="item._path === router.currentRoute.value.path ? 'text-blue-400' : 'text-neutral-500'"
 75 |                   >
 76 |                     {{ item.title }}
 77 |                   </NuxtLink>
 78 |                   <h2 v-else-if="item._path !== '/'" class="mb-4">
 79 |                     {{ item.title }}
 80 |                   </h2>
 81 |                   <ul class="space-y-3">
 82 |                     <li
 83 |                       v-for="(c, _index) in item.children"
 84 |                       :key="_index"
 85 |                     >
 86 |                       <NuxtLink
 87 |                         :to="c._path"
 88 |                         class="hover:underline"
 89 |                         :class="c._path === router.currentRoute.value.path ? 'text-blue-400' : 'text-neutral-500'"
 90 |                       >
 91 |                         {{ c.title }}
 92 |                       </NuxtLink>
 93 |                     </li>
 94 |                   </ul>
 95 |                 </section>
 96 |                 <section>
 97 |                   <h2 class="my-4">
 98 |                     Links
 99 |                   </h2>
100 |                   <ul class="space-y-3">
101 |                     <li>
102 |                       <a target="_blank" href="https://github.com/Teygeta/nuxt-doc" class="hover:underline text-neutral-500">
103 |                         GitHub ({{ githubStars }})
104 |                       </a>
105 |                     </li>
106 |                     <li>
107 |                       <a target="_blank" href="https://x.com/vitto_gi_" class="hover:underline text-neutral-500">
108 |                         𝕏 - Twitter
109 |                       </a>
110 |                     </li>
111 |                   </ul>
112 |                 </section>
113 |               </nav>
114 |             </HeadlessDialogPanel>
115 |           </HeadlessTransitionChild>
116 |         </div>
117 |       </HeadlessDialog>
118 |     </HeadlessTransitionRoot>
119 | 
120 |     <header class="flex items-center justify-between p-2 bg-transparent md:hidden">
121 |       <NuxtLink to="/" class="text-2xl font-semibold">
122 |         Documentation
123 |       </NuxtLink>
124 |       <button
125 |         type="button"
126 |         @click="() => sidebarOpen = !sidebarOpen"
127 |       >
128 |         <span class="sr-only">Open sidebar</span>
129 |         <Bars3Icon class="text-white size-6" aria-hidden="true" />
130 |       </button>
131 |     </header>
132 | 
133 |     <div class="max-w-5xl mx-auto mt-20">
134 |       <!-- Static sidebar for desktop -->
135 |       <aside class="flex-col hidden ml-4 md:fixed md:flex">
136 |         <NuxtLink to="/" class="mb-5 text-2xl font-semibold">
137 |           Documentation
138 |         </NuxtLink>
139 | 
140 |         <nav class="space-y-4 text-sm">
141 |           <section v-for="(item, index) in navigation" :key="index">
142 |             <NuxtLink
143 |               v-if="!item.children && item._path !== '/'"
144 |               :to="item._path"
145 |               class="hover:underline"
146 |               :class="{
147 |                 'text-blue-400': item._path === router.currentRoute.value.path,
148 |               }"
149 |             />
150 |             <h2 v-else-if="item._path !== '/'" class="mb-2">
151 |               {{ item.title }}
152 |             </h2>
153 |             <ul class="space-y-1">
154 |               <li
155 |                 v-for="(c, _index) in item.children"
156 |                 :key="_index"
157 |               >
158 |                 <NuxtLink
159 |                   :to="c._path"
160 |                   class="hover:underline"
161 |                   :class="c._path === router.currentRoute.value.path ? 'text-blue-400' : 'text-neutral-500'"
162 |                 >
163 |                   {{ c.title }}
164 |                 </NuxtLink>
165 |               </li>
166 |             </ul>
167 |           </section>
168 |           <section>
169 |             <h2 class="mt-4 mb-2">
170 |               Links
171 |             </h2>
172 |             <ul class="space-y-1">
173 |               <li>
174 |                 <a target="_blank" href="https://github.com/Teygeta/nuxt-doc" class="hover:underline text-neutral-500">
175 |                   GitHub ({{ githubStars }})
176 |                 </a>
177 |               </li>
178 |               <li>
179 |                 <a target="_blank" href="https://x.com/vitto_gi_" class="hover:underline text-neutral-500">
180 |                   𝕏 - Twitter
181 |                 </a>
182 |               </li>
183 |             </ul>
184 |           </section>
185 |         </nav>
186 |       </aside>
187 | 
188 |       <main class="px-4 md:ml-52">
189 |         <ContentDoc class="prose-edit" />
190 |       </main>
191 |     </div>
192 |   </div>
193 | </template>
194 | 


--------------------------------------------------------------------------------