docs(update): added setup

Author: ThornWalli

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',

docs/src/index.md

@@ -13,7 +13,7 @@ hero:
       link: /introduction
     - theme: alt
       text: Live Example
-      link: /example/
+      link: /playground/
 
 features:
   - title: Heading

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)

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 || '/';
+}