From 4d968fc4fa5e41b9d02987d25db3ca4d2769b083 Mon Sep 17 00:00:00 2001
From: Thorn Walli <lammpee@gmail.com>
Date: Mon, 23 Sep 2024 17:36:35 +0200
Subject: [PATCH] docs(update): added setup

---
 docs/.vitepress/navigation.js |  7 +++++--
 docs/src/index.md             |  2 +-
 docs/src/setup.md             | 39 +++++++++++++++++++++++++++++++++++
 playground/vite.config.js     |  6 ++++++
 4 files changed, 51 insertions(+), 3 deletions(-)
 create mode 100644 docs/src/setup.md

diff --git a/docs/.vitepress/navigation.js b/docs/.vitepress/navigation.js
index 25a2578..be4beb3 100644
--- a/docs/.vitepress/navigation.js
+++ b/docs/.vitepress/navigation.js
@@ -2,13 +2,16 @@ export default {
   nav: [
     { text: 'Home', link: '/' },
     { text: 'Introduction', link: '/introduction' },
-    { text: 'Live Example', link: '/example/' }
+    { text: 'Live Example', link: '/playground/' }
   ],
 
   sidebar: [
     {
       text: 'Guide',
-      items: [{ text: 'Introduction', link: '/introduction' }]
+      items: [
+        { text: 'Introduction', link: '/introduction' },
+        { text: 'Setup', link: '/setup' }
+      ]
     },
     {
       text: 'Composables',
diff --git a/docs/src/index.md b/docs/src/index.md
index 0ef36c0..0b48fa7 100644
--- a/docs/src/index.md
+++ b/docs/src/index.md
@@ -13,7 +13,7 @@ hero:
       link: /introduction
     - theme: alt
       text: Live Example
-      link: /example/
+      link: /playground/
       
 features:
   - title: Heading
diff --git a/docs/src/setup.md b/docs/src/setup.md
new file mode 100644
index 0000000..0f1e223
--- /dev/null
+++ b/docs/src/setup.md
@@ -0,0 +1,39 @@
+---
+title: Setup
+---
+
+# {{$frontmatter.title}}
+
+## Installation
+
+Install `vue-semantic-structure` as a dependency to your project:
+
+::: code-group
+
+  ```bash [Yarn]
+  yarn add vue-semantic-structure
+  ```
+
+  ```bash [NPM]
+  npm install vue-semantic-structure
+  ```
+
+  ```bash [PNPM]
+  pnpm add vue-semantic-structure
+  ```
+
+:::
+
+## Usage
+
+You can find uses in the following sections:
+
+**Components**
+
+- [ContentContainer](/components/content-container)
+- [ContentHeadline](/components/content-headline)
+
+**Composables:**
+
+- [useContentContainer](/composables/use-content-container)
+- [useContentHeadline](/composables/use-content-headline)
diff --git a/playground/vite.config.js b/playground/vite.config.js
index 4f18343..4becc3d 100644
--- a/playground/vite.config.js
+++ b/playground/vite.config.js
@@ -8,6 +8,8 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  base: getBaseUrl(),
+
   plugins: [vue()],
 
   server: {
@@ -21,3 +23,7 @@ export default defineConfig({
     }
   }
 });
+
+function getBaseUrl() {
+  return process.env.npm_config_base_url || process.env.BASE_URL || '/';
+}