docs: add install guide

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>

README.md

@@ -10,6 +10,26 @@ Beautifully designed _Nuxt Content_ template with _shadcn-vue_. **Customizable.
 
 - [Documentation / Demo](https://shadcn-docs-nuxt.vercel.app/)
 
+## Quick Start
+
+1. Create a project with the starter template
+
+  ```bash
+  npx nuxi@latest init -t github:ZTL-UwU/shadcn-docs-nuxt-starter
+  ```
+
+2. Install dependencies
+
+  ```bash
+  npm install
+  ```
+
+3. Start dev server
+
+  ```bash
+  npm run dev
+  ```
+
 ## Contributing
 
 1. Clone this repository

app.config.ts

@@ -16,12 +16,12 @@ export default defineAppConfig({
         links: [{
           title: 'Getting Started',
           to: '/getting-started',
-          description: 'For the beautiful component design & docs design',
+          description: 'Start building your document with shadcn-docs-nuxt',
           target: undefined,
         }, {
           title: 'API',
           to: '/api',
-          description: 'For the vue port of shadcn-ui & some docs component source',
+          description: 'Discover the configurations and exposed APIs.',
           target: undefined,
         }],
       }, {
@@ -134,9 +134,13 @@ export default defineAppConfig({
   },
 });
 
+type DeepPartial<T> = T extends object ? {
+  [P in keyof T]?: DeepPartial<T[P]>;
+} : T;
+
 declare module '@nuxt/schema' {
   interface AppConfigInput {
-    shadcnDocs?: {
+    shadcnDocs: DeepPartial<{
       site: {
         name: string;
       };
@@ -150,13 +154,13 @@ declare module '@nuxt/schema' {
         darkModeToggle: true;
         nav: ({
           title: string;
-          to?: string;
-          target?: string;
-          links?: ({
+          to: string;
+          target: string;
+          links: ({
             title: string;
             to: string;
-            target?: string;
-            description?: string;
+            target: string;
+            description: string;
           })[];
         })[];
         links: ({
@@ -179,10 +183,10 @@ declare module '@nuxt/schema' {
       footer: {
         credits: string;
         links: ({
-          icon?: string;
-          title?: string;
+          icon: string;
+          title: string;
           to: string;
-          target?: string;
+          target: string;
         })[];
       };
       toc: {
@@ -193,6 +197,6 @@ declare module '@nuxt/schema' {
         enable: boolean;
         inAside: boolean;
       };
-    };
+    }>;
   }
 }

components/content/ProseCode.vue

@@ -9,8 +9,8 @@
     </div>
     <UiScrollArea>
       <div
-        class="p-3 bg-muted/30 text-sm relative overflow-x-auto"
-        :class="[`highlight-${language}`, !filename && 'pr-10']"
+        class="py-3 bg-muted/30 text-sm relative overflow-x-auto"
+        :class="[`highlight-${language}`, !filename && 'inline-copy']"
       >
         <span v-if="!filename" class="absolute right-4">
           <CodeCopy :code="code" />
@@ -61,4 +61,17 @@ const icon = iconMap.get(props.filename?.toLowerCase()) || iconMap.get(props.lan
 .fade-leave-to {
   opacity: 0;
 }
+
+.shiki .line.highlight {
+  background-color: hsl(var(--muted) / 0.8);
+}
+
+.shiki .line {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.inline-copy .line {
+  padding-right: 2.7rem;
+}
 </style>

components/layout/Header/NavMobileItem.vue

@@ -38,10 +38,8 @@
 </template>
 
 <script setup lang="ts">
-import type { AppConfigInput } from 'nuxt/schema';
-
 const props = defineProps<{
-  item: Exclude<AppConfigInput['shadcnDocs'], undefined>['header']['nav'][0];
+  item: any;
   index: number;
 }>();
 

content/1.getting-started/1.Introduction.md

@@ -4,9 +4,19 @@ description: shadcn-docs-nuxt is a Nuxt documentation template built with Nuxt C
 icon: 'lucide:info'
 ---
 
+## Motivations
+
+**shadcn-docs-nuxt** is created as an free alternative documentation solution to [Docus](https://docus.dev/) and [Nuxt UI Pro Docs](https://docs-template.nuxt.dev/).
+
+As docus is [discontinued](https://github.com/nuxt-themes/docus/issues/1016), I wanted a new docs solution. Vitepress is nice but I love nuxt content's easy customizability. The Nuxt team did an incredible job building the Nuxt UI Pro Docs template, but $249 is a lot for independent developers. So I made this in about a week.
+
 ## Features
 
-- Fully open source.
+- Free and [open source](https://github.com/ZTL-UwU/shadcn-docs-nuxt).
+- Fully [customizable](http://localhost:3000/api/configuration).
+- Rich [components](http://localhost:3000/getting-started/writing/components) to work with.
+- Mobile support.
+- 🚧 Component compatibility with `Docus`, `Nuxt UI Pro Docs`, `undocs`.
 
 ## Credits
 
@@ -15,3 +25,7 @@ icon: 'lucide:info'
 - [shadcn-vue](https://www.shadcn-vue.com/): For the vue port of shadcn-ui & some docs component source.
 - [Docus](https://docus.dev/): For inspiration & some docs component source.
 - [Nuxt UI Pro Docs](https://docs-template.nuxt.dev/): For inspiration.
+
+## License
+
+[MIT](https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/LICENSE)