generate-pages.sh

#!/bin/bash
cd /Users/laolin/clawd/projects/case-converter-tool

# Page configs: filename|title_keyword|h1|description|nav_label|convert_type|example_in|example_out|extra_content
pages=(
"uppercase.html|Uppercase Converter|Uppercase Converter — Convert Text to UPPERCASE|Convert text to uppercase letters online. Free UPPERCASE converter tool - paste your text and get ALL CAPS instantly.|UPPERCASE|upper|Hello World|HELLO WORLD|<h2>What is Uppercase Text?</h2><p>Uppercase text (also called ALL CAPS) is when every letter in a text is capitalized. It's commonly used for headings, acronyms, and to add emphasis. Our free uppercase converter tool instantly transforms any text into uppercase letters.</p><h2>When to Use Uppercase?</h2><ul><li><strong>Headlines &amp; Titles:</strong> Make text stand out in designs and documents.</li><li><strong>Acronyms:</strong> NASA, HTML, CSS are written in uppercase.</li><li><strong>Legal Documents:</strong> Important clauses are often in caps.</li><li><strong>Data Entry:</strong> Standardize form inputs.</li></ul><h2>How to Convert Text to Uppercase</h2><p>Simply paste your text in the input box above and click the \"UPPERCASE\" button. The converted text will appear instantly. Click \"Copy to Clipboard\" to use it anywhere.</p>"

"lowercase.html|Lowercase Converter|Lowercase Converter — Convert Text to lowercase|Convert text to lowercase letters online. Free lowercase converter tool - paste your text and instantly convert to all small letters.|lowercase|lower|HELLO WORLD|hello world|<h2>What is Lowercase Text?</h2><p>Lowercase text uses only small letters (a-z) without any capitalization. It's the most common text format used in everyday writing, emails, and code.</p><h2>Common Uses for Lowercase</h2><ul><li><strong>Email Addresses:</strong> user@example.com is always lowercase.</li><li><strong>URLs:</strong> Web addresses are case-insensitive but conventionally lowercase.</li><li><strong>Programming:</strong> Variable names in many languages use lowercase.</li><li><strong>Text Normalization:</strong> Standardize text for comparison or search.</li></ul><h2>How to Convert Text to Lowercase</h2><p>Paste your text above and click \"lowercase\" to convert. All uppercase letters will be changed to their lowercase equivalents while preserving numbers, spaces, and special characters.</p>"

"titlecase.html|Title Case Converter|Title Case Converter — Capitalize Each Word|Convert text to Title Case online. Free title case converter - capitalize the first letter of every word instantly.|Title Case|title|hello world example|Hello World Example|<h2>What is Title Case?</h2><p>Title case capitalizes the first letter of each word while keeping the rest lowercase. It's the standard format for book titles, article headlines, and proper nouns in English.</p><h2>Title Case Rules</h2><ul><li><strong>Capitalize</strong> the first letter of each word.</li><li><strong>Common style guides</strong> (AP, Chicago, APA) have slightly different rules about small words like \"the\", \"a\", \"in\".</li><li><strong>Our tool</strong> capitalizes every word's first letter for maximum flexibility.</li></ul><h2>When to Use Title Case</h2><ul><li>Book titles and chapter headings</li><li>Article headlines and blog post titles</li><li>Song and album names</li><li>Presentation slides</li></ul>"

"camelcase.html|camelCase Converter|camelCase Converter — Convert Text to camelCase|Convert text to camelCase format online. Free camelCase converter for developers - transform any text to camelCase instantly.|camelCase|camel|hello world example|helloWorldExample|<h2>What is camelCase?</h2><p>camelCase is a naming convention where the first word is lowercase and subsequent words are capitalized with no spaces or separators. It gets its name because the capital letters in the middle look like camel humps.</p><h2>Where is camelCase Used?</h2><ul><li><strong>JavaScript:</strong> Variable and function names (myVariable, getElementById)</li><li><strong>Java:</strong> Method and variable names</li><li><strong>TypeScript:</strong> Same as JavaScript conventions</li><li><strong>JSON:</strong> Property keys often use camelCase</li></ul><h2>camelCase vs PascalCase</h2><p>The difference is simple: camelCase starts with a lowercase letter (helloWorld), while PascalCase starts with an uppercase letter (HelloWorld). Both capitalize subsequent words.</p>"

"snakecase.html|snake_case Converter|snake_case Converter — Convert Text to snake_case|Convert text to snake_case format online. Free snake_case converter for developers - transform any text to snake_case instantly.|snake_case|snake|Hello World Example|hello_world_example|<h2>What is snake_case?</h2><p>snake_case is a naming convention where words are separated by underscores (_) and all letters are lowercase. It's one of the most readable naming conventions for multi-word identifiers.</p><h2>Where is snake_case Used?</h2><ul><li><strong>Python:</strong> The official PEP 8 style guide recommends snake_case for variables and functions.</li><li><strong>Ruby:</strong> Standard naming convention for methods and variables.</li><li><strong>Databases:</strong> Column names and table names often use snake_case.</li><li><strong>File naming:</strong> my_document.txt, user_profile.json</li><li><strong>REST APIs:</strong> Many APIs use snake_case for JSON keys.</li></ul>"

"kebabcase.html|kebab-case Converter|kebab-case Converter — Convert Text to kebab-case|Convert text to kebab-case format online. Free kebab-case converter - transform any text to kebab-case instantly.|kebab-case|kebab|Hello World Example|hello-world-example|<h2>What is kebab-case?</h2><p>kebab-case (also called dash-case or lisp-case) separates words with hyphens (-) and uses all lowercase letters. It gets its name because the words look like food on a kebab skewer.</p><h2>Where is kebab-case Used?</h2><ul><li><strong>URLs:</strong> example.com/my-blog-post is the standard URL format.</li><li><strong>CSS Classes:</strong> .my-class-name is the convention in CSS.</li><li><strong>HTML Attributes:</strong> data-user-id, aria-label use kebab-case.</li><li><strong>Package Names:</strong> npm packages like lodash-es use kebab-case.</li><li><strong>Git Branches:</strong> feature/add-user-login is common.</li></ul>"

"sentencecase.html|Sentence Case Converter|Sentence Case Converter — Capitalize First Letter of Sentences|Convert text to sentence case online. Free sentence case converter - capitalize the first letter of each sentence automatically.|Sentence case|sentence|hello world. this is a test.|Hello world. This is a test.|<h2>What is Sentence Case?</h2><p>Sentence case capitalizes only the first letter of each sentence and proper nouns, keeping everything else lowercase. It's the standard capitalization style for most body text in English.</p><h2>When to Use Sentence Case</h2><ul><li><strong>Body text:</strong> Articles, blog posts, and books.</li><li><strong>Email:</strong> Professional and casual correspondence.</li><li><strong>Subtitles:</strong> Some style guides prefer sentence case for subtitles.</li><li><strong>UI Text:</strong> Many design systems use sentence case for buttons and labels.</li></ul>"

"pascalcase.html|PascalCase Converter|PascalCase Converter — Convert Text to PascalCase|Convert text to PascalCase format online. Free PascalCase converter for developers - transform any text to PascalCase instantly.|PascalCase|pascal|hello world example|HelloWorldExample|<h2>What is PascalCase?</h2><p>PascalCase (also called UpperCamelCase) capitalizes the first letter of every word and joins them without separators. It's named after the Pascal programming language.</p><h2>Where is PascalCase Used?</h2><ul><li><strong>C# / .NET:</strong> Class names, method names, and namespaces.</li><li><strong>React:</strong> Component names must be PascalCase.</li><li><strong>TypeScript:</strong> Interface and type names.</li><li><strong>Java:</strong> Class and interface names.</li></ul>"

"constantcase.html|CONSTANT_CASE Converter|CONSTANT_CASE Converter — Convert Text to CONSTANT_CASE|Convert text to CONSTANT_CASE format online. Free SCREAMING_SNAKE_CASE converter for developers.|CONSTANT_CASE|constant|hello world example|HELLO_WORLD_EXAMPLE|<h2>What is CONSTANT_CASE?</h2><p>CONSTANT_CASE (also called SCREAMING_SNAKE_CASE) combines uppercase letters with underscore separators. It's used to indicate values that should never change in code.</p><h2>Where is CONSTANT_CASE Used?</h2><ul><li><strong>Constants:</strong> MAX_SIZE, API_KEY, DEFAULT_TIMEOUT</li><li><strong>Environment Variables:</strong> DATABASE_URL, NODE_ENV</li><li><strong>Enums:</strong> Many languages use CONSTANT_CASE for enum values.</li><li><strong>Configuration:</strong> Config keys in many frameworks.</li></ul>"
)

for page_config in "${pages[@]}"; do
    IFS='|' read -r filename title_kw h1 desc nav_label convert_type example_in example_out extra_content <<< "$page_config"

    # Set active class for nav
    cat > "$filename" << PAGEEOF
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>${title_kw} - Free Online Text ${title_kw} Tool</title>
    <meta name="description" content="${desc}">
    <link rel="canonical" href="https://caseconverter.tools/${filename}">
    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>Aa</text></svg>">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <a href="/" class="logo">Aa Case Converter</a>
            <ul>
                <li><a href="/">All Converters</a></li>
                <li><a href="/uppercase.html" $([ "$filename" = "uppercase.html" ] && echo 'class="active"')>UPPERCASE</a></li>
                <li><a href="/lowercase.html" $([ "$filename" = "lowercase.html" ] && echo 'class="active"')>lowercase</a></li>
                <li><a href="/titlecase.html" $([ "$filename" = "titlecase.html" ] && echo 'class="active"')>Title Case</a></li>
                <li><a href="/camelcase.html" $([ "$filename" = "camelcase.html" ] && echo 'class="active"')>camelCase</a></li>
                <li><a href="/snakecase.html" $([ "$filename" = "snakecase.html" ] && echo 'class="active"')>snake_case</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="hero">
            <h1>${h1}</h1>
            <p>${desc}</p>
        </section>

        <section class="tool-section">
            <div class="input-area">
                <label for="inputText">Paste or type your text here:</label>
                <textarea id="inputText" rows="6" placeholder="Type or paste your text here...">${example_in}</textarea>
                <div class="input-stats">
                    <span id="charCount">0 characters</span> · <span id="wordCount">0 words</span> · <span id="lineCount">0 lines</span>
                </div>
            </div>

            <div class="buttons-grid">
                <button onclick="convertCase('${convert_type}')" class="btn btn-primary" style="font-size:1.1rem;padding:14px 28px;">${nav_label}</button>
                <button onclick="convertCase('upper')" class="btn btn-secondary">UPPERCASE</button>
                <button onclick="convertCase('lower')" class="btn btn-secondary">lowercase</button>
                <button onclick="convertCase('title')" class="btn btn-secondary">Title Case</button>
                <button onclick="convertCase('sentence')" class="btn btn-secondary">Sentence case</button>
                <button onclick="convertCase('camel')" class="btn btn-secondary">camelCase</button>
                <button onclick="convertCase('snake')" class="btn btn-secondary">snake_case</button>
                <button onclick="convertCase('kebab')" class="btn btn-secondary">kebab-case</button>
            </div>

            <div class="output-area">
                <label for="outputText">Result:</label>
                <textarea id="outputText" rows="6" readonly placeholder="Converted text will appear here...">${example_out}</textarea>
                <div class="output-actions">
                    <button onclick="copyOutput()" class="btn btn-copy" id="copyBtn">📋 Copy to Clipboard</button>
                    <button onclick="clearAll()" class="btn btn-clear">🗑️ Clear</button>
                    <button onclick="swapText()" class="btn btn-swap">🔄 Use as Input</button>
                </div>
            </div>
        </section>

        <section class="seo-content">
            ${extra_content}
        </section>

        <section class="converters-list">
            <h2>Other Case Converters</h2>
            <div class="converter-cards">
                <a href="/" class="card"><h3>All Case Converters</h3><p>Access all 14+ text case conversion tools in one place.</p></a>
                <a href="/uppercase.html" class="card"><h3>Uppercase Converter</h3><p>hello → HELLO</p></a>
                <a href="/lowercase.html" class="card"><h3>Lowercase Converter</h3><p>HELLO → hello</p></a>
                <a href="/titlecase.html" class="card"><h3>Title Case Converter</h3><p>hello world → Hello World</p></a>
                <a href="/camelcase.html" class="card"><h3>camelCase Converter</h3><p>hello world → helloWorld</p></a>
                <a href="/snakecase.html" class="card"><h3>snake_case Converter</h3><p>hello world → hello_world</p></a>
                <a href="/kebabcase.html" class="card"><h3>kebab-case Converter</h3><p>hello world → hello-world</p></a>
            </div>
        </section>
    </main>

    <footer>
        <p>© 2026 Case Converter Tool. Free online text case converter.</p>
        <p>
            <a href="/">Home</a> ·
            <a href="/uppercase.html">Uppercase</a> ·
            <a href="/lowercase.html">Lowercase</a> ·
            <a href="/titlecase.html">Title Case</a> ·
            <a href="/camelcase.html">camelCase</a> ·
            <a href="/snakecase.html">snake_case</a> ·
            <a href="/kebabcase.html">kebab-case</a>
        </p>
    </footer>

    <script src="converter.js"></script>
    <script>updateStats();</script>
</body>
</html>
PAGEEOF

    echo "Generated: $filename"
done