docs(:pencil:) general updates

- Adding PWA for doc site
- General PG updates
- Enabling i18n section with example

docs/docs/main-concepts/i18n.mdx

@@ -0,0 +1,26 @@
+---
+id: internationalization
+title: Internationalization
+---
+
+import '@djthoms/pretty-checkbox/src/rtl.scss';
+
+PCR doesn't contain any locale-specific strings that are rendered in the browser. Since you, the super awesome user of PCR, provides all the content, it seamlessly integrates into your i18n/l10n/g11n solution :smile:
+
+## RTL Usage
+
+PCR RTL usage requires no extra config for support; however, you **do** need to import one extra file from `@djthomps/pretty-checkbox`:
+
+```js title="index.js"
+import '@djthoms/pretty-checkbox/src/pretty-checkbox.scss';
+import '@djthoms/pretty-checkbox/src/rtl.scss';
+```
+
+In the example, below we're using the `direction` property to achiev RTL direction,
+but in most cases you'd add the `dir` attribute to the `html` tag directly.
+
+```jsx live
+<div style={{ direction: 'rtl' }}>
+    <Checkbox>مرحبا</Checkbox>
+</div>
+```

docs/docusaurus.config.js

@@ -11,7 +11,7 @@ module.exports = {
     organizationName: 'atomicpages', // Usually your GitHub org/user name.
     projectName: 'pretty-checkbox-react', // Usually your repo name.
     stylesheets: [
-        'https://unpkg.com/@djthoms/pretty-checkbox@3.0.4/dist/pretty-checkbox.min.css',
+        'https://unpkg.com/@djthoms/pretty-checkbox@3.1.0/dist/pretty-checkbox.min.css',
         'https://cdn.materialdesignicons.com/5.5.55/css/materialdesignicons.min.css',
     ],
     themeConfig: {
@@ -56,6 +56,30 @@ module.exports = {
         },
     },
     plugins: [
+        [
+            '@docusaurus/plugin-pwa',
+            {
+                debug: true,
+                offlineModeActivationStrategies: ['appInstalled', 'queryString'],
+                pwaHead: [
+                    {
+                        tagName: 'link',
+                        rel: 'icon',
+                        href: '/img/logo.png',
+                    },
+                    {
+                        tagName: 'link',
+                        rel: 'manifest',
+                        href: '/manifest.json', // your PWA manifest
+                    },
+                    {
+                        tagName: 'meta',
+                        name: 'theme-color',
+                        content: 'rgb(131, 56, 194)',
+                    },
+                ],
+            },
+        ],
         [
             '@djthoms/docusaurus-plugin-sass',
             {

docs/package.json

@@ -9,14 +9,15 @@
         "deploy": "docusaurus deploy"
     },
     "dependencies": {
+        "@djthoms/pretty-checkbox": "^3.0.3",
         "@docusaurus/core": "^2.0.0-alpha.58",
         "@docusaurus/plugin-ideal-image": "^2.0.0-alpha.58",
+        "@docusaurus/plugin-pwa": "^2.0.0-alpha.63",
         "@docusaurus/preset-classic": "^2.0.0-alpha.58",
         "@docusaurus/theme-live-codeblock": "^2.0.0-alpha.58",
         "@docusaurus/theme-search-algolia": "^2.0.0-alpha.58",
         "@mdi/js": "^5.5.55",
         "clsx": "^1.1.1",
-        "pretty-checkbox": "^3.0.3",
         "pretty-checkbox-react": "^3.0.0-alpha.1",
         "react-markdown": "^4.3.1"
     },

docs/sidebars.js

@@ -4,7 +4,7 @@ module.exports = {
         {
             'Main Concepts': [
                 'main-concepts/components',
-                // 'main-concepts/internationalization',
+                'main-concepts/internationalization',
                 'main-concepts/accessibility',
                 'main-concepts/uncontrolled',
                 'main-concepts/controlled',

docs/src/css/custom.scss

@@ -1,6 +1,6 @@
 /* stylelint-disable docusaurus/copyright-header */
 
-@import '~pretty-checkbox/src/scss/variables';
+@import '~@djthoms/pretty-checkbox/src/scss/variables';
 
 :root {
     --ifm-color-primary: #8d38c2;

docs/static/manifest.json

@@ -0,0 +1,22 @@
+{
+    "short_name": "PCR",
+    "name": "Pretty Checkbox React",
+    "description": "Pretty Checkbox React",
+    "icons": [
+        {
+            "src": "/img/logo.png",
+            "type": "image/png",
+            "sizes": "192x192"
+        },
+        {
+            "src": "/images/logo.png",
+            "type": "image/png",
+            "sizes": "512x512"
+        }
+    ],
+    "start_url": ".",
+    "background_color": "#3367D6",
+    "display": "standalone",
+    "scope": "/",
+    "theme_color": "#3367D6"
+}