Merge pull request #31 from themesberg/chank1e/develop

feat: docs

docs/.vitepress/config.ts

@@ -2,7 +2,8 @@ function buildSidebar() {
   return [
     {
       items: [
-        { text: 'Home', link: '/' }
+        { text: 'Home', link: '/' },
+        { text: 'Quickstart', link: '/pages/getting-started' },
       ],
     },
     {
@@ -64,13 +65,12 @@ function getUtils() {
  */
 export default {
   title: 'Flowbite Vue 3',
-  outDir: '../public_html',
   head: [
-    ['link', { rel: "icon", type: "image/svg", href: "../assets/logo.svg"}],
+    ['link', { rel: "icon", type: "image/svg", href: "/assets/logo.svg"}],
   ],
   themeConfig: {
     docsDir: 'docs',
     sidebar: buildSidebar(),
-    logo: '../assets/logo.svg'
+    logo: '/assets/logo.svg'
   },
 }

docs/index.md

@@ -1 +1,18 @@
-# Flowbite vue
+---
+layout: home
+
+title: Flowbite Vue 3
+titleTemplate: Flowbite
+
+hero:
+  name: Flowbite Vue 3
+  text: Tailwind CSS Vue based component library
+  tagline: Get started with the most popular open-source library of interactive UI components built with the utility classes from Tailwind CSS
+  actions:
+    - theme: brand
+      text: Get Started
+      link: /pages/getting-started
+    - theme: alt
+      text: View on GitHub
+      link: https://github.com/themesberg/flowbite-vue
+---

docs/pages/getting-started.md

@@ -0,0 +1,46 @@
+# Flowbite Vue - Quickstart
+
+Get started with Flowbite by including it into your project using NPM
+
+Flowbite is a library of components built on top of the utility-classes from Tailwind CSS and it also includes a JavaScript file that makes interactive elements works, such as modals, dropdowns, and more. Learn how to get started by following this quickstart guide.
+
+## Require via NPM
+
+Make sure that you have [Node.js](https://nodejs.org/en/) and [Tailwind CSS](https://tailwindcss.com/) installed.
+
+1. Install `flowbite` and `flowbite-vue` as a dependency using NPM by running the following command:
+
+```text
+npm i flowbite flowbite-vue
+```
+
+2. Require Flowbite as a plugin inside the tailwind.config.js and add flowbite-vue dist folder to tailwind content:
+
+```javascript
+module.exports = {
+  content: [
+    'node_modules/flowbite-vue/**/*.{js,jsx,ts,tsx}',
+    'node_modules/flowbite/**/*.{js,jsx,ts,tsx}'
+  ],
+  plugins: [
+      require('flowbite/plugin')
+  ],
+  theme: {}
+}
+```
+
+3. Now you can use `flowbite-vue` anywhere in your project and build awesome interfaces:
+```vue
+<template>
+  <dropdown text="Click me" placement="top">
+    <list-group>
+      <list-group-item>Item #1</list-group-item>
+      <list-group-item>Item #2</list-group-item>
+      <list-group-item>Item #3</list-group-item>
+    </list-group>
+  </dropdown>
+</template>
+<script setup>
+import { Dropdown, ListGroup, ListGroupItem } from 'flowbite-vue'
+</script>
+```

package.json

@@ -19,9 +19,8 @@
   },
   "scripts": {
     "dev": "vitepress dev docs",
-    "serve": "vitepress serve docs",
-    "start": "http-server ./public_html",
-    "build": "vitepress build docs",
+    "start": "vitepress serve docs",
+    "build": "vitepress build docs && cp -r ./docs/assets/* ./docs/.vitepress/dist/assets/",
     "build:package": "vite build",
     "build:types": "vue-tsc --declaration --emitDeclarationOnly",
     "build:production": "npm run build:types && npm run build:package",
@@ -62,7 +61,6 @@
     "vue-tsc": "^0.30.0"
   },
   "dependencies": {
-    "@vueuse/core": "^8.9.1",
-    "http-server": "^14.1.1"
+    "@vueuse/core": "^8.9.1"
   }
 }