[Updated - v0.1.4]

- [Added] Footer and Version - [Added] `404.html` page
owlsome-official · Aug 2, 2021 · 741a5d2 · 741a5d2
1 parent afdc607
commit 741a5d2
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,14 @@
 # Changelog
 
+## v0.1.4
+
+- [Added] Footer and Version
+- [Added] `404.html` page
+
+## v0.1.3
+
+- [Added] Redirect when not match any route
+
 ## v0.1.2
 
 - [Added] URL basename

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "encrypt-tools",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "private": true,
   "homepage": "http://buildingwatsize.github.io/encrypt-tools",
   "dependencies": {

diff --git a/public/404.html b/public/404.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/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="%PUBLIC_URL%/logo192.png" />
+  <title>Encrypt Tools</title>
+  <script type="text/javascript">
+    window.location.href = "/encrypt-tools"
+  </script>
+</head>
+
+<body>
+</body>
+
+</html>
diff --git a/public/index.html b/public/index.html
@@ -13,6 +13,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" crossorigin="anonymous" />
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/css?family=Muli&display=swap" rel="stylesheet">
   <!--

diff --git a/src/App.js b/src/App.js
@@ -9,6 +9,7 @@ import InputGroup from './components/Input/InputGroup';
 import InputWithLabel from './components/Input/InputWithLabel';
 import TextareaWithLabel from './components/Input/TextareaWithLabel';
 import ResultSection from './components/ResultSection';
+import Footer from './components/Footer';
 import { decryptAES, encryptAES } from './utils/crypto';
 import { DECRYPTION_MODE, ENCRYPTION_MODE } from './utils/constants';
 
@@ -77,6 +78,7 @@ function App({ history }) {
         </InputGroup>
         <ResultSection result={result} />
 
+        <Footer />
       </div>
     </div>
   );

diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js
@@ -0,0 +1,30 @@
+import React from 'react'
+
+const buyMeACoffeeLink = "https://www.buymeacoffee.com/watsize"
+const githubLink = "https://github.com/buildingwatsize/encrypt-tools"
+const githubIcon = <svg xmlns="http://www.w3.org/2000/svg" className="w-5 mr-2" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" /></svg>
+
+function Footer() {
+  return (
+    <div>
+      <div className="flex justify-center items-center text-lg pt-4">
+        <a
+          href={buyMeACoffeeLink}
+          className="px-4"
+          target="_blank" rel="noreferrer"
+          aria-label="Follow @watsize on Buy me a coffee">
+          <img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style={{ width: "8rem" }} />
+        </a>
+        <a
+          href={githubLink}
+          className="px-4 flex items-baseline"
+          target="_blank" rel="noreferrer"
+          aria-label="Follow @buildingwatsize on GitHub">
+          {githubIcon} Github
+        </a>
+      </div>
+    </div>
+  )
+}
+
+export default Footer
diff --git a/src/components/Title/index.js b/src/components/Title/index.js
@@ -1,8 +1,9 @@
 import React from 'react'
+import { version } from "../../../package.json"
 
 function Title({ name }) {
   return (
-    <span className="text-3xl text-center block font-bold pb-3 px-4">{name}</span>
+    <span className="text-3xl text-center block font-bold pb-3 px-4">{name} v{version}</span>
   )
 }
 

diff --git a/src/index.js b/src/index.js
@@ -15,7 +15,7 @@ ReactDOM.render(
         <Route path="/" exact>
           <Redirect to="/encrypt" />
         </Route>
-        <Route path="/:mode" children={<App />} />
+        <Route path="/:mode" component={App} />
         <Redirect to="/encrypt" />
       </Switch>
     </React.StrictMode>