seo: add How to use / When to use text blocks to all generator pages
Each page now has a subtle text section with keyword-rich content for search engine indexing, without disrupting the tool UX. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
emil
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
80a39035d3
commit
57f1a8d705
@@ -0,0 +1,23 @@
|
||||
---
|
||||
interface Props {
|
||||
howTo: string[];
|
||||
whenTo: string[];
|
||||
}
|
||||
|
||||
const { howTo, whenTo } = Astro.props;
|
||||
---
|
||||
|
||||
<section class="mt-12 border-t border-zinc-800/60 pt-8 text-sm text-zinc-500 space-y-4">
|
||||
<div>
|
||||
<h2 class="text-xs font-semibold uppercase tracking-widest text-zinc-600 mb-2">How to use</h2>
|
||||
<ol class="space-y-1 list-decimal list-inside">
|
||||
{howTo.map((step) => <li>{step}</li>)}
|
||||
</ol>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-xs font-semibold uppercase tracking-widest text-zinc-600 mb-2">When to use</h2>
|
||||
<ul class="space-y-1 list-disc list-inside">
|
||||
{whenTo.map((item) => <li>{item}</li>)}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
@@ -3,6 +3,7 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||
import CardGenerator from '../../components/generators/CardGenerator.astro';
|
||||
import AdBanner from '../../components/AdBanner.astro';
|
||||
import { generators } from '../../data/generators';
|
||||
import SeoBlock from '../../components/SeoBlock.astro';
|
||||
|
||||
const generator = generators.find((g) => g.slug === 'cards')!;
|
||||
---
|
||||
@@ -54,6 +55,21 @@ const generator = generators.find((g) => g.slug === 'cards')!;
|
||||
<CardGenerator />
|
||||
</main>
|
||||
|
||||
<SeoBlock
|
||||
howTo={[
|
||||
'Set how many cards to draw (1–52).',
|
||||
'Toggle Allow duplicates if you want cards to repeat.',
|
||||
'Click Draw — cards are shown as mini card tiles.',
|
||||
'Click Copy to copy the result (e.g. A♠, K♥) to your clipboard.',
|
||||
]}
|
||||
whenTo={[
|
||||
'Drawing a random hand for card games.',
|
||||
'Practising card probability and statistics.',
|
||||
'Simulating a random card pull for magic tricks or puzzles.',
|
||||
'Running fair draws without a physical deck.',
|
||||
]}
|
||||
/>
|
||||
|
||||
<div class="mt-12 flex justify-center">
|
||||
<AdBanner size="tile" />
|
||||
</div>
|
||||
|
||||
@@ -3,6 +3,7 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||
import CoinGenerator from '../../components/generators/CoinGenerator.astro';
|
||||
import AdBanner from '../../components/AdBanner.astro';
|
||||
import { generators } from '../../data/generators';
|
||||
import SeoBlock from '../../components/SeoBlock.astro';
|
||||
|
||||
const generator = generators.find((g) => g.slug === 'coin')!;
|
||||
---
|
||||
@@ -33,6 +34,21 @@ const generator = generators.find((g) => g.slug === 'coin')!;
|
||||
<p class="mt-2 text-base text-zinc-400">{generator.description}</p>
|
||||
</header>
|
||||
<main><CoinGenerator /></main>
|
||||
<SeoBlock
|
||||
howTo={[
|
||||
'Drag the slider to choose how many coins to flip (1–20).',
|
||||
'Click Flip — each coin shows H for heads or T for tails.',
|
||||
'When flipping more than one coin, the heads/tails count is shown below.',
|
||||
'Click Copy to copy all results to the clipboard.',
|
||||
]}
|
||||
whenTo={[
|
||||
'Making a quick heads-or-tails decision.',
|
||||
'Simulating a coin toss for a sports match or game.',
|
||||
'Demonstrating probability and the law of large numbers.',
|
||||
'Settling a fair 50/50 choice between two options.',
|
||||
]}
|
||||
/>
|
||||
|
||||
<div class="mt-12 flex justify-center">
|
||||
<AdBanner size="tile" />
|
||||
</div>
|
||||
|
||||
@@ -3,6 +3,7 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||
import ColorGenerator from '../../components/generators/ColorGenerator.astro';
|
||||
import AdBanner from '../../components/AdBanner.astro';
|
||||
import { generators } from '../../data/generators';
|
||||
import SeoBlock from '../../components/SeoBlock.astro';
|
||||
|
||||
const generator = generators.find((g) => g.slug === 'colors')!;
|
||||
---
|
||||
@@ -54,6 +55,20 @@ const generator = generators.find((g) => g.slug === 'colors')!;
|
||||
<ColorGenerator />
|
||||
</main>
|
||||
|
||||
<SeoBlock
|
||||
howTo={[
|
||||
'Click Generate to produce a random color.',
|
||||
'Switch between HEX, RGB, and HSL tabs to see the value in your preferred format.',
|
||||
'Click the color value or the copy icon to copy it to the clipboard.',
|
||||
]}
|
||||
whenTo={[
|
||||
'Finding inspiration for a new design palette.',
|
||||
'Picking a placeholder color while prototyping.',
|
||||
'Selecting a random theme color for a project or presentation.',
|
||||
'Teaching or exploring color theory and formats.',
|
||||
]}
|
||||
/>
|
||||
|
||||
<div class="mt-12 flex justify-center">
|
||||
<AdBanner size="tile" />
|
||||
</div>
|
||||
|
||||
@@ -3,6 +3,7 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||
import DiceGenerator from '../../components/generators/DiceGenerator.astro';
|
||||
import AdBanner from '../../components/AdBanner.astro';
|
||||
import { generators } from '../../data/generators';
|
||||
import SeoBlock from '../../components/SeoBlock.astro';
|
||||
|
||||
const generator = generators.find((g) => g.slug === 'dice')!;
|
||||
---
|
||||
@@ -54,6 +55,21 @@ const generator = generators.find((g) => g.slug === 'dice')!;
|
||||
<DiceGenerator />
|
||||
</main>
|
||||
|
||||
<SeoBlock
|
||||
howTo={[
|
||||
'Select the die type: d4, d6, d8, d10, d12, d20, or d100.',
|
||||
'Set how many dice to roll (1–20).',
|
||||
'Click Roll — each die result appears with the total sum.',
|
||||
'Maximum rolls are highlighted in purple; ones are highlighted in red.',
|
||||
]}
|
||||
whenTo={[
|
||||
'Rolling dice for D&D, Pathfinder, or any tabletop RPG.',
|
||||
'Replacing physical dice in board games.',
|
||||
'Simulating probability outcomes in statistics or education.',
|
||||
'Settling disputes with a fair digital dice roll.',
|
||||
]}
|
||||
/>
|
||||
|
||||
<div class="mt-12 flex justify-center">
|
||||
<AdBanner size="tile" />
|
||||
</div>
|
||||
|
||||
@@ -3,6 +3,7 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||
import ListGenerator from '../../components/generators/ListGenerator.astro';
|
||||
import AdBanner from '../../components/AdBanner.astro';
|
||||
import { generators } from '../../data/generators';
|
||||
import SeoBlock from '../../components/SeoBlock.astro';
|
||||
|
||||
const generator = generators.find((g) => g.slug === 'list')!;
|
||||
---
|
||||
@@ -33,6 +34,21 @@ const generator = generators.find((g) => g.slug === 'list')!;
|
||||
<p class="mt-2 text-base text-zinc-400">{generator.description}</p>
|
||||
</header>
|
||||
<main><ListGenerator /></main>
|
||||
<SeoBlock
|
||||
howTo={[
|
||||
'Type or paste your items into the text area — one item per line.',
|
||||
'Set how many items to pick in the Pick field.',
|
||||
'Toggle Allow duplicates if the same item can be chosen more than once.',
|
||||
'Click Pick (or press Ctrl+Enter) — the selected items appear as chips.',
|
||||
]}
|
||||
whenTo={[
|
||||
'Choosing a random winner for a giveaway or contest.',
|
||||
'Picking who presents first in a meeting or class.',
|
||||
'Organising a Secret Santa or gift exchange draw.',
|
||||
'Selecting a random movie, restaurant, or activity from a list.',
|
||||
]}
|
||||
/>
|
||||
|
||||
<div class="mt-12 flex justify-center">
|
||||
<AdBanner size="tile" />
|
||||
</div>
|
||||
|
||||
@@ -3,6 +3,7 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||
import LotteryGenerator from '../../components/generators/LotteryGenerator.astro';
|
||||
import AdBanner from '../../components/AdBanner.astro';
|
||||
import { generators } from '../../data/generators';
|
||||
import SeoBlock from '../../components/SeoBlock.astro';
|
||||
|
||||
const generator = generators.find((g) => g.slug === 'lottery')!;
|
||||
---
|
||||
@@ -54,6 +55,21 @@ const generator = generators.find((g) => g.slug === 'lottery')!;
|
||||
<LotteryGenerator />
|
||||
</main>
|
||||
|
||||
<SeoBlock
|
||||
howTo={[
|
||||
'Set the From and To fields to define your number range (e.g. 1 to 49).',
|
||||
'Enter how many numbers to pick in the Pick field.',
|
||||
'Click Draw — a sorted set of unique numbers appears.',
|
||||
'Click Copy to copy all numbers to the clipboard.',
|
||||
]}
|
||||
whenTo={[
|
||||
'Generating lottery or lotto ticket numbers.',
|
||||
'Running a fair raffle draw with unique entries.',
|
||||
'Selecting a random sample from a numbered list.',
|
||||
'Choosing lottery numbers for Powerball, EuroMillions, or local draws.',
|
||||
]}
|
||||
/>
|
||||
|
||||
<div class="mt-12 flex justify-center">
|
||||
<AdBanner size="tile" />
|
||||
</div>
|
||||
|
||||
@@ -3,6 +3,7 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||
import NumberGenerator from '../../components/generators/NumberGenerator.astro';
|
||||
import AdBanner from '../../components/AdBanner.astro';
|
||||
import { generators } from '../../data/generators';
|
||||
import SeoBlock from '../../components/SeoBlock.astro';
|
||||
|
||||
const generator = generators.find((g) => g.slug === 'numbers')!;
|
||||
---
|
||||
@@ -54,6 +55,21 @@ const generator = generators.find((g) => g.slug === 'numbers')!;
|
||||
<NumberGenerator />
|
||||
</main>
|
||||
|
||||
<SeoBlock
|
||||
howTo={[
|
||||
'Enter the minimum value in the From field.',
|
||||
'Enter the maximum value in the To field.',
|
||||
'Click Generate — a random number within your range appears instantly.',
|
||||
'Click the number to copy it to the clipboard.',
|
||||
]}
|
||||
whenTo={[
|
||||
'Picking a winner in a giveaway or raffle.',
|
||||
'Choosing a random starting player in a board game.',
|
||||
'Making a quick decision between numbered options.',
|
||||
'Generating test data with values in a specific range.',
|
||||
]}
|
||||
/>
|
||||
|
||||
<div class="mt-12 flex justify-center">
|
||||
<AdBanner size="tile" />
|
||||
</div>
|
||||
|
||||
@@ -3,6 +3,7 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||
import PasswordGenerator from '../../components/generators/PasswordGenerator.astro';
|
||||
import AdBanner from '../../components/AdBanner.astro';
|
||||
import { generators } from '../../data/generators';
|
||||
import SeoBlock from '../../components/SeoBlock.astro';
|
||||
|
||||
const generator = generators.find((g) => g.slug === 'password')!;
|
||||
---
|
||||
@@ -54,6 +55,21 @@ const generator = generators.find((g) => g.slug === 'password')!;
|
||||
<PasswordGenerator />
|
||||
</main>
|
||||
|
||||
<SeoBlock
|
||||
howTo={[
|
||||
'Drag the length slider to set how many characters you need (4–64).',
|
||||
'Toggle uppercase, lowercase, digits, and symbols on or off.',
|
||||
'Click Generate — a new password appears instantly.',
|
||||
'Click the password to copy it to your clipboard.',
|
||||
]}
|
||||
whenTo={[
|
||||
'Creating a strong password for a new account.',
|
||||
'Generating a temporary access credential.',
|
||||
'Producing a random secret key for development or testing.',
|
||||
'Replacing a weak or reused password.',
|
||||
]}
|
||||
/>
|
||||
|
||||
<div class="mt-12 flex justify-center">
|
||||
<AdBanner size="tile" />
|
||||
</div>
|
||||
|
||||
@@ -3,6 +3,7 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||
import UuidGenerator from '../../components/generators/UuidGenerator.astro';
|
||||
import AdBanner from '../../components/AdBanner.astro';
|
||||
import { generators } from '../../data/generators';
|
||||
import SeoBlock from '../../components/SeoBlock.astro';
|
||||
|
||||
const generator = generators.find((g) => g.slug === 'uuid')!;
|
||||
---
|
||||
@@ -33,6 +34,21 @@ const generator = generators.find((g) => g.slug === 'uuid')!;
|
||||
<p class="mt-2 text-base text-zinc-400">{generator.description}</p>
|
||||
</header>
|
||||
<main><UuidGenerator /></main>
|
||||
<SeoBlock
|
||||
howTo={[
|
||||
'Choose a token type: UUID v4, Hex, or Base64.',
|
||||
'For Hex and Base64, set the byte length (4–64 bytes).',
|
||||
'Enter how many tokens to generate (1–20).',
|
||||
'Click Generate, then Copy all to copy every token to the clipboard.',
|
||||
]}
|
||||
whenTo={[
|
||||
'Generating unique IDs for database records or API resources.',
|
||||
'Creating random session tokens or API keys during development.',
|
||||
'Producing test data with realistic-looking identifiers.',
|
||||
'Generating a one-time secret for environment variables or config files.',
|
||||
]}
|
||||
/>
|
||||
|
||||
<div class="mt-12 flex justify-center">
|
||||
<AdBanner size="tile" />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user