Update struct [major]

.gitignore

@@ -23,4 +23,5 @@ yarn-debug.log*
 yarn-error.log*
 .firebase
 .vscode
-.next
+.next
+out

firebase.json

@@ -1,6 +1,6 @@
 {
   "hosting": {
-    "public": "build",
+    "public": "out",
     "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
   }
 }

package.json

@@ -14,10 +14,12 @@
   },
   "license": "MIT",
   "dependencies": {
+    "animate.css": "^4.1.1",
     "classnames": "^2.3.1",
-    "hotkeys-js": "^3.8.7",
     "lodash": "^4.17.21",
     "lookie": "^0.6.0",
+    "mousetrap": "^1.6.5",
+    "mousetrap-global-bind": "^1.1.0",
     "next": "12.0.3",
     "rc-progress": "^3.1.4",
     "react": "17.0.2",

src/components/FlagBox/index.jsx

@@ -3,12 +3,11 @@ import { useCallback, useEffect, useMemo } from "react";
 import Checkbox from "../Checkbox";
 import Shortcut from "../Shortcut";
 
+import Mousetrap from "../../utils/mousetrap";
 import tagWrapper from "../../utils/tagWrapper";
-import hotkeys from "../../utils/hotkeys";
-
 import shortcuts from "../../shortcuts";
 
-const FlagBox = ({ flags, setFlags }) => {
+const FlagBox = ({ flags, setFlags, onChange }) => {
   const flagList = useMemo(
     () => [
       {
@@ -40,8 +39,9 @@ const FlagBox = ({ flags, setFlags }) => {
       } else {
         setFlags((flags || "") + flag);
       }
+      onChange(true);
     },
-    [flags, setFlags]
+    [flags, setFlags, onChange]
   );
 
   const handleClick = ({ target }) => {
@@ -51,7 +51,7 @@ const FlagBox = ({ flags, setFlags }) => {
 
   useEffect(() => {
     flagList.forEach((flag) => {
-      hotkeys(flag.command, (e) => {
+      Mousetrap.bindGlobal(flag.command, (e) => {
         e.preventDefault();
 
         toggleFlag(flag.code);
@@ -60,7 +60,7 @@ const FlagBox = ({ flags, setFlags }) => {
 
     return () => {
       flagList.forEach((flag) => {
-        hotkeys.unbind(flag.code);
+        Mousetrap.unbind(flag.code);
       });
     };
   }, [flagList, toggleFlag]);

src/components/Header/index.jsx

@@ -1,13 +1,13 @@
-import { useRef } from "react";
+/* eslint-disable @next/next/no-img-element */
 import ReactTooltip from "react-tooltip";
 import { FormattedMessage } from "react-intl";
 import Link from "next/link";
+import dynamic from "next/dynamic";
 
 import Icon from "../Icon";
-import LanguageSwitch from "../LanguageSwitch";
+const LanguageSwitch  = dynamic(import("../LanguageSwitch"), { ssr: false });
 
 function LandingHeader() {
-  const playgroundRef = useRef(null);
 
   return (
     <div className="landing-header">
@@ -18,7 +18,9 @@ function LandingHeader() {
             icon="unlocked"
             removeInlineStyle
           />
-          <span className="landing-header-brand-name">RegexLearn</span>
+          <span className="landing-header-brand-name">
+            <img width={99} height={24} src="/logo.png" alt="RegexLearn" />
+            </span>
         </a>
       </Link>
 
@@ -31,16 +33,29 @@ function LandingHeader() {
         >
           <Icon className="landing-link-github-icon" icon="github" size={20} />
         </a>
-        <Link href="/learn" passHref>
+        <Link href="/learn.html" passHref>
           <a className="landing-header-link landing-link-learn">
             <FormattedMessage id="landing.learn" />
           </a>
         </Link>
         <span
-          ref={playgroundRef}
           className="landing-header-link landing-link-playground"
           data-tip
-          data-for="playground-link"
+          data-for="coming-soon"
+        >
+          <span className="landing-link-playground-name">
+            <FormattedMessage id="landing.cheatsheet" />
+          </span>
+          <Icon
+            icon="lock"
+            size={16}
+            className="landing-link-playground-icon"
+          />
+        </span>
+        <span
+          className="landing-header-link landing-link-playground"
+          data-tip
+          data-for="coming-soon"
         >
           <span className="landing-link-playground-name">
             <FormattedMessage id="landing.playground" />
@@ -50,17 +65,17 @@ function LandingHeader() {
             size={16}
             className="landing-link-playground-icon"
           />
-          <ReactTooltip
+        </span>
+        <ReactTooltip
             backgroundColor="#444"
             arrowColor="#444"
             clickable
-            id="playground-link"
+            id="coming-soon"
             place="bottom"
             effect="solid"
           >
             <FormattedMessage id="general.comingSoon" />
           </ReactTooltip>
-        </span>
         <LanguageSwitch />
       </div>
     </div>

src/components/Hint/index.jsx

@@ -2,9 +2,9 @@ import { useState, useEffect, useRef } from "react";
 import ReactTooltip from "react-tooltip";
 import { FormattedMessage } from "react-intl";
 
-import Shortcut from "../Shortcut";
-import hotkeys from "../../utils/hotkeys";
+import Mousetrap from "../../utils/mousetrap";
 import shortcuts from "../../shortcuts";
+import Shortcut from "../Shortcut";
 
 
 
@@ -13,15 +13,15 @@ const Hint = ({ regex, flags }) => {
   const [showStatus, setShowStatus] = useState(false);
 
   useEffect(() => {
-    hotkeys(shortcuts.hint, function(event, handler){
+    Mousetrap.bindGlobal(shortcuts.hint, function(event, handler){
       event.preventDefault();
       ReactTooltip.show(hintRef.current);
       setShowStatus(true);
     });
 
 
     return () => {
-      hotkeys.unbind(shortcuts.hint);
+      Mousetrap.unbind(shortcuts.hint);
       ReactTooltip.hide(hintRef.current);
       setShowStatus(false);
     };

src/components/InteractiveArea/index.jsx

@@ -6,7 +6,7 @@ import cx from "classnames";
 import _ from "lodash";
 import lookie from "lookie";
 
-import hotkeys from "../../utils/hotkeys";
+import Mousetrap from "../../utils/mousetrap";
 import setCaretPosition from "../../utils/setCaretPosition";
 import tagWrapper from "../../utils/tagWrapper";
 
@@ -28,6 +28,8 @@ function InteractiveArea({ data, step, isShow, parentError, onChangeSuccess }) {
   const [match, setMatch] = useState(false);
 
   const checkRegex = () => {
+    if (data.interactive === false) return true;
+
     try {
       let $regex = regex;
       [...$regex.matchAll(/\\(\d+)/g)].forEach((item) => {
@@ -125,7 +127,7 @@ function InteractiveArea({ data, step, isShow, parentError, onChangeSuccess }) {
 
     checkRegex();
     setContent(data.content);
-    setFlags(isCompletedStep ? data.flags : data.initialFlags);
+    setFlags(isCompletedStep ? data.flags : data.initialFlags || "");
     setRegex((isCompletedStep ? data.regex[0] : data.initialValue) || "");
     setIsChanged(false);
     blurInput();
@@ -140,13 +142,12 @@ function InteractiveArea({ data, step, isShow, parentError, onChangeSuccess }) {
   }, [success, onChangeSuccess]);
 
   useEffect(() => {
-
-    hotkeys(shortcuts.focus, (e) => {
+    Mousetrap.bindGlobal(shortcuts.focus, (e) => {
       e.preventDefault();
       focusInput();
     });
 
-    return () => hotkeys.unbind(shortcuts.focus);
+    return () => Mousetrap.unbind(shortcuts.focus);
   }, []);
 
   useEffect(checkRegex, [regex, flags, step]);
@@ -195,7 +196,7 @@ function InteractiveArea({ data, step, isShow, parentError, onChangeSuccess }) {
             spellCheck={false}
           />
         </div>
-        {data.useFlagsControl && <FlagBox flags={flags} setFlags={setFlags} />}
+        {data.useFlagsControl && <FlagBox onChange={setIsChanged} flags={flags} setFlags={setFlags} />}
       </div>
     </div>
   );

src/components/LanguageSwitch/index.jsx

@@ -6,7 +6,7 @@ import Shortcut from "../Shortcut";
 import langs, { langNames } from "../../localization";
 import shortcuts from "../../shortcuts";
 import { Context } from "../../contexts/LanguageContext";
-import hotkeys from "../../utils/hotkeys";
+import Mousetrap from "../../utils/mousetrap";
 
 
 const langList = Object.keys(langs).map((langKey) => ({
@@ -32,17 +32,17 @@ const LanguageSwitch = () => {
   const availableLangList = langList.filter((item) => item.value !== lang);
 
   useEffect(() => {
-    hotkeys(shortcuts.languageSwitch, toggleVisible);
+    Mousetrap.bindGlobal(shortcuts.languageSwitch, toggleVisible);
 
     availableLangList.forEach((item, index) => {
-      hotkeys(`${shortcuts.languageSwitch}+${index + 1}`, (e) => {
+      Mousetrap.bindGlobal(`${shortcuts.languageSwitch}+${index + 1}`, (e) => {
         e.preventDefault();
         setLang(item.value);
       });
     });
 
     return () =>
-      hotkeys.unbind([
+      Mousetrap.unbind([
         shortcuts.languageSwitch,
         ...availableLangList.map(
           (item, index) => `${shortcuts.languageSwitch}+${index}`

src/components/LearnHeader/index.jsx

@@ -8,7 +8,7 @@ const Header = ({ steps, step }) => (
   <header className="header">
     <div className="header-social">
       <Link href="/" passHref>
-        <Icon icon="home" size={20} color="white" />
+        <a><Icon icon="home" size={20} color="white" /></a>      
       </Link>
       <a
         href="https://github.com/aykutkardas/regexlearn.com"

src/components/LearnPage/index.jsx

@@ -6,10 +6,9 @@ import Header from "../LearnHeader";
 import Step from "../Step";
 import Navigation from "../Navigation";
 
+import Mousetrap from "../../utils/mousetrap";
 import data from "../../data.json";
 import shortcuts from "../../shortcuts";
-import hotkeys from "../../utils/hotkeys";
-
 
 export default function Learn() {
   const progress = lookie.get("completedSteps") || [];
@@ -51,21 +50,20 @@ export default function Learn() {
   );
 
   const onChangeSuccess = (status) => {
-    console.log({status})
     setSuccess(status);
   };
 
   useEffect(() => {
-    hotkeys(shortcuts.rootKey, (e) => e.preventDefault());
-    hotkeys(shortcuts.prevStep, prevStep);
-    hotkeys(shortcuts.nextStep, nextStep);
+    Mousetrap.bindGlobal(shortcuts.rootKey, (e) => e.preventDefault());
+    Mousetrap.bindGlobal(shortcuts.prevStep, prevStep);
+    Mousetrap.bindGlobal(shortcuts.nextStep, nextStep);
 
     lookie.set("lastStep", step);
 
     return () => {
-      hotkeys.unbind(shortcuts.rootKey);
-      hotkeys.unbind(shortcuts.prevStep);
-      hotkeys.unbind(shortcuts.nextStep);
+      Mousetrap.unbind(shortcuts.rootKey);
+      Mousetrap.unbind(shortcuts.prevStep);
+      Mousetrap.unbind(shortcuts.nextStep);
     }
   }, [step, success, prevStep, nextStep]);
 

src/data.json

@@ -407,6 +407,7 @@
     "content": "(*) Asteriks.",
     "initialFlags": "g",
     "initialValue": "(*|.)",
+    "cursorPosition": 1,
     "flags": "g",
     "regex": ["(\\*|\\.)"],
     "answer": ["*", "."]

src/localization/en-us.json

@@ -12,6 +12,7 @@
 
   "landing.learn": "Learn",
   "landing.playground": "Playground",
+  "landing.cheatsheet": "Cheat Sheet",
 
   "notFound.intro": "The page you are looking for does not exist.",
   "notFound.button": "Back to home",

src/localization/tr-tr.json

@@ -12,6 +12,7 @@
 
   "landing.learn": "Öğren",
   "landing.playground": "Playground",
+  "landing.cheatsheet": "Cheat Sheet",
 
   "notFound.intro": "Aradığın sayfa mevcut değil.",
   "notFound.button": "Anasayfaya dön",

src/pages/_app.js

@@ -1,11 +1,15 @@
 import '../styles/globals.scss'
 import '../styles/index.scss'
+import "react-toastify/dist/ReactToastify.css";
+import "animate.css";
 
 import { useState, useEffect } from 'react';
 import { FormattedMessage, IntlProvider } from "react-intl";
 import cx from "classnames";
 import lookie from "lookie";
 import dynamic from 'next/dynamic'
+import Head from 'next/head'
+import { ToastContainer } from "react-toastify";
 
 import { Provider as LanguageProvider } from "../contexts/LanguageContext";
 import localization from "../localization";
@@ -37,6 +41,11 @@ function MyApp({ Component, pageProps }) {
     >
       <LanguageProvider lang={lang} setLang={handleChangeLang}>
         <div className={cx("App", { desktop: isDesktop })}>
+          <ToastContainer />
+          <Head>
+            <link rel="shortcut icon" href="/favicon.svg" />
+            <meta name="description" content="Learn RegEx, step by step, zero to advanced. Playground and Cheat Sheet." />
+          </Head>
           <DynamicAlert>
             <FormattedMessage id="alert.site.under.development" />
           </DynamicAlert>