improve website

2026-05-17 05:59:40 +03:00 · 2022-11-14 17:16:52 +01:00
parent a8e860f372
commit d8cecb6eee
16 changed files with 128 additions and 59 deletions
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" data-overlayscrollbars-initialize=""><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta 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="/OverlayScrollbars/_next/static/media/favicon.7b344e85.ico"/><link rel="shortcut icon" type="image/x-icon" href="/OverlayScrollbars/_next/static/media/favicon.7b344e85.ico"/><meta http-equiv="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">{"@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"}}</script><title>404: This page could not be found</title><meta name="next-head-count" content="14"/><link rel="preload" href="/OverlayScrollbars/_next/static/css/16de5124cd83f7fb.css" as="style"/><link rel="stylesheet" href="/OverlayScrollbars/_next/static/css/16de5124cd83f7fb.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/OverlayScrollbars/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/OverlayScrollbars/_next/static/chunks/webpack-38447e448aec86dd.js" defer=""></script><script src="/OverlayScrollbars/_next/static/chunks/framework-80c43e603d70cda7.js" defer=""></script><script src="/OverlayScrollbars/_next/static/chunks/main-ea1211b077f8a1ed.js" defer=""></script><script src="/OverlayScrollbars/_next/static/chunks/pages/_app-ac0e1f2fc4980ec7.js" defer=""></script><script src="/OverlayScrollbars/_next/static/chunks/pages/_error-fa37e1d4331cc885.js" defer=""></script><script src="/OverlayScrollbars/_next/static/a6rCR9y6SQ5Ojjwxqah3-/_buildManifest.js" defer=""></script><script src="/OverlayScrollbars/_next/static/a6rCR9y6SQ5Ojjwxqah3-/_ssgManifest.js" defer=""></script></head><body data-overlayscrollbars-initialize=""><div id="__next"><div class="font-sans font-normal text-primary-dark"><div style="font-family:-apple-system, BlinkMacSystemFont, Roboto, &quot;Segoe UI&quot;, &quot;Fira Sans&quot;, Avenir, &quot;Helvetica Neue&quot;, &quot;Lucida Grande&quot;, sans-serif;height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center"><div><style>
+<!DOCTYPE html><html lang="en" data-overlayscrollbars-initialize=""><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta 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="/OverlayScrollbars/_next/static/media/favicon.7b344e85.ico"/><link rel="shortcut icon" type="image/x-icon" href="/OverlayScrollbars/_next/static/media/favicon.7b344e85.ico"/><meta http-equiv="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">{"@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"}}</script><title>404: This page could not be found</title><meta name="next-head-count" content="14"/><link rel="preload" href="/OverlayScrollbars/_next/static/css/a0f974289bbacc23.css" as="style"/><link rel="stylesheet" href="/OverlayScrollbars/_next/static/css/a0f974289bbacc23.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/OverlayScrollbars/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/OverlayScrollbars/_next/static/chunks/webpack-38447e448aec86dd.js" defer=""></script><script src="/OverlayScrollbars/_next/static/chunks/framework-80c43e603d70cda7.js" defer=""></script><script src="/OverlayScrollbars/_next/static/chunks/main-ea1211b077f8a1ed.js" defer=""></script><script src="/OverlayScrollbars/_next/static/chunks/pages/_app-2a2c3b7059131a2d.js" defer=""></script><script src="/OverlayScrollbars/_next/static/chunks/pages/_error-fa37e1d4331cc885.js" defer=""></script><script src="/OverlayScrollbars/_next/static/rdSn7MfqqvzaExLXDlLOR/_buildManifest.js" defer=""></script><script src="/OverlayScrollbars/_next/static/rdSn7MfqqvzaExLXDlLOR/_ssgManifest.js" defer=""></script></head><body data-overlayscrollbars-initialize=""><div id="__next"><div class="font-sans font-normal text-primary-dark"><div style="font-family:-apple-system, BlinkMacSystemFont, Roboto, &quot;Segoe UI&quot;, &quot;Fira Sans&quot;, Avenir, &quot;Helvetica Neue&quot;, &quot;Lucida Grande&quot;, sans-serif;height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center"><div><style>
                body { margin: 0; color: #000; background: #fff; }
                .next-error-h1 {
                  border-right: 1px solid rgba(0, 0, 0, .3);
@@ -9,4 +9,4 @@
                  .next-error-h1 {
                    border-right: 1px solid rgba(255, 255, 255, .3);
                  }
-                }</style><h1 class="next-error-h1" style="display:inline-block;margin:0;margin-right:20px;padding:0 23px 0 0;font-size:24px;font-weight:500;vertical-align:top;line-height:49px">404</h1><div style="display:inline-block;text-align:left;line-height:49px;height:49px;vertical-align:middle"><h2 style="font-size:14px;font-weight:normal;line-height:49px;margin:0;padding:0">This page could not be found<!-- -->.</h2></div></div></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"a6rCR9y6SQ5Ojjwxqah3-","assetPrefix":"/OverlayScrollbars","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>
+                }</style><h1 class="next-error-h1" style="display:inline-block;margin:0;margin-right:20px;padding:0 23px 0 0;font-size:24px;font-weight:500;vertical-align:top;line-height:49px">404</h1><div style="display:inline-block;text-align:left;line-height:49px;height:49px;vertical-align:middle"><h2 style="font-size:14px;font-weight:normal;line-height:49px;margin:0;padding:0">This page could not be found<!-- -->.</h2></div></div></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"rdSn7MfqqvzaExLXDlLOR","assetPrefix":"/OverlayScrollbars","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>
@@ -1 +1 @@
-self.__BUILD_MANIFEST={__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":["static/css/054cd89f2e050c9e.css","static/chunks/pages/index-6cf432147fa9d4da.js"],"/_error":["static/chunks/pages/_error-fa37e1d4331cc885.js"],sortedPages:["/","/_app","/_error"]},self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();
+self.__BUILD_MANIFEST={__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":["static/css/054cd89f2e050c9e.css","static/chunks/pages/index-ea6f9c0e08894410.js"],"/_error":["static/chunks/pages/_error-fa37e1d4331cc885.js"],sortedPages:["/","/_app","/_error"]},self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();
@@ -11,6 +11,7 @@
        "classnames": "^2.3.2",
        "next": "12.3.1",
        "overlayscrollbars": "file:./../packages/overlayscrollbars/dist",
+        "overlayscrollbars-react": "file:./../packages/overlayscrollbars-react/dist",
        "react": "18.2.0",
        "react-dom": "18.2.0"
      },
@@ -36,16 +37,13 @@
    },
    "../packages/overlayscrollbars": {
      "version": "2.0.0-beta.3",
+      "extraneous": true,
      "license": "MIT",
      "devDependencies": {
        "rollup-plugin-summary": "^1.4.3",
        "rollup-plugin-terser": "^7.0.2"
      }
    },
-    "../packages/overlayscrollbars/dist": {
-      "version": "2.0.0-beta.3",
-      "license": "MIT"
-    },
    "node_modules/@hapi/hoek": {
      "version": "9.3.0",
      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -3086,8 +3084,18 @@
      }
    },
    "node_modules/overlayscrollbars": {
-      "resolved": "../packages/overlayscrollbars/dist",
-      "link": true
+      "version": "2.0.0",
+      "resolved": "file:../packages/overlayscrollbars/dist",
+      "license": "MIT"
+    },
+    "node_modules/overlayscrollbars-react": {
+      "version": "0.4.0",
+      "resolved": "file:../packages/overlayscrollbars-react/dist",
+      "license": "MIT",
+      "peerDependencies": {
+        "overlayscrollbars": "^2.0.0",
+        "react": ">=16.8.0"
+      }
    },
    "node_modules/parse-entities": {
      "version": "4.0.0",
@@ -6478,7 +6486,11 @@
      "dev": true
    },
    "overlayscrollbars": {
-      "version": "file:../packages/overlayscrollbars/dist"
+      "version": "2.0.0"
+    },
+    "overlayscrollbars-react": {
+      "version": "0.4.0",
+      "requires": {}
    },
    "parse-entities": {
      "version": "4.0.0",
@@ -12,6 +12,7 @@
    "classnames": "^2.3.2",
    "next": "12.3.1",
    "overlayscrollbars": "file:./../packages/overlayscrollbars/dist",
+    "overlayscrollbars-react": "file:./../packages/overlayscrollbars-react/dist",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
@@ -3,18 +3,21 @@
  src: url('~/assets/font/noto_sans/NotoSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
+  font-display: swap;
 }
@font-face {
  font-family: Noto Sans;
  src: url('~/assets/font/noto_sans/NotoSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
+  font-display: swap;
 }
@font-face {
  font-family: Noto Sans;
  src: url('~/assets/font/noto_sans/NotoSans-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
+  font-display: swap;
 }

 /* elements wont be suddenly cropped after initialization is done */
@@ -1,17 +1,26 @@
 import { useEffect, useRef } from 'react';
-import { OverlayScrollbars } from 'overlayscrollbars';
+import { useOverlayScrollbarsIdle } from '~/hooks/useOverlayScrollbarsIdle';
 import type { ComponentProps } from 'react';

 export const Pre = ({ children }: ComponentProps<'pre'>) => {
  const ref = useRef(null);
+  const [initialize, instance] = useOverlayScrollbarsIdle({
+    options: {
+      paddingAbsolute: true,
+      scrollbars: { autoHide: 'leave' },
+    },
+  });
+
  useEffect(() => {
    if (ref.current) {
-      const instance = OverlayScrollbars(ref.current, {
-        paddingAbsolute: true,
-        scrollbars: { autoHide: 'leave' },
-      });
-      return () => instance.destroy();
+      initialize(ref.current);
+      return () => instance()?.destroy();
    }
-  });
-  return <pre ref={ref}>{children}</pre>;
+  }, []);
+
+  return (
+    <pre ref={ref} data-overlayscrollbars-initialize>
+      {children}
+    </pre>
+  );
 };
@@ -0,0 +1,35 @@
+import { useMemo } from 'react';
+import { useOverlayScrollbars } from 'overlayscrollbars-react';
+import type {
+  UseOverlayScrollbarsParams,
+  UseOverlayScrollbarsInitialization,
+  UseOverlayScrollbarsInstance,
+} from 'overlayscrollbars-react';
+import type { InitializationTarget } from 'overlayscrollbars';
+
+export const useOverlayScrollbarsIdle = (
+  params?: UseOverlayScrollbarsParams
+): [
+  (...args: Parameters<UseOverlayScrollbarsInitialization>) => void,
+  UseOverlayScrollbarsInstance
+] => {
+  const [initialize, instance] = useOverlayScrollbars(params);
+  return useMemo(
+    () => [
+      (target: InitializationTarget) => {
+        if (typeof window !== 'undefined' && window.requestIdleCallback) {
+          window.requestIdleCallback(
+            () => {
+              initialize(target);
+            },
+            { timeout: 2000 }
+          );
+        } else {
+          initialize(target);
+        }
+      },
+      instance,
+    ],
+    [initialize, instance]
+  );
+};
@@ -2,9 +2,9 @@ import '~/assets/css/tailwind.css';
 import '~/assets/css/styles.css';
 import 'overlayscrollbars/overlayscrollbars.css';
 import { useEffect } from 'react';
-import { OverlayScrollbars } from 'overlayscrollbars';
 import Head from 'next/head';
 import { MDXProvider } from '@mdx-js/react';
+import { useOverlayScrollbarsIdle } from '~/hooks/useOverlayScrollbarsIdle';
 import favicon from '~/assets/favicon.ico';
 import { Pre } from '~/components/md/Pre';
 import { Heading } from '~/components/md/Heading';
@@ -18,10 +18,11 @@ const generateHeading = (props: ComponentProps<'h1'>, tag: HeadingProps['tag'])
 );

 const OverlayScrollbarsDocs = ({ Component, pageProps }: AppProps) => {
+  const [initialize, instance] = useOverlayScrollbarsIdle();
+
  useEffect(() => {
-    const bodyInstance = OverlayScrollbars(document.body, {});
-    // @ts-ignore
-    window.osBody = bodyInstance;
+    initialize(document.body);
+    return () => instance()?.destroy();
  }, []);

  return (
@@ -1,6 +1,6 @@
 import classnames from 'classnames';
 import { useEffect, useRef } from 'react';
-import { OverlayScrollbars } from 'overlayscrollbars';
+import { useOverlayScrollbarsIdle } from '~/hooks/useOverlayScrollbarsIdle';
 import { PageContainer } from '~/components/PageContainer';
 import { Icon } from '~/components/Icon';
 import logo from '~/assets/img/logo.svg';
@@ -24,11 +24,12 @@ const separator = (children: ReactNode) => (

 const IndexPage: NextPage = () => {
  const usedByRef = useRef<HTMLDivElement | null>(null);
+  const [initialize, instance] = useOverlayScrollbarsIdle();

  useEffect(() => {
    if (usedByRef.current) {
-      const instance = OverlayScrollbars(usedByRef.current, {});
-      return () => instance.destroy();
+      initialize(usedByRef.current);
+      return () => instance()?.destroy();
    }
  }, []);

@@ -36,7 +37,13 @@ const IndexPage: NextPage = () => {
    <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="OverlayScrollbars Logo" />
+          <img
+            src={logo.src}
+            className="h-full"
+            alt="OverlayScrollbars Logo"
+            width="200"
+            height="200"
+          />
        </div>
      </div>
      <h1 className="text-center xxs:text-4xl text-2xl font-bold my-11">
@@ -49,7 +56,7 @@ const IndexPage: NextPage = () => {
        overlay scrollbars and keeps the native functionality and feeling.
      </p>
      {separator('used by')}
-      <div ref={usedByRef}>
+      <div ref={usedByRef} data-overlayscrollbars-initialize>
        <div className="flex justify-center">
          <div className={classnames('inline-flex  items-center gap-6 py-6', styles.usedBy)}>
            <div