@uehaj/sys1grep 0.5.0-next.0 → 0.5.0-next.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.
- package/README.ja.md +319 -32
- package/README.md +333 -39
- package/docs/sentence.svg +1 -1
- package/package.json +8 -2
- package/sys1grep.mjs +1334 -234
- package/templates/default.html +102 -0
- package/templates/print.html +51 -0
- package/templates/search.html +113 -0
- package/templates/terminal.html +57 -0
|
@@ -0,0 +1,102 @@
|
|
|
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">
|
|
6
|
+
<meta name="color-scheme" content="light dark">
|
|
7
|
+
<title>{{title}}</title>
|
|
8
|
+
<style>
|
|
9
|
+
:root {
|
|
10
|
+
--bg: #fbfaf7;
|
|
11
|
+
--fg: #1f1e1c;
|
|
12
|
+
--muted: #6b6760;
|
|
13
|
+
--rule: #e3dfd7;
|
|
14
|
+
--code-bg: #f3f0e9;
|
|
15
|
+
--track: #e8e4dc;
|
|
16
|
+
--accent: #0f6e66;
|
|
17
|
+
--focus: #0f6e66;
|
|
18
|
+
--chrome: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans CJK JP", "Noto Sans", sans-serif;
|
|
19
|
+
--code: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
|
|
20
|
+
}
|
|
21
|
+
@media (prefers-color-scheme: dark) {
|
|
22
|
+
:root {
|
|
23
|
+
--bg: #151514;
|
|
24
|
+
--fg: #e9e7e2;
|
|
25
|
+
--muted: #9c978e;
|
|
26
|
+
--rule: #2d2c29;
|
|
27
|
+
--code-bg: #1d1c1a;
|
|
28
|
+
--track: #2f2e2a;
|
|
29
|
+
--accent: #5cc2b3;
|
|
30
|
+
--focus: #7fd6c9;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
* { box-sizing: border-box; }
|
|
34
|
+
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
|
|
35
|
+
body {
|
|
36
|
+
margin: 0;
|
|
37
|
+
background: var(--bg);
|
|
38
|
+
color: var(--fg);
|
|
39
|
+
font: 16px/1.5 var(--chrome);
|
|
40
|
+
}
|
|
41
|
+
.page { max-width: 90ch; margin: 0 auto; padding: 40px 16px 64px; }
|
|
42
|
+
header { margin-bottom: 32px; }
|
|
43
|
+
.tool { margin: 0; color: var(--muted); font-size: 14px; }
|
|
44
|
+
h1 { margin: 4px 0 4px; font-size: 22px; line-height: 1.3; font-weight: 600; overflow-wrap: anywhere; }
|
|
45
|
+
.count { margin: 0; color: var(--muted); font-size: 14px; }
|
|
46
|
+
.result { padding: 20px 0 24px; border-top: 1px solid var(--rule); }
|
|
47
|
+
.head { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
|
|
48
|
+
.rank { flex: none; width: 2.25rem; color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 600; }
|
|
49
|
+
.file { flex: 1; min-width: 0; font: 14px/1.4 var(--code); overflow-wrap: anywhere; }
|
|
50
|
+
.score { flex: none; font: 14px/1.4 var(--code); color: var(--muted); font-variant-numeric: tabular-nums; }
|
|
51
|
+
.score:empty { display: none; }
|
|
52
|
+
.meter { display: block; height: 3px; margin: 8px 0 12px; background: var(--track); border-radius: 2px; overflow: hidden; }
|
|
53
|
+
.meter::before { content: ""; display: block; height: 100%; width: calc(var(--s) * 1%); background: var(--accent); }
|
|
54
|
+
pre {
|
|
55
|
+
margin: 0;
|
|
56
|
+
padding: 12px 14px;
|
|
57
|
+
background: var(--code-bg);
|
|
58
|
+
border-radius: 4px;
|
|
59
|
+
font: 13.5px/1.55 var(--code);
|
|
60
|
+
tab-size: 4;
|
|
61
|
+
overflow-x: auto;
|
|
62
|
+
white-space: pre;
|
|
63
|
+
}
|
|
64
|
+
pre:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
|
|
65
|
+
.result:first-of-type { border-top: 2px solid var(--fg); padding-top: 24px; }
|
|
66
|
+
.result:first-of-type .rank { color: var(--accent); font-size: 28px; line-height: 1; }
|
|
67
|
+
.result:first-of-type .file { font-size: 15px; font-weight: 600; }
|
|
68
|
+
.result:first-of-type .score { color: var(--fg); font-size: 15px; }
|
|
69
|
+
.result:first-of-type .meter { height: 6px; border-radius: 3px; }
|
|
70
|
+
.result:first-of-type pre { font-size: 14px; }
|
|
71
|
+
@media print {
|
|
72
|
+
:root { --bg: #fff; --fg: #000; --muted: #444; --rule: #bbb; --code-bg: #fff; --track: #ddd; --accent: #000; }
|
|
73
|
+
body { font-size: 11pt; }
|
|
74
|
+
.page { max-width: none; padding: 0; }
|
|
75
|
+
pre { white-space: pre-wrap; overflow-wrap: anywhere; overflow: visible; border: 1px solid var(--rule); }
|
|
76
|
+
.head, .meter { break-after: avoid; }
|
|
77
|
+
.meter { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
|
|
78
|
+
}
|
|
79
|
+
.answer { margin: 0 0 24px; padding: 14px 16px; border-left: 3px solid var(--accent); background: var(--code-bg); border-radius: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
80
|
+
.answer:empty { display: none; }
|
|
81
|
+
</style>
|
|
82
|
+
</head>
|
|
83
|
+
<body>
|
|
84
|
+
<div class="page">
|
|
85
|
+
<header>
|
|
86
|
+
<p class="tool">sys1grep</p>
|
|
87
|
+
<h1 lang="">{{query}}</h1>
|
|
88
|
+
<p class="count">Best first. Results: {{count}}</p>
|
|
89
|
+
</header>
|
|
90
|
+
<section class="answer" lang="">{{answer}}</section>
|
|
91
|
+
<main>
|
|
92
|
+
<!--result-->
|
|
93
|
+
<article class="result">
|
|
94
|
+
<div class="head"><span class="rank">{{rank}}</span><span class="file">{{file}}</span><span class="score">{{score}}</span></div>
|
|
95
|
+
<span class="meter" style="--s:{{score_pct}}" role="meter" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{score_pct}}" aria-label="relevance of result {{rank}}"></span>
|
|
96
|
+
<pre tabindex="0" lang="" aria-label="lines of result {{rank}}">{{lines}}</pre>
|
|
97
|
+
</article>
|
|
98
|
+
<!--/result-->
|
|
99
|
+
</main>
|
|
100
|
+
</div>
|
|
101
|
+
</body>
|
|
102
|
+
</html>
|
|
@@ -0,0 +1,51 @@
|
|
|
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">
|
|
6
|
+
<title>{{title}}</title>
|
|
7
|
+
<style>
|
|
8
|
+
@page { margin: 18mm 16mm; }
|
|
9
|
+
* { box-sizing: border-box; }
|
|
10
|
+
body {
|
|
11
|
+
margin: 0;
|
|
12
|
+
background: #fff;
|
|
13
|
+
color: #000;
|
|
14
|
+
font: 11pt/1.45 Georgia, "Times New Roman", "Hiragino Mincho ProN", "Noto Serif CJK JP", "Noto Serif", serif;
|
|
15
|
+
}
|
|
16
|
+
.page { max-width: 90ch; margin: 0 auto; padding: 32px 16px; }
|
|
17
|
+
h1 { margin: 0 0 4pt; font-size: 16pt; font-weight: normal; overflow-wrap: anywhere; }
|
|
18
|
+
.count { margin: 0 0 18pt; font-style: italic; }
|
|
19
|
+
.result { margin: 0 0 14pt; }
|
|
20
|
+
h2 { margin: 0 0 4pt; font-size: 11pt; font-weight: bold; break-after: avoid; overflow-wrap: anywhere; }
|
|
21
|
+
.file { font: 10pt ui-monospace, Menlo, Consolas, "Liberation Mono", monospace; font-weight: normal; }
|
|
22
|
+
.score:empty { display: none; }
|
|
23
|
+
.score::before { content: "p = "; font-weight: normal; }
|
|
24
|
+
.score { font-weight: normal; }
|
|
25
|
+
pre {
|
|
26
|
+
margin: 0;
|
|
27
|
+
padding: 0 0 0 10pt;
|
|
28
|
+
border-left: 1pt solid #000;
|
|
29
|
+
font: 9.5pt/1.4 ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
|
|
30
|
+
white-space: pre-wrap;
|
|
31
|
+
overflow-wrap: anywhere;
|
|
32
|
+
tab-size: 4;
|
|
33
|
+
}
|
|
34
|
+
.answer { margin: 0 0 1em; white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
35
|
+
.answer:empty { display: none; }
|
|
36
|
+
</style>
|
|
37
|
+
</head>
|
|
38
|
+
<body>
|
|
39
|
+
<div class="page">
|
|
40
|
+
<h1 lang="">{{query}}</h1>
|
|
41
|
+
<p class="count">sys1grep, results best first: {{count}}</p>
|
|
42
|
+
<section class="answer" lang="">{{answer}}</section>
|
|
43
|
+
<!--result-->
|
|
44
|
+
<section class="result">
|
|
45
|
+
<h2>{{rank}}. <span class="file">{{file}}</span> <span class="score">{{score}}</span></h2>
|
|
46
|
+
<pre lang="">{{lines}}</pre>
|
|
47
|
+
</section>
|
|
48
|
+
<!--/result-->
|
|
49
|
+
</div>
|
|
50
|
+
</body>
|
|
51
|
+
</html>
|
|
@@ -0,0 +1,113 @@
|
|
|
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">
|
|
6
|
+
<meta name="color-scheme" content="light dark">
|
|
7
|
+
<title>{{title}}</title>
|
|
8
|
+
<style>
|
|
9
|
+
:root {
|
|
10
|
+
--bg: #fff;
|
|
11
|
+
--fg: #202124;
|
|
12
|
+
--muted: #5f6368;
|
|
13
|
+
--rule: #dadce0;
|
|
14
|
+
--title: #1a0dab;
|
|
15
|
+
--url: #188038;
|
|
16
|
+
--snippet-bg: #f8f9fa;
|
|
17
|
+
--mark: #fff3b0;
|
|
18
|
+
--box-shadow: 0 1px 6px rgba(32, 33, 36, .28);
|
|
19
|
+
--chrome: arial, "Helvetica Neue", "Hiragino Sans", "Noto Sans CJK JP", "Noto Sans", sans-serif;
|
|
20
|
+
--code: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
|
|
21
|
+
}
|
|
22
|
+
@media (prefers-color-scheme: dark) {
|
|
23
|
+
:root {
|
|
24
|
+
--bg: #202124;
|
|
25
|
+
--fg: #e8eaed;
|
|
26
|
+
--muted: #9aa0a6;
|
|
27
|
+
--rule: #3c4043;
|
|
28
|
+
--title: #8ab4f8;
|
|
29
|
+
--url: #81c995;
|
|
30
|
+
--snippet-bg: #2a2b2e;
|
|
31
|
+
--mark: #5c5200;
|
|
32
|
+
--box-shadow: 0 1px 6px rgba(0, 0, 0, .6);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
* { box-sizing: border-box; }
|
|
36
|
+
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
|
|
37
|
+
body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.58 var(--chrome); }
|
|
38
|
+
.bar { border-bottom: 1px solid var(--rule); padding: 16px; }
|
|
39
|
+
.bar-in { max-width: 652px; margin: 0 auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
|
|
40
|
+
.logo { font-size: 24px; font-weight: 700; letter-spacing: -.5px; color: var(--title); }
|
|
41
|
+
.box {
|
|
42
|
+
flex: 1;
|
|
43
|
+
min-width: 200px;
|
|
44
|
+
padding: 10px 18px;
|
|
45
|
+
border: 1px solid var(--rule);
|
|
46
|
+
border-radius: 24px;
|
|
47
|
+
font-size: 16px;
|
|
48
|
+
line-height: 1.4;
|
|
49
|
+
overflow-wrap: anywhere;
|
|
50
|
+
}
|
|
51
|
+
.box:hover { box-shadow: var(--box-shadow); border-color: transparent; }
|
|
52
|
+
.page { max-width: 652px; margin: 0 auto; padding: 0 16px 64px; }
|
|
53
|
+
.stats { margin: 16px 0 8px; color: var(--muted); font-size: 14px; }
|
|
54
|
+
.result { padding: 14px 0 10px; }
|
|
55
|
+
.url { color: var(--url); font-size: 14px; line-height: 1.3; }
|
|
56
|
+
.file { overflow-wrap: anywhere; }
|
|
57
|
+
.file:empty::before { content: "(standard input)"; }
|
|
58
|
+
.title {
|
|
59
|
+
margin: 4px 0 6px;
|
|
60
|
+
color: var(--title);
|
|
61
|
+
font-size: 20px;
|
|
62
|
+
line-height: 1.3;
|
|
63
|
+
font-weight: 400;
|
|
64
|
+
}
|
|
65
|
+
.title .score { margin-left: 8px; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
|
|
66
|
+
.title .score:empty { display: none; }
|
|
67
|
+
.relevance { display: inline-block; vertical-align: middle; width: 56px; height: 4px; margin-left: 8px; background: var(--rule); border-radius: 2px; overflow: hidden; }
|
|
68
|
+
.relevance::before { content: ""; display: block; height: 100%; width: calc(var(--s) * 1%); background: var(--url); }
|
|
69
|
+
pre {
|
|
70
|
+
margin: 0;
|
|
71
|
+
padding: 8px 12px;
|
|
72
|
+
background: var(--snippet-bg);
|
|
73
|
+
border-left: 3px solid var(--rule);
|
|
74
|
+
border-radius: 0 4px 4px 0;
|
|
75
|
+
font: 13px/1.55 var(--code);
|
|
76
|
+
tab-size: 4;
|
|
77
|
+
overflow-x: auto;
|
|
78
|
+
white-space: pre;
|
|
79
|
+
}
|
|
80
|
+
pre:focus-visible { outline: 2px solid var(--title); outline-offset: 2px; }
|
|
81
|
+
.result:first-of-type pre { border-left-color: var(--url); }
|
|
82
|
+
@media print {
|
|
83
|
+
:root { --bg: #fff; --fg: #000; --muted: #444; --rule: #bbb; --title: #000; --url: #000; --snippet-bg: #fff; }
|
|
84
|
+
.bar { padding-top: 0; }
|
|
85
|
+
.box:hover { box-shadow: none; }
|
|
86
|
+
pre { white-space: pre-wrap; overflow-wrap: anywhere; overflow: visible; }
|
|
87
|
+
.title, .url { break-after: avoid; }
|
|
88
|
+
.relevance { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
|
|
89
|
+
}
|
|
90
|
+
.answer { margin: 16px 0 8px; padding: 12px 16px; border-left: 3px solid var(--url); background: var(--snippet-bg); border-radius: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
91
|
+
.answer:empty { display: none; }
|
|
92
|
+
</style>
|
|
93
|
+
</head>
|
|
94
|
+
<body>
|
|
95
|
+
<div class="bar"><div class="bar-in">
|
|
96
|
+
<span class="logo">sys1grep</span>
|
|
97
|
+
<div class="box" lang="">{{query}}</div>
|
|
98
|
+
</div></div>
|
|
99
|
+
<div class="page">
|
|
100
|
+
<p class="stats">About {{count}} results, best first</p>
|
|
101
|
+
<section class="answer" lang="">{{answer}}</section>
|
|
102
|
+
<main>
|
|
103
|
+
<!--result-->
|
|
104
|
+
<article class="result">
|
|
105
|
+
<div class="url">Result {{rank}}</div>
|
|
106
|
+
<h2 class="title" lang=""><span class="file">{{file}}</span><span class="score">{{score}}</span><span class="relevance" style="--s:{{score_pct}}" role="meter" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{score_pct}}" aria-label="relevance of result {{rank}}"></span></h2>
|
|
107
|
+
<pre tabindex="0" lang="" aria-label="lines of result {{rank}}">{{lines}}</pre>
|
|
108
|
+
</article>
|
|
109
|
+
<!--/result-->
|
|
110
|
+
</main>
|
|
111
|
+
</div>
|
|
112
|
+
</body>
|
|
113
|
+
</html>
|
|
@@ -0,0 +1,57 @@
|
|
|
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">
|
|
6
|
+
<meta name="color-scheme" content="dark">
|
|
7
|
+
<title>{{title}}</title>
|
|
8
|
+
<style>
|
|
9
|
+
:root {
|
|
10
|
+
--bg: #0d0f10;
|
|
11
|
+
--fg: #d7dad6;
|
|
12
|
+
--dim: #7c837e;
|
|
13
|
+
--prompt: #8fcf6a;
|
|
14
|
+
--file: #d38ad8;
|
|
15
|
+
--sep: #5fb8c6;
|
|
16
|
+
--score: #8fcf6a;
|
|
17
|
+
--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
|
|
18
|
+
}
|
|
19
|
+
* { box-sizing: border-box; }
|
|
20
|
+
body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.5 var(--mono); }
|
|
21
|
+
.page { max-width: 120ch; margin: 0 auto; padding: 24px 16px 48px; }
|
|
22
|
+
.cmd { margin: 0 0 4px; overflow-wrap: anywhere; }
|
|
23
|
+
.cmd::before { content: "sys1grep: "; color: var(--prompt); }
|
|
24
|
+
.count { margin: 0 0 20px; color: var(--dim); }
|
|
25
|
+
.result { margin: 0 0 20px; }
|
|
26
|
+
.head { margin: 0; color: var(--sep); overflow-wrap: anywhere; }
|
|
27
|
+
.file { color: var(--file); }
|
|
28
|
+
.score { color: var(--score); }
|
|
29
|
+
.score::before { content: "["; color: var(--dim); }
|
|
30
|
+
.score::after { content: "]"; color: var(--dim); }
|
|
31
|
+
.score:empty { display: none; }
|
|
32
|
+
.meter { display: inline-block; width: 10ch; height: 0.5em; margin-left: 1ch; border: 1px solid var(--dim); vertical-align: middle; }
|
|
33
|
+
.meter::before { content: ""; display: block; height: 100%; width: calc(var(--s) * 1%); background: var(--score); }
|
|
34
|
+
pre { margin: 0; font: inherit; white-space: pre; overflow-x: auto; tab-size: 8; }
|
|
35
|
+
pre:focus-visible { outline: 1px dashed var(--sep); outline-offset: 2px; }
|
|
36
|
+
@media print {
|
|
37
|
+
:root { --bg: #fff; --fg: #000; --dim: #555; --prompt: #000; --file: #000; --sep: #000; --score: #000; }
|
|
38
|
+
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
39
|
+
}
|
|
40
|
+
.answer { margin: 0 0 1em; white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
41
|
+
.answer:empty { display: none; }
|
|
42
|
+
</style>
|
|
43
|
+
</head>
|
|
44
|
+
<body>
|
|
45
|
+
<div class="page">
|
|
46
|
+
<p class="cmd" lang="">{{query}}</p>
|
|
47
|
+
<p class="count"># results: {{count}}, best first</p>
|
|
48
|
+
<section class="answer" lang="">{{answer}}</section>
|
|
49
|
+
<!--result-->
|
|
50
|
+
<section class="result">
|
|
51
|
+
<p class="head">{{rank}}. <span class="score">{{score}}</span> <span class="file">{{file}}</span><span class="meter" style="--s:{{score_pct}}" role="meter" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{score_pct}}" aria-label="relevance of result {{rank}}"></span></p>
|
|
52
|
+
<pre tabindex="0" lang="" aria-label="lines of result {{rank}}">{{lines}}</pre>
|
|
53
|
+
</section>
|
|
54
|
+
<!--/result-->
|
|
55
|
+
</div>
|
|
56
|
+
</body>
|
|
57
|
+
</html>
|