Demo on StackBlitz. 🧹 Clean tsconfig`s, eslint config. Move command…

…s to root `package.json`. Update `vitepress` for latest version.

.eslintrc.cjs

@@ -1,6 +1,3 @@
-/* eslint-env node */
-require('@rushstack/eslint-patch/modern-module-resolution')
-
 module.exports = {
   root: true,
   extends: [

.github/workflows/docs.yml

@@ -25,10 +25,10 @@ jobs:
       - run: pnpm install
 
       - name: Build lib
-        run: pnpm --filter "vuecomotive-scroll" lib:build
+        run: pnpm lib:build
 
-      - name: Build docs & upload
-        run: pnpm --filter "@vuecomotive-scroll/docs" docs:build
+      - name: Build docs
+        run: pnpm docs:build
 
       - uses: actions/upload-pages-artifact@v2
         with:

.github/workflows/publish.yml

@@ -20,9 +20,9 @@ jobs:
       - run: pnpm install
 
       - name: Build lib
-        run: pnpm --filter "vuecomotive-scroll" lib:build
+        run: pnpm lib:build
 
-      - name: Pack distribution package
+      - name: Create package distribution
         id: pack
         working-directory: lib
         run: |
@@ -48,7 +48,7 @@ jobs:
         with:
           name: package-dist
 
-      - name: Publish package distributions to NPM
+      - name: Publish package distribution to NPM
         uses: JS-DevTools/npm-publish@v3
         with:
           token: ${{ secrets.NODE_AUTH_TOKEN }}

.gitignore

@@ -23,3 +23,4 @@ cache
 *.njsproj
 *.sln
 *.sw?
+*.tgz

README.md

@@ -20,6 +20,8 @@ to developer and make it easier to integrate it into a `Vue` app.
 
 [Documentation 📖](https://vuecomotive.somespecial.one)
 
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/somespecialone/vuecomotive-scroll/tree/master/demo/?file=src%2FApp.vue)
+
 ---
 
 ⚠️ The project is unstable and depends

demo/package.json

@@ -2,16 +2,17 @@
   "name": "@vuecomotive-scroll/demo",
   "private": true,
   "scripts": {
-    "demo:dev": "vite",
-    "demo:build": "run-p type-check build-only",
-    "demo:preview": "vite preview",
-    "demo:build-only": "vite build",
-    "demo:type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
   },
   "dependencies": {
-    "vuecomotive-scroll": "workspace:*"
+    "vue": "^3.3.4",
+    "vuecomotive-scroll": "latest"
   },
   "devDependencies": {
-    "sass": "^1.63.4"
+    "@types/node": "^18.16.17",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "vite": "^4.3.9"
   }
 }

demo/src/App.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+// TODO make some more feature presentable and clean this
+
 import { onMounted, ref, watch } from 'vue'
 
 import { useScroll, ScrollView, ScrollComponent } from 'vuecomotive-scroll'
@@ -52,7 +54,7 @@ function handleInsersect(d) {}
   </ScrollView>
 </template>
 
-<style lang="scss">
+<style>
 body {
   padding: 0;
   box-sizing: border-box;
@@ -80,10 +82,10 @@ header {
 .zero1 {
   height: 25vh;
   background-color: lightpink;
+}
 
-  &.flag {
-    display: none;
-  }
+.zero1.flag {
+  display: none;
 }
 
 .first {
@@ -94,10 +96,10 @@ header {
 .second {
   height: 15vh;
   background-color: cadetblue;
+}
 
-  &[data-flag='true'] {
-    background-color: red;
-  }
+.second[data-flag='true'] {
+  background-color: red;
 }
 
 .third {

demo/tsconfig.json

@@ -1,11 +1,12 @@
 {
-  "files": [],
-  "references": [
-    {
-      "path": "./tsconfig.node.json"
-    },
-    {
-      "path": "./tsconfig.app.json"
+  "include": ["vite.config.*", "src/**/*", "src/**/*.vue"],
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
     }
-  ]
+  }
 }

docs/.vitepress/config.ts

@@ -15,6 +15,10 @@ export default defineConfig({
     nav: [
       { text: 'Guide', link: '/guide/getting-started' },
       { text: 'Core', link: '/core/scroll' },
+      {
+        text: 'Playground',
+        link: 'https://stackblitz.com/github/somespecialone/vuecomotive-scroll/tree/master/demo/?file=src%2FApp.vue'
+      },
       { text: pkg.version, link: 'https://github.com/somespecialone/vuecomotive-scroll/releases/tag/v' + pkg.version },
       { text: 'Support Ukraine', link: 'https://war.ukraine.ua/support-ukraine/' }
     ],
@@ -41,5 +45,6 @@ export default defineConfig({
       pattern: 'https://github.com/somespecialone/vuecomotive-scroll/edit/master/docs/:path',
       text: 'Edit this page on GitHub'
     }
-  }
+  },
+  markdown: { theme: 'material-theme' }
 })

docs/.vitepress/theme/components/DocButton.vue

@@ -17,8 +17,8 @@
   transition: border-color 0.25s, color 0.25s;
 
   &:hover {
-    color: var(--vp-c-brand);
-    border-color: var(--vp-c-text-1);
+    color: var(--vp-c-text-1);
+    border-color: var(--vp-c-brand-1);
   }
 }
 </style>

docs/.vitepress/theme/components/ScrollLayout.vue

@@ -142,7 +142,7 @@ provide('duration', duration)
       background-color: transparent !important;
     }
 
-    .VPNavBar.fill {
+    .VPNavBar {
       background-color: transparent;
       border-bottom: none;
     }
@@ -160,8 +160,8 @@ provide('duration', duration)
         .name .clip {
           background: linear-gradient(
             120deg,
-            var(--vp-c-brand) calc(((1 - var(--wrapper-progress)) * -200%) + 20%),
-            var(--vp-c-green-light)
+            var(--vp-c-brand-1) calc(((1 - var(--wrapper-progress)) * -200%) + 20%),
+            var(--vp-c-green-1)
           );
           background-clip: text;
           -webkit-background-clip: text;

docs/.vitepress/theme/style.css

@@ -8,40 +8,17 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-    --vp-c-brand: #ff7575;
-    --vp-c-brand-light: #ff8989;
-    --vp-c-brand-lighter: #9499ff;
-    --vp-c-brand-lightest: #bcc0ff;
-    --vp-c-brand-dark: var(--vp-c-brand-light);
-    --vp-c-brand-darker: #454ce1;
-    --vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
+    --vp-c-brand-1: #ff8989;
+    --vp-c-brand-2: #ff7575;
+    --vp-button-brand-bg: var(--vp-c-brand-2);
+    --vp-button-brand-active-bg: var(--vp-c-brand-1);
+    --vp-button-brand-hover-bg: var(--vp-c-brand-1);
+    --vp-code-color: #c9def1;
+    --vp-c-brand-light: var(--vp-c-brand-2);
     --vp-c-gutter: var(--vp-c-divider);
-    --vp-c-bg-alpha: rgba(255, 255, 255, 0.4);
-
-    --vp-code-tab-divider: var(--vp-button-brand-text);
-}
-
-.dark {
-    --vp-c-bg-alpha: rgba(30, 30, 32, 0.4);
 }
 
 
-/**
- * Component: Button
- * -------------------------------------------------------------------------- */
-
-:root {
-    --vp-button-brand-border: var(--vp-c-brand-light);
-    --vp-button-brand-text: var(--vp-c-text-light-1);
-    --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-button-brand-text);
-    --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-button-brand-text);
-    --vp-button-brand-active-bg: var(--vp-button-brand-bg);
-}
-
 /**
  * Component: Home
  * -------------------------------------------------------------------------- */
@@ -50,9 +27,9 @@
     --vp-home-hero-name-color: transparent;
     --vp-home-hero-image-background-image: linear-gradient(
             110deg,
-            var(--vp-c-green-light) 13%,
-            var(--vp-c-brand),
-            var(--vp-c-green-light) 87%
+            var(--vp-c-green-1) 13%,
+            var(--vp-c-brand-1),
+            var(--vp-c-green-1) 87%
     );
     --vp-home-hero-image-filter: blur(40px);
 }
@@ -73,25 +50,10 @@
  * Component: Custom Block
  * -------------------------------------------------------------------------- */
 
-:root {
-    --vp-custom-block-tip-border: var(--vp-c-brand-lighter);
-    --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-lighter);
-    --vp-custom-block-tip-text: var(--vp-c-brand-lightest);
-    --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
+.custom-block.tip a, .custom-block.tip code {
+    color: var(--vp-code-color);
 }
 
-/**
- * Component: Algolia
- * -------------------------------------------------------------------------- */
-
-.DocSearch {
-    --docsearch-primary-color: var(--vp-c-brand) !important;
-}
 
 /* custom */
 
@@ -106,7 +68,7 @@
     background-clip: text;
     -webkit-background-clip: text;
 
-    color: var(--vp-c-brand) !important;
+    color: var(--vp-c-brand-1) !important;
 }
 
 [href="https://war.ukraine.ua/support-ukraine/"]:hover {
@@ -127,7 +89,7 @@
         .Layout .VPNavBar .content-body {
             -webkit-backdrop-filter: saturate(50%) blur(8px);
             backdrop-filter: saturate(50%) blur(8px);
-            background: var(--vp-c-bg-alpha) !important;
+            background: none !important;
         }
     }
 

docs/core/scroll-component.md

@@ -32,7 +32,6 @@ and `intersect` event handler will
 take [IIntersectEventPayload](https://github.com/somespecialone/vuecomotive-scroll/blob/master/lib/src/types.ts)
 
 ```vue {2,4-6,8-10,14,15}
-
 <script setup lang="ts">
 import type { IProgressEventPayload, IIntersectEventPayload } from "vuecomotive-scroll";
 
@@ -60,7 +59,6 @@ function handleIntersect({ target, way, from }: IIntersectEventPayload) {
 Pass only `inView` to slot via `v-slot`.
 
 ```vue {6-8,13}
-
 <script setup lang="ts">
 import { onMounted } from "vue"
 

docs/core/scroll-view.md

@@ -29,7 +29,6 @@ Emit `lenis-scroll` event. Single argument passed to handler
 is [Lenis](https://github.com/studio-freight/lenis/blob/main/dist/types/index.d.ts).
 
 ```vue {2,4-6,10}
-
 <script setup lang="ts">
 import type Lenis from '@studio-freight/lenis';
 
@@ -50,7 +49,6 @@ function onLenisScroll(lenis: Lenis) {
 If you need ref to wrapper or/and content elements you can find it on `Lenis` instance after scroll is ready.
 
 ```vue {10-14}
-
 <script setup lang="ts">
 import { watch } from "vue";
 

docs/core/use-scroll.md

@@ -7,7 +7,6 @@ scroll: true
 For use inside `setup` of components only.
 
  ```vue
-
 <script setup lang="ts">
 import { useScroll } from "vuecomotive-scroll"