From aea12a34a4c62b6b4a4c7dea6258b492ffe3ad92 Mon Sep 17 00:00:00 2001 From: Samuel Krebs Date: Wed, 25 Sep 2024 20:55:56 +0200 Subject: [PATCH 01/13] feat: create LoremIpsumGeneratorSEO component --- components/seo/LoremIpsumGeneratorSEO.tsx | 35 +++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 components/seo/LoremIpsumGeneratorSEO.tsx diff --git a/components/seo/LoremIpsumGeneratorSEO.tsx b/components/seo/LoremIpsumGeneratorSEO.tsx new file mode 100644 index 0000000..5e0dcf0 --- /dev/null +++ b/components/seo/LoremIpsumGeneratorSEO.tsx @@ -0,0 +1,35 @@ +import GetJamForFree from "./GetJamForFree"; + +export default function LoremIpsumGeneratorSEO() { + return ( +
+
+

+ Quickly generate random Lorem Ipsum text for your projects. Whether + you're designing websites, creating mockups, or testing layouts, Jam's + free Lorem Ipsum Generator helps you produce placeholder text in + seconds. +

+
+ +
+ +
+ +
+

How the Lorem Ipsum Generator works

+

+ This tool produces random sequences of placeholder text, commonly + referred to as "Lorem Ipsum," which is pseudo-Latin and widely used in + design mockups. It helps designers focus on layout and visual elements + without the distraction of real content. +

+
+

+ Need more customization? You can adjust the amount of text to better + suit your needs. +

+
+
+ ); +} \ No newline at end of file From 1bb9f85f488f11106f1510c6db951ca073e34dbc Mon Sep 17 00:00:00 2001 From: Samuel Krebs Date: Wed, 25 Sep 2024 20:57:38 +0200 Subject: [PATCH 02/13] feat: add Lorem Ipsum Generator to tools-list and README --- README.md | 2 ++ components/utils/tools-list.ts | 12 ------------ 2 files changed, 2 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 4c39bc3..4b8eb5c 100644 --- a/README.md +++ b/README.md @@ -45,6 +45,7 @@ Here is the list of all utilities: - [JWT Parser](https://jam.dev/utilities/jwt-parser) - [UUID Generator](https://jam.dev/utilities/uuid-generator) - [SVG Viewer](https://jam.dev/utilities/svg-viewer) +- [Lorem Ipsum Generator](https://jam.dev/utilities/lorem-ipsum-generator) ### Built With @@ -59,6 +60,7 @@ Here is the list of all utilities: - [Papa Parse](https://www.papaparse.com/) - [js-yaml](https://github.com/nodeca/js-yaml) - [curlconverter](https://github.com/curlconverter/curlconverter) +- [lorem-ipsum](https://github.com/knicklabs/lorem-ipsum.js) ## Getting Started diff --git a/components/utils/tools-list.ts b/components/utils/tools-list.ts index d2486ba..4a07f8f 100644 --- a/components/utils/tools-list.ts +++ b/components/utils/tools-list.ts @@ -119,16 +119,4 @@ export const tools = [ "Quickly generate secure hashes for your text using algorithms like SHA-256, SHA-512, MD5, and more. Ideal for password hashing, data integrity checks, and cryptographic applications.", link: "/utilities/hash-generator", }, - { - title: "UUID Generator", - description: - "Generate random UUIDs. Useful for creating unique identifiers for various applications such as database keys, session IDs, and more.", - link: "/utilities/uuid-generator", - }, - { - title: "SVG Viewer", - description: - "Instantly preview and validate SVG code in your browser. Perfect for developers working with vector graphics and debugging SVG markup.", - link: "/utilities/svg-viewer", - }, ]; From af2950e723d4609a4e731afb5fac6118013ed8f7 Mon Sep 17 00:00:00 2001 From: Samuel Krebs Date: Wed, 25 Sep 2024 20:58:26 +0200 Subject: [PATCH 03/13] chore: add lorem-ipsum dependency --- package-lock.json | 24 ++++++++++++++++++++++++ package.json | 1 + 2 files changed, 25 insertions(+) diff --git a/package-lock.json b/package-lock.json index 41b631d..502622a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "cmdk": "^1.0.0", "curlconverter": "^4.10.1", "js-yaml": "^4.1.0", + "lorem-ipsum": "^2.0.8", "lucide-react": "^0.414.0", "next": "14.2.4", "next-themes": "^0.3.0", @@ -8766,6 +8767,29 @@ "loose-envify": "cli.js" } }, + "node_modules/lorem-ipsum": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/lorem-ipsum/-/lorem-ipsum-2.0.8.tgz", + "integrity": "sha512-5RIwHuCb979RASgCJH0VKERn9cQo/+NcAi2BMe9ddj+gp7hujl6BI+qdOG4nVsLDpwWEJwTVYXNKP6BGgbcoGA==", + "dependencies": { + "commander": "^9.3.0" + }, + "bin": { + "lorem-ipsum": "dist/bin/lorem-ipsum.bin.js" + }, + "engines": { + "node": ">= 8.x", + "npm": ">= 5.x" + } + }, + "node_modules/lorem-ipsum/node_modules/commander": { + "version": "9.5.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz", + "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==", + "engines": { + "node": "^12.20.0 || >=14" + } + }, "node_modules/lossless-json": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/lossless-json/-/lossless-json-4.0.1.tgz", diff --git a/package.json b/package.json index a7759ea..12cae22 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "cmdk": "^1.0.0", "curlconverter": "^4.10.1", "js-yaml": "^4.1.0", + "lorem-ipsum": "^2.0.8", "lucide-react": "^0.414.0", "next": "14.2.4", "next-themes": "^0.3.0", From e92a9870a88a5173efa47d68e93c451337627aa6 Mon Sep 17 00:00:00 2001 From: Samuel Krebs Date: Thu, 26 Sep 2024 16:26:35 +0200 Subject: [PATCH 04/13] feat: create Lorem Ipsum Generator Page Create Lorem Ipsum Generator Page and update SEO --- components/seo/LoremIpsumGeneratorSEO.tsx | 36 ++++-- pages/utilities/lorem-ipsum-generator.tsx | 135 ++++++++++++++++++++++ 2 files changed, 160 insertions(+), 11 deletions(-) create mode 100644 pages/utilities/lorem-ipsum-generator.tsx diff --git a/components/seo/LoremIpsumGeneratorSEO.tsx b/components/seo/LoremIpsumGeneratorSEO.tsx index 5e0dcf0..316f1ce 100644 --- a/components/seo/LoremIpsumGeneratorSEO.tsx +++ b/components/seo/LoremIpsumGeneratorSEO.tsx @@ -5,26 +5,40 @@ export default function LoremIpsumGeneratorSEO() {

- Quickly generate random Lorem Ipsum text for your projects. Whether - you're designing websites, creating mockups, or testing layouts, Jam's - free Lorem Ipsum Generator helps you produce placeholder text in - seconds. + Quickly generate random placeholder text with our Lorem Ipsum + Generator. Whether you're a web developer, graphic designer or content + creator, Jam's free Lorem Ipsum tool makes it easy to generate filler + text to suit your needs.

- +

How to use the Lorem Ipsum Generator:

+
    +
  • + Step 1: +
    + Choose the number of paragraphs, sentences, or words you need +
    • +
  • + Step 2: +
    + Copy the generated text and paste it into your design or content + project +
    • +

How the Lorem Ipsum Generator works

- This tool produces random sequences of placeholder text, commonly - referred to as "Lorem Ipsum," which is pseudo-Latin and widely used in - design mockups. It helps designers focus on layout and visual elements - without the distraction of real content. + This tool generates dummy text in the form of Lorem Ipsum, which is a + popular placeholder text used in the design industry. Lorem Ipsum + mimics natural language patterns, making it a great option for + creating realistic-looking placeholder content for websites. It helps + designers focus on layout and visual elements without being distracted + by real content.

-

Need more customization? You can adjust the amount of text to better suit your needs. @@ -32,4 +46,4 @@ export default function LoremIpsumGeneratorSEO() {

); -} \ No newline at end of file +} diff --git a/pages/utilities/lorem-ipsum-generator.tsx b/pages/utilities/lorem-ipsum-generator.tsx new file mode 100644 index 0000000..22812ba --- /dev/null +++ b/pages/utilities/lorem-ipsum-generator.tsx @@ -0,0 +1,135 @@ +import { useCallback, useEffect, useState } from "react"; +import { loremIpsum } from "lorem-ipsum"; +import CallToActionGrid from "@/components/CallToActionGrid"; +import { CMDK } from "@/components/CMDK"; +import { Button } from "@/components/ds/ButtonComponent"; +import { Card } from "@/components/ds/CardComponent"; +import { Checkbox } from "@/components/ds/CheckboxComponent"; +import { Combobox } from "@/components/ds/ComboboxComponent"; +import { Input } from "@/components/ds/InputComponent"; +import { Label } from "@/components/ds/LabelComponent"; +import { Textarea } from "@/components/ds/TextareaComponent"; +import GitHubContribution from "@/components/GitHubContribution"; +import Header from "@/components/Header"; +import PageHeader from "@/components/PageHeader"; +import { useCopyToClipboard } from "@/components/hooks/useCopyToClipboard"; +import Meta from "@/components/Meta"; +import LoremIpsumGeneratorSEO from "@/components/seo/LoremIpsumGeneratorSEO"; + +const generationOptions = [ + { value: "paragraphs", label: "Paragraphs" }, + { value: "sentences", label: "Sentences" }, + { value: "words", label: "Words" }, +]; + +declare type LoremUnit = "words" | "sentences" | "paragraphs"; + +export default function LoremIpsumGenerator() { + const [inputAmount, setInputAmount] = useState(1); + const [output, setOutput] = useState(""); + const [generationUnit, setGenerationUnit] = useState("paragraphs"); + const [asHTML, setAsHTML] = useState(false); + const { buttonText, handleCopy } = useCopyToClipboard(); + + const handleChange = (event: React.FormEvent) => { + const value = parseInt(event.currentTarget.value); + if (value > 0 && value < 100) setInputAmount(value); + }; + + const generateText = useCallback(() => { + const text = loremIpsum({ + count: inputAmount, + format: asHTML ? "html" : "plain", + paragraphLowerBound: 3, + paragraphUpperBound: 6, + random: Math.random, + sentenceLowerBound: 7, + sentenceUpperBound: 14, + suffix: "\n\n", + units: generationUnit, + }); + setOutput(text); + }, [inputAmount, generationUnit, asHTML]); + + useEffect(() => { + generateText(); + }, [generateText]); + + return ( +
+ +
+ + +
+ +
+ +
+ +
+
+ + +
+
+ setGenerationUnit(value)} + /> +
+
+ +
+ setAsHTML(!asHTML)} + className="mr-1" + /> + +
+ + + + +