HTML preview

Author: manhtai

package.json

@@ -241,6 +241,11 @@
     "yarn-deduplicate": "^3.1.0"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.35",
+    "@fortawesome/free-brands-svg-icons": "^5.15.3",
+    "@fortawesome/free-regular-svg-icons": "^5.15.3",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
+    "@fortawesome/react-fontawesome": "^0.1.14",
     "@tailwindcss/typography": "^0.4.1",
     "caniuse-lite": "^1.0.30001246",
     "dayjs": "^1.10.6",

src/App.tsx

@@ -7,6 +7,7 @@ import {
 } from 'react-router-dom';
 import Main from './components/Main';
 import './App.global.css';
+import './helpers/fontAwesome';
 
 export default function App() {
   return (

src/components/Main.tsx

@@ -1,20 +1,30 @@
 import React from 'react';
 import { NavLink, Route } from 'react-router-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import MarkdownToHtml from './md-to-html/MarkdownToHtml';
 import UnixTimestamp from './unix-timestamp/UnixTimestamp';
+import HtmlPreview from './html-preview/HtmlPreview';
 
 const Main = () => {
   const routes = [
     {
+      icon: <FontAwesomeIcon icon="clock" />,
       path: '/unix',
       name: 'Unix Time Converter',
       Component: UnixTimestamp,
     },
     {
+      icon: <FontAwesomeIcon icon={['fab', 'markdown']} />,
       path: '/md-to-html',
       name: 'Markdown to HTML',
       Component: MarkdownToHtml,
     },
+    {
+      icon: <FontAwesomeIcon icon={['fab', 'html5']} />,
+      path: '/html-preview',
+      name: 'HTML Preview',
+      Component: HtmlPreview,
+    },
   ];
 
   return (
@@ -28,13 +38,14 @@ const Main = () => {
             aria-orientation="horizontal"
             aria-labelledby="options-menu"
           >
-            {routes.map(({ path, name }) => (
+            {routes.map(({ path, name, icon }) => (
               <NavLink
                 to={path}
                 key={path}
-                className="block rounded-lg px-3 py-1 mb-1"
+                className="rounded-lg px-3 py-1 mb-1 space-x-1 items-center justify-start flex"
                 activeClassName="bg-blue-400 text-white"
               >
+                <span className="w-6">{icon}</span>
                 {name}
               </NavLink>
             ))}

src/components/html-preview/HtmlPreview.tsx

@@ -0,0 +1,28 @@
+/* eslint-disable react/no-danger */
+import React, { useState } from 'react';
+
+const HtmlPreview = () => {
+  const [html, setHtml] = useState(
+    '<h1>Hello</h1>\n<quote>This is a quote</quote>'
+  );
+
+  const handleChange = (evt: { target: { value: string } }) =>
+    setHtml(evt.target.value);
+
+  return (
+    <div className="flex min-h-full">
+      <textarea
+        onChange={handleChange}
+        className="flex-1 min-h-full bg-white p-4"
+        value={html}
+      />
+      <div className="mx-1" />
+      <section
+        className="flex-1 min-h-full bg-blue-50 p-4 prose"
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+    </div>
+  );
+};
+
+export default HtmlPreview;

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

@@ -1,4 +1,3 @@
-/* eslint-disable react/no-danger */
 import React, { useState } from 'react';
 import marked from 'marked';
 
@@ -12,12 +11,12 @@ const Md2Html = () => {
     <div className="flex min-h-full">
       <textarea
         onChange={handleChange}
-        className="flex-1 min-h-full bg-white p-4 whitespace-pre"
+        className="flex-1 min-h-full bg-white p-4"
         value={md}
       />
       <div className="mx-1" />
       <textarea
-        className="flex-1 min-h-full bg-blue-100 p-4 whitespace-pre"
+        className="flex-1 min-h-full bg-blue-100 p-4"
         value={marked(md)}
         disabled
       />

src/components/qrcode/QrCode.tsx

@@ -0,0 +1,5 @@
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { fab, faMarkdown, faHtml5 } from '@fortawesome/free-brands-svg-icons';
+import { faClock } from '@fortawesome/free-solid-svg-icons';
+
+library.add(fab, faMarkdown, faClock, faHtml5);

src/helpers/fontAwesome.ts

@@ -1167,6 +1167,46 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@fortawesome/fontawesome-common-types@^0.2.35":
+  version "0.2.35"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz#01dd3d054da07a00b764d78748df20daf2b317e9"
+  integrity sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw==
+
+"@fortawesome/fontawesome-svg-core@^1.2.35":
+  version "1.2.35"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz#85aea8c25645fcec88d35f2eb1045c38d3e65cff"
+  integrity sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.35"
+
+"@fortawesome/free-brands-svg-icons@^5.15.3":
+  version "5.15.3"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.3.tgz#bec2821d23b9c667be1d192a6c5bfb2667e588eb"
+  integrity sha512-1hirPcbjj72ZJtFvdnXGPbAbpn3Ox6mH3g5STbANFp3vGSiE5u5ingAKV06mK6ZVqNYxUPlh4DlTnaIvLtF2kw==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.35"
+
+"@fortawesome/free-regular-svg-icons@^5.15.3":
+  version "5.15.3"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.3.tgz#1ec4f2410ff638db549c5c5484fc60b66407dbe6"
+  integrity sha512-q4/p8Xehy9qiVTdDWHL4Z+o5PCLRChePGZRTXkl+/Z7erDVL8VcZUuqzJjs6gUz6czss4VIPBRdCz6wP37/zMQ==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.35"
+
+"@fortawesome/free-solid-svg-icons@^5.15.3":
+  version "5.15.3"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz#52eebe354f60dc77e0bde934ffc5c75ffd04f9d8"
+  integrity sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.35"
+
+"@fortawesome/react-fontawesome@^0.1.14":
+  version "0.1.14"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz#bf28875c3935b69ce2dc620e1060b217a47f64ca"
+  integrity sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==
+  dependencies:
+    prop-types "^15.7.2"
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"