ascii-website: Bump version

package.json

@@ -9,16 +9,16 @@
     "deploy": "yarn add simple-ascii-chart --upgrade && git add . && git commit -m'ascii-website: Bump version' && git push -u origin main"
   },
   "dependencies": {
-    "next": "12.0.10",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "simple-ascii-chart": "^3.0.3"
+    "next": "13.4.19",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "simple-ascii-chart": "^4.0.0"
   },
   "devDependencies": {
-    "@types/node": "17.0.17",
-    "@types/react": "17.0.39",
-    "eslint": "8.8.0",
-    "eslint-config-next": "12.0.10",
-    "typescript": "4.5.5"
+    "@types/node": "20.6.2",
+    "@types/react": "18.2.21",
+    "eslint": "8.49.0",
+    "eslint-config-next": "13.4.19",
+    "typescript": "5.2.2"
   }
 }

pages/_app.tsx

@@ -0,0 +1,7 @@
+import { AppProps } from "next/app";
+
+import "../styles/global.css";
+
+export default function MyApp({ Component, pageProps }: AppProps<{}>) {
+  return <Component {...pageProps} />;
+}

pages/index.tsx

@@ -17,7 +17,7 @@ const Home = () => {
   const getSettings = (obj: string) => {
     try {
       return Function('"use strict";return (' + obj + ")")();
-    } catch ({ message }: unknown) {
+    } catch ({ message }: any) {
       setError(message as string);
     }
   };
@@ -35,14 +35,15 @@ const Home = () => {
         (event.target as HTMLSpanElement)?.blur();
         event.preventDefault();
         setError("");
-      } catch ({ message }: unknown) {
+      } catch ({ message }: any) {
         setError(message as string);
       }
     }
   };
 
   return (
     <>
+      <span>Plot settings:</span>
       <pre>
         <span>{`plot(`}</span>
         <span
@@ -71,11 +72,14 @@ const Home = () => {
             });
           }}
         >
-          {settings?.toString() || "undefined"}
+          {settings?.toString() || "{}"}
         </span>
         <span>{`})`}</span>
       </pre>
+      <span>Output:</span>
+
       <pre
+        className="copyable"
         onClick={() => {
           navigator.clipboard.writeText(chart);
         }}

styles/global.css

@@ -0,0 +1,10 @@
+pre {
+    padding:10px;
+    border-radius: 10px;
+    background-color: #f9f9f9;
+}
+
+.copyable:hover{
+    cursor: pointer;
+    background-color: #e8e6e6;
+}