docs: add vue-note.liangmi.dev (#3)

Author: liangmiQwQ

.gitignore

@@ -9,3 +9,4 @@ lib-cov
 logs
 node_modules
 temp
+packages/docs/.vitepress/cache

README.md

@@ -1,9 +1,27 @@
-# vue-note
+<p align="center">
+<img src="https://raw.githubusercontent.com/liangmiQwQ/vue-note/main/packages/docs/src/public/favicon.svg" style="width:100px;" />
+</p>
+
+# Vue Note
 
 State: **🚧 Work in progress**
 
 vue-note is another style to write Vue. It's light, easy and fast!
 
+## Getting Started
+
+Use the follwing command to install Vue Note exist project
+
+```
+npm install -D vue-note
+```
+
+Learn more at [vue-note.liangmi.dev](https://vue-note.liangmi.dev/)!
+
+## Contribute Guide
+
+We're so excited that you are willing to help improve Vue Note, before starting your contribution, please take a moment to read the [Contribute Guide](https://vue-note.liangmi.dev/extra/contribute)
+
 ## License
 
 [MIT](./LICENSE) License, 2025 - Present [Liang Mi](https://github.com/liangmiqwq)

package.json

@@ -9,6 +9,8 @@
     "dev": "tsdown --watch",
     "play": "pnpm -C playground dev",
     "lint": "eslint",
+    "docs": "pnpm -r --filter vue-note-docs docs:dev",
+    "docs:build": "pnpm -r --filter vue-note-docs docs:build",
     "prepublishOnly": "nr build",
     "release": "bumpp -r",
     "test": "vitest",

packages/docs/.vitepress/config.ts

@@ -0,0 +1,56 @@
+import UnoCSS from 'unocss/vite'
+import { defineConfig } from 'vitepress'
+
+const SidebarNav = [
+  { text: 'Guide', items: [
+    { text: 'Introduction', link: '/guide/introduction' },
+    { text: 'Quick Start', link: '/guide/quick-start' },
+    { text: 'Flexibility', link: '/guide/flexibility' },
+  ] },
+  { text: 'Advenced', items: [
+    { text: 'Linter & Formatter', link: '/advenced/linter-formatter' },
+    { text: 'TypeScript', link: '/advenced/typescript' },
+    { text: 'API Reference', link: '/advenced/api-reference' },
+
+  ] },
+  { text: 'Extra Topic', items: [
+    { text: 'Design Philosophy', link: '/extra/design-philosophy' },
+    { text: 'Contribute Guide', link: '/extra/contribute' },
+    { text: 'Credits', link: '/extra/credits' },
+  ] },
+]
+
+export default defineConfig({
+  title: 'Vue Note',
+  description: 'Write Vue template in code comment?',
+  srcDir: './src',
+  head: [
+    ['link', { rel: 'icon', href: '/favicon.svg', type: 'image/svg+xml' }],
+  ],
+  themeConfig: {
+    logo: '/favicon.svg',
+    nav: SidebarNav,
+    search: {
+      provider: 'local',
+    },
+    sidebar: {
+      '/': SidebarNav,
+    },
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/liangmiQwQ/vue-note' },
+    ],
+    editLink: {
+      pattern: 'https://github.com/liangmiQwQ/vue-note/edit/main/packages/docs/src/:path',
+      text: 'Suggest changes to this page',
+    },
+    footer: {
+      message: 'Released under the MIT License.',
+      copyright: 'Copyright 2025 - Present Liang Mi',
+    },
+  },
+  vite: {
+    plugins: [
+      UnoCSS(),
+    ],
+  },
+})

packages/docs/.vitepress/theme/custom.css

@@ -0,0 +1,18 @@
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-c-brand-1: hsla(120, 60%, 40%);
+  --vp-c-brand-2: hsl(120, 50%, 50%);
+  --vp-c-brand-3: hsl(120, 60%, 42%);
+  --vp-home-hero-image-background-image: url('/favicon.svg');
+  --vp-home-hero-image-filter: blur(15px);
+  --vp-home-hero-name-background: linear-gradient(
+    170deg,
+    var(--vp-c-brand-2) 40%,
+    var(--vp-c-brand-3) 60%
+  );
+}
+
+.dark {
+  --vp-home-hero-image-background-image: url('/favicon.svg');
+  --vp-home-hero-image-filter: blur(0px);
+}

packages/docs/.vitepress/theme/index.ts

@@ -0,0 +1,5 @@
+import DefaultTheme from 'vitepress/theme'
+import './custom.css'
+import 'uno.css'
+
+export default DefaultTheme

packages/docs/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "vue-note-docs",
+  "type": "module",
+  "private": true,
+  "description": "Document for Vue Note",
+  "author": "Liang Mi",
+  "license": "MIT",
+  "scripts": {
+    "docs:dev": "vitepress dev",
+    "docs:build": "vitepress build",
+    "docs:preview": "vitepress preview"
+  },
+  "devDependencies": {
+    "@iconify-json/carbon": "catalog:docs",
+    "unocss": "catalog:docs",
+    "vitepress": "catalog:docs"
+  }
+}

packages/docs/src/advenced/api-reference.md

@@ -0,0 +1,92 @@
+# Api Reference
+
+## Macros
+
+::: warning
+Please only call the macro in `.ts` file but not `.vue` or `.tsx` file, otherwise something unexpected may get happended.
+:::
+
+### `defineCommentComponent`
+
+```typescript
+import { defineCommentComponent } from 'vue-note'
+
+declare function defineCommentComponent(component: () => void): Component
+```
+
+Can be used to define a component with Vue Note.
+
+```typescript
+import { defineCommentComponent, defineTemplate } from 'vue-note'
+
+export default defineCommentComponent(() => {
+  // Function body will turn into <script setup> part
+  const msg = ref('Hello World')
+
+  defineTemplate(/* @template
+    <h1>{{ msg }}</h1>
+  */)
+})
+```
+
+The above code has the same behavior as the following SFC
+
+```vue
+<script setup lang='ts'>
+const msg = ref('Hello World')
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+</template>
+```
+
+### `defineTemplate`
+
+```typescript
+import { defineTemplate } from 'vue-note'
+
+declare function defineTemplate(): void
+```
+
+Can be used to define template in a comment component. **Can be ONLY called in [`defineCommentComponent`](#definecommentcomponent) function body and for only ONE time**.
+
+And although there is no params requires, you need to write the component with a JavaScript block comment(multi-line comment) in the following struct
+
+```typescript
+defineTemplate(/* @template<!--any template you want--> */)
+```
+
+or with any format
+
+```typescript
+defineTemplate(/* @template
+  <!--any template you want-->
+*/)
+```
+
+## Vite
+
+### `VueNote`
+
+Get the VueNote Vite plugin
+
+```typescript
+declare function VueNote(): PluginOption
+```
+
+and use it in [Vite Config](https://vite.dev/config/)
+
+```typescript{3,7}
+import { defineConfig } from 'vite'
+import Vue from '@vitejs/plugin-vue'
+import { VueNote } from 'vue-note/vite'
+
+export default defineConfig({
+  plugins: [
+    VueNote(),
+    Vue(),
+  ],
+})
+
+```

packages/docs/src/advenced/linter-formatter.md

@@ -0,0 +1 @@
+State: **🚧 Work in progress**

packages/docs/src/advenced/typescript.md

@@ -0,0 +1 @@
+State: **🚧 Work in progress**