[UPD] Update documentations

.gitignore

@@ -32,5 +32,4 @@ docs/.vitepress/dist
 
 #temporary
 hy-vue-gantt-1.0.0.tgz
-deploy.sh
-docs-deploy.yml
+

deploy.sh

@@ -0,0 +1,12 @@
+set -e
+
+npm run docs:build
+cd docs/.vuepress/dist
+
+git init
+git add -A
+git commit -m 'deploy'
+
+git push -f [email protected]:Xeyos88/HyVueGantt.git master:gh-pages
+
+cd -

docs-deploy.yml

@@ -0,0 +1,63 @@
+# Sample workflow for building and deploying a VitePress site to GitHub Pages
+#
+name: Deploy VitePress site to Pages
+
+on:
+  # Runs on pushes targeting the `main` branch. Change this to `master` if you're
+  # using the `master` branch as the default branch.
+  push:
+    branches: [master]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0 # Not needed if lastUpdated is not enabled
+      # - uses: pnpm/action-setup@v2 # Uncomment this if you're using pnpm
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: npm # or pnpm / yarn
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+      - name: Install dependencies
+        run: npm ci # or pnpm install / yarn install
+      - name: Build with VitePress
+        run: npm run docs:build # or pnpm docs:build / yarn docs:build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: docs/.vitepress/dist
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    needs: build
+    runs-on: ubuntu-latest
+    name: Deploy
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

docs/.vitepress/config.ts

@@ -1,6 +1,13 @@
 import { defineConfig } from "vitepress"
 
 export default defineConfig({
+  vue: {
+    template: {
+      compilerOptions: {
+        isCustomElement: (tag) => tag.includes('hy-vue-')
+      }
+    }
+  },
   lang: 'en-US',
   title: "Hyper Vue Gantt",
   description: "Documentation for the Huper Vue Gantt Chart Library",
@@ -29,46 +36,46 @@ export default defineConfig({
         {
           text: "Getting Started",
           items: [
-            { text: "Introduction", link: "/introduction" },
-            { text: "Installation", link: "/installation" },
-            { text: "Quick Start", link: "/quick-start" }
+            { text: "Introduction", link: "/guide/introduction" },
+            { text: "Installation", link: "/guide/installation" },
+            { text: "Quick Start", link: "/guide/quick-start" }
           ]
         },
         {
           text: "Core Concepts",
           items: [
-            { text: "Chart Configuration", link: "/chart-configuration" },
-            { text: "Time Axis", link: "/time-axis" },
-            { text: "Connections", link: "/connections" },
-            { text: "Styling", link: "/styling" }
+            { text: "Chart Configuration", link: "/guide/chart-configuration" },
+            { text: "Time Axis", link: "/guide/time-axis" },
+            { text: "Connections", link: "/guide/connections" },
+            { text: "Styling", link: "/guide/styling" }
           ]
         },
         {
           text: "Components",
           items: [
-            { text: "GGanttChart", link: "/g-gantt-chart" },
-            { text: "GGanttRow", link: "/g-gantt-row" }
+            { text: "GGanttChart", link: "/components/g-gantt-chart" },
+            { text: "GGanttRow", link: "/components/g-gantt-row" }
           ]
         },
         {
           text: "API Reference",
           items: [
-            { text: "Props", link: "/props" },
-            { text: "Events", link: "/events" },
-            { text: "Types", link: "/types" },
-            { text: "Color Schemes", link: "/color-schemes" }
+            { text: "Props", link: "/api/props" },
+            { text: "Events", link: "/api/events" },
+            { text: "Types", link: "/api/types" },
+            { text: "Color Schemes", link: "/api/color-schemes" }
           ]
-        }
-      ],
-      "/examples/": [
+        },
         {
           text: "Examples",
           items: [
             { text: "Basic Usage", link: "/examples/basic" },
             { text: "Custom Styling", link: "/examples/styling" },
             { text: "Bar Connections", link: "/examples/connections" },
             { text: "Time Management", link: "/examples/time" },
-            { text: "Advanced Features", link: "/examples/advanced" }
+            { text: "Advanced Features", link: "/examples/advanced" },
+            { text: "Live Demo", link: "/examples/live" }
+
           ]
         }
       ],

docs/.vitepress/theme/components/BasicGanttDemo.vue

@@ -0,0 +1,114 @@
+<template>
+  <ClientOnly>
+    <div class="demo-container" v-if="isLibraryReady">
+      <g-gantt-chart
+        chart-start="2024-12-10 08:00"
+        chart-end="2024-12-13 23:00"
+        precision="hour"
+        bar-start="start"
+        bar-end="end"
+      >
+        <g-gantt-row
+          v-for="row in rows"
+          :key="row.label"
+          :label="row.label"
+          :bars="row.bars"
+        />
+      </g-gantt-chart>
+    </div>
+  </ClientOnly>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import dayjs from 'dayjs'
+import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
+import { GGanttChart, GGanttRow } from 'hy-vue-gantt'
+
+dayjs.extend(isSameOrBefore)
+
+const isLibraryReady = ref(false)
+
+const rows = ref([
+  {
+    label: 'Frontend Team',
+    bars: [
+      {
+        ganttBarConfig: {
+          id: 'task1',
+          label: 'Project Setup',
+          immobile: true,
+          style: { background: '#FF6B6B' },
+        },
+        start: '2024-12-10 09:00',
+        end: '2024-12-10 12:00',
+      },
+      {
+        ganttBarConfig: {
+          id: 'task2',
+          label: 'Router Configuration',
+          style: { background: '#4ECDC4' },
+        },
+        start: '2024-12-10 13:00',
+        end: '2024-12-10 17:00',
+      },
+      {
+        ganttBarConfig: {
+          id: 'task3',
+          label: 'Store Implementation',
+          style: { background: '#96CEB4' },
+        },
+        start: '2024-12-11 09:00',
+        end: '2024-12-11 16:00',
+      },
+    ],
+  },
+  {
+    label: 'Backend Team',
+    bars: [
+      {
+        ganttBarConfig: {
+          id: 'task4',
+          label: 'Setup Database',
+          immobile: true,
+          style: { background: '#D4A5A5' },
+        },
+        start: '2024-12-10 09:00',
+        end: '2024-12-10 15:00',
+      },
+      {
+        ganttBarConfig: {
+          id: 'task5',
+          label: 'API Development',
+          style: { background: '#9FA8DA' },
+        },
+        start: '2024-12-10 15:30',
+        end: '2024-12-11 12:00',
+      },
+      {
+        ganttBarConfig: {
+          id: 'task6',
+          label: 'Testing APIs',
+          style: { background: '#B39DDB' },
+        },
+        start: '2024-12-11 13:00',
+        end: '2024-12-11 17:00',
+      },
+    ],
+  },
+])
+
+
+onMounted(() => {
+  isLibraryReady.value = true
+})
+</script>
+
+<style scoped>
+.demo-container {
+  border: 1px solid #eaeaea;
+  border-radius: 8px;
+  padding: 20px;
+  margin: 20px 0;
+}
+</style>