feat: update the docs

Author: hrgui

docs/.vitepress/config.ts

@@ -7,10 +7,7 @@ export default defineConfig({
   description: "A NPM package to transpose and manage chord charts for music",
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
-    nav: [
-      { text: "Home", link: "/" },
-      { text: "Quickstart", link: "/quickstart" },
-    ],
+    nav: [{ text: "Demo", link: "/" }],
     socialLinks: [{ icon: "github", link: "https://github.com/hrgui/chord-charts" }],
   },
 });

docs/.vitepress/theme/index.ts

@@ -0,0 +1,3 @@
+import DefaultTheme from "vitepress/theme";
+import "./style.css";
+export default DefaultTheme;

docs/.vitepress/theme/style.css

@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+select {
+  --webkit-appearance: auto;
+  --moz-appearance: auto;
+  appearance: auto;
+}

docs/bun.lockb

@@ -1,12 +1,100 @@
 ---
-# https://vitepress.dev/reference/default-theme-home-page
-layout: home
-
-hero:
-  name: "Chord Charts"
-  text: "A NPM package to transpose and manage chord charts for music"
-  actions:
-    - theme: alt
-      text: Quickstart
-      link: /quickstart
+outline: deep
+sidebar: false
 ---
+
+::: code-group
+
+```sh [npm]
+$ npm add -D @hrgui/chord-charts
+```
+
+```sh [pnpm]
+$ pnpm add -D @hrgui/chord-charts
+```
+
+```sh [yarn]
+$ yarn add -D @hrgui/chord-charts
+```
+
+```sh [yarn (pnp)]
+$ yarn add -D @hrgui/chord-charts
+```
+
+```sh [bun]
+$ bun add -D @hrgui/chord-charts
+```
+
+:::
+
+Use it in the app in the following way:
+
+```ts
+import { transpose } from "@hrgui/chord-charts";
+
+console.log(
+  transpose(
+    `
+       D            G          D
+Amazing Grace, how sweet the sound,
+			 A7
+That saved a wretch like me.
+     D                G       D
+I once was lost, but now im found,
+               A7     D
+Was blind, but now I see.
+`,
+    "D",
+    "C",
+  ),
+);
+```
+
+<script setup>
+import { ref, useTemplateRef, watch } from 'vue'
+
+import { transpose, keys } from "@hrgui/chord-charts";
+
+
+const count = ref(0)
+const previousKey = ref('D')
+const currentKey = ref('D')
+
+const text = ref(`
+  D            G          D
+  Amazing Grace, how sweet the sound,
+          A7
+  That saved a wretch like me.
+        D                G       D
+  I once was lost, but now im found,
+                  A7     D
+  Was blind, but now I see.
+`);
+
+
+function transposeChordChart(e) {
+  text.value = transpose(text.value, previousKey.value, e.target.value);
+  previousKey.value = e.target.value;
+}
+
+</script>
+
+## Working Example
+
+<select v-model="currentKey" class="border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 mb-2" @change="transposeChordChart">
+
+  <option v-for="key in keys" :value="key.name">{{key.name}}</option>
+</select>
+
+<div>
+
+<textarea v-model="text" class="chord-chart rounded" cols="40" rows="10">
+</textarea>
+</div>
+
+<style module>
+.button {
+  color: red;
+  font-weight: bold;
+}
+</style>

docs/index.md

@@ -5,6 +5,9 @@
   "devDependencies": {
     "@hrgui/chord-charts": "latest",
     "@types/bun": "latest",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.5.3",
+    "tailwindcss": "3",
     "vitepress": "^1.6.3"
   },
   "peerDependencies": {

docs/package.json

@@ -0,0 +1,7 @@
+/** @type {import('postcss-load-config').Config} */
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

docs/postcss.config.mjs

@@ -0,0 +1,14 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./**/*.md",
+    "./*.md",
+    "./.vitepress/theme/**/*.{js,ts,vue}",
+    "./.vitepress/**/*.{js,ts,vue}",
+    "./docs/**/*.md",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};