Merge pull request #16 from Applelo/docs

Version 0.6.5

.eslintignore

@@ -0,0 +1 @@
+docs/.vitepress/cache

.gitignore

@@ -49,3 +49,5 @@ coverage
 Network Trash Folder
 Temporary Items
 .apdisk
+
+docs/.vitepress/cache

README.md

@@ -1,7 +1,12 @@
+<a href="https://npmjs.com/package/compotes"><img src="https://img.shields.io/npm/v/compotes.svg" alt="npm package"></a>
+<a href="https://github.com/Applelo/compotes/actions/workflows/ci.yml"><img src="https://github.com/Applelo/compotes/actions/workflows/ci.yml/badge.svg?branch=main" alt="build status"></a>
+
 # Compotes
 
 > A components library focused on customization/accessibility
 
+To learn more, check the *[documentation](https://compotes.dev)*.
+
 ## ✨ Features
 
 - 👨‍🎨 Minimal CSS to do your customization
@@ -10,12 +15,12 @@
 
 ## 🍏 Compotes
 
-- Drilldown
-- Collapse/Accordion
+- Drilldown ([demo](https://compotes.dev/demo/collapse.html))
+- Collapse/Accordion ([demo](https://compotes.dev/demo/drilldown.html))
 <!--
 - Tabs
 - Pagination
-- Dropdown
+- Drag
 -->
 
 And more to come!
@@ -67,80 +72,8 @@ pnpm add -D @compotes/nuxt
 
 <br></details>-->
 
-> A proper documentation and Vue 3/Nuxt 3 packages will arrive soon stay tuned!
-
-# Usage
-
-## Drilldown
-
-```ts
-import 'compotes/css/drilldown.css' // loaded by vitejs
-import { Drilldown } from 'compotes'
-
-const drilldown = new Drilldown('.c-drilldown', {
-  dynamicHeight: true,
-})
-```
-
-```html
-<nav class="c-drilldown" aria-label="Drilldown Example">
-  <ul class="c-drilldown-menu">
-    <li>
-      <button class="c-drilldown-next">
-        Go to section 1
-      </button>
-      <ul class="c-drilldown-menu" id="test">
-        <li>
-          <button class="c-drilldown-back">
-            Go Back
-          </button>
-        </li>
-        <li>
-          <button class="c-drilldown-next">
-            Go to section 1 1
-          </button>
-          <ul class="c-drilldown-menu">
-            <li>
-              <button class="c-drilldown-back">
-                Go Back
-              </button>
-            </li>
-            <li>
-              Item Section 1 1
-            </li>
-            <li>
-              Item Section 1 1
-            </li>
-          </ul>
-        </li>
-        <li>
-          Item Section 1
-        </li>
-      </ul>
-    </li>
-  </ul>
-</nav>
-```
-
-## Collapse
-
-```ts
-import 'compotes/css/collapse.css' // loaded by vitejs
-import { Collapse } from 'compotes'
+> Vue 3/Nuxt 3 packages will arrive soon stay tuned!
 
-const drilldown = new Collapse('.c-collapse')
-```
-
-```html
-<button class="c-collapse-trigger" aria-expanded="false" aria-controls="collapse-id">
-  Trigger collapse
-</button>
-<div class="c-collapse" id="collapse-id">
-  <p style="width: 200px;">
-    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia facere possimus impedit facilis culpa illo earum deserunt consequuntur minus. Ad et qui labore reprehenderit magnam exercitationem placeat magni nesciunt suscipit.
-  </p>
-</div>
-```
 
 ## 🙋‍♂️ Why ?
 

docs/.vitepress/config.ts

@@ -0,0 +1,49 @@
+import { defineConfig } from 'vitepress'
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: 'Compotes',
+  description: 'Components library focused on accessibility/customization',
+  themeConfig: {
+    footer: {
+      message: 'Released under the MIT License.',
+    },
+    // https://vitepress.dev/reference/default-theme-config
+    nav: [
+      { text: 'Home', link: '/' },
+      { text: 'Guide', link: '/guide/' },
+      { text: 'Demo', link: '/demo/collapse' },
+    ],
+    search: {
+      provider: 'local',
+    },
+    sidebar: [
+      {
+        text: 'Guide',
+        items: [
+          { text: 'Get started', link: '/guide/' },
+          {
+            text: 'Collapse / Accordion',
+            link: '/guide/collapse',
+          },
+          {
+            text: 'Drilldown',
+            link: '/guide/drilldown',
+          },
+        ],
+      },
+      {
+        text: 'Demo',
+        collapsed: true,
+        items: [
+          { text: 'Collapse/Accordion', link: '/demo/collapse' },
+          { text: 'Drilldown', link: '/demo/drilldown' },
+        ],
+      },
+    ],
+
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/Applelo/compotes' },
+    ],
+  },
+})

docs/.vitepress/theme/index.ts

@@ -0,0 +1,16 @@
+// https://vitepress.dev/guide/custom-theme
+import { h } from 'vue'
+import Theme from 'vitepress/theme'
+import './style.css'
+
+export default {
+  ...Theme,
+  Layout: () => {
+    return h(Theme.Layout, null, {
+      // https://vitepress.dev/guide/extending-default-theme#layout-slots
+    })
+  },
+  // enhanceApp({ app, router, siteData }) {
+  //   // ...
+  // },
+}

docs/.vitepress/theme/style.css

@@ -0,0 +1,91 @@
+/**
+ * Customize default theme styling by overriding CSS variables:
+ * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+ */
+
+/**
+ * Colors
+ * -------------------------------------------------------------------------- */
+
+ :root {
+  --vp-c-brand: #FBAB7E;
+  --vp-c-brand-light: #F7CE68;
+  --vp-c-brand-lighter: #9499ff;
+  --vp-c-brand-lightest: #bcc0ff;
+  --vp-c-brand-dark: #535bf2;
+  --vp-c-brand-darker: #454ce1;
+  --vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-button-brand-border: var(--vp-c-brand-light);
+  --vp-button-brand-text: var(--vp-c-white);
+  --vp-button-brand-bg: var(--vp-c-brand);
+  --vp-button-brand-hover-border: var(--vp-c-brand-light);
+  --vp-button-brand-hover-text: var(--vp-c-white);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-light);
+  --vp-button-brand-active-border: var(--vp-c-brand-light);
+  --vp-button-brand-active-text: var(--vp-c-white);
+  --vp-button-brand-active-bg: var(--vp-button-brand-bg);
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(
+    60deg,
+    var(--vp-c-brand) 33%,
+    var(--vp-c-brand-light)
+  );
+
+  --vp-home-hero-image-background-image: linear-gradient(
+    -45deg,
+    #bd34fe 50%,
+    #47caff 50%
+  );
+  --vp-home-hero-image-filter: blur(40px);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(72px);
+  }
+}
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-custom-block-tip-border: var(--vp-c-brand);
+  --vp-custom-block-tip-text: var(--vp-c-brand-darker);
+  --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
+}
+
+.dark {
+  --vp-custom-block-tip-border: var(--vp-c-brand);
+  --vp-custom-block-tip-text: var(--vp-c-brand-lightest);
+  --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
+}
+
+/**
+ * Component: Algolia
+ * -------------------------------------------------------------------------- */
+
+.DocSearch {
+  --docsearch-primary-color: var(--vp-c-brand) !important;
+}
+

docs/demo/collapse.md

@@ -0,0 +1,45 @@
+---
+prev: false
+---
+
+# Collapse Demo
+
+<script setup>
+  import './../../packages/core/dist/css/collapse.css'
+  import { Collapse } from './../../packages/core'
+  import { onMounted } from 'vue'
+
+  onMounted(() => {
+
+    const collapses = document.querySelectorAll('.c-collapse')
+    collapses.forEach((el) => {
+      const collapse = new Collapse(el)
+      collapse.init()
+    })
+  })
+</script>
+<style>
+  .c-collapse-trigger {
+    color: var(--vp-c-brand);
+  }
+</style>
+<div style="margin-top: 2rem;">
+  <button class="c-collapse-trigger" aria-controls="accordion-1">
+    Accordion 1
+  </button>
+  <div class="c-collapse c-collapse--show" id="accordion-1" style="transition: height .2s;">
+    <p>
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia facere possimus impedit facilis culpa illo earum deserunt consequuntur minus. Ad et qui labore reprehenderit magnam exercitationem placeat magni nesciunt suscipit.
+    </p>
+  </div>
+</div>
+<div style="margin-top: 1rem;">
+  <button class="c-collapse-trigger" aria-controls="accordion-2">
+    Accordion 2
+  </button>
+  <div class="c-collapse" id="accordion-2" style="transition: height .2s;">
+    <p>
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia facere possimus impedit facilis culpa illo earum deserunt consequuntur minus. Ad et qui labore reprehenderit magnam exercitationem placeat magni nesciunt suscipit.
+    </p>
+  </div>
+</div>