@youtyan/code-viewer 0.1.0 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/README.md +12 -5
  2. package/package.json +5 -3
  3. package/web/app.js +1393 -90
  4. package/web/favicon.png +0 -0
  5. package/web/index.html +36 -26
  6. package/web/style.css +737 -59
  7. package/web-src/routes.ts +97 -0
  8. package/web-src/server/dev.ts +95 -0
  9. package/web-src/server/git.ts +104 -3
  10. package/web-src/server/preview.ts +88 -6
  11. package/web-src/server/range.ts +8 -0
  12. package/web-src/server/runtime.d.ts +6 -1
  13. package/web-src/types.ts +18 -0
package/web/favicon.png ADDED
Binary file
package/web/index.html CHANGED
@@ -4,6 +4,7 @@
4
4
  <meta charset="utf-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
6
  <title>git diff preview</title>
7
+ <link rel="icon" type="image/png" href="/favicon.png" />
7
8
 
8
9
  <!-- diff2html/highlight.js assets are vendored so the preview works offline
9
10
  and does not make network requests from the browser. The highlighter JS is
@@ -17,40 +18,32 @@
17
18
  </head>
18
19
  <body>
19
20
  <div id="app">
20
- <header id="topbar">
21
- <div class="brand">
21
+ <header id="global-header">
22
+ <a class="brand" href="/" aria-label="Repository home">
22
23
  <span class="dot"></span>
23
24
  <span class="title">git diff preview</span>
25
+ </a>
26
+ <nav class="app-menu" aria-label="Views">
27
+ <a class="app-menu-item active" data-route="repo" href="/">Repository</a>
28
+ <a class="app-menu-item active" data-route="diff" href="/todif?from=HEAD&to=worktree">Diff Viewer</a>
29
+ </nav>
30
+ <div class="global-actions">
31
+ <button id="theme" title="toggle theme">🌗</button>
32
+ <span id="status" class="status"></span>
24
33
  </div>
34
+ </header>
35
+ <header id="topbar">
25
36
  <div id="meta"></div>
26
37
  <div class="ref-pickers">
27
- <input class="ref-input" id="ref-from" placeholder="from…" autocomplete="off" />
38
+ <input class="ref-input" id="ref-from" placeholder="from…" autocomplete="off" readonly />
28
39
  <span class="ref-dots">…</span>
29
- <input class="ref-input" id="ref-to" placeholder="to…" autocomplete="off" />
30
- <button id="ref-apply" title="apply range (Enter)">→</button>
40
+ <input class="ref-input" id="ref-to" placeholder="to…" autocomplete="off" readonly />
31
41
  <button id="ref-reset" title="reset to HEAD .. worktree">×</button>
32
42
  <button id="reload-prom" title="reload diff (R)">↻</button>
33
43
  <button id="auto-reload" title="auto refresh every 3s">auto</button>
34
44
  </div>
35
- <div id="ref-popover" hidden>
36
- <div class="rp-quick">
37
- <button class="rp-chip" data-val="worktree">worktree</button>
38
- <button class="rp-chip" data-val="HEAD">HEAD</button>
39
- <button class="rp-chip" data-val="--staged">--staged</button>
40
- </div>
41
- <div class="rp-tabs" role="tablist">
42
- <button class="rp-tab active" data-tab="commits">Commits</button>
43
- <button class="rp-tab" data-tab="branches">Branches</button>
44
- <button class="rp-tab" data-tab="tags">Tags</button>
45
- </div>
46
- <div class="rp-search-wrap">
47
- <input class="rp-search" placeholder="filter…" autocomplete="off" />
48
- </div>
49
- <div class="rp-body"></div>
50
- </div>
51
45
  <div class="spacer"></div>
52
46
  <div class="controls">
53
- <input id="filter" type="search" placeholder="filter files…" />
54
47
  <div class="seg" role="group" aria-label="layout">
55
48
  <button data-layout="line-by-line" class="active">unified</button>
56
49
  <button data-layout="side-by-side">split</button>
@@ -58,15 +51,32 @@
58
51
  <button id="ignore-ws" title="ignore whitespace changes (-w)">ws</button>
59
52
  <button id="syntax-highlight" title="syntax highlighting on">syntax on</button>
60
53
  <button id="hide-tests" title="hide test files (test|spec)">no test</button>
61
- <button id="theme" title="toggle theme">🌗</button>
62
- <button id="collapse" title="collapse/expand all">▤</button>
63
- <span id="status" class="status"></span>
64
54
  </div>
65
55
  </header>
66
56
 
57
+ <div id="ref-popover" hidden>
58
+ <div class="rp-quick">
59
+ <button class="rp-chip" data-val="worktree">worktree</button>
60
+ <button class="rp-chip" data-val="HEAD">HEAD</button>
61
+ <button class="rp-chip" data-val="--staged">--staged</button>
62
+ </div>
63
+ <div class="rp-tabs" role="tablist">
64
+ <button class="rp-tab active" data-tab="commits">Commits</button>
65
+ <button class="rp-tab" data-tab="branches">Branches</button>
66
+ <button class="rp-tab" data-tab="tags">Tags</button>
67
+ </div>
68
+ <div class="rp-search-wrap">
69
+ <input class="rp-search" placeholder="filter…" autocomplete="off" />
70
+ </div>
71
+ <div class="rp-body"></div>
72
+ </div>
73
+
67
74
  <div id="load-bar" aria-hidden="true"></div>
68
75
 
69
76
  <aside id="sidebar">
77
+ <div id="repo-target-wrap" class="sb-repo-target" hidden>
78
+ <input id="repo-target" class="ref-input" type="text" placeholder="target…" title="repository target" autocomplete="off" readonly />
79
+ </div>
70
80
  <div class="sb-head">
71
81
  <span class="sb-title">Files</span>
72
82
  <span id="totals"></span>
@@ -76,7 +86,7 @@
76
86
  </div>
77
87
  </div>
78
88
  <div class="sb-filter-wrap">
79
- <input id="sb-filter" type="search" placeholder="filter files… (/)" autocomplete="off" />
89
+ <input id="sb-filter" type="search" placeholder="filter files… (/)" title="Use /pattern/ for regex. Cmd/Ctrl+K focuses this field." autocomplete="off" />
80
90
  </div>
81
91
  <ul id="filelist"></ul>
82
92
  <div id="sidebar-resizer" aria-hidden="true"></div>