Merge branch 'develop'

w3labkr · Aug 30, 2022 · 7820f5e · 7820f5e
2 parents b9a3bf2 + 4bdce54
commit 7820f5e
Show file tree

Hide file tree

Showing 9 changed files with 142 additions and 61 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -64,6 +64,40 @@ REACT_APP_GA_TRACKING_ID=UA-000000-01
 
 ## Dependencies
 
+### react-i18next
+
+react-i18next is a powerful internationalization framework for React / React Native which is based on i18next.
+
+```shell
+yarn add react-i18next i18next
+```
+
+### react-router-dom
+
+Declarative routing for React
+
+```shell
+yarn add react-router-dom
+```
+
+`src/index.js`
+
+```javascript
+root.render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>
+);
+```
+
+### react-helmet-async
+
+Thread-safe Helmet for React 16+ and friends.
+
+```shell
+yarn add react-helmet-async
+```
+
 ### Material UI
 
 Install Material UI.
@@ -96,14 +130,6 @@ In order to use prebuilt SVG Material icons, you must first install the @mui/ico
 yarn add @mui/icons-material
 ```
 
-### react-i18next
-
-react-i18next is a powerful internationalization framework for React / React Native which is based on i18next.
-
-```shell
-yarn add react-i18next i18next
-```
-
 ### Lodash
 
 A modern JavaScript utility library delivering modularity, performance, & extras.
@@ -128,43 +154,6 @@ Copy stuff into clipboard from your browser using JS
 yarn add copy-to-clipboard
 ```
 
-### gh-pages
-
-General purpose task for publishing files to a gh-pages branch on GitHub.
-
-```shell
-yarn add gh-pages
-yarn deploy
-```
-
-```json
-{
-    "homepage": "https://<username>.github.io/<repository>/",
-    "scripts": {
-        "predeploy": "npm run build",
-        "deploy": "gh-pages -d build"
-    }
-}
-```
-
-### react-router-dom
-
-Declarative routing for React
-
-```shell
-yarn add react-router-dom
-```
-
-`src/index.js`
-
-```javascript
-root.render(
-  <BrowserRouter>
-    <App />
-  </BrowserRouter>
-);
-```
-
 ### react-ga
 
 React Google Analytics Module
@@ -279,7 +268,9 @@ yarn add --dev eslint-plugin-import eslint-import-resolver-node eslint-import-re
 }
 ```
 
-## conventional-changelog-cli
+## Deployment
+
+### conventional-changelog-cli
 
 ```shell
 yarn add global conventional-changelog-cli
@@ -288,11 +279,31 @@ yarn add global conventional-changelog-cli
 ```json
 {
     "scripts": {
-        "version": "conventional-changelog -p conventionalcommits -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md"
+        "version": "conventional-changelog -p conventionalcommits -i CHANGELOG.md -s && git add CHANGELOG.md",
+        "version:init": "conventional-changelog -p conventionalcommits -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md"
     }
 }
 ```
 
 ```shell
 npm version [patch|minor|major]
 ```
+
+### gh-pages
+
+General purpose task for publishing files to a gh-pages branch on GitHub.
+
+```shell
+yarn add gh-pages
+yarn deploy
+```
+
+```json
+{
+    "homepage": "./", // "https://<username>.github.io/<repository>/"
+    "scripts": {
+        "predeploy": "npm run build",
+        "deploy": "gh-pages -d build"
+    }
+}
+```
diff --git a/build/asset-manifest.json b/build/asset-manifest.json
@@ -1,14 +1,14 @@
 {
   "files": {
     "main.css": "./static/css/main.31d6cfe0.css",
-    "main.js": "./static/js/main.e975a899.js",
+    "main.js": "./static/js/main.ee18e538.js",
     "static/js/787.f27274fa.chunk.js": "./static/js/787.f27274fa.chunk.js",
     "index.html": "./index.html",
-    "main.e975a899.js.map": "./static/js/main.e975a899.js.map",
+    "main.ee18e538.js.map": "./static/js/main.ee18e538.js.map",
     "787.f27274fa.chunk.js.map": "./static/js/787.f27274fa.chunk.js.map"
   },
   "entrypoints": [
     "static/css/main.31d6cfe0.css",
-    "static/js/main.e975a899.js"
+    "static/js/main.ee18e538.js"
   ]
 }
diff --git a/build/index.html b/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="./logo192.png"/><link rel="manifest" href="./manifest.json"/><title>React App</title><script defer="defer" src="./static/js/main.e975a899.js"></script><link href="./static/css/main.31d6cfe0.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app" data-rh="true"/><link rel="apple-touch-icon" href="./logo192.png"/><link rel="manifest" href="./manifest.json"/><title>React App</title><script defer="defer" src="./static/js/main.ee18e538.js"></script><link href="./static/css/main.31d6cfe0.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
     "name": "js-smart-shuffle-words",
     "version": "1.2.1",
     "author": "W3LabKr",
-    "description": "",
+    "description": "Shuffle the words on each line",
     "main": "src/index.js",
     "homepage": "./",
     "private": true,
@@ -20,7 +20,8 @@
         "lint:fix": "eslint --fix ./src",
         "format": "prettier --check ./src",
         "format:fix": "prettier --write ./src",
-        "version": "conventional-changelog -p conventionalcommits -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md"
+        "version": "conventional-changelog -p conventionalcommits -i CHANGELOG.md -s && git add CHANGELOG.md",
+        "version:init": "conventional-changelog -p conventionalcommits -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md"
     },
     "dependencies": {
         "@craco/craco": "^6.4.5",
@@ -40,6 +41,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-ga": "^3.3.1",
+        "react-helmet-async": "^1.3.0",
         "react-i18next": "^11.18.3",
         "react-router-dom": "^6.3.0",
         "react-scripts": "5.0.1",

diff --git a/public/index.html b/public/index.html
@@ -8,6 +8,7 @@
     <meta
       name="description"
       content="Web site created using create-react-app"
+      data-rh="true"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--

diff --git a/src/App.js b/src/App.js
@@ -2,10 +2,11 @@ import { useMemo } from 'react';
 import { useRecoilState } from 'recoil';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
-import { themeColorModeState } from '~/store/atoms/theme';
+import { themeColorModeState } from './store/atoms/theme';
 import { ColorModeContext } from './contexts/theme';
-import Page from './pages/Home';
 import useGATracker from './hooks/useGATracker';
+import Page from './pages/Home';
+import Head from './templates/Head';
 
 function App() {
   const [mode, setMode] = useRecoilState(themeColorModeState);
@@ -38,7 +39,15 @@ function App() {
     <ColorModeContext.Provider value={colorMode}>
       <ThemeProvider theme={theme}>
         <CssBaseline />
-        <Page />
+        <div className="App">
+          <Head
+            title="Smart Shuffle Words"
+            description="Shuffle the words on each line<"
+            keywords="js,javascript,react,reactjs,shuffle,words"
+            canonical="https://w3labkr.github.io/js-smart-shuffle-words/"
+          />
+          <Page />
+        </div>
       </ThemeProvider>
     </ColorModeContext.Provider>
   );

diff --git a/src/index.js b/src/index.js
@@ -1,10 +1,11 @@
 import * as React from 'react';
 import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import { HelmetProvider } from 'react-helmet-async';
+import { RecoilRoot } from 'recoil';
 import WebFont from 'webfontloader';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
-import { RecoilRoot } from 'recoil';
-import { BrowserRouter } from 'react-router-dom';
 import './locales/i18n';
 import './App.css';
 
@@ -13,7 +14,9 @@ root.render(
   <React.StrictMode>
     <RecoilRoot>
       <BrowserRouter>
-        <App />
+        <HelmetProvider>
+          <App />
+        </HelmetProvider>
       </BrowserRouter>
     </RecoilRoot>
   </React.StrictMode>

diff --git a/src/templates/Head.jsx b/src/templates/Head.jsx
@@ -0,0 +1,27 @@
+import { Helmet } from 'react-helmet-async';
+
+export default function Head({ title, description, keywords, image, url, canonical, children }) {
+  return (
+    <Helmet>
+      {title && <title>{title}</title>}
+
+      {description && <meta name="description" content={description} />}
+      {keywords && <meta name="keywords" content={keywords} />}
+
+      {title && <meta property="og:type" content="website" />}
+      {title && <meta property="og:title" content={title} />}
+      {title && <meta property="og:site_name" content={title} />}
+      {description && <meta property="og:description" content={description} />}
+      {image && <meta property="og:image" content={image} />}
+      {url && <meta property="og:url" content={url} />}
+
+      {title && <meta name="twitter:title" content={title} />}
+      {description && <meta name="twitter:description" content={description} />}
+      {image && <meta name="twitter:image" content={image} />}
+
+      {canonical && <link rel="canonical" href={canonical} />}
+
+      {children}
+    </Helmet>
+  );
+}
diff --git a/yarn.lock b/yarn.lock
@@ -6183,6 +6183,13 @@ internal-slot@^1.0.3:
     has "^1.0.3"
     side-channel "^1.0.4"
 
+invariant@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+  dependencies:
+    loose-envify "^1.0.0"
+
 ip@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ip/-/ip-2.0.0.tgz#4cf4ab182fee2314c75ede1276f8c80b479936da"
@@ -7330,7 +7337,7 @@ lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -9005,7 +9012,7 @@ prompts@^2.0.1, prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.6.2, prop-types@^15.8.1:
+prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -9183,11 +9190,27 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
+react-fast-compare@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
+  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
+
 react-ga@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-3.3.1.tgz#d8e1f4e05ec55ed6ff944dcb14b99011dfaf9504"
   integrity sha512-4Vc0W5EvXAXUN/wWyxvsAKDLLgtJ3oLmhYYssx+YzphJpejtOst6cbIHCIyF50Fdxuf5DDKqRYny24yJ2y7GFQ==
 
+react-helmet-async@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.3.0.tgz#7bd5bf8c5c69ea9f02f6083f14ce33ef545c222e"
+  integrity sha512-9jZ57/dAn9t3q6hneQS0wukqC2ENOBgMNVEhb/ZG9ZSxUetzVIw4iAmEU38IaVg3QGYauQPhSeUTuIUtFglWpg==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    invariant "^2.2.4"
+    prop-types "^15.7.2"
+    react-fast-compare "^3.2.0"
+    shallowequal "^1.1.0"
+
 react-i18next@^11.18.3:
   version "11.18.3"
   resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.18.3.tgz#50211810bcc9fdea2d70c8aefdfff5f1eb39a923"
@@ -9847,6 +9870,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
   integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
 
+shallowequal@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
+
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="./logo192.png"/><link rel="manifest" href="./manifest.json"/><title>React App</title><script defer="defer" src="./static/js/main.e975a899.js"></script><link href="./static/css/main.31d6cfe0.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app" data-rh="true"/><link rel="apple-touch-icon" href="./logo192.png"/><link rel="manifest" href="./manifest.json"/><title>React App</title><script defer="defer" src="./static/js/main.ee18e538.js"></script><link href="./static/css/main.31d6cfe0.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>