Add a tool

Author: manhtai

package.json

@@ -168,6 +168,7 @@
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/history": "4.7.6",
     "@types/jest": "^26.0.15",
+    "@types/marked": "^2.0.4",
     "@types/node": "14.14.10",
     "@types/react": "^16.9.44",
     "@types/react-dom": "^16.9.9",
@@ -240,11 +241,14 @@
     "yarn-deduplicate": "^3.1.0"
   },
   "dependencies": {
+    "@tailwindcss/typography": "^0.4.1",
     "caniuse-lite": "^1.0.30001246",
+    "dayjs": "^1.10.6",
     "electron-debug": "^3.1.0",
     "electron-log": "^4.2.4",
     "electron-updater": "^4.3.4",
     "history": "^5.0.0",
+    "marked": "^2.1.3",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",

src/App.tsx

@@ -1,5 +1,10 @@
 import React from 'react';
-import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Redirect,
+} from 'react-router-dom';
 import Main from './components/Main';
 import './App.global.css';
 
@@ -9,6 +14,7 @@ export default function App() {
       <Switch>
         <Route path="/" component={Main} />
       </Switch>
+      <Redirect from="*" to="/unix" />
     </Router>
   );
 }

src/components/Main.tsx

@@ -5,16 +5,16 @@ import UnixTimestamp from './unix-timestamp/UnixTimestamp';
 
 const Main = () => {
   const routes = [
+    {
+      path: '/unix',
+      name: 'Unix Time Converter',
+      Component: UnixTimestamp,
+    },
     {
       path: '/md-to-html',
       name: 'Markdown to HTML',
       Component: MarkdownToHtml,
     },
-    {
-      path: '/unix',
-      name: 'Unix Converter',
-      Component: UnixTimestamp,
-    },
   ];
 
   return (
@@ -23,7 +23,7 @@ const Main = () => {
         {/* Left sidebar */}
         <nav className="flex flex-col w-1/4 overflow-x-hidden overflow-y-auto bg-gray-200">
           <div
-            className="px-2 mt-6"
+            className="px-2 my-6"
             role="menu"
             aria-orientation="horizontal"
             aria-labelledby="options-menu"
@@ -42,8 +42,8 @@ const Main = () => {
         </nav>
 
         {/* Main content */}
-        <section className="relative flex flex-col w-full bg-gray-100">
-          <div className="h-full overflow-x-hidden overflow-y-auto">
+        <section className="relative flex flex-col w-full bg-gray-100 text-base">
+          <div className="h-full overflow-x-hidden overflow-y-auto px-6 my-6">
             {routes.map(({ path, Component }) => (
               <Route key={path} exact path={path}>
                 <Component />

src/components/md-to-html/MarkdownToHtml.tsx

@@ -1,5 +1,28 @@
-import React from 'react';
+/* eslint-disable react/no-danger */
+import React, { useState } from 'react';
+import marked from 'marked';
 
-const Md2Html = () => <div>Use `marked` here!</div>;
+const Md2Html = () => {
+  const [md, setMd] = useState('# Hello\n> This is a quote');
+
+  const handleChange = (evt: { target: { value: string } }) =>
+    setMd(evt.target.value);
+
+  return (
+    <div className="flex min-h-full">
+      <textarea
+        onChange={handleChange}
+        className="flex-1 min-h-full bg-white p-4 whitespace-pre"
+        value={md}
+      />
+      <div className="mx-1" />
+      <textarea
+        className="flex-1 min-h-full bg-blue-100 p-4 whitespace-pre"
+        value={marked(md)}
+        disabled
+      />
+    </div>
+  );
+};
 
 export default Md2Html;

src/components/unix-timestamp/UnixTimestamp.tsx

@@ -1,5 +1,25 @@
-import React from 'react';
+import dayjs from 'dayjs';
+import React, { useState, useEffect } from 'react';
 
-const UnixTimestampConverter = () => <div>Use `dayjs` here!</div>;
+const UnixTimestampConverter = () => {
+  const [date, setDate] = useState(dayjs());
+
+  useEffect(() => {
+    const timerID = setInterval(() => setDate(dayjs()), 1000);
+
+    return function cleanup() {
+      clearInterval(timerID);
+    };
+  });
+
+  return (
+    <div>
+      The current Unix epoch time is
+      <span className="text-lg bg-blue-200 mx-2 p-2 rounded inline-flex items-center content-center">
+        {date.unix()}
+      </span>
+    </div>
+  );
+};
 
 export default UnixTimestampConverter;

tailwind.config.js

@@ -1,5 +1,7 @@
+const typography = require('@tailwindcss/typography');
+
 module.exports = {
   theme: {},
   variants: {},
-  plugins: [],
+  plugins: [typography],
 };

yarn.lock

@@ -1439,6 +1439,16 @@
   dependencies:
     defer-to-connect "^2.0.0"
 
+"@tailwindcss/typography@^0.4.1":
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.4.1.tgz#51ddbceea6a0ee9902c649dbe58871c81a831212"
+  integrity sha512-ovPPLUhs7zAIJfr0y1dbGlyCuPhpuv/jpBoFgqAc658DWGGrOBWBMpAWLw2KlzbNeVk4YBJMzue1ekvIbdw6XA==
+  dependencies:
+    lodash.castarray "^4.4.0"
+    lodash.isplainobject "^4.0.6"
+    lodash.merge "^4.6.2"
+    lodash.uniq "^4.5.0"
+
 "@teamsupercell/typings-for-css-modules-loader@^2.4.0":
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/@teamsupercell/typings-for-css-modules-loader/-/typings-for-css-modules-loader-2.4.0.tgz#b15f9f0e6efb37cc84eede162eba9f1ff4dda96c"
@@ -1663,6 +1673,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/marked@^2.0.4":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@types/marked/-/marked-2.0.4.tgz#34a0ea548afe6e0c01095229d47b48b2af650613"
+  integrity sha512-L9VRSe0Id8xbPL99mUo/4aKgD7ZoRwFZqUQScNKHi2pFjF9ZYSMNShUHD6VlMT6J/prQq0T1mxuU25m3R7dFzg==
+
 "@types/minimatch@*":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
@@ -4101,6 +4116,11 @@ date-fns@^2.0.1:
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.16.1.tgz#05775792c3f3331da812af253e1a935851d3834b"
   integrity sha512-sAJVKx/FqrLYHAQeN7VpJrPhagZc9R4ImZIWYRFZaaohR3KzmuK88touwsSwSVT8Qcbd4zoDsnGfX4GFB4imyQ==
 
+dayjs@^1.10.6:
+  version "1.10.6"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.6.tgz#288b2aa82f2d8418a6c9d4df5898c0737ad02a63"
+  integrity sha512-AztC/IOW4L1Q41A86phW5Thhcrco3xuAA+YX/BLpLWWjRcTj5TOt/QImBLmCKlrF7u7k47arTnOyL6GnbG8Hvw==
+
 [email protected], debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -7850,6 +7870,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash.castarray@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.castarray/-/lodash.castarray-4.4.0.tgz#c02513515e309daddd4c24c60cfddcf5976d9115"
+  integrity sha1-wCUTUV4wna3dTCTGDP3c9ZdtkRU=
+
 lodash.escape@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-4.0.1.tgz#c9044690c21e04294beaa517712fded1fa88de98"
@@ -7865,11 +7890,21 @@ lodash.isequal@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
   integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=
 
+lodash.isplainobject@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
+  integrity sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=
+
 [email protected], lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
+lodash.merge@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
@@ -8003,6 +8038,11 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+marked@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-2.1.3.tgz#bd017cef6431724fd4b27e0657f5ceb14bff3753"
+  integrity sha512-/Q+7MGzaETqifOMWYEA7HVMaZb4XbcRfaOzcSsHZEith83KGlvaSG33u0SKu89Mj5h+T8V2hM+8O45Qc5XTgwA==
+
 matcher@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/matcher/-/matcher-3.0.0.tgz#bd9060f4c5b70aa8041ccc6f80368760994f30ca"