chore: update node to version 18

.github/workflows/npm-publish.yml

@@ -14,7 +14,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: 18
       - run: npm ci
       - run: npm run build
   publish-gpr:
@@ -24,7 +24,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: 18
           registry-url: https://npm.pkg.github.com/
       - run: npm ci
       - run: npm run build

README.md

@@ -7,8 +7,8 @@
 
 <p align="center">
   <a href="https://hits.seeyoufarm.com"><img src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Fashutosh1919%2Freact-awesome-loaders&count_bg=%2379C83D&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false"/></a>
-  <a href="https://nodejs.org/en/blog/release/v12.18.3/"><img alt="NodeJS" src="https://img.shields.io/badge/node-12.18.3-important?style=flat-square" /></a>
-  <a href="https://www.npmjs.com/package/npm/v/6.14.6"><img alt="NPM" src="https://img.shields.io/badge/npm-6.14.6-61DAFB?style=flat-square" /></a>
+  <a href="https://nodejs.org/en/blog/release/v18.15.0/"><img alt="NodeJS" src="https://img.shields.io/badge/node-18.15.0-important?style=flat-square" /></a>
+  <a href="https://www.npmjs.com/package/npm/v/9.5.0"><img alt="NPM" src="https://img.shields.io/badge/npm-9.5.0-61DAFB?style=flat-square" /></a>
   <a href="https://www.gatsbyjs.com/"><img alt="Made With Gatsby" src="https://img.shields.io/badge/made%20with-gatsby-blueviolet?style=flat-square" /></a>
   <a href="https://github.com/prettier/prettier"><img alt="code style: prettier" src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square?style=flat-square" /></a>
   <br/>

doc/package.json

@@ -10,19 +10,19 @@
     "serve": "gatsby serve"
   },
   "dependencies": {
-    "@mdx-js/react": "^1.6.22",
+    "@mdx-js/react": "^2.0.0",
     "@xstyled/styled-components": "^2.2.2",
-    "gatsby": "^2.15.18",
+    "gatsby": "^4.24.0",
     "parse-numeric-range": "^1.2.0",
     "prism-react-renderer": "^1.1.1",
-    "react": "^16.10.1",
+    "react": "^18.0.0",
     "react-awesome-loaders": "^0.1.35",
-    "react-dom": "^16.10.1",
+    "react-dom": "^18.0.0",
     "react-live": "^2.2.3",
     "react-player": "^2.8.2",
     "react-spring": "^9.0.0-rc.2",
     "react-use-gesture": "^9.0.1",
-    "smooth-doc": "^5.0.4",
+    "smooth-doc": "^10.1.0",
     "styled-components": "^5.2.1"
   },
   "keywords": [

doc/pages/docs/about-creator.mdx

@@ -2,6 +2,7 @@
 title: About Creator
 section: More
 order: 1
+slug: /docs/about-creator
 ---
 
 import AwesomeLoaders from "./code/rug";

doc/pages/docs/appreciate.mdx

@@ -2,6 +2,7 @@
 title: Appreciate
 section: More
 order: 2
+slug: /docs/appreciate
 ---
 
 import AwesomeLoaders from "./code/rug";

doc/pages/docs/code/examples.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { useSpring, animated } from "react-spring";
 import { useDrag } from "react-use-gesture";
-import styles from "./styles.module.css";
+import * as styles from "./styles.module.css";
 
 export function EasterDiv({ children }) {
   const [{ x, y, live }, set] = useSpring(() => ({ x: 0, y: 0, live: false }));
@@ -13,7 +13,7 @@ export function EasterDiv({ children }) {
 
   return (
     <animated.span
-      className={styles.easter}
+      className={styles?.easter}
       {...bind()}
       style={{ x, y, zIndex: live.to((a) => (a ? 10000 : 0)) }}
     >

doc/pages/docs/code/loader.js

@@ -53,7 +53,7 @@ function getLoaderList(theme) {
       <CircleLoader
         meshColor={"#6366F1"}
         lightColor={"#E0E7FF"}
-        duration={1.5}
+        duration={3}
         desktopSize={"90px"}
         mobileSize={"64px"}
       />

doc/pages/docs/contributing.mdx

@@ -2,6 +2,7 @@
 title: Contributing
 section: More
 order: 3
+slug: /docs/contributing
 ---
 
 import AwesomeLoaders from "./code/rug";

doc/pages/docs/getting-started.mdx

@@ -2,6 +2,7 @@
 title: Getting Started
 section: Introduction
 order: 1
+slug: /docs/getting-started
 ---
 
 import AwesomeLoaders from "./code/rug";

doc/pages/docs/index.mdx

@@ -1,4 +1,4 @@
 ---
 slug: /docs/
-redirect: /docs/getting-started/
+redirect: /docs/getting-started
 ---

doc/pages/docs/loaders/boltloader.mdx

@@ -1,6 +1,7 @@
 ---
 title: Bolt Loader
 section: Loaders
+slug: /docs/loaders/boltloader
 ---
 
 import { Loader } from "../code/loader.js";
@@ -46,7 +47,7 @@ Below are the parameters for **BoltLoader** that you can customize.
 
 > `size`, `desktopSize` and `mobileSize` attributes are defined relative to `64px` for all loaders and it doesn't mean the actual size would be `64px`. It means all the sizes defined will be w.r.t `64px`. If you pass `128px` then the size doubles. Also, note that if one of the `desktopSize` and `mobileSize` is not defined, then it will use the `size` attribute. Value defined in `size` attribute is assigned for mobile devices and loader automatically doubles the size on desktop device.
 
-<p align="center" style="font-size:13px;margin-top:20px;">
+<p align="center" style={{fontSize: "13px", marginTop: "20px"}}>
   ❤️ Inspired from{" "}
   <a href="https://codepen.io/aaroniker/pen/LYPrYqq">codepen</a> by{" "}
   <a href="https://dribbble.com/ai">Aaron Iker</a>

doc/pages/docs/loaders/bookloader.mdx

@@ -1,6 +1,7 @@
 ---
 title: Book Loader
 section: Loaders
+slug: /docs/loaders/bookloader
 ---
 
 import { Loader } from "../code/loader.js";
@@ -49,7 +50,7 @@ Below are the parameters for **BookLoader** that you can customize.
 
 > `size`, `desktopSize` and `mobileSize` attributes are defined relative to `64px` for all loaders and it doesn't mean the actual size would be `64px`. It means all the sizes defined will be w.r.t `64px`. If you pass `128px` then the size doubles. Also, note that if one of the `desktopSize` and `mobileSize` is not defined, then it will use the `size` attribute. Value defined in `size` attribute is assigned for mobile devices and loader automatically doubles the size on desktop device.
 
-<p align="center" style="font-size:13px;margin-top:20px;">
+<p align="center" style={{fontSize: "13px", marginTop: "20px"}}>
   ❤️ Inspired from{" "}
   <a href="https://codepen.io/aaroniker/pen/wvvKKeg">codepen</a> by{" "}
   <a href="https://dribbble.com/ai">Aaron Iker</a>

doc/pages/docs/loaders/boxesloader.mdx

@@ -1,6 +1,7 @@
 ---
 title: Boxes Loader
 section: Loaders
+slug: /docs/loaders/boxesloader
 ---
 
 import { Loader } from "../code/loader.js";
@@ -45,7 +46,7 @@ Below are the parameters for **BoxesLoader** that you can customize.
 
 > `size`, `desktopSize` and `mobileSize` attributes are defined relative to `64px` for all loaders and it doesn't mean the actual size would be `64px`. It means all the sizes defined will be w.r.t `64px`. If you pass `128px` then the size doubles. Also, note that if one of the `desktopSize` and `mobileSize` is not defined, then it will use the `size` attribute. Value defined in `size` attribute is assigned for mobile devices and loader automatically doubles the size on desktop device.
 
-<p align="center" style="font-size:13px;margin-top:20px;">
+<p align="center" style={{fontSize: "13px", marginTop: "20px"}}>
   ❤️ Inspired from <a href="https://codepen.io/aaroniker/pen/ZmOMJp">codepen</a>{" "}
   by <a href="https://dribbble.com/ai">Aaron Iker</a>
 </p>

doc/pages/docs/loaders/circleloader.mdx

@@ -1,6 +1,7 @@
 ---
 title: Circle Loader
 section: Loaders
+slug: /docs/loaders/circleloader
 ---
 
 import { Loader } from "../code/loader.js";
@@ -21,7 +22,7 @@ export const CircleLoaderComponent = () => {
       <CircleLoader
         meshColor={"#6366F1"}
         lightColor={"#E0E7FF"}
-        duration={1.5}
+        duration={3}
         desktopSize={"90px"}
         mobileSize={"64px"}
       />
@@ -50,7 +51,7 @@ Some of the color parameters like `lightColor`, `lightIntensity`, `ambientLightC
 
 > `size`, `desktopSize` and `mobileSize` attributes are defined relative to `64px` for all loaders and it doesn't mean the actual size would be `64px`. It means all the sizes defined will be w.r.t `64px`. If you pass `128px` then the size doubles. Also, note that if one of the `desktopSize` and `mobileSize` is not defined, then it will use the `size` attribute. Value defined in `size` attribute is assigned for mobile devices and loader automatically doubles the size on desktop device.
 
-<p align="center" style="font-size:13px;margin-top:20px;">
+<p align="center" style={{fontSize: "13px", marginTop: "20px"}}>
   ❤️ Inspired from{" "}
   <a href="https://codepen.io/aaroniker/pen/bGGMNPd">codepen</a> by{" "}
   <a href="https://dribbble.com/ai">Aaron Iker</a>

doc/pages/docs/loaders/flipfloploader.mdx

@@ -1,6 +1,7 @@
 ---
 title: FlipFlop Loader
 section: Loaders
+slug: /docs/loaders/flipfloploader
 ---
 
 import { Loader } from "../code/loader.js";
@@ -49,7 +50,7 @@ Some of the color parameters like `ringShiness`, `ringLightColor`, `ringLightInt
 
 > `size`, `desktopSize` and `mobileSize` attributes are defined relative to `64px` for all loaders and it doesn't mean the actual size would be `64px`. It means all the sizes defined will be w.r.t `64px`. If you pass `128px` then the size doubles. Also, note that if one of the `desktopSize` and `mobileSize` is not defined, then it will use the `size` attribute. Value defined in `size` attribute is assigned for mobile devices and loader automatically doubles the size on desktop device.
 
-<p align="center" style="font-size:13px;margin-top:20px;">
+<p align="center" style={{fontSize: "13px", marginTop: "20px"}}>
   ❤️ Inspired from{" "}
   <a href="https://codepen.io/aaroniker/pen/bGbRyRL">codepen</a> by{" "}
   <a href="https://dribbble.com/ai">Aaron Iker</a>

doc/pages/docs/loaders/scatterboxloader.mdx

@@ -1,6 +1,7 @@
 ---
 title: Scatter Box Loader
 section: Loaders
+slug: /docs/loaders/scatterboxloader
 ---
 
 import { Loader } from "../code/loader.js";
@@ -47,7 +48,7 @@ This is the only loader which is loosely written and is not auto-responsive. The
 
 The above explained limitations of this loader is because of its implementation in `css`. Creating responsiveness and dynamicity using `css` is very difficult, this is the prime example for that.
 
-<p align="center" style="font-size:13px;margin-top:20px;">
+<p align="center" style={{fontSize: "13px", marginTop: "20px"}}>
   ❤️ Inspired from{" "}
   <a href="https://codepen.io/aaroniker/pen/MWgRBdV">codepen</a> by{" "}
   <a href="https://dribbble.com/ai">Aaron Iker</a>

doc/pages/docs/loaders/squircleloader.mdx

@@ -1,6 +1,7 @@
 ---
 title: Squircle Loader
 section: Loaders
+slug: /docs/loaders/squircleloader
 ---
 
 import { Loader } from "../code/loader.js";
@@ -40,7 +41,7 @@ Below are the parameters for **SquircleLoader** that you can customize.
 
 > `size`, `desktopSize` and `mobileSize` attributes are defined relative to `64px` for all loaders and it doesn't mean the actual size would be `64px`. It means all the sizes defined will be w.r.t `64px`. If you pass `128px` then the size doubles. Also, note that if one of the `desktopSize` and `mobileSize` is not defined, then it will use the `size` attribute. Value defined in `size` attribute is assigned for mobile devices and loader automatically doubles the size on desktop device.
 
-<p align="center" style="font-size:13px;margin-top:20px;">
+<p align="center" style={{fontSize: "13px", marginTop: "20px"}}>
   ❤️ Inspired from{" "}
   <a href="https://codepen.io/chrisgannon/pen/YzqgRvG">codepen</a> by{" "}
   <a href="https://codepen.io/chrisgannon">Chris Gannon</a>

doc/pages/docs/loaders/sunspotloader.mdx

@@ -1,6 +1,7 @@
 ---
 title: Sunspot Loader
 section: Loaders
+slug: /docs/loaders/sunspotloader
 ---
 
 import { Loader } from "../code/loader.js";
@@ -48,7 +49,7 @@ You can pass one or two colors to `gradientColors`. If there is only one color,
 
 > `size`, `desktopSize` and `mobileSize` attributes are defined relative to `64px` for all loaders and it doesn't mean the actual size would be `64px`. It means all the sizes defined will be w.r.t `64px`. If you pass `128px` then the size doubles. Also, note that if one of the `desktopSize` and `mobileSize` is not defined, then it will use the `size` attribute. Value defined in `size` attribute is assigned for mobile devices and loader automatically doubles the size on desktop device.
 
-<p align="center" style="font-size:13px;margin-top:20px;">
+<p align="center" style={{fontSize: "13px", marginTop: "20px"}}>
   ❤️ Inspired from{" "}
   <a href="https://codepen.io/chrisgannon/pen/vYGozeN">codepen</a> by{" "}
   <a href="https://codepen.io/chrisgannon">Chris Gannon</a>

doc/pages/docs/loaders/threedloader.mdx

@@ -1,6 +1,7 @@
 ---
 title: ThreeD Loader
 section: Loaders
+slug: /docs/loaders/threedloader
 ---
 
 import { Loader } from "../code/loader.js";
@@ -47,7 +48,7 @@ Some of the color parameters like `colorLight`, `colorAmbientLight` are added fo
 
 > `size`, `desktopSize` and `mobileSize` attributes are defined relative to `64px` for all loaders and it doesn't mean the actual size would be `64px`. It means all the sizes defined will be w.r.t `64px`. If you pass `128px` then the size doubles. Also, note that if one of the `desktopSize` and `mobileSize` is not defined, then it will use the `size` attribute. Value defined in `size` attribute is assigned for mobile devices and loader automatically doubles the size on desktop device.
 
-<p align="center" style="font-size:13px;margin-top:20px;">
+<p align="center" style={{fontSize: "13px", marginTop: "20px"}}>
   ❤️ Inspired from <a href="https://codepen.io/aaroniker/pen/pMedQJ">codepen</a>{" "}
   by <a href="https://dribbble.com/ai">Aaron Iker</a>
 </p>

doc/pages/docs/loaders/wifiloader.mdx

@@ -1,6 +1,7 @@
 ---
 title: Wifi Loader
 section: Loaders
+slug: /docs/loaders/wifiloader
 ---
 
 import { Loader } from "../code/loader.js";
@@ -49,7 +50,7 @@ Below are the parameters for **WifiLoader** that you can customize.
 
 > `size`, `desktopSize` and `mobileSize` attributes are defined relative to `64px` for all loaders and it doesn't mean the actual size would be `64px`. It means all the sizes defined will be w.r.t `64px`. If you pass `128px` then the size doubles. Also, note that if one of the `desktopSize` and `mobileSize` is not defined, then it will use the `size` attribute. Value defined in `size` attribute is assigned for mobile devices and loader automatically doubles the size on desktop device.
 
-<p align="center" style="font-size:13px;margin-top:20px;">
+<p align="center" style={{fontSize: "13px", marginTop: "20px"}}>
   ❤️ Inspired from{" "}
   <a href="https://codepen.io/milanraring/pen/zYrYggg">codepen</a> by{" "}
   <a href="https://dribbble.com/milanraring">Milan Raring</a>

doc/pages/docs/loaders/xlviloader.mdx

@@ -1,6 +1,7 @@
 ---
 title: XLVI Loader
 section: Loaders
+slug: /docs/loaders/xlviloader
 ---
 
 import { Loader } from "../code/loader.js";
@@ -45,7 +46,7 @@ You can pass one, two or three colors to `boxColors`. If there is only one color
 
 > `size`, `desktopSize` and `mobileSize` attributes are defined relative to `64px` for all loaders and it doesn't mean the actual size would be `64px`. It means all the sizes defined will be w.r.t `64px`. If you pass `128px` then the size doubles. Also, note that if one of the `desktopSize` and `mobileSize` is not defined, then it will use the `size` attribute. Value defined in `size` attribute is assigned for mobile devices and loader automatically doubles the size on desktop device.
 
-<p align="center" style="font-size:13px;margin-top:20px;">
+<p align="center" style={{fontSize: "13px", marginTop: "20px"}}>
   ❤️ Inspired from <a href="https://codepen.io/Volorf/pen/ZVVVgM">codepen</a> by{" "}
   <a href="https://dribbble.com/Volorf">Oleg Frolov</a>
 </p>

doc/pages/docs/motivation.mdx

@@ -2,10 +2,11 @@
 title: Motivation
 section: Introduction
 order: 2
+slug: /docs/motivation
 ---
 
 import ReactPlayer from "react-player";
-import styles from "./code/video.module.css";
+import * as styles from "./code/video.module.css";
 import AwesomeLoaders from "./code/rug";
 
 # Why use React Awesome Loaders

doc/pages/docs/references.mdx

@@ -2,6 +2,7 @@
 title: References
 section: More
 order: 4
+slug: /docs/references
 ---
 
 import AwesomeLoaders from "./code/rug";

doc/pages/index.mdx

@@ -37,18 +37,18 @@ import toolsImageURL from "../images/internal/tools.svg";
       </HeroTeaser>
       <HeroActionList>
         <HeroAction>
-          <Button variant="primary" forwardedAs="a" href="/docs/">
-            Browse Docs
-          </Button>
+          <a href="/docs/getting-started" >
+            <Button variant="primary" >
+              Browse Docs
+            </Button>
+          </a>
         </HeroAction>
         <HeroAction>
-          <Button
-            variant="neutral"
-            forwardedAs="a"
-            href="https://github.com/ashutosh1919/react-awesome-loaders"
-          >
-            Github Repository
-          </Button>
+          <a href="https://github.com/ashutosh1919/react-awesome-loaders" >
+            <Button variant="neutral" >
+              Github Repository
+            </Button>
+          </a>
         </HeroAction>
       </HeroActionList>
     </HeroHalfContainer>
@@ -107,7 +107,7 @@ import toolsImageURL from "../images/internal/tools.svg";
   <Article>
     <GettingStarted />
     <SiblingNav>
-      <SiblingNavLink type="next" to="/docs/getting-started/">
+      <SiblingNavLink type="next" to="/docs/getting-started">
         Read full documentation
       </SiblingNavLink>
     </SiblingNav>

doc/src/smooth-doc/styles.css

@@ -28,6 +28,10 @@ a {
   color: var(--xstyled-colors-on-background-primary, #4c51bf);
 }
 
+footer p {
+  display: inline;
+}
+
 footer a {
   color: inherit;
 }