Lorem ipsum (#29)

* Lorem ipsum

* Change label

README.md

@@ -29,6 +29,7 @@
 - [x] 14. HTML Entity Encode / Decode
 - [x] 15. URL Encode / Decode
 - [x] 16. Backslash Encode / Decode
+- [x] 17. Lorem Ipsum Generator
 
 ## Demo
 

package.json

@@ -269,6 +269,7 @@
  "jsonwebtoken": "^8.5.1",
  "jsqr": "^1.4.0",
  "lodash": "^4.17.21",
+ "lorem-ipsum": "^2.0.3",
  "marked": "^2.1.3",
  "pngjs": "^6.0.0",
  "qrcode": "^1.4.4",

src/components/Main.tsx

@@ -22,6 +22,7 @@ import JsConsole from './notebook/JavaScript';
 import HtmlEntityCodec from './html/HtmlEntityCodec';
 import UrlCodec from './url/UrlCodec';
 import BackSlashCodec from './text/BackSlash';
+import LoremIpsum from './text/LoremIpsum';
 
 interface MenuItem {
  path: string;
@@ -60,6 +61,13 @@ const defaultRoutes: MenuItem[] = [
  show: true,
  Component: RegexTester,
  },
+ {
+ icon: <FontAwesomeIcon icon="random" />,
+ path: '/lorem-ipsum',
+ name: 'Lorem Ipsum Generator',
+ show: true,
+ Component: LoremIpsum,
+ },
  {
  icon: <FontAwesomeIcon icon={['fab', 'markdown']} />,
  path: '/markdown-to-html',

src/components/text/LoremIpsum.tsx

@@ -0,0 +1,103 @@
+import React, { useEffect, useState } from 'react';
+import { clipboard } from 'electron';
+import { loremIpsum } from 'lorem-ipsum';
+
+type Unit = 'words' | 'sentences' | 'paragraphs';
+type Format = 'html' | 'plain';
+
+const LoremIpsum = () => {
+ const [output, setOutput] = useState('');
+ const [copied, setCopied] = useState(false);
+ const [units, setUnits] = useState<Unit>('paragraphs');
+ const [format, setFormat] = useState<Format>('plain');
+ const [count, setCount] = useState(5);
+
+ const handleCopyOutput = () => {
+ setCopied(true);
+ clipboard.write({ text: output });
+ setTimeout(() => setCopied(false), 500);
+ };
+
+ const unitsList = ['words', 'sentences', 'paragraphs'];
+ const formatList = [
+ {
+ f: 'html',
+ l: 'HTML',
+ },
+ {
+ f: 'plain',
+ l: 'Text',
+ },
+ ];
+
+ useEffect(() => {
+ setOutput(loremIpsum({ units, count, format }));
+ }, [units, count, format]);
+
+ return (
+ <div className="flex flex-col min-h-full">
+ <div className="flex justify-between mb-1">
+ <span className="flex space-x-4">
+ <input
+ type="number"
+ className="w-20 text-center"
+ value={count}
+ onChange={(e) => setCount(parseInt(e.target.value, 10) || 5)}
+ />
+
+ {unitsList.map((unit) => (
+ <label
+ htmlFor={unit}
+ className="flex items-center space-x-1"
+ key={unit}
+ >
+ <input
+ type="radio"
+ className="btn"
+ name="unit"
+ id={unit}
+ checked={unit === units}
+ onChange={() => setUnits(unit as Unit)}
+ />
+ <p>{unit}</p>
+ </label>
+ ))}
+ </span>
+
+ <span className="flex items-center justify-center space-x-4">
+ {formatList.map(({ f, l }) => (
+ <label htmlFor={f} className="flex items-center space-x-1" key={f}>
+ <input
+ type="radio"
+ className="btn"
+ name="format"
+ id={f}
+ checked={f === format}
+ onChange={() => setFormat(f as Format)}
+ />
+ <p>{l}</p>
+ </label>
+ ))}
+ </span>
+
+ <button
+ type="button"
+ className="w-16 btn"
+ onClick={handleCopyOutput}
+ disabled={copied}
+ >
+ {copied ? 'Copied' : 'Copy'}
+ </button>
+ </div>
+ <div className="flex flex-1 min-h-full space-x-2">
+ <textarea
+ className="flex-1 min-h-full p-2 bg-gray-100 rounded-md"
+ value={output}
+ readOnly
+ />
+ </div>
+ </div>
+ );
+};
+
+export default LoremIpsum;

src/helpers/fontAwesome.ts

@@ -26,6 +26,7 @@ import {
  faLink,
  faFileCode,
  faSlash,
+ faRandom,
 } from '@fortawesome/free-solid-svg-icons';
 
 library.add(
@@ -52,5 +53,6 @@ library.add(
  faLink,
  faFileCode,
  faSlash,
+ faRandom,
  faCheck
 );

src/main.dev.ts

@@ -88,7 +88,9 @@ const createWindow = async () => {
  mainWindow = new BrowserWindow({
  show: false,
  width: 1024,
+ minWidth: 1024,
  height: 728,
+ minHeight: 728,
  icon: getAssetPath('icon.png'),
  webPreferences: {
  nodeIntegration: true,

yarn.lock

@@ -3716,7 +3716,7 @@ [email protected]:
  dependencies:
  graceful-readlink ">= 1.0.0"
 
-commander@^2.19.0, commander@^2.20.0:
+commander@^2.17.1, commander@^2.19.0, commander@^2.20.0:
  version "2.20.3"
  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@@ -8248,6 +8248,13 @@ loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4
  dependencies:
  js-tokens "^3.0.0 || ^4.0.0"
 
+lorem-ipsum@^2.0.3:
+ version "2.0.3"
+ resolved "https://registry.yarnpkg.com/lorem-ipsum/-/lorem-ipsum-2.0.3.tgz#9f1fa634780c9f58a349d4e091c3ba74f733164e"
+ integrity sha512-CX2r84DMWjW/DWiuzicTI9aRaJPAw2cvAGMJYZh/nx12OkTGqloj8y8FU0S8ZkKwOdqhfxEA6Ly8CW2P6Yxjwg==
+ dependencies:
+ commander "^2.17.1"
+
 loud-rejection@^1.0.0:
  version "1.6.0"
  resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"