Bump version to 1.0.0

* Add ROT-Tool
* Switch to Lucide-React-Icons
* Prerender pages for SEO
* Add titles for SEO
* Add tags for SEO
* Add dark-mode (using device preferred mode)

src/tools/ToolLoader.js

@@ -1,8 +1,11 @@
-import React, { lazy } from "react";
+import React from "react";
 import { useParams } from "react-router";
+import prerenderedLoadable from "../helpers/prerenderedLoadable";
 import NotFoundPage from "../pages/NotFound";
 
-const HomePage = lazy(() => import('../pages/Home'));
+
+const HomePage = prerenderedLoadable(() => import('../pages/Home'));
+const RotTool = prerenderedLoadable(() => import('./cyphers_and_cryptography/rot/RotTool'));
 
 const ToolLoader = () => {
     const {tool} = useParams();
@@ -11,6 +14,9 @@ const ToolLoader = () => {
         case "test":
             return <HomePage/>;
 
+        case "rot":
+            return <RotTool/>;
+
         default:
             return <NotFoundPage/>;
     }

src/tools/cyphers_and_cryptography/rot/RotTool.js

@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from "react";
+import { AlertOctagon } from "lucide-react";
+import { useTranslation, Trans } from "react-i18next";
+import BoxMessage from "../../../components/BoxMessage";
+import * as styles from "./RotTool.module.scss"
+import { Helmet } from "react-helmet";
+
+const RotTool = () => {
+    const { t } = useTranslation();
+
+    let [input, setInput] = useState("");
+    let [output, setOutput] = useState("");
+    let [offset, setOffset] = useState(13);
+    let [reversed, setReversed] = useState(false)
+    let [outOfRangeWarning, setOutOfRangeWarning] = useState(false)
+
+    useEffect(() => {
+        let actualOffset = offset;
+        if(reversed) actualOffset = -offset;
+        
+        let min = 97; // This is a
+        let max = 122; // This is z
+        let range = max - min; // The length of the alphabet
+
+        let rotInput = reversed ? output.toLowerCase() : input.toLowerCase();
+
+        rotInput = rotInput.split('');
+        
+        let hasOutOfRange = false;
+
+        let rotOut = rotInput.map((char) => {
+            let charCode = char.charCodeAt(0);
+
+            if(charCode > max || charCode < min) {
+                hasOutOfRange = true;
+                return char;
+            }
+
+            charCode += actualOffset;
+
+            while(charCode > max) charCode -= range;
+            while(charCode < min) charCode += range;
+
+            return String.fromCharCode(charCode);
+        })
+
+        setOutOfRangeWarning(hasOutOfRange);
+
+        rotOut = rotOut.join('').toUpperCase();
+
+        reversed ? setInput(rotOut) : setOutput(rotOut)
+    }, [input, output, reversed, offset])
+    
+    return (
+        <div>
+            <Helmet>
+                <title>{t("tools.cryptography.rot.title")} | {t("site.title")}</title>
+                <meta name="keywords" content="ROT, encryption, decryption, verschlüsselung, entschlüsselung, ROT-13, Caesar-cipher, cipher, caesar, cäsar-chiffre, tool" />
+            </Helmet>
+            <div className={styles.layoutBox}>
+                <h1>{t("tools.cryptography.rot.title")}</h1>
+
+                <p><Trans i18nKey={"tools.cryptography.rot.description"} components={{wikipedia: <a href="https://en.wikipedia.org/wiki/ROT13">xxx</a>, pre: <pre/>}} /></p>
+
+                <BoxMessage icon={AlertOctagon} color="red" hideInPlace={!outOfRangeWarning}>{t("tools.cryptography.rot.outOfRangeWarning")}</BoxMessage>
+
+                <label for="rot-input">{t("tools.cryptography.common.cleartext")}</label>
+                <textarea id="rot-input" placeholder={t("tools.cryptography.common.cleartext")} onChange={(e) => {setReversed(false); setInput(e.currentTarget.value.toUpperCase());}} value={input}></textarea>
+
+                <label for="rot-offset" className={styles.center}>{t("tools.cryptography.rot.offset")}</label>
+                <input type="number" id="rot-offset" value={offset} onChange={(e) => {setOffset(parseInt(e.currentTarget.value))}} className={styles.center} />
+
+                <label for="rot-output">{t("tools.cryptography.common.ciphertext")}</label>
+                <textarea id="rot-output" placeholder={t("tools.cryptography.common.ciphertext")} onChange={(e) => {setReversed(true); setOutput(e.currentTarget.value.toUpperCase());}} value={output}></textarea>
+            </div>
+        </div>
+    )
+}
+
+export default RotTool;

src/tools/cyphers_and_cryptography/rot/RotTool.module.scss

@@ -0,0 +1 @@
+@import "../../../common";

src/tools/tools.json

@@ -9,12 +9,13 @@
             "hidden": true
         },
         {
-            "name": "Test02",
+            "name": "ROT-N",
             "external": false,
-            "urlname": "test",
-            "icon": "Smile",
-            "category": "something",
-            "hidden": true
+            "urlname": "rot",
+            "icon": "PlusSquare",
+            "category": "cryptography",
+            "hidden": false,
+            "keywords": "rot, rot-n, caesar, rotation, cryptography, encryption, decryption"
         }
     ]
 }