[ADD] Starting docs

.gitignore

@@ -31,7 +31,6 @@ docs/.vitepress/dist
 *.tgz
 
 #temporary
-docs
 hy-vue-gantt-1.0.0.tgz
 deploy.sh
 docs-deploy.yml

.prettierignore

@@ -0,0 +1 @@
+docs

docs/.vitepress/config.ts

@@ -0,0 +1,91 @@
+import { defineConfig } from "vitepress"
+
+export default defineConfig({
+  lang: 'en-US',
+  title: "Hyper Vue Gantt",
+  description: "Documentation for the Huper Vue Gantt Chart Library",
+  base: '/hy-vue-gantt/',
+  head: [['link', { rel: 'icon', href: '/favicon.ico' }]],
+
+  themeConfig: {
+    logo: {
+      src: '/logo.png',
+      alt: 'Hyper Vue Gantt Logo'
+    },
+
+    nav: [
+      { text: "Guide", link: "/guide/" },
+      { text: "Components", link: "/components/" },
+      { text: "Examples", link: "/examples/" },
+      { text: "API", link: "/api/" },
+      {
+        text: "Links",
+        items: [
+          { text: "GitHub", link: "https://github.com/Xeyos88/HyVueGantt" },
+          { text: "NPM", link: "https://www.npmjs.com/package/hy-vue-gantt" }
+        ]
+      }
+    ],
+
+    sidebar: {
+      "/guide/": [
+        {
+          text: "Getting Started",
+          items: [
+            { text: "Introduction", link: "/guide/" },
+            { text: "Installation", link: "/guide/installation" },
+            { text: "Quick Start", link: "/guide/quick-start" }
+          ]
+        },
+        {
+          text: "Core Concepts",
+          items: [
+            { text: "Chart Configuration", link: "/guide/chart-configuration" },
+            { text: "Time Axis", link: "/guide/time-axis" },
+            { text: "Connections", link: "/guide/connections" },
+            { text: "Styling", link: "/guide/styling" }
+          ]
+        }
+      ],
+      "/components/": [
+        {
+          text: "Components",
+          items: [
+            { text: "GGanttChart", link: "/components/g-gantt-chart" },
+            { text: "GGanttRow", link: "/components/g-gantt-row" }
+          ]
+        }
+      ],
+      "/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" }
+          ]
+        }
+      ],
+      "/api/": [
+        {
+          text: "API Reference",
+          items: [
+            { text: "Props", link: "/api/props" },
+            { text: "Events", link: "/api/events" },
+            { text: "Types", link: "/api/types" },
+            { text: "Color Schemes", link: "/api/color-schemes" }
+          ]
+        }
+      ]
+    },
+
+    socialLinks: [{ icon: "github", link: "https://github.com/Xeyos88/HyVueGantt" }],
+
+    footer: {
+      message: "Released under the MIT License.",
+      copyright: "Copyright © 2024"
+    }
+  }
+})

docs/.vitepress/theme/custom.css

@@ -0,0 +1,85 @@
+/* docs/.vitepress/theme/custom.css */
+:root {
+  --vp-c-brand: #42b883;
+  --vp-c-brand-light: #42d392;
+  --vp-c-brand-dark: #38b2ac;
+}
+
+/* Hero section */
+.VPHero {
+  padding: 4rem 0 !important;
+}
+
+.VPHero .container {
+  max-width: 1200px;
+}
+
+/* Feature section */
+.VPFeatures {
+  padding: 0 16px;
+  background-color: var(--vp-c-bg);
+}
+
+.VPFeatures .container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.VPFeatures .item {
+  background-color: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 18px;
+  transition: all 0.3s ease;
+}
+
+.VPFeatures .item:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.VPFeatures .item .icon {
+  display: inline-block;
+  width: 48px;
+  height: 48px;
+  border-radius: 8px;
+  margin-bottom: 16px;
+  background-color: var(--vp-c-bg-alt);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+}
+
+.VPFeatures .item .title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: var(--vp-c-text-1);
+}
+
+.VPFeatures .item .details {
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--vp-c-text-2);
+}
+
+/* Footer */
+.VPFooter {
+  padding: 12px !important;
+  border-top: 1px solid var(--vp-c-divider);
+}
+
+/* Dark mode specifics */
+.dark .VPFeatures .item {
+  background-color: #1a1a1a;
+  border-color: #2a2a2a;
+}
+
+.dark .VPFeatures .item:hover {
+  border-color: var(--vp-c-brand);
+}
+
+.dark .VPFeatures .item .icon {
+  background-color: #2a2a2a;
+}

docs/.vitepress/theme/index.ts

@@ -0,0 +1,9 @@
+import DefaultTheme from 'vitepress/theme'
+import './custom.css'
+
+export default {
+  extends: DefaultTheme,
+  enhanceApp({ app }) {
+    // register your custom global components
+  }
+}

docs/guide/index.md

@@ -0,0 +1,66 @@
+# Hyper Vue Gantt 
+
+A powerful and flexible Gantt chart component for Vue 3 applications. This component is an evolution of vue-ganttastic.
+
+## Features
+
+- 📅 **Flexible Time Management**: Support for various time units (hours, days, weeks, months)
+- 🎨 **Customizable Styling**: Multiple built-in color schemes and custom styling options
+- 🔗 **Bar Connections**: Visual connections between bars with different styles
+- 📱 **Responsive**: Works across different screen sizes
+- ⌨️ **Keyboard Navigation**: Full keyboard support for accessibility
+- 🎯 **Drag & Drop**: Intuitive drag and drop interface
+- 🔄 **Real-time Updates**: Live updates and animations
+
+## Why Hyper Vue Gantt?
+
+Hyper Vue Gantt is designed to provide a seamless experience for creating and managing Gantt charts in Vue applications. Whether you're building a project management tool, a scheduling system, or any application that requires timeline visualization, Hyper Vue Gantt offers the flexibility and features you need.
+
+## Quick Example
+
+```vue
+<template>
+  <g-gantt-chart
+    :chart-start="chartStart"
+    :chart-end="chartEnd"
+    :rows="rows"
+    :precision="precision"
+    :bar-start="barStart"
+    :bar-end="barEnd"
+  >
+    <g-gantt-row
+      v-for="row in rows"
+      :key="row.label"
+      :label="row.label"
+      :bars="row.bars"
+    />
+  </g-gantt-chart>
+</template>
+
+<script setup lang="ts">
+const chartStart = "2024-01-01"
+const chartEnd = "2024-12-31"
+const precision = "day"
+const barStart = "start"
+const barEnd = "end"
+
+const rows = [
+  {
+    label: "Task 1",
+    bars: [
+      {
+        start: "2024-01-01",
+        end: "2024-01-15",
+        ganttBarConfig: {
+          id: "1",
+          label: "Task 1",
+          style: { background: "#42b883" }
+        }
+      }
+    ]
+  }
+]
+</script>
+```
+
+## Getting Started

docs/index.md

@@ -0,0 +1,53 @@
+---
+
+layout: home
+
+hero:
+  name: "Hyper Vue Gantt"
+  text: "A powerful Gantt component for Vue 3"
+  tagline: Simple, flexible, and performant timeline visualization
+  image:
+    src: /logo.png
+    alt: Hyper Vue Gantt Logo
+  actions:
+
+  - theme: brand
+    text: Get Started
+    link: /guide/introduction
+  - theme: alt
+    text: View on GitHub
+    link: https://github.com/Xeyos88/HyVueGantt
+
+features:
+
+- icon: 📅
+  title: Flexible Time Management
+  details: Support for various time units including hours, days, weeks, and months. Easily customize date formats and time scales.
+
+- icon: 🎨
+  title: Customizable Styling
+  details: Multiple built-in color schemes, custom styling options, and full control over the appearance of your Gantt chart.
+
+- icon: 🔗
+  title: Bar Connections
+  details: Create visual connections between bars with different styles, patterns, and animations.
+
+- icon: 📱
+  title: Responsive Design
+  details: Automatically adapts to different screen sizes with touch support for mobile devices.
+
+- icon: ⌨️
+  title: Keyboard Navigation
+  details: Full keyboard support and accessibility features for better user experience.
+
+- icon: 🚀
+  title: TypeScript Ready
+  details: Built with TypeScript for better developer experience with full type support.
+
+- icon: 🎯
+  title: Intuitive DnD
+  details: Drag and drop interface for easy timeline management and task scheduling.
+
+- icon: 🔄
+  title: Real-time Updates
+  details: Smooth animations and live updates for dynamic timeline changes.

package.json

@@ -49,7 +49,7 @@
     "prettier": "^3.4.1",
     "typescript": "~5.4.3",
     "vite": "^6.0.2",
-    "vitepress": "^1.0.0-rc.4",
+    "vitepress": "^1.5.0",
     "vue-tsc": "^2.1.10"
   },
   "peerDependencies": {