Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature - Lorem Ipsum Generator #73

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
47 changes: 47 additions & 0 deletions components/seo/LoremIpsumGeneratorSEO.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
export default function LoremIpsumGeneratorSEO() {
return (
<div className="content-wrapper">
<section>
<p>
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.
</p>
</section>

<section>
<h2>How to use the Lorem Ipsum Generator:</h2>
<ul>
<li>
<b>Step 1:</b>
<br />
Choose the number of paragraphs, sentences, or words you need
</li>
<li>
<b>Step 2:</b>
<br />
Copy the generated text and paste it into your design or content
project
</li>
</ul>
</section>

<section>
<h2>How the Lorem Ipsum Generator works</h2>
<p>
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.
</p>
<p>
Need more customization? You can adjust the amount of text to better
suit your needs.
</p>
</section>
</div>
);
}
66 changes: 66 additions & 0 deletions components/utils/lorem-ipsum-generator.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import { generateLoremIpsum } from "./lorem-ipsum-generator";

declare type GenerationUnit = "words" | "sentences" | "paragraphs";

describe("generateLoremIpsum", () => {
let inputAmount: number;
let generationUnit: GenerationUnit;
let asHTML: boolean;
let startWithStandard: boolean;
let output: string;

const standardSentence =
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua";

beforeEach(() => {
// Initialize the variables before each test
inputAmount = 1;
generationUnit = "paragraphs";
asHTML = false;
startWithStandard = false;
output = "";
});

const generateOutput = () => {
output = generateLoremIpsum({
generationUnit,
inputAmount,
startWithStandard,
asHTML,
});
};

test("should generate the correct number of words in a sentence", () => {
generationUnit = "sentences";
generateOutput();

const wordsCount = output.split(" ").length;
expect(wordsCount).toBeGreaterThanOrEqual(7);
expect(wordsCount).toBeLessThanOrEqual(14);
});

test("should generate the correct number of sentences in a paragraph", () => {
generateOutput();

const sentenceCount = output.split(". ").length;
expect(sentenceCount).toBeGreaterThanOrEqual(3);
expect(sentenceCount).toBeLessThanOrEqual(6);
});

test("should generate text with standard sentence when startWithStandard is true", () => {
startWithStandard = true;
generateOutput();
expect(output.startsWith(standardSentence)).toBe(true);
});

test("should generate HTML output when asHTML is true", () => {
asHTML = true;
inputAmount = 2;
generateOutput();

const paragraphCount = (output.match(/<p>/g) || []).length;
expect(paragraphCount).toBe(inputAmount);
expect(output).toContain("<p>");
expect(output).toContain("</p>");
});
});
140 changes: 140 additions & 0 deletions components/utils/lorem-ipsum-generator.ts
Original file line number Diff line number Diff line change
@@ -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 ? `<p>${paragraph}</p>` : 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<GenerationUnit, () => string> = {
words: () => getRandomWords(inputAmount),
sentences: () => generateSentences(inputAmount, startWithStandard),
paragraphs: () =>
generateParagraphs(inputAmount, startWithStandard, asHTML),
};

const text =
inputAmount > 0 || inputAmount < 100
? units[generationUnit]()
: "Invalid input: Please enter a number between 1 and 99.";

return asHTML && generationUnit !== "paragraphs" ? `<p>${text}</p>` : text;
};
6 changes: 6 additions & 0 deletions components/utils/tools-list.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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",
},
];
Loading
Loading