improve v2 docs

2026-05-17 05:19:39 +03:00 · 2022-10-17 11:31:46 +02:00
parent b61bbe5f03
commit f3bcdfba85
20 changed files with 1976 additions and 112 deletions
@@ -7,7 +7,7 @@ const minify = processArgs.includes('-p');
 const define = {};

 await esbuild({
-  entryPoints: glob.sync('./src/**/*.{ts,tsx,js,jsx}'),
+  entryPoints: glob.sync('./src/**/*.{ts,tsx,js,jsx,md,mdx}'),
  outdir: './next-app/src',
  outbase: 'src',
  platform: 'node',
@@ -23,8 +23,8 @@ await esbuild({
    '.ico': 'copy',
    '.jpeg': 'copy',
    '.jpg': 'copy',
-    '.md': 'jsx',
-    '.mdx': 'jsx',
+    '.md': 'copy',
+    '.mdx': 'copy',
    '.mp3': 'copy',
    '.mp4': 'copy',
    '.ogg': 'copy',
@@ -1,31 +1,33 @@
-declare module '*.ico' {
-  const asset: string;
-  export default asset;
-}
 declare module '*.aac' {
  const asset: string;
  export default asset;
 }
-declare module '*.avif' {
-  const asset: string;
-  export default asset;
-}
+
 declare module '*.css' {
  const asset: string;
  export default asset;
 }
+
+declare module '*.scss' {
+  const asset: string;
+  export default asset;
+}
+
+declare module '*.sass' {
+  const asset: string;
+  export default asset;
+}
+
 declare module '*.eot' {
  const asset: string;
  export default asset;
 }
+
 declare module '*.flac' {
  const asset: string;
  export default asset;
 }
-declare module '*.gif' {
-  const asset: string;
-  export default asset;
-}
+
 declare module '*.gql' {
  const asset: string;
  export default asset;
@@ -34,22 +36,7 @@ declare module '*.graphql' {
  const asset: string;
  export default asset;
 }
-declare module '*.jpeg' {
-  const asset: string;
-  export default asset;
-}
-declare module '*.jpg' {
-  const asset: string;
-  export default asset;
-}
-declare module '*.md' {
-  import type { ComponentType as MdComponentType } from 'react';

-  export const attributes: any;
-  export const filename: string;
-  const Component: MdComponentType;
-  export default Component;
-}
 declare module '*.mdx' {
  import type { ComponentType as MdxComponentType } from 'react';

@@ -58,34 +45,32 @@ declare module '*.mdx' {
  const Component: MdxComponentType;
  export default Component;
 }
+
 declare module '*.mp3' {
  const asset: string;
  export default asset;
 }
+
 declare module '*.mp4' {
  const asset: string;
  export default asset;
 }
+
 declare module '*.ogg' {
  const asset: string;
  export default asset;
 }
+
 declare module '*.otf' {
  const asset: string;
  export default asset;
 }
-declare module '*.png' {
-  const asset: string;
-  export default asset;
-}
+
 declare module '*.sql' {
  const asset: string;
  export default asset;
 }
-declare module '*.svg' {
-  const asset: string;
-  export default asset;
-}
+
 declare module '*.ttf' {
  const asset: string;
  export default asset;
@@ -98,22 +83,22 @@ declare module '*.webm' {
  const asset: string;
  export default asset;
 }
-declare module '*.webp' {
-  const asset: string;
-  export default asset;
-}
+
 declare module '*.woff' {
  const asset: string;
  export default asset;
 }
+
 declare module '*.woff2' {
  const asset: string;
  export default asset;
 }
+
 declare module '*.webmanifest' {
  const asset: string;
  export default asset;
 }
+
 declare module '*.zip' {
  const asset: string;
  export default asset;
@@ -1,10 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-  swcMinify: true,
-  images: {
-    unoptimized: true,
-  },
-};
-
-module.exports = nextConfig;
@@ -0,0 +1,34 @@
+import mdx from '@next/mdx';
+import rehypePrettyCode from 'rehype-pretty-code';
+import rehypeSlug from 'rehype-slug';
+import remarkGfm from 'remark-gfm';
+
+/** @type {import('next').NextConfig} */
+const withMDX = mdx({
+  extension: /\.mdx?$/,
+  options: {
+    remarkPlugins: [remarkGfm],
+
+    rehypePlugins: [
+      rehypeSlug,
+      [
+        rehypePrettyCode,
+        {
+          theme: 'solarized-light',
+        },
+      ],
+    ],
+    providerImportSource: '@mdx-js/react',
+  },
+});
+
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+  images: {
+    unoptimized: true,
+  },
+  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
+};
+
+export default withMDX(nextConfig);
@@ -6,6 +6,10 @@
    "start": "node esbuild.mjs && cd next-app && next start"
  },
  "dependencies": {
+    "@mdx-js/loader": "^2.1.5",
+    "@mdx-js/react": "^2.1.5",
+    "@next/mdx": "^12.3.1",
+    "classnames": "^2.3.2",
    "next": "12.3.1",
    "react": "18.2.0",
    "react-dom": "18.2.0"
@@ -31,7 +35,11 @@
    "eslint-plugin-tailwindcss": "^3.6.2",
    "fast-glob": "^3.2.12",
    "prettier": "2.7.1",
+    "rehype-pretty-code": "^0.4.0",
+    "rehype-slug": "^5.0.1",
+    "remark-gfm": "^3.0.1",
    "sass": "^1.55.0",
+    "shiki": "^0.11.1",
    "tailwindcss": "^3.1.8",
    "typescript": "4.8.3",
    "wait-on": "^6.0.1"
@@ -1,3 +1,6 @@
+.default\:fill-current {
+  @apply fill-current;
+}
@tailwind base;
@tailwind components;
@tailwind utilities;
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="github" viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" /></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="60"><path d="M22.123 11.828C12.07 11.828 3.952 19.97 3.952 30c0 10.052 8.14 18.172 18.172 18.172 10.052 0 18.172-8.14 18.172-18.172s-8.14-18.172-18.172-18.172zm8.337 26.226c-.326.543-1.02.695-1.563.37-4.277-2.605-9.64-3.19-15.98-1.76-.608.13-1.216-.24-1.346-.847s.24-1.216.847-1.346c6.926-1.585 12.874-.912 17.65 2.02.543.326.716 1.02.39 1.563zm2.214-4.95c-.412.673-1.28.868-1.954.478-4.885-2.996-12.33-3.864-18.106-2.128-.76.217-1.54-.195-1.76-.934-.217-.76.195-1.54.955-1.76 6.6-1.997 14.806-1.042 20.43 2.4.65.39.847 1.26.434 1.932zm.195-5.167c-5.862-3.474-15.523-3.8-21.124-2.106-.9.282-1.845-.24-2.128-1.13s.24-1.845 1.13-2.128c6.426-1.954 17.108-1.563 23.838 2.432.803.478 1.064 1.52.586 2.323-.434.825-1.498 1.086-2.3.608z" fill="#1ed760"/><g transform="matrix(.21375 0 0 .21375 .138028 12.655604)" fill="#1ed760"><path d="M232.1 78.6c-14.5-3.4-17-5.9-17-11 0-4.8 4.5-8 11.2-8 6.5 0 13 2.5 19.8 7.5.2.2.5.2.7.2.3 0 .5-.2.6-.4l7.1-10a.95.95 0 0 0-.2-1.3c-8.1-6.5-17.2-9.6-27.8-9.6-15.6 0-26.5 9.4-26.5 22.8 0 14.4 9.4 19.5 25.7 23.4 13.8 3.2 16.2 5.9 16.2 10.6 0 5.3-4.7 8.6-12.3 8.6-8.4 0-15.3-2.8-23-9.5-.2-.2-.5-.2-.7-.2-.3 0-.5.1-.6.3l-7.9 9.4c-.3.4-.3 1 .1 1.3 9 8 20 12.2 31.9 12.2 16.8 0 27.7-9.2 27.7-23.4-.2-12-7.4-18.6-25-22.9zM295 64.3c-7.3 0-13.3 2.9-18.2 8.8v-6.6c0-.5-.4-.9-.9-.9H263c-.5 0-.9.4-.9.9v73.6c0 .5.4.9.9.9h12.9c.5 0 .9-.4.9-.9v-23.2c4.9 5.5 10.9 8.2 18.2 8.2 13.5 0 27.3-10.4 27.3-30.4-.1-19.9-13.8-30.4-27.3-30.4zm12.2 30.4c0 10.2-6.3 17.2-15.2 17.2s-15.5-7.4-15.5-17.2 6.7-17.2 15.5-17.2 15.2 7.2 15.2 17.2zm50.2-30.4c-17.4 0-31.1 13.4-31.1 30.6 0 17 13.6 30.3 30.9 30.3 17.5 0 31.2-13.4 31.2-30.5 0-17-13.6-30.4-31-30.4zm0 47.7c-9.3 0-16.3-7.5-16.3-17.3 0-9.9 6.8-17.1 16.1-17.1s16.4 7.5 16.4 17.4c-.1 9.8-6.9 17-16.2 17zm68.2-46.5h-14.2V50.9c0-.5-.4-.9-.9-.9h-12.9c-.5 0-.9.4-.9.9v14.6h-6.2c-.5 0-.9.4-.9.9v11.1c0 .5.4.9.9.9h6.2v28.8c0 11.6 5.8 17.5 17.2 17.5 4.6 0 8.5-1 12.1-3 .3-.2.5-.5.5-.8v-10.6c0-.3-.2-.6-.4-.8-.3-.2-.6-.2-.9 0-2.5 1.3-4.9 1.8-7.6 1.8-4.2 0-6-1.9-6-6.1V78.5h14.2c.5 0 .9-.4.9-.9V66.5c-.1-.6-.5-1-1.1-1zm49.7.1v-1.8c0-5.3 2-7.6 6.5-7.6 2.7 0 4.9.5 7.3 1.3.3.1.6 0 .9-.1.2-.2.4-.5.4-.8V45.7c0-.4-.3-.8-.7-.9-2.6-.8-5.8-1.5-10.8-1.5-12 0-18.3 6.7-18.3 19.5v2.7h-6.2c-.5 0-1 .4-1 .9v11.2c0 .5.4.9 1 .9h6.2v44.4c0 .5.4.9.9.9h12.9c.5 0 .9-.4.9-.9V78.5h12.1l18.5 44.4c-2.1 4.7-4.2 5.6-7 5.6-2.3 0-4.7-.7-7.1-2-.2-.1-.5-.1-.8-.1-.2.1-.5.3-.6.5l-4.4 9.6c-.2.5 0 1 .4 1.2 4.6 2.5 8.7 3.5 13.8 3.5 9.6 0 14.8-4.5 19.5-16.4l22.5-58c.1-.3.1-.6-.1-.9s-.5-.4-.8-.4h-13.5c-.4 0-.8.3-.9.6l-13.8 39.4L498 66c-.1-.4-.5-.6-.9-.6h-21.8zm-28.8-.1h-12.9c-.5 0-.9.4-.9.9v56.5c0 .5.4.9.9.9h12.9c.5 0 .9-.4.9-.9V66.5c.1-.6-.4-1-.9-1z"/><circle cx="440.1" cy="49.1" r="9.3"/></g></svg>
@@ -0,0 +1,32 @@
+import classnames from 'classnames';
+import { forwardRef } from 'react';
+import type { SVGProps } from 'react';
+
+export interface IconProps extends SVGProps<SVGSVGElement> {
+  svg: { src: string; width: number; height: number };
+  icon?: string;
+}
+
+export const Icon = forwardRef<SVGSVGElement, IconProps>(
+  ({ svg, icon, className, ...other }, ref) => {
+    if (svg) {
+      const { src, width, height } = svg;
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox={`0 0 ${width} ${height}`}
+          ref={ref}
+          width={width}
+          className={classnames('default:fill-current', className)}
+          // eslint-disable-next-line react/jsx-props-no-spreading
+          {...other}>
+          {icon ? <use href={`${src}#${icon}`} /> : <image href={src} width="100%" height="100%" />}
+        </svg>
+      );
+    }
+
+    return null;
+  }
+);
+
+export default Icon;
@@ -1,9 +1,11 @@
-import { ReactNode } from 'react';
+import classnames from 'classnames';
+import type { ReactNode } from 'react';

 export interface PageContainerProps {
-  children: ReactNode;
+  children?: ReactNode;
+  className?: string;
 }

-export const PageContainer = ({ children }: PageContainerProps) => (
-  <div className="container">{children}</div>
+export const PageContainer = ({ children, className }: PageContainerProps) => (
+  <div className={classnames(className, 'sm:container')}>{children}</div>
 );
@@ -0,0 +1,448 @@
+
+> OverlayScrollbars is a javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.
+
+## Why
+
+I created this plugin because I hate ugly and space consuming scrollbars. Similar plugins haven't met my requirements in terms of features, quality, simplicity, license or browser support.
+
+## Goals & Features
+
+ - Simple, powerful and good documented API
+ - High browser compatibility - <b>Firefox</b>, <b>Chrome</b>, <b>Opera</b>, <b>Edge</b>, <b>Safari 10+</b> and <b>IE 11</b>
+ - Can be run on the server - <b>SSR</b>, <b>SSG</b> and <b>ISR</b> support
+ - Tested on various devices - <b>Mobile</b>, <b>Desktop</b> and <b>Tablet</b>
+ - Tested with various (and mixed) inputs - <b>Mouse</b>, <b>touch</b> and <b>pen</b>
+ - <b>Treeshaking</b> - bundle only what you really need 
+ - Automatic update detection - <b>no polling</b>
+ - Usage of latest browser features - best <b>performance</b> in new browsers
+ - Bidirectional - LTR or RTL direction support
+ - Simple and effective scrollbar styling
+ - Highly customizable
+ - TypeScript support - fully written in TypeScript
+ - Dependency free - 100% self written to ensure small size and best functionality
+
+## Getting started
+
+#### 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
+```
+After installation it can be imported:
+```js
+import 'overlayscrollbars/overlayscrollbars.css';
+import { OverlayScrollbars } from 'overlayscrollbars';
+```
+
+
+<details>
+  <summary>
+    <h6>Manual download & embedding</h6>
+  </summary>
+
+You can use OverlayScrollbars without any bundler or package manager.  
+Simply download it from the [Releases](https://github.com/KingSora/OverlayScrollbars/releases) or use a [CDN](https://cdnjs.com/libraries/overlayscrollbars).
+
+- Use the javascript files with the `.browser` extension.
+- If you target old browsers use the `.es5` javascript file, for new browsers `.es6`.
+- For production use the javascript / stylesheet files with the `.min` extension. 
+
+Embedd OverlayScrollbars manually in your HTML:
+```html
+<link type="text/css" href="path/to/overlayscrollbars.css" rel="stylesheet" />
+<script type="text/javascript" src="path/to/overlayscrollbars.js" defer></script>
+```
+</details>
+
+
+## Initialization
+
+> __Note__: During initialization its expected that the <b>CSS file is loaded and parsed</b> by the browser.
+
+You can initialize either directly with an `Element` or with an `Object` where you have more control over the initialization process. 
+
+```js
+// simple initialization with an element
+const osInstance = OverlayScrollbars(document.querySelector('#myElement'), {});
+```
+
+### Bridging initialization flickering
+
+If you initialize OverlayScrollbars it needs a few milliseconds to create and append all the elements to the DOM.
+While this period the native scrollbars are still visible and are switched out after the initialization is finished. This is perceived as flickering. 
+
+<details>
+  <summary>
+    <h6>Initialization with an Object</h6>
+  </summary>
+
+> __Note__: For now please refer to the <b>TypeScript definitions</b> for a more detailed description of all possibilities.
+
+The only required field is the `target` field. This is the field to which the plugin is applied to.  
+If you use the object initialization only with the `target` field, the outcome is equivalent to the element initialization:
+```js
+// Both initializations have the same outcome
+
+OverlayScrollbars(document.querySelector('#myElement'), {});
+OverlayScrollbars({ target: document.querySelector('#myElement') }, {});
+```
+
+In the initialization object you can specify how the library is handling generated elements.
+For example you can appoint an existing element as the `viewport` element. Like this the library won't generate it but take the specified element instead:
+
+ ```js
+OverlayScrollbars({ 
+  target: document.querySelector('#target'),
+  elements: {
+    viewport: document.querySelector('#viewport'),
+  },
+}, {});
+```
+
+This is very useful if you have a fixed DOM structure and don't want OverlayScrollbars to generate its own elements. Those cases arise very often when you want an other library to work together with OverlayScrollbars.
+
+---
+
+You can also decide to which element the scrollbars should be applied to:
+
+ ```js
+OverlayScrollbars({ 
+  target: document.querySelector('#target'),
+  scrollbars: {
+    slot: document.querySelector('#target').parentElement,
+  },
+}, {});
+```
+
+---
+
+And last but not least you can decide when the initialization should be canceled:
+ ```js
+OverlayScrollbars({ 
+  target: document.querySelector('#target'),
+  cancel: {
+    nativeScrollbarsOverlaid: true,
+    body: null,
+  }
+}, {});
+```
+
+In the above example the initialization is canceled when the native scrollbars are overlaid or when your target is a `body` element and the plugin determined that a initialization to the `body` element would affect native functionality like `window.scrollTo`.
+
+</details>
+
+## Options
+
+You can initialize OverlayScrollbars with an initial set of options, which can be changed at any time with the `options` method:
+```js
+OverlayScrollbars(document.querySelector('#myElement'), {
+  overflow: {
+    x: 'hidden',
+  },
+});
+```
+
+<details>
+  <summary>
+    <h6>Options in depth</h6>
+  </summary>
+
+The default options are:
+```js
+const defaultOptions = {
+  paddingAbsolute: false,
+  showNativeOverlaidScrollbars: false,
+  update: {
+    elementEvents: [['img', 'load']],
+    debounce: [0, 33],
+    attributes: null,
+    ignoreMutation: null,
+  },
+  overflow: {
+    x: 'scroll',
+    y: 'scroll',
+  },
+  scrollbars: {
+    theme: 'os-theme-dark',
+    visibility: 'auto',
+    autoHide: 'never',
+    autoHideDelay: 1300,
+    dragScroll: true,
+    clickScroll: false,
+    pointers: ['mouse', 'touch', 'pen'],
+  },
+};
+```
+
+### `paddingAbsolute`
+
+| type  | default |
+| :--- | :--- |
+| `boolean` | `false` |
+
+Indicates whether the padding for the content shall be absolute.
+
+### `showNativeOverlaidScrollbars`
+
+| type  | default |
+| :--- | :--- |
+| `boolean` | `false` |
+
+Indicates whether the native overlaid scrollbars shall be visible.
+
+### `update.elementEvents`
+
+| type  | default |
+| :--- | :--- |
+| `Array<[string, string]> \| null` | `[['img', 'load']]` |
+
+An array of tuples. The first value in the tuple is an `selector` and the second value are `event names`. The plugin will update itself if any of the elements with the specified selector will emit any specified event. The default value can be interpreted as "The plugin will update itself if any `img` element emits an `load` event."
+
+### `update.debounce`
+
+| type  | default |
+| :--- | :--- |
+| `[number, number] \| number \| null` | `[0, 33]` |
+
+> __Note__: If 0 is used for the timeout, `requestAnimationFrame` instead of `setTimeout` is used for the debounce.
+
+Debounces the `MutationObserver` which tracks changes to the content. If a **tuple** is passed, the first value is the timeout and second is the max wait. If only a **number** is passed you specify only the timeout and there is no max wait. With **null** there is no debounce. **Usefull to fine-tune performance.**
+
+### `update.attributes`
+
+| type  | default |
+| :--- | :--- |
+| `string[] \| null` | `null` |
+
+> __Note__: There is a base array of attributes that the `MutationObserver` always observes, even if this option is `null`.
+
+An array of additional attributes that the `MutationObserver` should observe for the content. 
+
+### `update.ignoreMutation`
+
+| type  | default |
+| :--- | :--- |
+| `((mutation) => any) \| null` | `null` |
+
+A function which receives a [`MutationRecord`](https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord) as an argument. If the function returns a truthy value the mutation will be ignored and the plugin won't update. **Usefull to fine-tune performance.**
+
+### `overflow.x`
+
+| type  | default |
+| :--- | :--- |
+| `string` | `'scroll'` |
+
+> __Note__: Valid values are: `'hidden'`, `'scroll'`, `'visible'`, `'visible-hidden'` and `'visible-scroll'`.
+
+The overflow behavior for the horizontal (x) axis.
+
+### `overflow.y`
+
+| type  | default |
+| :--- | :--- |
+| `string` | `'scroll'` |
+
+> __Note__: Valid values are: `'hidden'`, `'scroll'`, `'visible'`, `'visible-hidden'` and `'visible-scroll'`.
+
+The overflow behavior for the vertical (y) axis.
+
+### `scrollbars.theme`
+
+| type  | default |
+| :--- | :--- |
+| `string \| null` | `'os-theme-dark'` |
+
+Applies the specified theme (classname) to the scrollbars.
+
+### `scrollbars.visibility`
+
+| type  | default |
+| :--- | :--- |
+| `string` | `'auto'` |
+
+> __Note__: Valid values are: `'visible'`, `'hidden'`, and `'auto'`.
+
+The base visibility of the scrollbars.
+
+### `scrollbars.autoHide`
+
+| type  | default |
+| :--- | :--- |
+| `string` | `'never'` |
+
+> __Note__: Valid values are: `'never'`, `'scroll'`, `'leave'` and `'move'`.
+
+The possibility to hide visible scrollbars automatically after a certain user action.
+
+### `scrollbars.autoHideDelay`
+
+| type  | default |
+| :--- | :--- |
+| `number` | `1300` |
+
+The delay in milliseconds before the scrollbars are hidden automatically.
+
+### `scrollbars.dragScroll`
+
+| type  | default |
+| :--- | :--- |
+| `boolean` | `true` |
+
+Indicates whether you can drag the scrollbar handles for scrolling.
+
+### `scrollbars.clickScroll`
+
+| type  | default |
+| :--- | :--- |
+| `boolean` | `false` |
+
+Indicates whether you can click on the scrollbar track for scrolling.
+
+### `scrollbars.pointers`
+
+| type  | default |
+| :--- | :--- |
+| `string[] \| null` | `['mouse', 'touch', 'pen']` |
+
+The [`PointerTypes`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType) the plugin should react to.
+
+</details>
+
+## Events
+
+You can initialize OverlayScrollbars with an initial set of events, which can be managed at any time with the `on` and `off` methods:
+```js
+OverlayScrollbars(document.querySelector('#myElement'), {}, {
+  updated(osInstance, onUpdatedArgs) {
+    // ...
+  }
+});
+```
+
+<details>
+  <summary>
+    <h6>Events in depth</h6>
+  </summary>
+
+> __Note__: Every event receives the `instance` from which it was fired as the first argument. Always.
+
+### `initialized`
+
+| arguments  | description |
+| :--- | :--- |
+| `instance` | The instance which fired the event. |
+
+Is fired after all generated elements, observers and events were appended to the DOM.
+
+### `updated`
+
+| arguments  | description |
+| :--- | :--- |
+| `instance` | The instance which fired the event. |
+| `onUpdatedArgs` | An `object` which describes the update in detail. |
+
+> __Note__: If an update was triggered but nothing changed, the event won't be fired.
+
+Is fired after the instace was updated. 
+
+### `destroyed`
+
+| arguments  | description |
+| :--- | :--- |
+| `instance` | The instance which fired the event. |
+| `canceled` | An `boolean` which indicates whether the initialization was canceled and thus destroyed. |
+
+Is fired after all generated elements, observers and events were removed from the DOM.
+
+</details>
+
+## Instance Methods
+
+> __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;
+
+  update(force?: boolean): OverlayScrollbars;
+
+  destroy(): void;
+
+  state(): State;
+
+  elements(): Elements;
+
+  on<N extends keyof EventListenerMap>(name: N, listener: EventListener<N>): () => 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;
+}
+```
+
+## Static Methods
+
+> __Note__: For now please refer to the <b>TypeScript definitions</b> for a more detailed description.
+
+```ts
+interface OverlayScrollbarsStatic {
+  (target: InitializationTarget): OverlayScrollbars | undefined;
+  (
+    target: InitializationTarget,
+    options: DeepPartial<Options>,
+    eventListeners?: InitialEventListeners
+  ): OverlayScrollbars;
+
+  plugin(plugin: Plugin | Plugin[]): void;
+  valid(osInstance: any): boolean;
+  env(): Environment;
+}
+```
+
+## Plugins
+
+Everything thats considered not core functionality or old browser compatibility is exposed via a plugin. This is done because all unused plugins are treeshaken and thus won't end up in your final bundle. OverlayScrollbars comes with the following plugins:
+
+- **ScrollbarsHidingPlugin**: Is needed for old browsers which aren't supporting nativ scrollbar styling features. [You can find the list of browsers where you need this plugin here](https://caniuse.com/?search=scrollbar%20styling) (note that even though `iOS Safari >= 14` is marked as unsupported you only need this plugin for `iOS < 7.1`).
+- **SizeObserverPlugin**: Is needed for old browsers which aren't supporting the `ResizeObserver` api. [You can find the list of browsers where you need this plugin here](https://caniuse.com/?search=ResizeObserver)
+- **ClickScrollPlugin**: If you want to use the option `scrollbars: { clickScroll: true }`.
+
+#### Consuming Plugins
+
+You can consume plugins like:
+```ts
+import { 
+  OverlayScrollbars, 
+  ScrollbarsHidingPlugin, 
+  SizeObserverPlugin, 
+  ClickScrollPlugin 
+} from 'overlayscrollbars';
+
+// single plugin
+OverlayScrollbars.plugin(ScrollbarsHidingPlugin);
+
+// multiple plugins
+OverlayScrollbars.plugin([SizeObserverPlugin, ClickScrollPlugin]);
+```
+
+#### Writing Plugins
+
+> __Note__: For now please refer to the <b>TypeScript definitions</b> for a more detailed description.
+
+You can write and publish your own Plugins. This section is a work in progress.
+
+## Feature comparison to `v1`
+
+- The `scroll` function is missing. Planned as a `plugin`. (WIP)
+- Initialization to the `textarea` element isn't supported yet. Planned as a `plugin`. (WIP) 
+
+## Future Plans
+
+ - Provide plugin based support for missing features. (treeshakeable)
+ - Frequent updates in terms of bug-fixes and enhancements. (always use latest browser features)
+ - Improve tests. (unit & browser tests)
+
+## License
+
+MIT 
@@ -0,0 +1,21 @@
+// import Link from 'next/link';
+import type { ComponentProps } from 'react';
+
+export interface HeadingProps extends ComponentProps<'h1'> {
+  tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+
+export const Heading = ({ id, tag: Tag, ...rest }: HeadingProps) => {
+  if (id) {
+    return (
+      <>
+        {/* <Link href={`/#${id}`} scroll={false}> */}
+        {/* eslint-disable-next-line */}
+        <Tag {...rest} />
+        {/* </Link> */}
+      </>
+    );
+  }
+  /* eslint-disable-next-line */
+  return <Tag {...rest} />;
+};
@@ -0,0 +1,17 @@
+import { useEffect, useRef } from 'react';
+import { OverlayScrollbars } from '@~package/overlayscrollbars';
+import type { ComponentProps } from 'react';
+
+export const Pre = ({ children }: ComponentProps<'pre'>) => {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current) {
+      const instance = OverlayScrollbars(ref.current, {
+        paddingAbsolute: true,
+        scrollbars: { autoHide: 'leave' },
+      });
+      return () => instance.destroy();
+    }
+  });
+  return <pre ref={ref}>{children}</pre>;
+};
@@ -1,64 +1,96 @@
 import '~/assets/css/tailwind.css';
 import '~/assets/css/styles.css';
+import '@~package/overlayscrollbars/overlayscrollbars.css';
+import { useEffect } from 'react';
+import { OverlayScrollbars } from '@~package/overlayscrollbars';
 import Head from 'next/head';
+import { MDXProvider } from '@mdx-js/react';
 import favicon from '~/assets/favicon.ico';
+import { Pre } from '~/components/md/Pre';
+import { Heading } from '~/components/md/Heading';
+import type { ComponentProps } from 'react';
 import type { AppProps } from 'next/app';
+import type { HeadingProps } from '~/components/md/Heading';

-const OverlayScrollbarsDocs = ({ Component, pageProps }: AppProps) => (
-  <div className="font-sans font-normal">
-    <Head>
-      <title key="title">OverlayScrollbars</title>
-      <meta
-        key="description"
-        name="description"
-        content="A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling."
-      />
-      <link rel="icon" href={favicon.src} />
-      <link rel="shortcut icon" type="image/x-icon" href={favicon.src} />
-      <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
-      <meta name="theme-color" content="#36befd" />
-      <meta name="msapplication-TileColor" content="#36befd" />
-      <meta name="msapplication-navbutton-color" content="#36befd" />
-      <meta name="application-name" content="OverlayScrollbars" />
-      <meta name="msapplication-tooltip" content="OverlayScrollbars" />
-      <meta name="apple-mobile-web-app-title" content="OverlayScrollbars" />
-      <script
-        type="application/ld+json"
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={{
-          __html: JSON.stringify({
-            '@context': 'http://schema.org',
-            '@type': 'SoftwareSourceCode',
-            url: 'https://kingsora.github.io/OverlayScrollbars',
-            name: 'OverlayScrollbars',
-            description:
-              'A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.',
-            license: 'https://en.wikipedia.org/wiki/MIT_License',
-            keywords:
-              'js,javascript,typescript,overlayscrollbars,overlay,scrollbars,custom,scrollbar,plugin,react,vue,angular,treeshaking',
-            isAccessibleForFree: true,
-            image:
-              'https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/logo/logo.png',
-            codeRepository: 'https://github.com/KingSora/OverlayScrollbars',
-            runtimePlatform: 'browser',
-            maintainer: {
-              '@type': 'Person',
-              name: 'Rene Haas',
-              additionalName: 'KingSora',
-              url: 'https://github.com/KingSora',
-            },
-            programmingLanguage: {
-              '@type': 'ComputerLanguage',
-              name: 'javascript',
-              alternateName: 'js',
-            },
-          }),
-        }}
-      />
-    </Head>
-    {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-    <Component {...pageProps} />
-  </div>
+const generateHeading = (props: ComponentProps<'h1'>, tag: HeadingProps['tag']) => (
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  <Heading {...props} tag={tag} />
 );

+const OverlayScrollbarsDocs = ({ Component, pageProps }: AppProps) => {
+  useEffect(() => {
+    const bodyInstance = OverlayScrollbars(document.body, {});
+    // @ts-ignore
+    window.osBody = bodyInstance;
+  }, []);
+
+  return (
+    <MDXProvider
+      components={{
+        h1: (props) => generateHeading(props, 'h1'),
+        h2: (props) => generateHeading(props, 'h2'),
+        h3: (props) => generateHeading(props, 'h3'),
+        h4: (props) => generateHeading(props, 'h4'),
+        h5: (props) => generateHeading(props, 'h5'),
+        h6: (props) => generateHeading(props, 'h6'),
+        pre: Pre,
+      }}>
+      <div className="font-sans font-normal text-primary-dark">
+        <Head>
+          <title key="title">OverlayScrollbars</title>
+          <meta
+            key="description"
+            name="description"
+            content="A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling."
+          />
+          <link rel="icon" href={favicon.src} />
+          <link rel="shortcut icon" type="image/x-icon" href={favicon.src} />
+          <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+          <meta name="theme-color" content="#36befd" />
+          <meta name="msapplication-TileColor" content="#36befd" />
+          <meta name="msapplication-navbutton-color" content="#36befd" />
+          <meta name="application-name" content="OverlayScrollbars" />
+          <meta name="msapplication-tooltip" content="OverlayScrollbars" />
+          <meta name="apple-mobile-web-app-title" content="OverlayScrollbars" />
+          <script
+            type="application/ld+json"
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{
+              __html: JSON.stringify({
+                '@context': 'http://schema.org',
+                '@type': 'SoftwareSourceCode',
+                url: 'https://kingsora.github.io/OverlayScrollbars',
+                name: 'OverlayScrollbars',
+                description:
+                  'A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.',
+                license: 'https://en.wikipedia.org/wiki/MIT_License',
+                keywords:
+                  'js,javascript,typescript,overlayscrollbars,overlay,scrollbars,custom,scrollbar,plugin,react,vue,angular,treeshaking',
+                isAccessibleForFree: true,
+                image:
+                  'https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/logo/logo.png',
+                codeRepository: 'https://github.com/KingSora/OverlayScrollbars',
+                runtimePlatform: 'browser',
+                maintainer: {
+                  '@type': 'Person',
+                  name: 'Rene Haas',
+                  additionalName: 'KingSora',
+                  url: 'https://github.com/KingSora',
+                },
+                programmingLanguage: {
+                  '@type': 'ComputerLanguage',
+                  name: 'javascript',
+                  alternateName: 'js',
+                },
+              }),
+            }}
+          />
+        </Head>
+        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+        <Component {...pageProps} />
+      </div>
+    </MDXProvider>
+  );
+};
+
 export default OverlayScrollbarsDocs;
@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from 'next/document';
+
+const Document = () => (
+  <Html lang="en" data-overlayscrollbars="">
+    <Head />
+    <body data-overlayscrollbars="">
+      <Main />
+      <NextScript />
+    </body>
+  </Html>
+);
+
+export default Document;
@@ -0,0 +1,49 @@
+.logo {
+  position: relative;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: 10px;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: url('~/assets/img/logo.svg');
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    z-index: -1;
+  }
+  &::before {
+    filter: blur(33px) saturate(1.22);
+    opacity: 0.5;
+  }
+  &::after {
+    filter: drop-shadow(0 6px 22px #5242e3) saturate(1.5);
+    top: 0;
+    opacity: 0.1;
+  }
+}
+
+.usedBySeparator {
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    display: block;
+    height: 1px;
+    width: 100%;
+    top: 50%;
+    left: 50%;
+    border-width: 1px;
+    transform: translate(-50%, -50%);
+    z-index: -1;
+  }
+}
+
+.usedBy {
+  filter: brightness(0.8) sepia(1) saturate(1.3) hue-rotate(175deg);
+  opacity: 0.6;
+}
@@ -1,6 +1,121 @@
+import classnames from 'classnames';
+import { useEffect, useRef } from 'react';
+import { OverlayScrollbars } from '@~package/overlayscrollbars';
 import { PageContainer } from '~/components/PageContainer';
+import { Icon } from '~/components/Icon';
+import logo from '~/assets/img/logo.svg';
+import spotifyLogo from '~/assets/img/spotify-logo.svg';
+import storybookLogo from '~/assets/img/storybook-logo.svg';
+import adminlteLogo from '~/assets/img/adminlte-logo.png';
+import githubIcon from '~/assets/icon/github.svg';
+import IndexMdx from '~/components/index.mdx';
+import styles from './index.module.scss';
+import type { ReactNode } from 'react';
 import type { NextPage } from 'next';

-const IndexPage: NextPage = () => <PageContainer>hello</PageContainer>;
+const separator = (children: ReactNode) => (
+  <div className="my-6 text-center font-medium text-sm uppercase relative">
+    <span className="p-3 bg-white">
+      {children}
+      <div className="absolute block top-1/2 left-1/2 w-[100%] xs:w-[80%] border-t-[1px] border-slate-300 translate-x-[-50%] translate-y-[-50%] z-[-1]" />
+    </span>
+  </div>
+);
+
+const IndexPage: NextPage = () => {
+  const usedByRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (usedByRef.current) {
+      const instance = OverlayScrollbars(usedByRef.current, {});
+      return () => instance.destroy();
+    }
+  }, []);
+
+  return (
+    <PageContainer className="px-6">
+      <div className="mt-8 flex justify-center items-center h-[33vh] min-h-32 max-h-40 xxs:max-h-44">
+        <div className={classnames('h-full', styles.logo)}>
+          <img src={logo.src} className="h-full" alt="Overlay Scrollbars Logo" />
+        </div>
+      </div>
+      <h1 className="text-center xxs:text-4xl text-2xl font-bold my-11">Overlay Scrollbars</h1>
+      <p className="text-center mx-auto max-w-screen-sm my-11 font-medium">
+        A javascript scrollbar plugin that hides native scrollbars, provides custom styleable
+        overlay scrollbars and keeps the native functionality and feeling.
+      </p>
+      {separator('used by')}
+      <div ref={usedByRef}>
+        <div className="flex my-7 justify-center">
+          <div className={classnames('inline-flex  items-center gap-6 py-4', styles.usedBy)}>
+            <div
+              className="h-11 px-3 flex-grow flex-shrink-0"
+              style={{ filter: 'brightness(0.35)' }}>
+              <img className="h-full" src={spotifyLogo.src} alt="" />
+            </div>
+            <div className="h-11 px-3 py-1.5 flex-grow flex-shrink-0">
+              <img className="h-full" src={storybookLogo.src} alt="" />
+            </div>
+            <div className="h-11 p-3 flex-grow flex-shrink-0">
+              <img className="h-full" src={adminlteLogo.src} alt="" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {separator(
+        <a href="https://github.com/KingSora/OverlayScrollbars" target="_blank" rel="noreferrer">
+          <Icon
+            className="inline-block w-11 hover:scale-110 text-primary-dark hover:text-primary-blue1 active:text-primary-blue2 transition-transformColor ease-in-out duration-300"
+            svg={githubIcon}
+            icon="github"
+          />
+          <span className="sr-only">OverlayScrollbars on Github</span>
+        </a>
+      )}
+      <p className="text-center text-sm text-primary-gray2 mx-auto max-w-screen-sm my-11 font-medium">
+        This page is a work in progress. For now refer to the TypeScript definitions for a more
+        detailed documentation.
+        <br />
+        Looking for the v1 docs? Follow this link.
+      </p>
+      <div className="mx-auto flex sm:flex-row justify-center gap-2 items-center flex-wrap">
+        <a href="https://www.npmjs.com/package/overlayscrollbars">
+          <img
+            src="https://img.shields.io/npm/dm/overlayscrollbars.svg?style=flat-square"
+            alt="Downloads"
+          />
+        </a>
+        <a href="https://www.npmjs.com/package/overlayscrollbars">
+          <img
+            src="https://img.shields.io/npm/v/overlayscrollbars.svg?style=flat-square"
+            alt="Version"
+          />
+        </a>
+        <a href="https://github.com/KingSora/OverlayScrollbars/blob/master/LICENSE">
+          <img
+            src="https://img.shields.io/github/license/kingsora/overlayscrollbars.svg?style=flat-square"
+            alt="License"
+          />
+        </a>
+        <a href="https://app.codecov.io/gh/KingSora/OverlayScrollbars">
+          <img
+            src="https://img.shields.io/codecov/c/github/KingSora/OverlayScrollbars?style=flat-square"
+            alt="Code Coverage"
+          />
+        </a>
+        <a href="https://bundlephobia.com/package/overlayscrollbars">
+          <img
+            src="https://img.shields.io/bundlephobia/minzip/overlayscrollbars?label=max.%20bundle%20size&style=flat-square"
+            alt="Max. Bundle Size"
+          />
+        </a>
+      </div>
+      <div className="mt-11 prose prose-primary mx-auto pb-32">
+        <IndexMdx />
+      </div>
+    </PageContainer>
+  );
+};

 export default IndexPage;
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" id="github" viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" /></svg>