git-history-ui 2.0.1 → 2.0.3

package/CHANGELOG.md

@@ -4,6 +4,43 @@ All notable changes to this project are documented in this file.
 The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and
 this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.0.3] - 2026-05-01
+
+### Added
+
+- README now includes a preview screenshot, sharper positioning, a "why use
+  this" section, and comparisons with GitHub UI, terminal tools, and desktop
+  Git clients.
+- Package files now include `docs/**/*` so README preview assets are available
+  in published packages.
+
+### Fixed
+
+- Theme toggle now switches from the default system preference to dark mode on
+  the first click, making dark mode immediately visible on light systems.
+- Theme button accessibility text now reports both the selected preference and
+  resolved theme.
+
+## [2.0.2] - 2026-05-01
+
+### Added
+
+- Commit graph now uses a theme-aware canvas rendering with lane guides,
+  hover and selection states, and branch/tag pills.
+- Graph-specific light and dark design tokens improve contrast in both themes.
+
+### Changed
+
+- CI now tests the Angular 20 frontend on supported Node 20 and Node 22
+  versions only.
+- Node engine metadata and README requirements now match Angular 20's
+  supported Node versions.
+
+### Fixed
+
+- Docker image builds now include the root `public` assets in the builder
+  stage before copying them into the runtime image.
+
 ## [2.0.1] - 2026-04-28
 
 ### Fixed

package/README.md

@@ -7,29 +7,56 @@
 [![GitHub stars](https://img.shields.io/github/stars/beingmartinbmc/git-history-ui.svg)](https://github.com/beingmartinbmc/git-history-ui)
 [![GitHub issues](https://img.shields.io/github/issues/beingmartinbmc/git-history-ui.svg)](https://github.com/beingmartinbmc/git-history-ui/issues)
 
-A beautiful, modern web UI for visualizing git history with interactive commit graphs, search, filtering, and diff visualization. Built with Angular and Node.js.
+A fast, zero-setup web UI to explore your git history visually. Run it in any
+repo and inspect branches, commits, and diffs interactively in your browser.
+
+## 👀 Preview
+
+![Git History UI screenshot](./docs/screenshot.png)
 
 ## 🚀 Quick Start
 
 ```bash
+# Go to the git repository you want to inspect
+cd /path/to/your/project
+
 # Run directly with npx (no installation needed)
 npx git-history-ui@latest
 ```
 
 That's it! The application will start on `http://localhost:3000` and open your browser automatically.
+It reads history from the current working directory, so run it inside the project whose commits you want to visualize.
+
+No installs. No config. Just your commits, visualized.
+
+## 🤔 Why use this?
+
+- `git log` is powerful, but hard to scan when branches, merges, and long-lived work overlap.
+- GitHub's commit UI does not show your local or unpushed commits.
+- Desktop clients can be heavy when you just want a quick read on one repo.
+- `git-history-ui` gives you a fast, local, visual way to explore history from any git repository.
 
 ## ✨ Features
 
-- **🎨 Interactive Commit Graph** - D3.js-powered visualizations with branch tracking
-- **🔍 Advanced Search & Filtering** - Search by author, date, commit message, or files
-- **📊 Dual View Modes** - Switch between graph view and list view
-- **🎨 Color Palette System** - 6 light and 6 dark themes
-- **🌙 Dark/Light Mode** - Toggle between themes
-- **📱 Responsive Design** - Works on desktop and mobile
+- **Canvas-based commit graph** - Branch lanes, hover states, selected commits, and branch/tag pills.
+- **Real-time filtering** - Filter by author, date range, commit text, or file path.
+- **Diff-first commit review** - Move from graph to commit list to unified or split diffs without leaving the browser.
+- **Local by default** - Runs against the repo on your machine, including unpushed commits.
+- **Dark/light/system mode** - Toggle manually or follow your OS preference.
+- **Zero setup** - Unlike GitKraken or SourceTree, it runs instantly with `npx`.
+
+## ⚖️ How it compares
+
+- **vs GitHub UI**: shows local branches and unpushed commits because it runs inside your repository.
+- **vs `tig` or `git log`**: gives you visual lanes, filters, and browser-based diffs instead of a terminal-only view.
+- **vs desktop Git clients**: starts on demand with no workspace setup, account login, or project import.
 
 ## 📖 Usage
 
 ### CLI Options
+
+Run these commands from inside the git repository you want to inspect.
+
 ```bash
 # Custom port
 npx git-history-ui@latest --port 8080
@@ -73,7 +100,7 @@ docker run -p 3000:3000 git-history-ui
 ### Setup
 ```bash
 # Clone and install
-git clone https://github.com/ankit-sharma/git-history-ui.git
+git clone https://github.com/beingmartinbmc/git-history-ui.git
 cd git-history-ui
 npm install
 
@@ -92,7 +119,7 @@ cd frontend && npm test
 
 ## 📋 Requirements
 
-- **Node.js**: 18.0.0 or higher
+- **Node.js**: 20.19.0 or higher, or 22.12.0 or higher
 - **Git**: Any version (must be in a git repository)
 
 ## 🤝 Contributing

package/build/frontend/index.html

@@ -9,8 +9,8 @@
     <meta name="theme-color" content="#0b1020" media="(prefers-color-scheme: dark)">
     <meta name="theme-color" content="#f7f8fa" media="(prefers-color-scheme: light)">
     <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234f46e5' d='M12 .5a11.5 11.5 0 1 0 11.5 11.5A11.5 11.5 0 0 0 12 .5Zm5.7 14.83a1 1 0 0 1-1.41 1.41L13 13.41V19a1 1 0 0 1-2 0v-5.59l-3.29 3.33A1 1 0 1 1 6.3 15.34l5-5.05a1 1 0 0 1 1.42 0Z'/%3E%3C/svg%3E">
-  <style>*,:before,:after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}:root{color-scheme:light;--bg-app:#f7f8fa;--bg-surface:#ffffff;--bg-surface-2:#f3f4f6;--bg-elevated:#ffffff;--bg-hover:#eef2ff;--bg-selected:#e0e7ff;--bg-overlay:rgba(15, 23, 42, .45);--fg-primary:#0f172a;--fg-secondary:#475569;--fg-muted:#64748b;--fg-subtle:#94a3b8;--fg-inverted:#ffffff;--border-soft:#e2e8f0;--border-strong:#cbd5e1;--border-focus:#6366f1;--accent:#4f46e5;--accent-hover:#4338ca;--accent-soft:#eef2ff;--accent-fg:#ffffff;--success:#16a34a;--warning:#d97706;--danger:#dc2626;--diff-add-bg:#dcfce7;--diff-add-fg:#14532d;--diff-add-gutter:#86efac;--diff-del-bg:#fee2e2;--diff-del-fg:#7f1d1d;--diff-del-gutter:#fca5a5;--diff-hunk-bg:#f1f5f9;--diff-hunk-fg:#475569;--shadow-sm:0 1px 2px rgba(15, 23, 42, .06);--shadow-md:0 4px 12px rgba(15, 23, 42, .08);--shadow-lg:0 12px 32px rgba(15, 23, 42, .12);--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--font-sans:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Mono", "Liberation Mono", "Courier New", monospace}*,*:before,*:after{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:var(--font-sans);font-size:14px;line-height:1.5;color:var(--fg-primary);background:var(--bg-app);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}</style><link rel="stylesheet" href="styles-YQ73RJ2V.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles-YQ73RJ2V.css"></noscript></head>
+  <style>*,:before,:after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}:root{color-scheme:light;--bg-app:#f7f8fa;--bg-surface:#ffffff;--bg-surface-2:#f3f4f6;--bg-elevated:#ffffff;--bg-hover:#eef2ff;--bg-selected:#e0e7ff;--bg-overlay:rgba(15, 23, 42, .45);--fg-primary:#0f172a;--fg-secondary:#475569;--fg-muted:#64748b;--fg-subtle:#94a3b8;--fg-inverted:#ffffff;--border-soft:#e2e8f0;--border-strong:#cbd5e1;--border-focus:#6366f1;--accent:#4f46e5;--accent-hover:#4338ca;--accent-soft:#eef2ff;--accent-fg:#ffffff;--success:#16a34a;--warning:#d97706;--danger:#dc2626;--diff-add-bg:#dcfce7;--diff-add-fg:#14532d;--diff-add-gutter:#86efac;--diff-del-bg:#fee2e2;--diff-del-fg:#7f1d1d;--diff-del-gutter:#fca5a5;--diff-hunk-bg:#f1f5f9;--diff-hunk-fg:#475569;--graph-guide:rgba(148, 163, 184, .28);--graph-row-alt:rgba(15, 23, 42, .025);--graph-row-hover:rgba(79, 70, 229, .08);--graph-row-selected:rgba(79, 70, 229, .14);--graph-node-ring:#ffffff;--graph-shadow:rgba(15, 23, 42, .12);--shadow-sm:0 1px 2px rgba(15, 23, 42, .06);--shadow-md:0 4px 12px rgba(15, 23, 42, .08);--shadow-lg:0 12px 32px rgba(15, 23, 42, .12);--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--font-sans:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Mono", "Liberation Mono", "Courier New", monospace}*,*:before,*:after{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:var(--font-sans);font-size:14px;line-height:1.5;color:var(--fg-primary);background:var(--bg-app);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}</style><link rel="stylesheet" href="styles-CO6MLMTR.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles-CO6MLMTR.css"></noscript></head>
   <body>
     <app-root></app-root>
-  <script src="polyfills-5CFQRCPP.js" type="module"></script><script src="main-YTFHD36T.js" type="module"></script></body>
+  <script src="polyfills-5CFQRCPP.js" type="module"></script><script src="main-VDZAFLAV.js" type="module"></script></body>
 </html>