Skip to content

Commit a0e890d

Browse files
fulsomenkofulsomenko
authored
KAN-208/create-a-landing-page-for-the-project (#169)
* flake.lock: Update Flake lock file updates: • Updated input 'nixpkgs': 'github:NixOS/nixpkgs/2dad7af78a183b6c486702c18af8a9544f298377?narHash=sha256-LYr4IDfuihCkFAkSYz5//gT2r1ewcWBYgd5AxPzPLIo%3D' (2025-10-09) → 'github:NixOS/nixpkgs/d1c15b7d5806069da59e819999d70e1cec0760bf?narHash=sha256-b9uG8yN50DRQ6A7JdZBfzq718ryYrlmGgqkRm9OOwCE%3D' (2026-02-16) • Updated input 'rust-overlay': 'github:oxalica/rust-overlay/dec08d5dfeca099b0058f0cc61264b04f33db42c?narHash=sha256-jPz0K8xsT2eNSratkw8bfPwSlTuOXGeUvz%2Bbd9wq/vY%3D' (2025-10-07) → 'github:oxalica/rust-overlay/85078369717bdbe1f266c9eaad5e66956fb6feea?narHash=sha256-4zOvSi0WkS2WAaoJtM28wECtS9S%2BL38CPYbhF%2BwINDA%3D' (2026-02-21) * Add nix build for web landing page - Create web/default.nix for building static site - Add kanban-web package to flake.nix - Static files (HTML, CSS, GIF) packaged for deployment * flake.lock: Update * remove demo * fix: remove duplicate border between roadmap and footer sections * fix: remove duplicate $ prompt * fix: remove in progress from the roadmap * fix: Documentation does not exist * style: group and equalize CTA buttons with grid layout * style: left-align CTA buttons and add visual 'or' separator * style: revert to vertical CTA buttons with equal width and tight spacing * style: stack installation methods vertically in single grey box * style: remove unused CSS classes - Removed .demo-gif (not in HTML) - Removed .cta-buttons (refactored) - Removed .code-prompt (refactored) - Removed .quick-start-title (not in HTML) - Removed .status-badge.in-progress (unused) * fix: cleanup of installation and duped hero content * fix: remove a word * fix: remove a border * style: replace emoji symbols in roadmap with [ ] for planned items * style: change completed checkbox from ✓ to [x] * feat: add shell syntax highlighting with highlight.js - Add highlight.js library via CDN with atom-one-dark theme - Add language-sh class to all code blocks - Initialize highlighting on page load - Provides color-coded shell syntax for all installation commands * style: highlight shell prompt ($) with accent color - Wrap $ prompts in span.prompt class - Style prompts with orange accent color and semibold weight - Applied to all code blocks (cargo, nix, git, etc.) * fix: ensure prompt color overrides highlight.js styling * fix: use inline style for prompt color to override highlight.js * fix: disable highlight.js on code blocks to preserve prompt color - Remove language-sh class so highlight.js doesn't override inline styles - Simplify CSS without !important rules - Prompt $ now displays correctly in orange * fix: add nohighlight class to prevent highlight.js from processing code blocks * fix: Remove highlight.js CDN dependency from landing page Removes highlight.js stylesheet and initialization script that were not functional (all code blocks use nohighlight class). This eliminates 2 unnecessary HTTP requests and ~150KB of external dependencies. * fix: Remove inline styles from terminal prompts Removes redundant inline style="color: #c9714a;" attributes from prompt spans. The .prompt CSS class already provides this styling, so inline styles are unnecessary duplication. * fix: Add comment styling to shell command examples Wrap the shell comment "# or" in a span with the comment class for visual distinction, providing styling similar to syntax highlighting without external dependencies. * fix: Add CSS styling for comment class Define .comment class with muted text color and italic font style for visual distinction of shell comments in code blocks. * fix: drop wording from title * Fix code block selection behavior and remove unused CSS rule - Change user-select from 'all' to 'text' for better UX when selecting individual lines in code blocks - Remove unnecessary .install-method:last-child border-bottom rule (no borders were applied between install methods)
1 parent 915364a commit a0e890d

File tree

5 files changed

+699
-6
lines changed

5 files changed

+699
-6
lines changed

‎flake.lock‎

Lines changed: 6 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎flake.nix‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@
6767
kanban-mcp = pkgs.callPackage ./crates/kanban-mcp/default.nix {
6868
inherit kanban;
6969
};
70+
kanban-web = pkgs.callPackage ./web/default.nix {};
7071
mcp-server-git = servers.packages.${system}.mcp-server-git;
7172
aggregate-changelog = aggregateChangelog;
7273
bump-version = bumpVersion;

‎web/default.nix‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
lib,
3+
stdenv,
4+
}:
5+
6+
stdenv.mkDerivation {
7+
pname = "kanban-web";
8+
version = "1.0.0";
9+
10+
src = lib.cleanSource ./.;
11+
12+
dontBuild = true;
13+
14+
installPhase = ''
15+
mkdir -p $out
16+
cp index.html $out/
17+
cp styles.css $out/
18+
'';
19+
20+
meta = {
21+
description = "Kanban landing page - keyboard-driven project management for developers";
22+
homepage = "https://kanban.yoon.se";
23+
license = lib.licenses.asl20;
24+
maintainers = with lib.maintainers; [ fulsomenko ];
25+
platforms = lib.platforms.all;
26+
};
27+
}

‎web/index.html‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta name="description" content="Fast, terminal-based kanban board written in Rust. Vim-like navigation, MCP integration, local-first data storage.">
7+
<meta name="keywords" content="kanban, project management, terminal, rust, vim, developer tools">
8+
<title>kanban</title>
9+
<link rel="stylesheet" href="styles.css">
10+
</head>
11+
<body>
12+
<main class="container">
13+
<!-- Hero Section -->
14+
<section class="hero">
15+
<h1 class="hero-title">kanban</h1>
16+
<p class="hero-tagline">Keyboard-driven project management</p>
17+
<nav class="hero-links">
18+
<a href="https://github.com/fulsomenko/kanban" class="link">GitHub</a>
19+
<a href="https://crates.io/crates/kanban-cli" class="link">Crates.io</a>
20+
</nav>
21+
</section>
22+
23+
<!-- Installation Section -->
24+
<section class="installation">
25+
<h2>Getting Started</h2>
26+
<div class="install-methods">
27+
<div class="install-method">
28+
<h3>From Crates.io</h3>
29+
<pre><code class="code-block nohighlight"><span class="prompt">$</span> cargo install kanban-cli</code></pre>
30+
</div>
31+
32+
<div class="install-method">
33+
<h3>Using Nix</h3>
34+
<pre><code class="code-block nohighlight"><span class="prompt">$</span> nix run github:fulsomenko/kanban
35+
<span class="prompt">$</span> <span class="comment"># or</span>
36+
<span class="prompt">$</span> nix run github:nixos/nixpkgs/nixpkgs-unstable#kanban
37+
</code></pre>
38+
</div>
39+
40+
<div class="install-method">
41+
<h3>From Source</h3>
42+
<pre><code class="code-block nohighlight"><span class="prompt">$</span> git clone https://github.com/fulsomenko/kanban
43+
<span class="prompt">$</span> cd kanban
44+
<span class="prompt">$</span> cargo install --path crates/kanban-cli</code></pre>
45+
</div>
46+
</div>
47+
48+
</section>
49+
50+
<!-- Features Section -->
51+
<section class="features">
52+
<h2>Features</h2>
53+
<div class="features-grid">
54+
<div class="card">
55+
<h3 class="card-title">⌨️ Vim-Like Power</h3>
56+
<p class="card-description">
57+
Keyboard-driven with hjkl navigation, vim search with <code>/</code>, jump motions with <code>gg</code>/<code>G</code>, context-aware shortcuts, and full undo/redo support.
58+
</p>
59+
</div>
60+
61+
<div class="card">
62+
<h3 class="card-title">🚀 Blazing Fast</h3>
63+
<p class="card-description">
64+
Written in Rust for native performance. Instant saves with debouncing, multi-instance safe with conflict detection, and zero browser overhead.
65+
</p>
66+
</div>
67+
68+
<div class="card">
69+
<h3 class="card-title">🔌 Three Interfaces</h3>
70+
<p class="card-description">
71+
<strong>TUI</strong> for interactive work, <strong>CLI</strong> for scripting and automation, and <strong>MCP Server</strong> for LLM integration with Claude and Cursor.
72+
</p>
73+
</div>
74+
75+
<div class="card">
76+
<h3 class="card-title">📋 Rich Task Management</h3>
77+
<p class="card-description">
78+
Card dependencies (parent-child, blocking), sprint planning with history, story points with color coding, priority levels, due dates, and markdown descriptions.
79+
</p>
80+
</div>
81+
82+
<div class="card">
83+
<h3 class="card-title">🛠️ Developer Workflow</h3>
84+
<p class="card-description">
85+
Automatic git branch names from cards, sprint-based card prefixes (e.g., KAN-123), external editor support (vim, nvim, emacs), and JSON import/export.
86+
</p>
87+
</div>
88+
89+
<div class="card">
90+
<h3 class="card-title">🔒 Local-First</h3>
91+
<p class="card-description">
92+
All data stored locally in JSON format. No cloud dependencies, full privacy and control, atomic saves with crash protection.
93+
</p>
94+
</div>
95+
</div>
96+
</section>
97+
98+
<!-- Roadmap Section -->
99+
<section class="roadmap">
100+
<h2>Roadmap</h2>
101+
<p class="roadmap-status">Version 0.2.0 - Production Ready</p>
102+
103+
<div class="roadmap-categories">
104+
<div class="roadmap-category">
105+
<h3 class="roadmap-title">Completed</h3>
106+
<ul class="roadmap-list">
107+
<li><span class="status-badge completed">[x]</span> Progressive auto-save</li>
108+
<li><span class="status-badge completed">[x]</span> Full CLI interface matching TUI operations</li>
109+
<li><span class="status-badge completed">[x]</span> Card dependencies (parent-child and blocking)</li>
110+
<li><span class="status-badge completed">[x]</span> Undo/redo support (<code>u</code>/<code>U</code>)</li>
111+
<li><span class="status-badge completed">[x]</span> MCP server for LLM integration</li>
112+
</ul>
113+
</div>
114+
115+
<div class="roadmap-category">
116+
<h3 class="roadmap-title">Planned</h3>
117+
<ul class="roadmap-list">
118+
<li><span class="status-badge planned">[ ]</span> HTTP API for remote board access</li>
119+
<li><span class="status-badge planned">[ ]</span> Collaborative features (multi-user, sync)</li>
120+
<li><span class="status-badge planned">[ ]</span> Web UI to complement TUI and CLI</li>
121+
<li><span class="status-badge planned">[ ]</span> Multiple storage backends (markdown, SQL)</li>
122+
<li><span class="status-badge planned">[ ]</span> Configurable keybindings</li>
123+
<li><span class="status-badge planned">[ ]</span> Audit log for compliance tracking</li>
124+
</ul>
125+
</div>
126+
</div>
127+
</section>
128+
129+
<!-- Footer Section -->
130+
<footer class="footer">
131+
<div class="footer-content">
132+
<nav class="footer-links">
133+
<a href="https://github.com/fulsomenko/kanban" class="link">GitHub</a>
134+
<a href="https://crates.io/crates/kanban-cli" class="link">Crates.io</a>
135+
<a href="https://github.com/fulsomenko/kanban/issues" class="link">Report Issue</a>
136+
</nav>
137+
<div class="footer-meta">
138+
<p>Created by <strong>Max Emil Yoon Blomstervall</strong></p>
139+
<p>Licensed under <strong>Apache 2.0</strong></p>
140+
</div>
141+
</div>
142+
</footer>
143+
</main>
144+
</body>
145+
</html>

0 commit comments

Comments
 (0)