diff --git a/.eslintignore b/.eslintignore
deleted file mode 100644
index 22a7397..0000000
--- a/.eslintignore
+++ /dev/null
@@ -1 +0,0 @@
-docs/.vitepress/cache
\ No newline at end of file
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 89be2ed..a20dddd 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -18,7 +18,7 @@ jobs:
- uses: pnpm/action-setup@v2
with:
- version: 8
+ version: 9
- name: Use Node.js 20
uses: actions/setup-node@v3
@@ -82,7 +82,7 @@ jobs:
- uses: pnpm/action-setup@v2
with:
- version: 8
+ version: 9
- name: Set node version to 20
uses: actions/setup-node@v3
diff --git a/README.md b/README.md
index be3c56d..fa2c5d8 100644
--- a/README.md
+++ b/README.md
@@ -43,7 +43,7 @@ pnpm add -D compotes
-
-
-> Vue 3/Nuxt 3 packages will arrive soon stay tuned!
+
-->
## 🙋♂️ Why ?
diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index f938711..3e582d1 100644
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@@ -12,51 +12,67 @@ export default defineConfig({
nav: [
{ text: 'Home', link: '/' },
{ text: 'Guide', link: '/guide/' },
- { text: 'Demo', link: '/demo/collapse' },
+ { text: 'Demo', link: '/demo/' },
],
search: {
provider: 'local',
},
- sidebar: [
- {
- text: 'Guide',
- items: [
- { text: 'Get started', link: '/guide/' },
- {
- text: 'Collapse / Accordion',
- link: '/guide/collapse',
- },
- {
- text: 'Drag',
- link: '/guide/drag',
- },
- {
- text: 'Drilldown',
- link: '/guide/drilldown',
- },
- {
- text: 'Dropdown',
- link: '/guide/dropdown',
- },
- {
- text: 'Marquee',
- link: '/guide/marquee',
- },
- ],
- },
- {
- text: 'Demo',
- collapsed: true,
- items: [
- { text: 'Collapse/Accordion', link: '/demo/collapse' },
- { text: 'Drag', link: '/demo/drag' },
- { text: 'Drilldown', link: '/demo/drilldown' },
- { text: 'Dropdown', link: '/demo/dropdown' },
- { text: 'Marquee', link: '/demo/marquee' },
- ],
- },
- ],
-
+ sidebar: {
+ '/guide/': [
+ {
+ text: 'Guide',
+ items: [
+ { text: 'Get started', link: '/guide/' },
+ {
+ text: 'Collapse / Accordion',
+ link: '/guide/collapse',
+ },
+ {
+ text: 'Drag',
+ link: '/guide/drag',
+ },
+ {
+ text: 'Drilldown',
+ link: '/guide/drilldown',
+ },
+ {
+ text: 'Dropdown',
+ link: '/guide/dropdown',
+ },
+ {
+ text: 'Marquee',
+ link: '/guide/marquee',
+ },
+ ],
+ },
+ {
+ text: 'Vue',
+ items: [
+ {
+ text: 'Get started',
+ link: '/guide/vue/',
+ },
+ {
+ text: 'Composables',
+ link: '/guide/vue/composables',
+ },
+ ],
+ },
+ ],
+ '/demo/': [
+ {
+ text: 'Demo',
+ link: '/demo/',
+ items: [
+ { text: 'Collapse/Accordion', link: '/demo/collapse' },
+ { text: 'Drag', link: '/demo/drag' },
+ { text: 'Drilldown', link: '/demo/drilldown' },
+ { text: 'Dropdown', link: '/demo/dropdown' },
+ { text: 'Marquee', link: '/demo/marquee' },
+ ],
+ },
+ ],
+ },
socialLinks: [
{ icon: 'github', link: 'https://github.com/Applelo/compotes' },
],
diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
index 6b27723..61e2296 100644
--- a/docs/.vitepress/theme/style.css
+++ b/docs/.vitepress/theme/style.css
@@ -15,6 +15,7 @@
--vp-c-brand-dark: #535bf2;
--vp-c-brand-darker: #454ce1;
--vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
+ --vp-c-brand-1: var(--vp-c-brand);
}
/**
diff --git a/docs/demo/index.md b/docs/demo/index.md
new file mode 100644
index 0000000..6c428f7
--- /dev/null
+++ b/docs/demo/index.md
@@ -0,0 +1,7 @@
+# Demo
+
+Compotes provides minimum styles, so some CSS is added to make it work with the CSS provided by the documentation (VitePress).
+
+Demo are made with the Vanilla JS version of the library and encapsulated with VueJS.
+
+You can check directly [the source code of the documentation](https://github.com/Applelo/compotes/tree/main/docs/demo) for more details.
diff --git a/docs/guide/index.md b/docs/guide/index.md
index 486878e..515dda5 100644
--- a/docs/guide/index.md
+++ b/docs/guide/index.md
@@ -12,6 +12,9 @@
# pnpm
pnpm add -D compotes
+# bun
+bun add -D compotes
+
#npm
npm i -D compotes
diff --git a/docs/guide/marquee.md b/docs/guide/marquee.md
index 95a095f..f2b6d2e 100644
--- a/docs/guide/marquee.md
+++ b/docs/guide/marquee.md
@@ -15,7 +15,6 @@ const marquee = new Marquee('.c-marquee')
The structure consists to a list of element. All animation are CSS based.
```html
-