feat(docs): wip official docs

docs/.vitepress/config.js

@@ -0,0 +1,36 @@
+import {defineConfig} from 'vitepress';
+
+export default defineConfig({
+  title: 'GITS UI',
+  description: 'GITS UI Component Library',
+  themeConfig: {
+    logo: 'https://gits.id/wp-content/uploads/2022/06/Logo-Main-1.png',
+    nav: [
+      {text: 'Guide', link: '/guide/introduction'},
+      // {
+      //   text: 'Ecosystem',
+      //   items: [
+      //     { text: 'Item A', link: '/item-1' },
+      //     { text: 'Item B', link: '/item-2' },
+      //     { text: 'Item C', link: '/item-3' }
+      //   ]
+      // }
+    ],
+    sidebar: [
+      {
+        text: 'Guide',
+        items: [
+          {text: 'Introduction', link: '/guide/introduction'},
+          {text: 'Getting Started', link: '/guide/getting-started'},
+          {text: 'Configuration', link: '/guide/configuration'},
+          {text: 'Deploying', link: '/guide/deploying'},
+          {text: 'Customization', link: '/guide/customization'},
+        ],
+      },
+      {
+        text: 'Components',
+        items: [{text: 'Alert', link: '/components/alerts'}],
+      },
+    ],
+  },
+});

docs/.vitepress/theme/index.js

@@ -0,0 +1,5 @@
+// .vitepress/theme/index.js
+import DefaultTheme from 'vitepress/theme';
+import './theme.css';
+
+export default DefaultTheme;

docs/.vitepress/theme/theme.css

@@ -0,0 +1,8 @@
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(
+    120deg,
+    #bd34fe,
+    #41d1ff
+  );
+}

docs/components/alerts.md

@@ -0,0 +1,5 @@
+# Alert
+
+## Installation
+
+## Usage

docs/guide/configuration.md

@@ -0,0 +1 @@
+# Configuration

docs/guide/customization.md

@@ -0,0 +1 @@
+# Customization

docs/guide/deploying.md

@@ -0,0 +1 @@
+# Deploying

docs/guide/getting-started.md

@@ -0,0 +1,105 @@
+# Getting Started
+
+This section will help you build a basic Vue app with GITS UI from ground up. If you already have an existing project and would like to keep documentation inside the project, start from Step 2.
+
+::: tip
+Checkout [examples](https://github.com/gitsindonesia/ui-component/tree/main/examples/vue) to help you get started faster.
+:::
+
+::: info
+We recommend using `yarn` or `pnpm` as the package manager. The default `npm` should also works fine.
+:::
+
+## Step 1. Create new project
+
+Create your Vue 3 project via `create-vue` CLI and install the dependencies.
+
+```bash
+npm init vue@3 my-app
+cd my-app
+yarn install
+```
+
+## Step 2. Install GITS UI
+
+Install `@gits-id/ui` and `tailwindcss` package:
+
+```bash
+yarn add @gits-id/ui tailwindcss postcss autoprefixer
+```
+
+Generate the tailwind config files:
+
+```bash
+npx tailwindcss init -p
+```
+
+Install the GITS UI preset and scan the GITS UI Component Folders.
+
+```js{6,15}
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx,vue}",
+    "./node_modules/@gits-id/**/src/**/*.{vue,js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+  presets: [require("@gits-id/tailwind-config/preset")],
+};
+
+```
+
+Once that's done, open `src/main.ts` and import `GitsUi` plugin from `@gits-id/ui` and use it as the Vue plugin.
+
+```ts{7-8,14}
+// main.ts
+import { createApp } from "vue";
+
+import App from "./App.vue";
+import router from "./router";
+
+import GitsUi from "@gits-id/ui";
+
+const app = createApp(App);
+
+app.use(router);
+app.use(GitsUi);
+
+app.mount("#app");
+```
+
+## Step 3. Boot up dev server
+
+Run `dev` scripts and open http://localhost:5173.
+
+```
+yarn dev
+```
+
+## Step 4. Use the component
+
+Open `src/views/HomeView` and replace the existing content with the code below:
+
+```vue
+<template>
+  <h1 class="text-3xl font-bold text-gray-800">GITS UI Examples</h1>
+
+  <VAlert> Alert text </VAlert>
+
+  <VBtn> Click me </VBtn>
+
+  <VInput placeholder="Type something..." />
+</template>
+```
+
+::: info
+The component `VAlert`, `VBtn` and `VInput` is registered globally.
+:::
+
+View the result on the browser. You should see something like this:
+
+[screenshot]

docs/guide/introduction.md

@@ -0,0 +1 @@
+# Introduction

docs/index.md

@@ -0,0 +1,28 @@
+---
+layout: home
+
+hero:
+  name: GITS UI
+  text: Vue Component Library
+  # tagline: Beautiful yet costumizable Vue Components
+  actions:
+    - theme: brand
+      text: Get Started
+      link: /guide/getting-started
+    - theme: alt
+      text: View on Storybook
+      link: https://gits-ui.web.app
+    - theme: alt
+      text: Checkout Examples
+      link: https://github.com/gitsindonesia/ui-component/tree/main/examples
+features:
+  - icon: 🖖
+    title: Vue 3
+    details: Built with and for the latest and greatest Vue 3
+  - icon: 💨
+    title: Tailwind CSS
+    details: Fast prototyping with Tailwind CSS
+  - icon: 🛠️
+    title: Versatile
+    details: Extendable, Themeable and Configurable
+---

package.json

@@ -15,7 +15,10 @@
     "deploy:playground": "firebase deploy --only hosting:playground",
     "test": "vitest",
     "coverage": "vitest run --coverage",
-    "lint": "eslint --ext .ts,.tsx,.js,.jsx,.vue packages"
+    "lint": "eslint --ext .ts,.tsx,.js,.jsx,.vue packages",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:serve": "vitepress serve docs"
   },
   "dependencies": {
     "@vueuse/core": "^7.7.1",
@@ -74,6 +77,7 @@
     "typescript": "^4.6.2",
     "unplugin-icons": "^0.13.4",
     "vite": "^3.0.0",
+    "vitepress": "^1.0.0-alpha.15",
     "vitest": "^0.12.4",
     "vue-loader": "^16.8.3",
     "vue-tsc": "^0.37.3",