Merge pull request #96 from VLK-STUDIO/feature/pwa-added-to-docs

feat: added pwa plugin to documentation website

apps/web-sandbox/src/App.tsx

@@ -1,4 +1,3 @@
-import { ThemeProvider } from '@morfeo/styled-components-web';
 import { theme, Component, Variant, useStyles } from '@morfeo/react';
 import { Box, Button, Typography, ThemeToggle } from './components';
 
@@ -48,28 +47,26 @@ function App() {
   });
 
   return (
-    <ThemeProvider>
-      <Box style={containerStyle}>
-        <Box style={blockStyle}>
-          <ThemeToggle />
-          <Typography variant="code" style={codeStyle}>
-            {getStyle('Button')}
-          </Typography>
-        </Box>
-        <Box style={blockStyle}>
-          <Button variant="primary">Primary variant</Button>
-          <Typography variant="code" style={codeStyle}>
-            {getStyle('Button', 'primary')}
-          </Typography>
-        </Box>
-        <Box style={blockStyle}>
-          <Button variant="round">Round variant</Button>
-          <Typography variant="code" style={codeStyle}>
-            {getStyle('Button', 'round')}
-          </Typography>
-        </Box>
+    <Box style={containerStyle}>
+      <Box style={blockStyle}>
+        <ThemeToggle />
+        <Typography variant="code" style={codeStyle}>
+          {getStyle('Button')}
+        </Typography>
       </Box>
-    </ThemeProvider>
+      <Box style={blockStyle}>
+        <Button variant="primary">Primary variant</Button>
+        <Typography variant="code" style={codeStyle}>
+          {getStyle('Button', 'primary')}
+        </Typography>
+      </Box>
+      <Box style={blockStyle}>
+        <Button variant="round">Round variant</Button>
+        <Typography variant="code" style={codeStyle}>
+          {getStyle('Button', 'round')}
+        </Typography>
+      </Box>
+    </Box>
   );
 }
 

apps/web-sandbox/src/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ThemeProvider } from '@morfeo/styled-components-web';
 import { lightTheme, darkTheme } from '@morfeo/preset-default';
 import { morfeo, resetCss, loadFont } from '@morfeo/react';
 import { enableMorfeoDevTool } from '@morfeo/dev-tools';
@@ -28,7 +29,9 @@ loadFont({
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <ThemeProvider>
+      <App />
+    </ThemeProvider>
   </React.StrictMode>,
   document.getElementById('root'),
 );

docs/docusaurus.config.js

@@ -142,5 +142,35 @@ module.exports = {
       },
     ],
   ],
-  plugins: ['@docusaurus/theme-live-codeblock'],
+  plugins: [
+    '@docusaurus/theme-live-codeblock',
+    [
+      '@docusaurus/plugin-pwa',
+      {
+        debug: false,
+        offlineModeActivationStrategies: [
+          'appInstalled',
+          'standalone',
+          'queryString',
+        ],
+        pwaHead: [
+          {
+            tagName: 'link',
+            rel: 'icon',
+            href: '/img/logo.svg',
+          },
+          {
+            tagName: 'link',
+            rel: 'manifest',
+            href: '/manifest.json',
+          },
+          {
+            tagName: 'meta',
+            name: 'theme-color',
+            content: '#06f',
+          },
+        ],
+      },
+    ],
+  ],
 };

docs/package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@docusaurus/core": "^2.0.0-beta.8",
+    "@docusaurus/plugin-pwa": "^2.0.0-beta.8",
     "@docusaurus/preset-classic": "^2.0.0-beta.8",
     "@docusaurus/theme-live-codeblock": "^2.0.0-beta.8",
     "@docusaurus/theme-search-algolia": "^2.0.0-beta.8",

docs/static/manifest.json

@@ -0,0 +1,32 @@
+{
+  "name": "Morfeo: The theming system you were missing",
+  "short_name": "Morfeo",
+  "description": "Morfeo it's a tool to build design systems based on a theme. It helps you to follow a design language and write consistent UIs, whatever it is the framework of your choice. It's easy to use and, with the browser extension, your theme and your components are automatically documented.",
+  "theme_color": "#06f",
+  "background_color": "#fff",
+  "display": "standalone",
+  "scope": "./",
+  "start_url": "./index.html",
+  "icons": [
+    {
+      "src": "/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}