[docs] add integration guides

unoforge · Mar 16, 2024 · be1233f · be1233f
1 parent 83ce636
commit be1233f
Show file tree

Hide file tree

Showing 14 changed files with 288 additions and 75 deletions.
diff --git a/docs/src/content/docs/components/accordion.mdx b/docs/src/content/docs/components/accordion.mdx
@@ -9,8 +9,8 @@ To get started, install Accordion package, else you can skip this step if you've
 
 <TabCodeGroup
   values={[
-    { text: "npm", value: "npm-tab", icon: "/icons/npm.svg"},
-    { text: "yarn", value: "yarn-tab", icon: "/icons/yarn.svg"},
+    { text: "npm", value: "npm-tab", icon: "npm"},
+    { text: "yarn", value: "yarn-tab", icon: "yarn"},
   ]}
   autoHeight
   showCopyBlock

diff --git a/docs/src/content/docs/components/collapse.mdx b/docs/src/content/docs/components/collapse.mdx
@@ -9,8 +9,8 @@ To get started, install `@flexilla/collapse` package, else you can skip this ste
 
 <TabCodeGroup
   values={[
-    { text: "npm", value: "npm-tab", icon: "/icons/npm.svg"},
-    { text: "yarn", value: "yarn-tab", icon: "/icons/yarn.svg"},
+    { text: "npm", value: "npm-tab", icon: "npm"},
+    { text: "yarn", value: "yarn-tab", icon: "yarn"},
   ]}
   autoHeight
   showCopyBlock

diff --git a/docs/src/content/docs/components/dismissible.mdx b/docs/src/content/docs/components/dismissible.mdx
@@ -9,8 +9,8 @@ To get started, install `@flexilla/collapse` package, else you can skip this ste
 
 <TabCodeGroup
   values={[
-    { text: "npm", value: "npm-tab", icon: "/icons/npm.svg"},
-    { text: "yarn", value: "yarn-tab", icon: "/icons/yarn.svg"},
+    { text: "npm", value: "npm-tab", icon: "npm"},
+    { text: "yarn", value: "yarn-tab", icon: "yarn"},
   ]}
   autoHeight
   showCopyBlock

diff --git a/docs/src/content/docs/framework-guide/astro-guide.mdx b/docs/src/content/docs/framework-guide/astro-guide.mdx
@@ -1,8 +1,91 @@
 ---
-title: Installation
+title: AstroJS Guide
 description: This guide will show How to install Flexilla In your AstroJS Project
 ---
 
-## Quick setup
 
-This guide will help you get started with Flexilla
+This guide will help you to use Flexilla in your new or existing AstroJs Project
+
+## Install via npm
+
+<Stepper>
+<Step>
+### Create a new Project
+Create a new project if not having one.
+<BoxCodeLang text={"Shell"} icon={"shell"}>
+```bash
+npm create astro@latest astro-example
+cd astro-example
+```
+</BoxCodeLang>
+</Step>
+<Step>
+### Install flexilla
+<TabCodeGroup
+  values={[
+    { text: "npm", value: "npm-tab", icon: "npm"},
+    { text: "yarn", value: "yarn-tab", icon: "yarn"},
+  ]}
+  autoHeight
+  showCopyBlock
+>
+  <TabPanel value="npm-tab" active={true}>
+```bash 
+npm i @flexilla/flexilla
+```
+  </TabPanel>
+  <TabPanel value="yarn-tab">
+```bash 
+yarn add @flexilla/flexilla
+```
+  </TabPanel>
+</TabCodeGroup>
+</Step>
+<Step>
+### Usage
+<BoxCodeLang text={"script"} icon={"js"}>
+```js
+import {Accordion, Tabs} from "@flexilla/flexilla"
+
+const accordion = new Accordion("#my-accordion")
+
+const tabs = new  Tabs("#my-tabs",{ 
+    // options
+})
+```
+</BoxCodeLang>
+</Step>
+</Stepper>
+
+
+## Using CDN
+
+<Stepper>
+<Step>
+### Import the library via CDN
+<BoxCodeLang text={".../SomeComponent.astro"} icon={"astro"}>
+```html
+<script type="module"> // [!code ++]
+  import * as Flexilla from 'https://esm.run/@flexilla/flexilla'; // [!code ++]
+</script> // [!code ++]
+```
+</BoxCodeLang>
+</Step>
+<Step>
+### Usage
+<BoxCodeLang text={".../SomeComponent.astro"} icon={"astro"}>
+```html
+<script type="module">
+  new Flexilla.Tabs("[data-tabs-el]") // [!code ++]
+  Flexilla.Accordion.AutoInit(".accordion-el") // [!code ++]
+</script>
+```
+</BoxCodeLang>
+</Step>
+</Stepper>
+
+
+
+## Quick Start Examples
+
+Checkout these quick start examples to get a feel of Flexilla + Astro [here](https://github.com/unify-ui-dev/flexilla/tree/main/examples/astro-example)
diff --git a/docs/src/content/docs/framework-guide/index.mdx b/docs/src/content/docs/framework-guide/index.mdx
@@ -11,23 +11,23 @@ Here's the list of Supported Framework and how to get Started
 
 <CardTechBox>
     <CardTech href="/docs/astro-guide" icon="astro">
-## AstroJS
+### AstroJS
 Follow this Guide for Astro framework integration
     </CardTech>
-    <CardTech href="/docs/vite-guide" icon="/icons/vite.svg">
-## laravel
+    <CardTech href="/docs/vite-guide" icon="vite">
+### laravel
 Follow this Guide for Vite tool
     </CardTech>
-    <CardTech href="/docs/laravel-guide" icon="/icons/laravel.svg">
-## laravel
+    <CardTech href="/docs/laravel-guide" icon="laravel">
+### laravel
 Follow this Guide for Laravel framework
     </CardTech>
     <CardTech href="/docs/symfony-guide" icon="symfony">
-## Symfony
+### Symfony
 Follow this Guide for Symfony framework
     </CardTech>
-    <CardTech href="/docs/vue-guide" icon="/icons/vue.svg">
-## VueJS
+    <CardTech href="/docs/vue-guide" icon="vue">
+### VueJS
 Follow this Guide for VueJS framework
     </CardTech>
 </CardTechBox>
diff --git a/docs/src/content/docs/framework-guide/laravel-guide.mdx b/docs/src/content/docs/framework-guide/laravel-guide.mdx
@@ -1,5 +1,5 @@
 ---
-title: Installation
+title: Laravel Guide
 description: This guide will show How to install Flexilla In your Laravel Project
 ---
 

diff --git a/docs/src/content/docs/framework-guide/symfony-guide.mdx b/docs/src/content/docs/framework-guide/symfony-guide.mdx
@@ -1,5 +1,5 @@
 ---
-title: Installation
+title: Symfony Guide
 description: This guide will show How to install Flexilla In your Symfony Project
 ---
 

diff --git a/docs/src/content/docs/framework-guide/vite-guide.mdx b/docs/src/content/docs/framework-guide/vite-guide.mdx
@@ -1,8 +1,90 @@
 ---
-title: Installation
+title: Vite Guide
 description: This guide will show How to install Flexilla In your ViteJS Project
 ---
 
-## Quick setup
+This guide will help you to use Flexilla in your new or existing ViteJS Project
 
-This guide will help you get started with Flexilla
+## Install via npm
+
+<Stepper>
+<Step>
+### Create a new Project
+Create a new project if not having one.
+<BoxCodeLang text={"Shell"} icon={"shell"}>
+```bash
+npm create vite@latest vite-example -- --template vanilla-ts
+cd vite-example
+```
+</BoxCodeLang>
+</Step>
+<Step>
+### Install flexilla
+<TabCodeGroup
+  values={[
+    { text: "npm", value: "npm-tab", icon: "npm"},
+    { text: "yarn", value: "yarn-tab", icon: "yarn"},
+  ]}
+  autoHeight
+  showCopyBlock
+>
+  <TabPanel value="npm-tab" active={true}>
+```bash 
+npm i @flexilla/flexilla
+```
+  </TabPanel>
+  <TabPanel value="yarn-tab">
+```bash 
+yarn add @flexilla/flexilla
+```
+  </TabPanel>
+</TabCodeGroup>
+</Step>
+<Step>
+### Usage
+<BoxCodeLang text={"script"} icon={"js"}>
+```js
+import {Accordion, Tabs} from "@flexilla/flexilla"
+
+const accordion = new Accordion("#my-accordion")
+
+const tabs = new  Tabs("#my-tabs",{ 
+    // options
+})
+```
+</BoxCodeLang>
+</Step>
+</Stepper>
+
+
+## Using CDN
+
+<Stepper>
+<Step>
+### Import the library via CDN
+<BoxCodeLang text={"src/main.ts"} icon={"ts"}>
+```html
+<script type="module"> // [!code ++]
+  import * as Flexilla from 'https://esm.run/@flexilla/flexilla'; // [!code ++]
+</script> // [!code ++]
+```
+</BoxCodeLang>
+</Step>
+<Step>
+### Usage
+<BoxCodeLang text={"index.html"} icon={"html"}>
+```html
+<script type="module">
+  new Flexilla.Tabs("[data-tabs-el]") // [!code ++]
+  Flexilla.Accordion.AutoInit(".accordion-el") // [!code ++]
+</script>
+```
+</BoxCodeLang>
+</Step>
+</Stepper>
+
+
+
+## Quick Start Examples
+
+Checkout these quick start examples to get a feel of Flexilla + ViteJS [here](https://github.com/unify-ui-dev/flexilla/tree/main/examples/vite-example)
diff --git a/docs/src/content/docs/framework-guide/vue-guide.mdx b/docs/src/content/docs/framework-guide/vue-guide.mdx
@@ -1,8 +1,65 @@
 ---
-title: Installation
+title: Vue Guide
 description: This guide will show How to install Flexilla In your VueJS Project
 ---
 
-## Quick setup
 
-This guide will help you get started with Flexilla
+This guide will help you to use Flexilla in your new or existing VueJS Project
+
+## Install via npm
+
+<Stepper>
+<Step>
+### Create a new Project
+Create a new project if not having one.
+<BoxCodeLang text={"Shell"} icon={"shell"}>
+```bash
+npm create vue@latest vue-example
+cd vue-example
+```
+</BoxCodeLang>
+</Step>
+<Step>
+### Install flexilla
+<TabCodeGroup
+  values={[
+    { text: "npm", value: "npm-tab", icon: "npm"},
+    { text: "yarn", value: "yarn-tab", icon: "yarn"},
+  ]}
+  autoHeight
+  showCopyBlock
+>
+  <TabPanel value="npm-tab" active={true}>
+```bash 
+npm i @flexilla/flexilla
+```
+  </TabPanel>
+  <TabPanel value="yarn-tab">
+```bash 
+yarn add @flexilla/flexilla
+```
+  </TabPanel>
+</TabCodeGroup>
+</Step>
+<Step>
+### Usage
+<BoxCodeLang text={".../AccordionEx.vue"} icon={"vue"}>
+```html
+<script setup lang="ts">
+import { onMounted } from 'vue' // [!code ++]
+import { Accordion } from "@flexilla/flexilla" // [!code ++]
+onMounted(() => { // [!code ++]
+    new Accordion("[data-fx-accordion]") // [!code ++]
+}) // [!code ++]
+</script>
+```
+</BoxCodeLang>
+</Step>
+</Stepper>
+
+
+
+
+## Quick Start Examples
+
+Checkout these quick start examples to get a feel of Flexilla + VueJS [here](https://github.com/unify-ui-dev/flexilla/tree/main/examples/vue-example)
diff --git a/docs/src/content/docs/getting-started/index.mdx b/docs/src/content/docs/getting-started/index.mdx
@@ -7,17 +7,19 @@ description: The headless interactive component library.
 
 After completing the beta version of [UnifyUI Blocks](https://uno.unify-ui.dev/) and [Flexiwind Blocks](https://flexiwind.vercel.app/), We encountered a challenge when tasked with adding interactive components such as dropdowns, collapses, and tabs. 
 
-Given that Blocks has two UI kits (one for UnoCSS and the other for TailwindCSS), our initial approach involved writing scripts for each block, resulting in a less-than-ideal solution.
+Since UnifyUI and Flexiwind are different (one work with UnoCSS and the other with TailwindCSS), our initial approach involved writing scripts for each block, resulting in a less-than-ideal solution.
 
 Upon exploring how [Preline](https://preline.co/plugins/overview.html) handles interactions with its dedicated JS plugins, tailored exclusively for TailwindCSS, We realized the need for a solution that is CSS framework-agnostic.
 
 ## Solution
 
-Inspired by the Preline Plugin, Flowbite Plugin, and Bootstrap, [Scott Kasenda](https://github.com/Tresor-Kasenda) and [I (Johnkat MJ)](https://github.com/Johnkat-Mj) decided to create Flexilla. 
+Inspired by the Preline Plugin and Flowbite Plugin, [Scott Kasenda](https://github.com/Tresor-Kasenda) and [I (Johnkat MJ)](https://github.com/Johnkat-Mj) decided to create Flexilla. 
 
 It is a standalone library designed to manage interactions independently, breaking away from dependency on any specific CSS framework or library. 
 
-Flexilla provides the flexibility to seamlessly integrate with TailwindCSS, UnoCSS, or any other CSS technology. This not only simplifies interaction implementation but also allows the freedom to use Flexilla with different frameworks or even custom CSS. It stands as a versatile solution crafted to enhance components without being bound to a particular CSS environment.
+Flexilla provides the flexibility to seamlessly integrate with TailwindCSS, UnoCSS, or any other CSS technology.
+
+It stands as a versatile solution crafted to enhance components without being bound to a particular CSS environment.
 
 ## FAQ
 
@@ -33,9 +35,9 @@ Yes, all components are accessible.
 Absolutely, Flexilla is production-ready and is currently being used on this website.
     </FaqItem>
     <FaqItem>
-**Where Can I use it?**
+**When Can I use it?**
 
-When dealing with a project where you don't want to use a JS Framework but you need interactive component with accessibility in mind (Recommanded : AstroJS, PHP and PHP frameworks, Static Websites)
+When dealing with a project where you don't want to use a JS Framework but you need interactive component with accessibility in mind (Recommanded : AstroJS, PHP and PHP frameworks, Flask, Django, Ruby on Rails, Blazor, Static Websites)
     </FaqItem>
     <FaqItem>
 **Can I use it with ReactJS?**