diff --git a/README.md b/README.md index 55cca33..2b59513 100644 --- a/README.md +++ b/README.md @@ -43,6 +43,7 @@ Here is the list of all utilities: - [Image Resizer](https://jam.dev/utilities/image-resizer) - [CSS Units Converter](https://jam.dev/utilities/css-units-converter) - [JWT Parser](https://jam.dev/utilities/jwt-parser) +- [Lorem Ipsum Generator](https://jam.dev/utilities/lorem-ipsum-generator) ### Built With diff --git a/components/seo/LoremIpsumGeneratorSEO.tsx b/components/seo/LoremIpsumGeneratorSEO.tsx new file mode 100644 index 0000000..ec36212 --- /dev/null +++ b/components/seo/LoremIpsumGeneratorSEO.tsx @@ -0,0 +1,47 @@ +export default function LoremIpsumGeneratorSEO() { + return ( +
+ 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. +
++ 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. +
+/g) || []).length; + expect(paragraphCount).toBe(inputAmount); + expect(output).toContain("
"); + expect(output).toContain("
"); + }); +}); diff --git a/components/utils/lorem-ipsum-generator.ts b/components/utils/lorem-ipsum-generator.ts new file mode 100644 index 0000000..be31dc2 --- /dev/null +++ b/components/utils/lorem-ipsum-generator.ts @@ -0,0 +1,140 @@ +const words = [ + "ad", + "adipisicing", + "aliqua", + "aliquip", + "amet", + "anim", + "aute", + "cillum", + "commodo", + "consectetur", + "consequat", + "culpa", + "cupidatat", + "deserunt", + "do", + "dolor", + "dolore", + "duis", + "ea", + "eiusmod", + "elit", + "enim", + "esse", + "est", + "et", + "eu", + "ex", + "excepteur", + "exercitation", + "fugiat", + "id", + "in", + "incididunt", + "ipsum", + "irure", + "labore", + "laboris", + "laborum", + "lorem", + "magna", + "minim", + "mollit", + "nisi", + "non", + "nostrud", + "nulla", + "occaecat", + "officia", + "pariatur", + "proident", + "qui", + "quis", + "reprehenderit", + "sint", + "sed", + "sit", + "sunt", + "tempor", + "ullamco", + "ut", + "velit", + "veniam", + "voluptate", +]; + +const standardSentence: string = + "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"; + +declare type GenerationUnit = "words" | "sentences" | "paragraphs"; + +const capitalizeFirstLetter = (sentence: string): string => + sentence.charAt(0).toUpperCase() + sentence.slice(1); + +const getRandomBetween = (min: number, max: number): number => + Math.floor(Math.random() * (max - min + 1)) + min; + +const getRandomWords = (amount: number): string => + Array.from( + { length: amount }, + () => words[getRandomBetween(0, words.length - 1)] + ).join(" "); + +const generateSentence = (startWithStandard: boolean): string => { + if (startWithStandard) { + return standardSentence; + } else { + return capitalizeFirstLetter(getRandomWords(getRandomBetween(7, 14))); + } +}; + +const generateSentences = ( + amount: number, + startWithStandard: boolean +): string => { + const sentences = Array.from({ length: amount }, () => + generateSentence(false) + ); + if (startWithStandard) sentences[0] = standardSentence; + return sentences.join(". ") + "."; +}; + +const generateParagraphs = ( + amount: number, + startWithStandard: boolean, + asHTML: boolean +): string => + Array.from({ length: amount }, () => { + const paragraph = generateSentences( + getRandomBetween(3, 6), + startWithStandard + ); + return asHTML ? `${paragraph}
` : paragraph; + }).join("\n\n"); + +export const generateLoremIpsum = ({ + generationUnit = "paragraphs", + inputAmount = 1, + startWithStandard = true, + asHTML = false, +}: { + generationUnit?: GenerationUnit; + inputAmount?: number; + startWithStandard?: boolean; + asHTML?: boolean; +}): string => { + const units: Record${text}
` : text; +}; diff --git a/components/utils/tools-list.ts b/components/utils/tools-list.ts index 4a07f8f..e5a6aa0 100644 --- a/components/utils/tools-list.ts +++ b/components/utils/tools-list.ts @@ -119,4 +119,10 @@ 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: "Lorem Ipsum Generator", + description: + "Easily generate random Lorem Ipsum text for your design projects. Perfect for placeholder content and layout previews.", + link: "/utilities/lorem-ipsum-generator", + }, ]; diff --git a/pages/utilities/lorem-ipsum-generator.tsx b/pages/utilities/lorem-ipsum-generator.tsx new file mode 100644 index 0000000..d2b3af6 --- /dev/null +++ b/pages/utilities/lorem-ipsum-generator.tsx @@ -0,0 +1,150 @@ +import { useCallback, useEffect, useState } from "react"; +import { generateLoremIpsum } from "@/components/utils/lorem-ipsum-generator"; +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 GenerationUnit = "words" | "sentences" | "paragraphs"; + +export default function LoremIpsumGenerator() { + const [inputAmount, setInputAmount] = useState(1); + const [output, setOutput] = useState(""); + const [generationUnit, setGenerationUnit] = + useState