commit-message-generator.html

<!--
Commit Message Generator
Single-file client-side tool to build Conventional Commits-formatted commit
messages with live preview and validation.
Built for One File Tools.
-->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Commit Message Generator - One File Tools</title>
    <meta name="description" content="Build Conventional Commits-formatted commit messages with live preview and validation." />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />

    <style>
      :root {
        --bg: #030712;
        --grid-line: #111827;
        --panel: rgba(17, 24, 39, 0.7);
        --panel-border: #1f2937;
        --accent: #fb923c;
        --accent-hover: #f97316;
        --accent-glow: rgba(251, 146, 60, 0.15);
        --text: #f9fafb;
        --text-muted: #9ca3af;
        --text-dim: #4b5563;
        --radius-sm: 12px;
        --radius-md: 20px;
        --font-sans: "Inter", system-ui, sans-serif;
        --font-mono: "JetBrains Mono", monospace;
        --font-display: "Space Grotesk", sans-serif;
        --color-weak: #ef4444;
        --color-fair: #f59e0b;
        --color-strong: #10b981;
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: var(--font-sans);
        background-color: var(--bg);
        background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
        background-size: 32px 32px;
        color: var(--text);
        padding: 48px 20px 80px;
        min-height: 100vh;
        display: flex;
        justify-content: center;
      }

      .app {
        width: 100%;
        max-width: 860px;
      }

      .hero {
        text-align: center;
        margin-bottom: 28px;
      }

      .eyebrow {
        font-family: var(--font-mono);
        font-size: 12px;
        letter-spacing: 0.2em;
        color: var(--accent);
        text-transform: uppercase;
        margin-bottom: 12px;
        font-weight: 500;
      }

      .wordmark {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: clamp(26px, 5vw, 38px);
        letter-spacing: -0.02em;
        margin-bottom: 12px;
      }

      .tagline {
        color: var(--text-muted);
        font-size: 15px;
        line-height: 1.5;
        max-width: 580px;
        margin: 0 auto;
      }

      .studio {
        background: var(--panel);
        backdrop-filter: blur(20px);
        border: 1px solid var(--panel-border);
        border-radius: var(--radius-md);
        padding: 24px;
        box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.5);
        margin-bottom: 24px;
      }

      .section-label {
        font-family: var(--font-mono);
        font-size: 12px;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        display: block;
        margin-bottom: 14px;
      }

      .field {
        margin-bottom: 16px;
      }

      .field label {
        font-family: var(--font-mono);
        font-size: 11px;
        color: var(--text-dim);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        display: block;
        margin-bottom: 6px;
      }

      .field input,
      .field select,
      .field textarea {
        width: 100%;
        background: rgba(17, 24, 39, 0.8);
        border: 1px solid var(--panel-border);
        border-radius: 8px;
        color: var(--text);
        font-family: var(--font-mono);
        font-size: 14px;
        padding: 10px 12px;
      }

      .field textarea {
        resize: vertical;
        min-height: 70px;
        line-height: 1.5;
        font-family: var(--font-sans);
      }

      .field input:focus,
      .field select:focus,
      .field textarea:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-glow);
      }

      .type-help {
        font-size: 12px;
        color: var(--text-dim);
        margin-top: 6px;
      }

      .type-row {
        display: grid;
        grid-template-columns: 140px 1fr;
        gap: 10px;
      }

      .subject-row {
        display: flex;
        gap: 10px;
      }

      .subject-row .field {
        flex: 1;
        margin-bottom: 0;
      }

      .char-counter {
        font-family: var(--font-mono);
        font-size: 11px;
        color: var(--text-dim);
        margin-top: 6px;
        text-align: right;
      }

      .char-counter.over {
        color: var(--color-fair);
      }

      .checkbox-row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 14px;
      }

      .checkbox-row input {
        width: auto;
        accent-color: var(--accent);
      }

      .checkbox-row label {
        font-size: 13px;
        color: var(--text-muted);
        margin-bottom: 0;
        text-transform: none;
        letter-spacing: normal;
        font-family: var(--font-sans);
      }

      .field-error {
        font-size: 12px;
        color: var(--color-weak);
        margin-top: 6px;
        min-height: 14px;
      }

      .examples-row {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin-top: 8px;
      }

      .example-chip {
        background: rgba(31, 41, 55, 0.5);
        border: 1px solid var(--panel-border);
        color: var(--text-muted);
        border-radius: 6px;
        padding: 5px 10px;
        font-family: var(--font-mono);
        font-size: 11px;
        cursor: pointer;
      }

      .example-chip:hover {
        background: rgba(55, 65, 81, 0.7);
        color: var(--text);
      }

      .preview-block {
        font-family: var(--font-mono);
        font-size: 14px;
        line-height: 1.7;
        background: rgba(3, 7, 18, 0.5);
        border: 1px solid var(--panel-border);
        border-radius: var(--radius-sm);
        padding: 16px;
        white-space: pre-wrap;
        word-break: break-word;
        min-height: 40px;
        color: var(--text);
      }

      .preview-block:empty::before {
        content: "Your commit message will appear here.";
        color: var(--text-dim);
      }

      .actions {
        display: flex;
        gap: 10px;
        margin-top: 14px;
        flex-wrap: wrap;
      }

      .btn {
        background: var(--accent);
        color: #030712;
        border: none;
        border-radius: 8px;
        padding: 11px 18px;
        font-family: var(--font-sans);
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
      }

      .btn:hover {
        background: var(--accent-hover);
      }

      .btn:focus-visible,
      .btn-ghost:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }

      .btn-ghost {
        background: rgba(31, 41, 55, 0.6);
        border: 1px solid var(--panel-border);
        color: var(--text);
        border-radius: 8px;
        padding: 11px 16px;
        font-family: var(--font-sans);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
      }

      .btn-ghost:hover {
        background: rgba(55, 65, 81, 0.8);
      }

      .footer-note {
        text-align: center;
        color: var(--text-dim);
        font-size: 13px;
        margin-top: 8px;
      }

      .footer-note a {
        color: var(--text-muted);
      }

      .toast {
        position: fixed;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%) translateY(100px);
        background: var(--text);
        color: var(--bg);
        padding: 12px 22px;
        border-radius: 99px;
        font-family: var(--font-sans);
        font-weight: 600;
        font-size: 14px;
        opacity: 0;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 100;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      }

      .toast.show {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
      }

      @media (max-width: 640px) {
        .studio {
          padding: 18px;
        }
        .type-row {
          grid-template-columns: 1fr;
        }
        .subject-row {
          flex-direction: column;
        }
      }
    </style>
  </head>
  <body>
    <div class="app">
      <header class="hero">
        <div class="eyebrow">Developer Utilities</div>
        <h1 class="wordmark">Commit Message Generator</h1>
        <p class="tagline">Build a properly formatted Conventional Commits message — type, scope, description, body, and breaking changes — with live preview and validation.</p>
      </header>

      <main class="studio">
        <span class="section-label">Commit details</span>

        <div class="field type-row">
          <div>
            <label for="typeSelect">Type</label>
            <select id="typeSelect"></select>
          </div>
          <div class="field" style="margin-bottom: 0">
            <label for="scopeInput">Scope (optional)</label>
            <input type="text" id="scopeInput" placeholder="e.g. auth, api, ui" spellcheck="false" />
          </div>
        </div>
        <div class="type-help" id="typeHelp"></div>

        <div class="field" style="margin-top: 16px">
          <label for="subjectInput">Short description</label>
          <div class="subject-row">
            <input type="text" id="subjectInput" placeholder="add login with Google OAuth" spellcheck="false" />
          </div>
          <div class="char-counter" id="subjectCounter">0 / 50</div>
          <div class="examples-row" id="examplesRow"></div>
        </div>

        <div class="field">
          <label for="bodyInput">Body (optional)</label>
          <textarea id="bodyInput" placeholder="Explain what changed and why, in more detail…"></textarea>
        </div>

        <div class="field">
          <label for="footerInput">Footer (optional)</label>
          <input type="text" id="footerInput" placeholder="e.g. Closes #123" spellcheck="false" />
        </div>

        <div class="checkbox-row">
          <input type="checkbox" id="breakingToggle" />
          <label for="breakingToggle">This is a breaking change</label>
        </div>
        <div class="field" id="breakingFieldWrap" style="display: none">
          <label for="breakingInput">BREAKING CHANGE description</label>
          <textarea id="breakingInput" placeholder="Describe what breaks and how to migrate…"></textarea>
        </div>

        <div class="field-error" id="validationError"></div>
      </main>

      <main class="studio">
        <span class="section-label">Preview</span>
        <div class="preview-block" id="previewBlock"></div>
        <div class="actions">
          <button class="btn" id="btnCopy" type="button">Copy commit message</button>
          <button class="btn-ghost" id="btnReset" type="button">Reset</button>
        </div>
      </main>

      <p class="footer-note">Part of <a href="https://github.com/praveenscience/One-File-Tools">One File Tools</a>. Follows the <a href="https://www.conventionalcommits.org/">Conventional Commits</a> specification. Runs completely offline.</p>
    </div>

    <div class="toast" id="toast" role="status" aria-live="polite"></div>

    <script>
      /* ==========================================================
         Commit Message Generator
         Vanilla JS, no dependencies.
         ========================================================== */

      const typeSelect = document.getElementById("typeSelect");
      const typeHelp = document.getElementById("typeHelp");
      const scopeInput = document.getElementById("scopeInput");
      const subjectInput = document.getElementById("subjectInput");
      const subjectCounter = document.getElementById("subjectCounter");
      const examplesRow = document.getElementById("examplesRow");
      const bodyInput = document.getElementById("bodyInput");
      const footerInput = document.getElementById("footerInput");
      const breakingToggle = document.getElementById("breakingToggle");
      const breakingFieldWrap = document.getElementById("breakingFieldWrap");
      const breakingInput = document.getElementById("breakingInput");
      const validationError = document.getElementById("validationError");
      const previewBlock = document.getElementById("previewBlock");
      const btnCopy = document.getElementById("btnCopy");
      const btnReset = document.getElementById("btnReset");
      const toast = document.getElementById("toast");

      const SUBJECT_RECOMMENDED_MAX = 50;

      // Conventional Commits standard types, with a brief plain-English
      // explanation and one worked example each for beginners.
      const COMMIT_TYPES = [
        { type: "feat", help: "A new feature for the user.", example: "add dark mode toggle to settings" },
        { type: "fix", help: "A bug fix.", example: "prevent crash when input is empty" },
        { type: "docs", help: "Documentation-only changes.", example: "update README with setup instructions" },
        { type: "style", help: "Formatting changes with no code meaning change (whitespace, semicolons, etc.).", example: "run prettier across the codebase" },
        { type: "refactor", help: "A code change that neither fixes a bug nor adds a feature.", example: "extract validation logic into a helper" },
        { type: "perf", help: "A code change that improves performance.", example: "memoize expensive calculation" },
        { type: "test", help: "Adding or correcting tests.", example: "add unit tests for date parser" },
        { type: "build", help: "Changes to the build system or external dependencies.", example: "bump webpack to v5" },
        { type: "ci", help: "Changes to CI configuration and scripts.", example: "add lint step to GitHub Actions" },
        { type: "chore", help: "Other changes that don't modify src or test files.", example: "update .gitignore" },
        { type: "revert", help: "Reverts a previous commit.", example: "revert 'add experimental cache layer'" }
      ];

      function showToast(message) {
        toast.textContent = message;
        toast.classList.add("show");
        setTimeout(() => toast.classList.remove("show"), 2000);
      }

      /** Populates the type dropdown from COMMIT_TYPES. */
      function populateTypes() {
        COMMIT_TYPES.forEach((t) => {
          const opt = document.createElement("option");
          opt.value = t.type;
          opt.textContent = t.type;
          typeSelect.appendChild(opt);
        });
      }

      function getSelectedType() {
        return COMMIT_TYPES.find((t) => t.type === typeSelect.value) || COMMIT_TYPES[0];
      }

      /** Updates the type explanation line and example chip below it. */
      function renderTypeHelp() {
        const info = getSelectedType();
        typeHelp.textContent = info.help;

        examplesRow.innerHTML = "";
        const chip = document.createElement("button");
        chip.type = "button";
        chip.className = "example-chip";
        chip.textContent = "Try example: " + info.example;
        chip.addEventListener("click", () => {
          subjectInput.value = info.example;
          render();
        });
        examplesRow.appendChild(chip);
      }

      /** Validates a raw scope string — lowercase letters, digits, hyphens only. */
      function isValidScope(scope) {
        return scope === "" || /^[a-z0-9-]+$/i.test(scope);
      }

      /** Builds the full commit message string from current field values. */
      function buildMessage() {
        const type = typeSelect.value;
        const scope = scopeInput.value.trim();
        const subject = subjectInput.value.trim();
        const body = bodyInput.value.trim();
        const footer = footerInput.value.trim();
        const isBreaking = breakingToggle.checked;
        const breakingDesc = breakingInput.value.trim();

        const header = type + (scope ? "(" + scope + ")" : "") + (isBreaking ? "!" : "") + ": " + subject;

        const parts = [header];
        if (body) parts.push(body);

        const footerLines = [];
        if (isBreaking && breakingDesc) footerLines.push("BREAKING CHANGE: " + breakingDesc);
        if (footer) footerLines.push(footer);
        if (footerLines.length) parts.push(footerLines.join("\n"));

        return parts.join("\n\n");
      }

      /** Validates the form and returns an error message, or empty string if valid. */
      function validate() {
        const subject = subjectInput.value.trim();
        const scope = scopeInput.value.trim();

        if (subject === "") return "A short description is required.";
        if (/[.]$/.test(subject)) return "Conventional Commits recommends no trailing period on the subject.";
        if (!isValidScope(scope)) return "Scope should only contain letters, numbers, and hyphens (e.g. auth, api-v2).";
        if (breakingToggle.checked && breakingInput.value.trim() === "") return "Describe the breaking change, or uncheck the breaking-change box.";
        return "";
      }

      /** Recomputes and renders the preview, character counter, and validation state. */
      function render() {
        renderTypeHelp();

        const len = subjectInput.value.length;
        subjectCounter.textContent = len + " / " + SUBJECT_RECOMMENDED_MAX;
        subjectCounter.classList.toggle("over", len > SUBJECT_RECOMMENDED_MAX);

        breakingFieldWrap.style.display = breakingToggle.checked ? "block" : "none";

        const error = validate();
        validationError.textContent = error;
        previewBlock.textContent = error ? "" : buildMessage();
      }

      [typeSelect, scopeInput, subjectInput, bodyInput, footerInput, breakingInput].forEach((el) => {
        el.addEventListener("input", render);
      });
      typeSelect.addEventListener("change", render);
      breakingToggle.addEventListener("change", render);

      btnCopy.addEventListener("click", () => {
        const text = previewBlock.textContent;
        if (!text) {
          showToast("Fix the errors above first");
          return;
        }
        if (navigator.clipboard && navigator.clipboard.writeText) {
          navigator.clipboard
            .writeText(text)
            .then(() => showToast("Commit message copied!"))
            .catch(() => showToast("Copy failed — select the text manually"));
        } else {
          showToast("Clipboard unavailable");
        }
      });

      btnReset.addEventListener("click", () => {
        typeSelect.value = "feat";
        scopeInput.value = "";
        subjectInput.value = "";
        bodyInput.value = "";
        footerInput.value = "";
        breakingToggle.checked = false;
        breakingInput.value = "";
        render();
        subjectInput.focus();
      });

      populateTypes();
      render();
    </script>
  </body>
</html>