improve new website

local/rollup/package.json

@@ -21,8 +21,7 @@
     "rollup-plugin-serve": "^1.1.0",
     "rollup-plugin-styles": "^4.0.0",
     "@rollup/plugin-virtual": "^3.0.1",
-    "rollup-plugin-typescript2": "^0.32.1",
+    "rollup-plugin-typescript2": "^0.32.1"
-    "sass": "^1.54.0"
   },
   "exports": {
     ".": "./src/createRollupConfig.js",

package.json

@@ -1,8 +1,7 @@
 {
   "private": true,
   "workspaces": [
-    "packages/*",
+    "packages/*"
-    "website"
   ],
   "devDependencies": {
     "@~local/browser-testing": "file:./local/browser-testing",
@@ -54,6 +53,7 @@
     "prettier": "^2.6.2",
     "rollup": "^2.75.5",
     "rollup-plugin-esbuild-resolve": "^1.0.0",
+    "sass": "^1.56.1",
     "should": "^13.2.3",
     "tslib": "^2.4.0",
     "typescript": "^4.7.4",

website/esbuild.mjs

@@ -15,6 +15,7 @@ await esbuild({
     '.aac': 'copy',
     '.avif': 'copy',
     '.css': 'copy',
+    '.scss': 'copy',
     '.eot': 'copy',
     '.flac': 'copy',
     '.gif': 'copy',

website/package.json

@@ -11,6 +11,7 @@
     "@next/mdx": "^12.3.1",
     "classnames": "^2.3.2",
     "next": "12.3.1",
+    "overlayscrollbars": "file:./../packages/overlayscrollbars/dist",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },

website/src/components/index.mdx

@@ -17,10 +17,27 @@ I created this plugin because I hate ugly and space consuming scrollbars. Simila
  - Highly customizable
  - TypeScript support - fully written in TypeScript
  - Dependency free - 100% self written to ensure small size and best functionality
+ - High quality and fully typed Framework versions for `react`, `vue` and `angular`
+
+## Choose your framework
+
+Additionally to the vanilla JavaScript version you can use the official framework components & utilities:
+
+<div className="flex not-prose">
+  <a href="https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-react">
+    <img src="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-react/logo.svg" width="80" height="80" alt="React" className="h-[80px] mx-1" />
+  </a>
+  <a href="https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-vue">
+    <img src="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-vue/logo.svg" width="80" height="80" alt="Vue" className="h-[80px] mx-1" />
+  </a>
+  <a href="https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-ngx">
+    <img src="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-ngx/logo.svg" width="80" height="80" alt="Angular" className="h-[80px] mx-1" />
+  </a>
+</div>
 
 ## Getting started
 
-### npm & Node
+### npm & node
 OverlayScrollbars can be downloaded from [npm](https://www.npmjs.com/package/overlayscrollbars) or the package manager of your choice:
 ```sh
 npm install overlayscrollbars
@@ -31,6 +48,8 @@ import 'overlayscrollbars/overlayscrollbars.css';
 import { OverlayScrollbars } from 'overlayscrollbars';
 ```
 
+> __Note__: In older node versions use `'overlayscrollbars/styles/overlayscrollbars.css'` as the import path for the CSS file.
+
 ### Manual download & embedding
 
 <details>
@@ -362,30 +381,40 @@ Is invoked after the instace was updated.
 
 Is invoked after all generated elements, observers and events were removed from the DOM.
 
+### `scroll`
+
+| arguments  | description |
+| :--- | :--- |
+| `instance` | The instance which invoked the event. |
+| `event` | The original `event` argument of the DOM event. |
+
+Is invoked by scrolling the viewport.
+
 </details>
 
-## Instance Methods
+## Instance
 
 > __Note__: For now please refer to the <b>TypeScript definitions</b> for a more detailed description.
 
 ```ts
 interface OverlayScrollbars {
   options(): Options;
-  options(newOptions: DeepPartial<Options>): Options;
+  options(newOptions: PartialOptions, pure?: boolean): Options;
 
-  update(force?: boolean): OverlayScrollbars;
+  on(eventListeners: EventListeners, pure?: boolean): () => void;
+  on<N extends keyof EventListenerArgs>(name: N, listener: EventListener<N>): () => void;
+  on<N extends keyof EventListenerArgs>(name: N, listener: EventListener<N>[]): () => void;
 
-  destroy(): void;
+  off<N extends keyof EventListenerArgs>(name: N, listener: EventListener<N>): void;
+  off<N extends keyof EventListenerArgs>(name: N, listener: EventListener<N>[]): void;
+
+  update(force?: boolean): boolean;
 
   state(): State;
 
   elements(): Elements;
 
-  on<N extends keyof EventListenerMap>(name: N, listener: EventListener<N>): () => void;
+  destroy(): void;
-  on<N extends keyof EventListenerMap>(name: N, listener: EventListener<N>[]): () => void;
-
-  off<N extends keyof EventListenerMap>(name: N, listener: EventListener<N>): void;
-  off<N extends keyof EventListenerMap>(name: N, listener: EventListener<N>[]): void;
 }
 ```
 
@@ -396,14 +425,12 @@ interface OverlayScrollbars {
 ```ts
 interface OverlayScrollbarsStatic {
   (target: InitializationTarget): OverlayScrollbars | undefined;
-  (
+  (target: InitializationTarget, options: PartialOptions, eventListeners?: EventListeners): OverlayScrollbars;
-    target: InitializationTarget,
-    options: DeepPartial<Options>,
-    eventListeners?: InitialEventListeners
-  ): OverlayScrollbars;
 
   plugin(plugin: Plugin | Plugin[]): void;
-  valid(osInstance: any): boolean;
+
+  valid(osInstance: any): osInstance is OverlayScrollbars;
+
   env(): Environment;
 }
 ```

website/tailwind.config.js

@@ -2,5 +2,5 @@
 module.exports = {
   // eslint-disable-next-line global-require
   presets: [require('@~local/tailwind')],
-  content: ['**/*.{js,ts,jsx,tsx}'],
+  content: ['**/*.{js,ts,jsx,tsx,mdx}'],
 };