Skip to content

fix(ui): attach keyboard shortcuts during setup, not after auth bootstrap #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gocanto merged 3 commits into from
Jun 2, 2026
Merged

fix(ui): attach keyboard shortcuts during setup, not after auth bootstrap #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
791f6e5
fix(ui): attach keyboard shortcuts during setup, not after auth boots…
gocanto Jun 2, 2026
2c3177c
docs(marketing): add launch pitch posts and branded social cards
gocanto Jun 2, 2026
da52953
fix(marketing): stop features card footer clipping at bottom edge
gocanto Jun 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added marketing/cards/features.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added marketing/cards/hero-og.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added marketing/cards/privacy.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
113 changes: 113 additions & 0 deletions marketing/cards/src/card.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
/* Shared brand tokens for Git Diff Review social cards.
Colors/fonts mirror the app theme (dunkel.json + style.css). */

@font-face {
font-family: "Fira Code";
font-weight: 400;
font-display: block;
src: url("../../../packages/ui/src/fonts/firacode/FiraCode-Regular.woff2") format("woff2");
}
@font-face {
font-family: "Fira Code";
font-weight: 600;
font-display: block;
src: url("../../../packages/ui/src/fonts/firacode/FiraCode-SemiBold.woff2") format("woff2");
}

:root {
--bg: #242424;
--bg-2: #1c1c1c;
--panel: #2c2c2c;
--fg: #fafafa;
--muted: #a0a0a0;
--faint: #6b6b6b;
--accent: #89ddff;
--green: #5ad27e;
--red: #ff6762;
--border: #ffffff14;
--radius: 18px;
}

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

html,
body {
background: var(--bg);
}

body {
font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
color: var(--fg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow: hidden;
}

.mono {
font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Card frame: each card sets data-w / data-h via inline width/height. */
.card {
position: relative;
overflow: hidden;
background:
radial-gradient(120% 120% at 100% 0%, #2f2f2f 0%, var(--bg) 55%) ,
var(--bg);
}

/* Subtle diff-gutter motif used on several cards. */
.gutter {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.5;
}
.gutter span {
position: absolute;
left: 0;
width: 6px;
border-radius: 0 4px 4px 0;
}
.add {
color: var(--green);
}
.del {
color: var(--red);
}
.cyan {
color: var(--accent);
}
.muted {
color: var(--muted);
}

.wordmark {
font-weight: 700;
letter-spacing: -0.02em;
}

.pill {
display: inline-flex;
align-items: center;
gap: 10px;
border: 1px solid var(--border);
background: #ffffff0a;
border-radius: 999px;
color: var(--muted);
}

.dots {
display: inline-flex;
gap: 8px;
}
.dots i {
width: 13px;
height: 13px;
border-radius: 50%;
display: inline-block;
}
136 changes: 136 additions & 0 deletions marketing/cards/src/features.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="card.css" />
<style>
.card {
width: 1080px;
height: 1080px;
padding: 70px 76px 64px;
display: flex;
flex-direction: column;
}
.head {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 8px;
}
.head img {
width: 72px;
height: 72px;
border-radius: 18px;
}
.head .name {
font-size: 40px;
font-weight: 700;
letter-spacing: -0.02em;
}
h2 {
font-size: 56px;
line-height: 1.04;
font-weight: 700;
letter-spacing: -0.03em;
margin: 20px 0 34px;
}
h2 b {
color: var(--accent);
}
.rows {
display: flex;
flex-direction: column;
gap: 18px;
}
.row {
display: flex;
align-items: center;
gap: 26px;
border: 1px solid var(--border);
background: #ffffff07;
border-radius: 16px;
padding: 20px 28px;
}
.ic {
width: 56px;
height: 56px;
flex: 0 0 56px;
border-radius: 13px;
background: #ffffff0d;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
}
.row .t {
font-size: 30px;
font-weight: 600;
letter-spacing: -0.01em;
}
.row .s {
font-size: 21px;
color: var(--muted);
margin-top: 3px;
}
.row .s .mono {
color: #cfcfcf;
}
.foot {
margin-top: auto;
padding-top: 28px;
font-size: 23px;
color: var(--faint);
}
.foot .mono {
color: var(--muted);
}
</style>
</head>
<body>
<div class="card">
<div class="head">
<img src="../../../packages/ui/public/icon-512.png" alt="" />
<span class="name">Git Diff Review</span>
</div>
<h2>The pull-request review you already know — <b>locally</b>.</h2>
<div class="rows">
<div class="row">
<div class="ic cyan">⌥</div>
<div>
<div class="t">A real review surface</div>
<div class="s">File list, status badges, +/− counts, jump between hunks.</div>
</div>
</div>
<div class="row">
<div class="ic"><span class="add">±</span></div>
<div>
<div class="t">Split or unified diffs</div>
<div class="s">Syntax-highlighted, your choice per session.</div>
</div>
</div>
<div class="row">
<div class="ic cyan">✓</div>
<div>
<div class="t">Viewed-file tracking &amp; inline notes</div>
<div class="s">Tick files off (<span class="mono">0/14 viewed</span>), drop comments on lines.</div>
</div>
</div>
<div class="row">
<div class="ic mono cyan">⌨</div>
<div>
<div class="t">Keyboard-driven</div>
<div class="s"><span class="mono">j</span>/<span class="mono">k</span> navigate · <span class="mono">v</span> viewed · <span class="mono">c</span> comment · <span class="mono">⌘↵</span> submit</div>
</div>
</div>
<div class="row">
<div class="ic cyan">⌂</div>
<div>
<div class="t">100% local</div>
<div class="s">No cloud, no sign-up, no telemetry — stored in local SQLite.</div>
</div>
</div>
</div>
<div class="foot"><span class="mono">github.com/oullin/git-diff</span> · MIT · macOS (Apple Silicon)</div>
</div>
</body>
</html>
113 changes: 113 additions & 0 deletions marketing/cards/src/hero-og.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="card.css" />
<style>
.card {
width: 1200px;
height: 630px;
padding: 72px 80px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.gutter span {
font-family: "Fira Code", monospace;
font-size: 0;
}
.top {
display: flex;
align-items: center;
gap: 22px;
}
.logo {
width: 96px;
height: 96px;
border-radius: 22px;
}
.kicker {
font-family: "Fira Code", monospace;
font-size: 19px;
font-weight: 600;
letter-spacing: 0.02em;
padding: 9px 16px;
}
h1 {
font-size: 92px;
line-height: 0.98;
font-weight: 700;
letter-spacing: -0.035em;
margin-top: 6px;
}
.tag {
font-size: 31px;
line-height: 1.32;
color: #e7e7e7;
max-width: 880px;
margin-top: 30px;
}
.tag b {
color: var(--accent);
font-weight: 600;
}
.foot {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 21px;
color: var(--muted);
}
.foot .mono {
color: #cfcfcf;
}
.badges {
display: flex;
gap: 12px;
}
.badge {
border: 1px solid var(--border);
border-radius: 8px;
padding: 7px 14px;
font-size: 17px;
}
.codeline {
font-family: "Fira Code", monospace;
font-size: 20px;
margin-top: 34px;
}
.codeline .add::before {
content: "+ ";
}
.codeline .del::before {
content: "- ";
}
</style>
</head>
<body>
<div class="card">
<div>
<div class="top">
<img class="logo" src="../../../packages/ui/public/icon-512.png" alt="" />
<span class="pill kicker"><span class="cyan">●</span> before you commit</span>
</div>
<h1>Git Diff<br />Review</h1>
<div class="tag">
Review your local Git changes like a pull request.
<b>On your machine. Nothing leaves it.</b>
</div>
<div class="codeline">
<span class="add">caught the stray debug log</span> &nbsp;
<span class="del">before it hit history</span>
</div>
</div>
<div class="foot">
<span class="mono">github.com/oullin/git-diff</span>
<span class="badges">
<span class="badge">MIT</span>
<span class="badge">macOS · Apple Silicon</span>
</span>
</div>
</div>
</body>
</html>
Loading
Loading