docs(:pencil:) adding RTL docs

- Upgrading docusaurus
- Adding rtl docs
- IA reorganization

docs/docs/getting-started.md

@@ -1,7 +1,7 @@
 ---
 id: getting-started
 title: Getting Started
-sidebar_label: Getting Started
+slug: /
 ---
 
 ## Installation

docs/docs/main-concepts/rtl.md

@@ -0,0 +1,26 @@
+---
+id: rtl
+title: RTL
+---
+
+Pretty Checkbox supports RTL languages starting 3.1.0.
+
+## Usage
+
+If you're using a modern bundler like webpack, parcel, or something else you can import `rtl.scss` in your `index.js`:
+
+```js title="index.js"
+import '@djthoms/pretty-checkbox/src/pretty-checkbox.scss';
+import '@djthoms/pretty-checkbox/src/rtl.scss';
+
+// ...
+```
+
+## Browsers
+
+For browsers, you can reference `rtl.css`:
+
+```html title="index.html"
+<link rel="stylesheet" href="https://unpkg.com/@djthoms/pretty-checkbox" />
+<link rel="stylesheet" href="https://unpkg.com/@djthoms/pretty-checkbox/dist/rtl.min.css" />
+```

docs/docusaurus.config.js

@@ -12,7 +12,14 @@ module.exports = {
         'https://cdn.materialdesignicons.com/5.5.55/css/materialdesignicons.min.css',
     ],
     themes: ['@docusaurus/theme-live-codeblock'],
-    plugins: ['docusaurus-plugin-sass'],
+    plugins: [
+        [
+            '@djthoms/docusaurus-plugin-sass',
+            {
+                implementation: require('sass'),
+            },
+        ],
+    ],
     themeConfig: {
         // switchConfig: {
         //     darkIcon: '🌙',
@@ -86,7 +93,6 @@ module.exports = {
             '@docusaurus/preset-classic',
             {
                 docs: {
-                    homePageId: 'getting-started',
                     sidebarPath: require.resolve('./sidebars.js'),
                     editUrl: 'https://github.com/atomicpages/pretty-checkbox/edit/master/docs/',
                 },

docs/package.json

@@ -18,7 +18,6 @@
         "@mdi/react": "^1.4.0",
         "@mdx-js/react": "^1.5.8",
         "clsx": "^1.1.1",
-        "docusaurus-plugin-sass": "^0.1.9",
         "react": "^16.8.4",
         "react-dom": "^16.8.4"
     },
@@ -34,5 +33,9 @@
             "last 1 safari version"
         ]
     },
-    "prettier": "../node_modules/@djthoms/prettier-config"
+    "prettier": "../node_modules/@djthoms/prettier-config",
+    "devDependencies": {
+        "@djthoms/docusaurus-plugin-sass": "^0.2.0",
+        "sass": "^1.26.10"
+    }
 }

docs/sidebars.js

@@ -3,14 +3,15 @@ module.exports = {
         'getting-started',
         {
             type: 'category',
-            label: 'Basic Concepts',
+            label: 'Main Concepts',
             items: [
-                'basic-concepts/intro',
-                'basic-concepts/colors',
-                'basic-concepts/shapes-size',
-                'basic-concepts/states',
-                'basic-concepts/icons',
-                'basic-concepts/animations',
+                'main-concepts/intro',
+                'main-concepts/rtl',
+                'main-concepts/colors',
+                'main-concepts/shapes-size',
+                'main-concepts/states',
+                'main-concepts/icons',
+                'main-concepts/animations',
             ],
         },
         'checkbox',