docs: split getting started

Author: abichinger

ant/README.md

@@ -7,17 +7,17 @@
 <p align="center">
 <a href="https://www.npmjs.com/package/@vue-js-cron/core">Core</a> |
 <a href="https://www.npmjs.com/package/@vue-js-cron/light">Light</a> |
-<a href="https://www.npmjs.com/package/@vue-js-cron/vuetify">Vuetify</a> |
-<a href="https://www.npmjs.com/package/@vue-js-cron/element-plus">Element Plus</a> |
 <a href="https://www.npmjs.com/package/@vue-js-cron/ant">Ant</a> |
-<a href="https://www.npmjs.com/package/@vue-js-cron/quasar">Quasar</a>
+<a href="https://www.npmjs.com/package/@vue-js-cron/element-plus">Element Plus</a> |
+<a href="https://www.npmjs.com/package/@vue-js-cron/quasar">Quasar</a> |
+<a href="https://www.npmjs.com/package/@vue-js-cron/vuetify">Vuetify</a>
 </p>
 
 ## Usage - Ant
 
 [Demo](https://abichinger.github.io/vue-js-cron/demo.html)
 
-[Get Started](https://abichinger.github.io/vue-js-cron/guide/getting-started.html#ant)
+[Get Started](https://abichinger.github.io/vue-js-cron/guide/getting-started-ant)
 
 [API - cron-ant](https://abichinger.github.io/vue-js-cron/api/ant.html)
 

core/README.md

@@ -7,17 +7,17 @@
 <p align="center">
 <a href="https://www.npmjs.com/package/@vue-js-cron/core">Core</a> |
 <a href="https://www.npmjs.com/package/@vue-js-cron/light">Light</a> |
-<a href="https://www.npmjs.com/package/@vue-js-cron/vuetify">Vuetify</a> |
-<a href="https://www.npmjs.com/package/@vue-js-cron/element-plus">Element Plus</a> |
 <a href="https://www.npmjs.com/package/@vue-js-cron/ant">Ant</a> |
-<a href="https://www.npmjs.com/package/@vue-js-cron/quasar">Quasar</a>
+<a href="https://www.npmjs.com/package/@vue-js-cron/element-plus">Element Plus</a> |
+<a href="https://www.npmjs.com/package/@vue-js-cron/quasar">Quasar</a> |
+<a href="https://www.npmjs.com/package/@vue-js-cron/vuetify">Vuetify</a>
 </p>
 
 ## Usage - Core
 
 [Demo](https://abichinger.github.io/vue-js-cron/demo.html)
 
-[Get Started](https://abichinger.github.io/vue-js-cron/guide/getting-started.html#renderless)
+[Get Started](https://abichinger.github.io/vue-js-cron/guide/getting-started-core)
 
 [API - cron-core](https://abichinger.github.io/vue-js-cron/api/core.html)
 

docs/package.json

@@ -12,17 +12,21 @@
   "scripts": {
     "dev": "vuepress dev src",
     "build": "vuepress build src",
-    "clean": "git clean -xf src/.vuepress/dist src/.vuepress/.temp src/.vuepress/.cache"
+    "clean": "git clean -xf src/.vuepress/dist src/.vuepress/.temp src/.vuepress/.cache",
+    "generate": "cron-cli guide src/guide"
   },
   "license": "MIT",
   "devDependencies": {
-    "@vue-js-cron/ant": "link:../ant",
-    "@vue-js-cron/core": "link:../core",
-    "@vue-js-cron/element-plus": "link:../element-plus",
-    "@vue-js-cron/light": "link:../light",
-    "@vue-js-cron/vuetify": "link:../vuetify",
+    "@vue-js-cron/ant": "file:../ant",
+    "@vue-js-cron/core": "file:../core",
+    "@vue-js-cron/element-plus": "file:../element-plus",
+    "@vue-js-cron/light": "file:../light",
+    "@vue-js-cron/vuetify": "file:../vuetify",
     "@vuepress/plugin-google-analytics": "2.0.0-beta.60",
     "@vuepress/plugin-register-components": "2.0.0-beta.60",
     "vuepress": "2.0.0-beta.60"
+  },
+  "dependencies": {
+    "@vue-js-cron/generated": "file:../generated"
   }
 }

docs/src/.vuepress/config.js

@@ -42,7 +42,7 @@ export default defineUserConfig({
       },
       {
         text: 'Guide',
-        link: '/guide/getting-started'
+        link: '/guide/getting-started-light'
       },
       {
         text: 'API',
@@ -59,7 +59,12 @@ export default defineUserConfig({
           title: 'Guide',
           collapsable: false,
           children: [
-            'getting-started',
+            'getting-started-core',
+            'getting-started-light',
+            'getting-started-ant',
+            'getting-started-element-plus',
+            'getting-started-quasar',
+            'getting-started-vuetify',
             'custom-periods',
             'custom-fields'
           ]

docs/src/guide/getting-started-ant.md

@@ -0,0 +1,50 @@
+<!-- Generated file -->
+# Getting Started - Ant
+
+The fastest way to get started, is to use one of the prebuilt components.
+- [cron-core](./getting-started-core) - renderless cron editor
+- [cron-light](./getting-started-light) - lightweight cron editor without external dependencies
+- cron-ant - cron editor for [Ant Design Vue](https://antdv.com/)
+- [cron-element-plus](./getting-started-element-plus) - cron editor for [Element Plus](https://element-plus.org/en-US/)
+- [cron-quasar](./getting-started-quasar) - cron editor for [Quasar](https://quasar.dev/)
+- [cron-vuetify](./getting-started-vuetify) - cron editor for [Vuetify.js](https://next.vuetifyjs.com/en/)
+## Requirements
+
+Make sure to install and setup all requirements.
+- [Ant Design Vue](https://www.antdv.com/components/overview/)
+
+## Installation
+
+Open up a terminal and run the following command:
+
+```bash 
+yarn add @vue-js-cron/ant
+```
+or
+
+```bash 
+npm install @vue-js-cron/ant
+```
+
+Then you need to register the component
+
+```js
+import '@vue-js-cron/ant/dist/ant.css'
+// registers the component globally
+// registered name: CronAnt
+import CronAntPlugin from '@vue-js-cron/ant'
+app.use(CronAntPlugin)
+
+// alternatively you can also register the component yourself
+// https://vuejs.org/guide/components/registration.html
+import { CronAnt } from '@vue-js-cron/ant'
+app.component('CronAnt', CronAnt)
+```
+
+Done! 🚀
+
+<br />
+
+## Example
+
+@[code](../.vuepress/components/get-started-ant.vue)

docs/src/guide/getting-started-core.md

@@ -0,0 +1,45 @@
+<!-- Generated file -->
+# Getting Started - Core
+
+The fastest way to get started, is to use one of the prebuilt components.
+- cron-core - renderless cron editor
+- [cron-light](./getting-started-light) - lightweight cron editor without external dependencies
+- [cron-ant](./getting-started-ant) - cron editor for [Ant Design Vue](https://antdv.com/)
+- [cron-element-plus](./getting-started-element-plus) - cron editor for [Element Plus](https://element-plus.org/en-US/)
+- [cron-quasar](./getting-started-quasar) - cron editor for [Quasar](https://quasar.dev/)
+- [cron-vuetify](./getting-started-vuetify) - cron editor for [Vuetify.js](https://next.vuetifyjs.com/en/)
+
+## Installation
+
+Open up a terminal and run the following command:
+
+```bash 
+yarn add @vue-js-cron/core
+```
+or
+
+```bash 
+npm install @vue-js-cron/core
+```
+
+Then you need to register the component
+
+```js
+// registers the component globally
+// registered name: CronCore
+import CronCorePlugin from '@vue-js-cron/core'
+app.use(CronCorePlugin)
+
+// alternatively you can also register the component yourself
+// https://vuejs.org/guide/components/registration.html
+import { CronCore } from '@vue-js-cron/core'
+app.component('CronCore', CronCore)
+```
+
+Done! 🚀
+
+<br />
+
+## Example
+
+@[code](../.vuepress/components/get-started-renderless.vue)

docs/src/guide/getting-started-element-plus.md

@@ -0,0 +1,50 @@
+<!-- Generated file -->
+# Getting Started - Element Plus
+
+The fastest way to get started, is to use one of the prebuilt components.
+- [cron-core](./getting-started-core) - renderless cron editor
+- [cron-light](./getting-started-light) - lightweight cron editor without external dependencies
+- [cron-ant](./getting-started-ant) - cron editor for [Ant Design Vue](https://antdv.com/)
+- cron-element-plus - cron editor for [Element Plus](https://element-plus.org/en-US/)
+- [cron-quasar](./getting-started-quasar) - cron editor for [Quasar](https://quasar.dev/)
+- [cron-vuetify](./getting-started-vuetify) - cron editor for [Vuetify.js](https://next.vuetifyjs.com/en/)
+## Requirements
+
+Make sure to install and setup all requirements.
+- [Element Plus](https://element-plus.org/en-US/)
+
+## Installation
+
+Open up a terminal and run the following command:
+
+```bash 
+yarn add @vue-js-cron/element-plus
+```
+or
+
+```bash 
+npm install @vue-js-cron/element-plus
+```
+
+Then you need to register the component
+
+```js
+import '@vue-js-cron/element-plus/dist/element-plus.css'
+// registers the component globally
+// registered name: CronElementPlus
+import CronElementPlusPlugin from '@vue-js-cron/element-plus'
+app.use(CronElementPlusPlugin)
+
+// alternatively you can also register the component yourself
+// https://vuejs.org/guide/components/registration.html
+import { CronElementPlus } from '@vue-js-cron/element-plus'
+app.component('CronElementPlus', CronElementPlus)
+```
+
+Done! 🚀
+
+<br />
+
+## Example
+
+@[code](../.vuepress/components/get-started-element.vue)

docs/src/guide/getting-started-light.md

@@ -0,0 +1,46 @@
+<!-- Generated file -->
+# Getting Started - Light
+
+The fastest way to get started, is to use one of the prebuilt components.
+- [cron-core](./getting-started-core) - renderless cron editor
+- cron-light - lightweight cron editor without external dependencies
+- [cron-ant](./getting-started-ant) - cron editor for [Ant Design Vue](https://antdv.com/)
+- [cron-element-plus](./getting-started-element-plus) - cron editor for [Element Plus](https://element-plus.org/en-US/)
+- [cron-quasar](./getting-started-quasar) - cron editor for [Quasar](https://quasar.dev/)
+- [cron-vuetify](./getting-started-vuetify) - cron editor for [Vuetify.js](https://next.vuetifyjs.com/en/)
+
+## Installation
+
+Open up a terminal and run the following command:
+
+```bash 
+yarn add @vue-js-cron/light
+```
+or
+
+```bash 
+npm install @vue-js-cron/light
+```
+
+Then you need to register the component
+
+```js
+import '@vue-js-cron/light/dist/light.css'
+// registers the component globally
+// registered name: CronLight
+import CronLightPlugin from '@vue-js-cron/light'
+app.use(CronLightPlugin)
+
+// alternatively you can also register the component yourself
+// https://vuejs.org/guide/components/registration.html
+import { CronLight } from '@vue-js-cron/light'
+app.component('CronLight', CronLight)
+```
+
+Done! 🚀
+
+<br />
+
+## Example
+
+@[code](../.vuepress/components/get-started-light.vue)

docs/src/guide/getting-started-quasar.md

@@ -0,0 +1,45 @@
+<!-- Generated file -->
+# Getting Started - Quasar
+
+The fastest way to get started, is to use one of the prebuilt components.
+- [cron-core](./getting-started-core) - renderless cron editor
+- [cron-light](./getting-started-light) - lightweight cron editor without external dependencies
+- [cron-ant](./getting-started-ant) - cron editor for [Ant Design Vue](https://antdv.com/)
+- [cron-element-plus](./getting-started-element-plus) - cron editor for [Element Plus](https://element-plus.org/en-US/)
+- cron-quasar - cron editor for [Quasar](https://quasar.dev/)
+- [cron-vuetify](./getting-started-vuetify) - cron editor for [Vuetify.js](https://next.vuetifyjs.com/en/)
+## Requirements
+
+Make sure to install and setup all requirements.
+- [Quasar](https://quasar.dev/start)
+
+## Installation
+
+Open up a terminal and run the following command:
+
+```bash 
+yarn add @vue-js-cron/quasar
+```
+or
+
+```bash 
+npm install @vue-js-cron/quasar
+```
+
+Then you need to register the component
+
+```js
+// registers the component globally
+// registered name: CronQuasar
+import CronQuasarPlugin from '@vue-js-cron/quasar'
+app.use(CronQuasarPlugin)
+
+// alternatively you can also register the component yourself
+// https://vuejs.org/guide/components/registration.html
+import { CronQuasar } from '@vue-js-cron/quasar'
+app.component('CronQuasar', CronQuasar)
+```
+
+Done! 🚀
+
+<br />

docs/src/guide/getting-started-vuetify.md

@@ -0,0 +1,50 @@
+<!-- Generated file -->
+# Getting Started - Vuetify
+
+The fastest way to get started, is to use one of the prebuilt components.
+- [cron-core](./getting-started-core) - renderless cron editor
+- [cron-light](./getting-started-light) - lightweight cron editor without external dependencies
+- [cron-ant](./getting-started-ant) - cron editor for [Ant Design Vue](https://antdv.com/)
+- [cron-element-plus](./getting-started-element-plus) - cron editor for [Element Plus](https://element-plus.org/en-US/)
+- [cron-quasar](./getting-started-quasar) - cron editor for [Quasar](https://quasar.dev/)
+- cron-vuetify - cron editor for [Vuetify.js](https://next.vuetifyjs.com/en/)
+## Requirements
+
+Make sure to install and setup all requirements.
+- [Vuetify](https://next.vuetifyjs.com/en/)
+
+## Installation
+
+Open up a terminal and run the following command:
+
+```bash 
+yarn add @vue-js-cron/vuetify
+```
+or
+
+```bash 
+npm install @vue-js-cron/vuetify
+```
+
+Then you need to register the component
+
+```js
+import '@vue-js-cron/vuetify/dist/vuetify.css'
+// registers the component globally
+// registered name: CronVuetify
+import CronVuetifyPlugin from '@vue-js-cron/vuetify'
+app.use(CronVuetifyPlugin)
+
+// alternatively you can also register the component yourself
+// https://vuejs.org/guide/components/registration.html
+import { CronVuetify } from '@vue-js-cron/vuetify'
+app.component('CronVuetify', CronVuetify)
+```
+
+Done! 🚀
+
+<br />
+
+## Example
+
+@[code](../.vuepress/components/get-started-vuetify.vue)