@programinglive/commiter 1.2.2 → 1.2.4

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [1.2.4](https://github.com/programinglive/commiter/compare/v1.2.3...v1.2.4) (2025-11-27)
+
+
+### 🧹 Chores
+
+* **release:** 1.2.3 ([9d12f7e](https://github.com/programinglive/commiter/commit/9d12f7e7f9ec5d64b4f7a6d30a4c046e760d73bb))
+
+
+### 🐛 Bug Fixes
+
+* **web:** improve terminal layout and animation ([6d196f4](https://github.com/programinglive/commiter/commit/6d196f4f922e72ad32e9cb570046ff7bf82c398e))
+
+### [1.2.3](https://github.com/programinglive/commiter/compare/v1.2.2...v1.2.3) (2025-11-27)
+
+
+### ✨ Features
+
+* automate website releases timeline updates from release notes ([5abf788](https://github.com/programinglive/commiter/commit/5abf788afd90dde0b8a52dc3658720044f40b2ee))
+
 ### [1.2.2](https://github.com/programinglive/commiter/compare/v1.2.1...v1.2.2) (2025-11-27)
 
 

package/docs/release-notes/RELEASE_NOTES.md

@@ -4,6 +4,8 @@ This document summarizes every published version of `@programinglive/commiter`.
 
 | Version | Date | Highlights |
 |---------|------|------------|
+| 1.2.4 | 2025-11-27 | **release:** 1.2.3 (9d12f7e) |
+| 1.2.3 | 2025-11-27 | automate website releases timeline updates from release notes (5abf788) |
 | 1.2.2 | 2025-11-27 | update homepage url (556b173) |
 | 1.2.1 | 2025-11-26 | **release:** improve website version update reliability (18f5ace) |
 | 1.2.0 | 2025-11-26 | See CHANGELOG for details. |
@@ -46,6 +48,21 @@ This document summarizes every published version of `@programinglive/commiter`.
 
 
 
+
+
+## 1.2.4 – 🧹 Chores
+
+Released on **2025-11-27**.
+
+- **release:** 1.2.3 (9d12f7e)
+- **web:** improve terminal layout and animation (6d196f4)
+
+## 1.2.3 – ✨ Features
+
+Released on **2025-11-27**.
+
+- automate website releases timeline updates from release notes (5abf788)
+
 ## 1.2.2 – 🧹 Chores
 
 Released on **2025-11-27**.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@programinglive/commiter",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "description": "Commiter keeps repositories release-ready by enforcing conventional commits, generating icon-rich changelog entries, and orchestrating semantic version bumps without manual toil. It bootstraps Husky hooks, commitlint rules, and release scripts that inspect history, detect framework-specific test commands, run them automatically, tag git releases, coordinate npm publishing, surface release metrics, enforce project-specific checks, and give maintainers observability across distributed teams. Plus!",
   "main": "index.js",
   "bin": {
@@ -14,7 +14,8 @@
     "release:minor": "node scripts/release.cjs minor",
     "release:patch": "node scripts/release.cjs patch",
     "web": "npx serve web",
-    "update:web": "node scripts/update-web-version.js"
+    "update:web": "node scripts/update-web-version.js",
+    "update:web:releases": "node scripts/update-web-releases.js"
   },
   "keywords": [
     "commit",

package/scripts/release.cjs

@@ -188,12 +188,15 @@ function runRelease({
     }
   }
 
+  let websiteVersionUpdated = false;
+  let websiteTimelineUpdated = false;
+
   // Update website version
   try {
     console.log('🌐 Updating website version...');
     const updateWebResult = spawnSync(process.execPath, ['scripts/update-web-version.js'], { stdio: 'inherit', cwd });
     if (updateWebResult.status === 0) {
-      spawnSync('git', ['add', 'web/index.html'], { stdio: 'inherit', cwd });
+      websiteVersionUpdated = true;
     } else {
       console.warn('⚠️  Failed to update website version');
     }
@@ -201,6 +204,23 @@ function runRelease({
     console.warn(`⚠️  Skipping website version update: ${error.message}`);
   }
 
+  // Update website releases timeline
+  try {
+    console.log('🌐 Updating website releases timeline...');
+    const updateTimelineResult = spawnSync(process.execPath, ['scripts/update-web-releases.js'], { stdio: 'inherit', cwd });
+    if (updateTimelineResult.status === 0) {
+      websiteTimelineUpdated = true;
+    } else {
+      console.warn('⚠️  Failed to update website releases timeline');
+    }
+  } catch (error) {
+    console.warn(`⚠️  Skipping website releases timeline update: ${error.message}`);
+  }
+
+  if (websiteVersionUpdated || websiteTimelineUpdated) {
+    spawnSync('git', ['add', 'web/index.html'], { stdio: 'inherit', cwd });
+  }
+
   return releaseResult;
 }
 if (require.main === module) {

package/scripts/update-web-releases.js

@@ -0,0 +1,232 @@
+const fs = require('fs');
+const path = require('path');
+
+const DEFAULT_MAX_RELEASES = 5;
+const RELEASE_NOTES_PATH = path.join(__dirname, '..', 'docs', 'release-notes', 'RELEASE_NOTES.md');
+const INDEX_PATH = path.join(__dirname, '..', 'web', 'index.html');
+const MARKER_START = '<!-- RELEASES_TIMELINE:START -->';
+const MARKER_END = '<!-- RELEASES_TIMELINE:END -->';
+
+function readFileOrThrow(filePath, label) {
+  if (!fs.existsSync(filePath)) {
+    throw new Error(`${label} not found at ${filePath}`);
+  }
+  return fs.readFileSync(filePath, 'utf8');
+}
+
+function sanitizeText(text = '') {
+  return text
+    .replace(/\*\*/g, '')
+    .replace(/`/g, '')
+    .replace(/\[([^\]]+)\]\([^\)]+\)/g, '$1')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+function escapeHtml(text = '') {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+function formatDate(dateString) {
+  if (!dateString) {
+    return 'Date pending';
+  }
+  const date = new Date(dateString);
+  if (Number.isNaN(date.valueOf())) {
+    return dateString;
+  }
+  return date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  });
+}
+
+function extractReleaseSections(content) {
+  const normalizedContent = content.replace(/\r\n/g, '\n');
+  const tableEntries = extractReleaseTableEntries(normalizedContent);
+  const detailMap = extractReleaseDetailsMap(normalizedContent);
+
+  if (tableEntries.length === 0) {
+    return extractSectionEntries(normalizedContent);
+  }
+
+  return tableEntries.map((entry) => {
+    const details = detailMap.get(entry.version) || {};
+    return {
+      version: entry.version,
+      releaseType: details.releaseType || '',
+      date: entry.date,
+      description: details.description || entry.highlight || 'See CHANGELOG for details.'
+    };
+  });
+}
+
+function extractReleaseTableEntries(content) {
+  const lines = content.split('\n');
+  const headerIndex = lines.findIndex((line) => /^\|\s*Version\s*\|/i.test(line));
+  if (headerIndex === -1) {
+    return [];
+  }
+
+  const entries = [];
+  for (let i = headerIndex + 2; i < lines.length; i++) {
+    const line = lines[i];
+    if (!line.trim().startsWith('|')) {
+      break;
+    }
+    const cells = line.split('|').slice(1, -1).map((cell) => sanitizeText(cell));
+    if (cells.length < 3) {
+      continue;
+    }
+    const [version, date, highlight] = cells;
+    if (!version) {
+      continue;
+    }
+    entries.push({ version, date, highlight });
+  }
+
+  return entries;
+}
+
+function extractReleaseDetailsMap(content) {
+  const map = new Map();
+  const sectionRegex = /^##\s+(.+?)\s*$([\s\S]*?)(?=^##\s+|$)/gm;
+  let match;
+
+  while ((match = sectionRegex.exec(content)) !== null) {
+    const heading = match[1].trim();
+    const body = match[2].trim().replace(/\r/g, '');
+    const headingMatch = heading.match(/^(\d+\.\d+\.\d+)(?:\s+[–-]\s+(.+))?/);
+    if (!headingMatch) {
+      continue;
+    }
+
+    const version = headingMatch[1];
+    const releaseType = headingMatch[2] ? headingMatch[2].trim() : '';
+    const descriptionMatch = body.match(/^\s*\-\s+(.+)$/m);
+    const description = descriptionMatch ? sanitizeText(descriptionMatch[1]) : undefined;
+
+    map.set(version, {
+      releaseType,
+      description
+    });
+  }
+
+  return map;
+}
+
+function extractSectionEntries(content) {
+  const sections = [];
+  const sectionRegex = /^##\s+(.+?)\s*$([\s\S]*?)(?=^##\s+|$)/gm;
+  let match;
+
+  while ((match = sectionRegex.exec(content)) !== null) {
+    const heading = match[1].trim();
+    const body = match[2].trim().replace(/\r/g, '');
+    const headingMatch = heading.match(/^(\d+\.\d+\.\d+)(?:\s+[–-]\s+(.+))?/);
+    if (!headingMatch) {
+      continue;
+    }
+
+    const version = headingMatch[1];
+    const releaseType = headingMatch[2] ? headingMatch[2].trim() : '';
+    const dateMatch = body.match(/Released on \*\*(\d{4}-\d{2}-\d{2})\*\*\.?/);
+    const descriptionMatch = body.match(/^\s*\-\s+(.+)$/m);
+
+    sections.push({
+      version,
+      releaseType,
+      date: dateMatch ? dateMatch[1] : undefined,
+      description: descriptionMatch ? sanitizeText(descriptionMatch[1]) : 'See CHANGELOG for details.'
+    });
+  }
+
+  return sections;
+}
+
+function renderReleaseItem(release, { latest = false, indent = '' } = {}) {
+  const badge = latest ? `\n${indent}    <div class="release-badge">Latest</div>` : '';
+  const typeLine = release.releaseType
+    ? `\n${indent}    <div class="release-type">${escapeHtml(release.releaseType)}</div>`
+    : '';
+
+  return `${indent}<div class="release-item">${badge}
+${indent}    <div class="release-version">v${escapeHtml(release.version)}</div>
+${indent}    <div class="release-date">${escapeHtml(formatDate(release.date))}</div>${typeLine}
+${indent}    <p class="release-description">${escapeHtml(release.description)}</p>
+${indent}</div>`;
+}
+
+function updateIndexHtml({
+  htmlContent,
+  releases,
+  markerStart = MARKER_START,
+  markerEnd = MARKER_END,
+  indent = '                '
+}) {
+  const startIndex = htmlContent.indexOf(markerStart);
+  const endIndex = htmlContent.indexOf(markerEnd);
+
+  if (startIndex === -1 || endIndex === -1 || endIndex <= startIndex) {
+    throw new Error('Release timeline markers not found in web/index.html');
+  }
+
+  const before = htmlContent.slice(0, startIndex + markerStart.length);
+  const after = htmlContent.slice(endIndex);
+  const timeline = releases
+    .map((release, idx) => renderReleaseItem(release, { latest: idx === 0, indent }))
+    .join('\n');
+
+  return `${before}\n${timeline}\n${indent}${after.trimStart()}`;
+}
+
+function updateWebReleases({
+  releaseNotesPath = RELEASE_NOTES_PATH,
+  indexPath = INDEX_PATH,
+  maxReleases = DEFAULT_MAX_RELEASES
+} = {}) {
+  const notesContent = readFileOrThrow(releaseNotesPath, 'Release notes');
+  const releases = extractReleaseSections(notesContent).slice(0, maxReleases);
+
+  if (releases.length === 0) {
+    console.warn('⚠️  No release sections found; skipping website update.');
+    return false;
+  }
+
+  const htmlContent = readFileOrThrow(indexPath, 'Landing page');
+  const nextContent = updateIndexHtml({ htmlContent, releases });
+  fs.writeFileSync(indexPath, nextContent);
+  console.log(`✅ Updated website releases timeline with ${releases.length} entries.`);
+  return true;
+}
+
+function main() {
+  try {
+    updateWebReleases();
+  } catch (error) {
+    console.error(`❌ Failed to update website releases timeline: ${error.message}`);
+    process.exit(1);
+  }
+}
+
+module.exports = {
+  escapeHtml,
+  sanitizeText,
+  formatDate,
+  extractReleaseSections,
+  renderReleaseItem,
+  updateIndexHtml,
+  updateWebReleases,
+  MARKER_START,
+  MARKER_END
+};
+
+if (require.main === module) {
+  main();
+}

package/web/css/style.css

@@ -163,7 +163,14 @@ body {
 .hero {
     padding: calc(var(--spacing-3xl) + 60px) 0 var(--spacing-3xl);
     position: relative;
-    overflow: hidden;
+    overflow: visible;
+}
+
+.hero .container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--spacing-3xl);
+    align-items: center;
 }
 
 .hero::before {
@@ -277,22 +284,19 @@ body {
 
 /* Hero Visual */
 .hero-visual {
-    position: absolute;
-    right: -100px;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 600px;
+    position: relative;
+    width: 100%;
     animation: fadeInRight 0.8s ease-out 0.5s both;
 }
 
 @keyframes fadeInRight {
     from {
         opacity: 0;
-        transform: translateY(-50%) translateX(40px);
+        transform: translateX(40px);
     }
     to {
         opacity: 1;
-        transform: translateY(-50%) translateX(0);
+        transform: translateX(0);
     }
 }
 
@@ -338,6 +342,9 @@ body {
     padding: var(--spacing-md);
     font-family: 'Courier New', monospace;
     font-size: 0.875rem;
+    max-height: none;
+    overflow-y: auto;
+    min-height: auto;
 }
 
 .code-line {
@@ -870,8 +877,13 @@ body {
    Responsive Design
    =========================== */
 @media (max-width: 1024px) {
+    .hero .container {
+        grid-template-columns: 1fr;
+    }
+    
     .hero-visual {
-        display: none;
+        display: block;
+        margin-top: var(--spacing-2xl);
     }
     
     .hero-content {

package/web/index.html

@@ -66,7 +66,7 @@
             <div class="hero-content">
                 <div class="hero-badge">
                     <span class="badge-dot"></span>
-                    <span>v1.2.2 - Latest Release</span>
+                    <span>v1.2.4 - Latest Release</span>
                 </div>
                 <h1 class="hero-title">
                     Ship Releases with <span class="gradient-text">Confidence</span>
@@ -90,7 +90,7 @@
                 </div>
                 <div class="hero-stats">
                     <div class="stat-item">
-                        <div class="stat-value">1.2.2</div>
+                        <div class="stat-value">1.2.4</div>
                         <div class="stat-label">Latest Version</div>
                     </div>
                     <div class="stat-item">
@@ -382,39 +382,38 @@
                 <p class="section-subtitle">Latest updates and improvements</p>
             </div>
             <div class="releases-timeline">
+                <!-- RELEASES_TIMELINE:START -->
                 <div class="release-item">
                     <div class="release-badge">Latest</div>
-                    <div class="release-version">v1.1.9</div>
-                    <div class="release-date">November 24, 2025</div>
-                    <div class="release-type">🐛 Bug Fixes</div>
-                    <p class="release-description">Convert release scripts to CJS to support ESM projects</p>
+                    <div class="release-version">v1.2.4</div>
+                    <div class="release-date">November 27, 2025</div>
+                    <div class="release-type">🧹 Chores</div>
+                    <p class="release-description">release: 1.2.3 (9d12f7e)</p>
                 </div>
                 <div class="release-item">
-                    <div class="release-version">v1.1.8</div>
-                    <div class="release-date">November 22, 2025</div>
-                    <div class="release-type">🐛 Bug Fixes</div>
-                    <p class="release-description">Update installation script to copy missing files and update gitignore
-                    </p>
+                    <div class="release-version">v1.2.3</div>
+                    <div class="release-date">November 27, 2025</div>
+                    <div class="release-type">✨ Features</div>
+                    <p class="release-description">automate website releases timeline updates from release notes (5abf788)</p>
                 </div>
                 <div class="release-item">
-                    <div class="release-version">v1.1.7</div>
-                    <div class="release-date">November 11, 2025</div>
-                    <div class="release-type">📝 Documentation</div>
-                    <p class="release-description">Recommend dev workflow MCP server for enhanced workflow automation
-                    </p>
+                    <div class="release-version">v1.2.2</div>
+                    <div class="release-date">November 27, 2025</div>
+                    <div class="release-type">🧹 Chores</div>
+                    <p class="release-description">update homepage url (556b173)</p>
                 </div>
                 <div class="release-item">
-                    <div class="release-version">v1.1.1</div>
-                    <div class="release-date">November 5, 2025</div>
+                    <div class="release-version">v1.2.1</div>
+                    <div class="release-date">November 26, 2025</div>
                     <div class="release-type">🐛 Bug Fixes</div>
-                    <p class="release-description">Eliminated fs.F_OK deprecation warning from release runs</p>
+                    <p class="release-description">release: improve website version update reliability (18f5ace)</p>
                 </div>
                 <div class="release-item">
-                    <div class="release-version">v1.0.12</div>
-                    <div class="release-date">October 29, 2025</div>
-                    <div class="release-type">✨ Features</div>
-                    <p class="release-description">Autodetects project test command before releasing</p>
+                    <div class="release-version">v1.2.0</div>
+                    <div class="release-date">November 26, 2025</div>
+                    <p class="release-description">See CHANGELOG for details.</p>
                 </div>
+                <!-- RELEASES_TIMELINE:END -->
             </div>
             <div class="releases-cta">
                 <a href="https://github.com/programinglive/commiter/releases" target="_blank" class="btn btn-secondary">

package/web/js/script.js

@@ -147,14 +147,36 @@ window.addEventListener('scroll', () => {
 // ===========================
 // Terminal Animation
 // ===========================
-const codeLines = document.querySelectorAll('.code-line');
-let delay = 0;
+function animateTerminal() {
+    const codeLines = document.querySelectorAll('.code-line');
+    let delay = 0;
 
-codeLines.forEach((line, index) => {
-    line.style.opacity = '0';
-    line.style.animation = `fadeIn 0.5s ease-out ${delay}s forwards`;
-    delay += 0.3;
-});
+    codeLines.forEach((line, index) => {
+        line.style.opacity = '0';
+        line.style.animation = 'none';
+        // Trigger reflow to restart animation
+        void line.offsetWidth;
+        line.style.animation = `fadeIn 0.5s ease-out ${delay}s forwards`;
+        delay += 0.3;
+    });
+}
+
+// Initial animation on page load
+animateTerminal();
+
+// Replay animation when scrolling back to the terminal
+const codeWindow = document.querySelector('.code-window');
+if (codeWindow) {
+    const terminalObserver = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                animateTerminal();
+            }
+        });
+    }, { threshold: 0.5 });
+    
+    terminalObserver.observe(codeWindow);
+}
 
 // Add fadeIn keyframe animation
 const style = document.createElement('style');