docs: Some cleanup on the docs

Author: imp-dance

docs/docs/Exports/create-loader.md

@@ -44,3 +44,7 @@ A `Loader` takes ownership over...
 - Data-loading
 - Data-transformation
 - Fetch-state rendering
+
+:::caution Using version `0.3.51` or earlier?
+Please refer to the [**migration guide**](../Migrations/v0.x).
+:::

docs/docs/intro.md

@@ -5,12 +5,6 @@ slug: /
 
 # RTK Query Loader
 
-![npm](https://img.shields.io/npm/v/@ryfylke-react/rtk-query-loader?color=gray&style=flat-square)
-![npm type definitions](https://img.shields.io/npm/types/@ryfylke-react/rtk-query-loader?color=gray&label=%20&logoColor=gray)
-![npm bundle size](https://img.shields.io/bundlephobia/min/@ryfylke-react/rtk-query-loader@latest?style=flat-square)
-![npm downloads](https://img.shields.io/npm/dm/@ryfylke-react/rtk-query-loader)
-[![github stars](https://img.shields.io/github/stars/ryfylke-react-as/rtk-query-loader?style=social)](https://github.com/ryfylke-react-as/rtk-query-loader)
-
 Lets you create loaders for use with [RTK Query](https://redux-toolkit.js.org/rtk-query/overview).
 
 - [x] **Reusable**
@@ -22,14 +16,10 @@ Lets you create loaders for use with [RTK Query](https://redux-toolkit.js.org/rt
 npm i @ryfylke-react/rtk-query-loader
 ```
 
-- [Github](https://github.com/ryfylke-react-as/rtk-query-loader)
-- [NPM](https://www.npmjs.com/package/@ryfylke-react/rtk-query-loader)
-- [CodeSandbox](https://codesandbox.io/s/rtk-query-loader-demo-42tubp) (demo/playground)
+:::caution These docs are for version 1.0.0 and up
+If you are using version `0.3.51` or earlier, please refer to the [**migration guide**](./Migrations/v0.x).
+:::
 
 :::tip Getting Started
 Get started with our recommended best practises by following the [**Quick guide**](/Quick%20guide).
 :::
-
-:::danger These docs are for version 1.0.0 and up
-If you are using version `0.3.51` or earlier, please refer to the [**migration guide**](./Migrations/v0.x).
-:::

docs/docusaurus.config.js

@@ -66,14 +66,21 @@ const config = {
         },
         items: [
           {
-            href: "https://github.com/ryfylke-react-as/rtk-query-loader",
-            label: "GitHub",
+            href: "https://codesandbox.io/s/rtk-query-loader-1-0-0-demo-forked-du3936?file=/src/loaders/pokemonLoader.tsx",
+            label: "Demo",
             position: "right",
           },
           {
             href: "https://www.npmjs.com/package/@ryfylke-react/rtk-query-loader",
             label: "NPM",
             position: "right",
+            className: "icon-npm",
+          },
+          {
+            href: "https://github.com/ryfylke-react-as/rtk-query-loader",
+            label: "GitHub",
+            position: "right",
+            className: "icon-github",
           },
         ],
       },

docs/src/css/custom.css

@@ -18,7 +18,7 @@
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
-[data-theme='dark'] {
+[data-theme="dark"] {
   --ifm-color-primary: #25c2a0;
   --ifm-color-primary-dark: #21af90;
   --ifm-color-primary-darker: #1fa588;
@@ -28,3 +28,47 @@
   --ifm-color-primary-lightest: #4fddbf;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
+
+.icon-npm {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0px;
+}
+.icon-npm svg {
+  display: none;
+}
+.icon-npm::after {
+  background-image: url("https://img.shields.io/npm/v/@ryfylke-react/rtk-query-loader?color=gray&style=flat-square");
+  width: 88px;
+  height: 20px;
+  content: "";
+  display: flex;
+  border: 1px solid transparent;
+}
+.icon-npm:hover::after,
+.icon-npm:focus::after {
+  border: 1px solid currentColor;
+}
+
+.icon-github {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0px;
+}
+.icon-github svg {
+  display: none;
+}
+.icon-github::after {
+  background-image: url("https://img.shields.io/github/stars/ryfylke-react-as/rtk-query-loader?style=social");
+  width: 82px;
+  height: 20px;
+  content: "";
+  transition: transform 0.1s ease-in-out;
+  display: flex;
+}
+.icon-github:hover::after,
+.icon-github:focus::after {
+  transform: scale(1.05);
+}