Skip to content

Commit 62c8820

Browse files
ClaudiuCeiaClaudiuCeia
committed
docs: fix layout, use logo, accept schemeless URLs
1 parent 869c2c7 commit 62c8820

4 files changed

Lines changed: 99 additions & 83 deletions

File tree

‎docs/app.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -331,8 +331,16 @@ const scheduleExtract = () => {
331331
};
332332

333333
const normalizeUrl = (raw) => {
334-
const s = raw.trim();
334+
let s = raw.trim();
335335
if (!s) return null;
336+
s = s.replace(/^<+|>+$/g, "");
337+
s = s.replace(/^\"+|\"+$/g, "");
338+
s = s.replace(/^'+|'+$/g, "");
339+
340+
// Accept "en.wikipedia.org/wiki/..." by assuming https://.
341+
if (!/^[a-zA-Z][a-zA-Z0-9+.-]*:\/\//.test(s)) {
342+
s = `https://${s}`;
343+
}
336344
try {
337345
const u = new URL(s);
338346
return u.toString();

‎docs/index.html‎

Lines changed: 70 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<body>
2222
<header class="top">
2323
<div class="brand">
24-
<div class="mark" aria-hidden="true"></div>
24+
<img class="logo" src="./logo.png" alt="ts-duckling logo" />
2525
<div class="titles">
2626
<h1>ts-duckling</h1>
2727
<p>
@@ -39,7 +39,7 @@ <h1>ts-duckling</h1>
3939
</header>
4040

4141
<main class="grid">
42-
<section class="panel">
42+
<section class="panel sidebar">
4343
<div class="panel-head">
4444
<h2>Parsers</h2>
4545
<div class="sub">
@@ -61,77 +61,80 @@ <h2>Parsers</h2>
6161
</div>
6262
</section>
6363

64-
<section class="panel">
65-
<div class="panel-head">
66-
<h2>Input</h2>
67-
<div class="sub">
68-
<span id="char-count">0</span> chars
64+
<div class="maincol">
65+
<section class="panel">
66+
<div class="panel-head">
67+
<h2>Input</h2>
68+
<div class="sub">
69+
<span id="char-count">0</span> chars
70+
</div>
6971
</div>
70-
</div>
71-
<div class="panel-body">
72-
<div class="load-row">
73-
<label class="load">
74-
<span>Preset</span>
75-
<select id="preset-text">
76-
<option value="">(none)</option>
77-
<option value="mixed">Mixed</option>
78-
<option value="pii">PII</option>
79-
<option value="article">Article-ish</option>
80-
</select>
81-
</label>
82-
<label class="load grow">
83-
<span>URL</span>
84-
<input
85-
id="url"
86-
type="url"
87-
placeholder="https://example.com/blog/post"
88-
/>
89-
</label>
90-
<button id="btn-load" class="btn small" type="button">
91-
Load
92-
</button>
72+
<div class="panel-body">
73+
<div class="load-row">
74+
<label class="load">
75+
<span>Preset</span>
76+
<select id="preset-text">
77+
<option value="">(none)</option>
78+
<option value="mixed">Mixed</option>
79+
<option value="pii">PII</option>
80+
<option value="article">Article-ish</option>
81+
</select>
82+
</label>
83+
<label class="load grow">
84+
<span>URL</span>
85+
<input
86+
id="url"
87+
type="text"
88+
placeholder="en.wikipedia.org/wiki/Deno_(software) or https://example.com/post"
89+
/>
90+
</label>
91+
<button id="btn-load" class="btn small" type="button">
92+
Load
93+
</button>
94+
</div>
95+
<textarea
96+
id="input"
97+
spellcheck="false"
98+
placeholder="Try: Email me at no-reply+foo@some.domain.dev, call +14155552671, visit https://duckling.deno.dev/, SSN 123-45-6789, CC 4242 4242 4242 4242"
99+
></textarea>
93100
</div>
94-
<textarea
95-
id="input"
96-
spellcheck="false"
97-
placeholder="Try: Email me at no-reply+foo@some.domain.dev, call +14155552671, visit https://duckling.deno.dev/, SSN 123-45-6789, CC 4242 4242 4242 4242"
98-
></textarea>
99-
</div>
100-
</section>
101+
</section>
101102

102-
<section class="panel">
103-
<div class="panel-head">
104-
<h2>Preview</h2>
105-
<div class="sub">
106-
<span id="match-count">0</span> matches
107-
<span class="dot">•</span>
108-
<span id="timing" class="timing"></span>
109-
<label class="toggle">
110-
<input id="toggle-json" type="checkbox" />
111-
<span>Show JSON</span>
112-
</label>
113-
</div>
114-
</div>
115-
<div class="panel-body result">
116-
<div class="result-split onecol">
117-
<div>
118-
<div class="caption">Annotated text</div>
119-
<div id="annotated" class="annotated" aria-live="polite"></div>
120-
<details id="selected-wrap" class="selected hidden">
121-
<summary>
122-
Selected:
123-
<span id="selected-title" class="selected-title">(none)</span>
124-
</summary>
125-
<pre id="selected-json"></pre>
126-
</details>
103+
<section class="panel">
104+
<div class="panel-head">
105+
<h2>Preview</h2>
106+
<div class="sub">
107+
<span id="match-count">0</span> matches
108+
<span class="dot">•</span>
109+
<span id="timing" class="timing"></span>
110+
<label class="toggle">
111+
<input id="toggle-json" type="checkbox" />
112+
<span>Show JSON</span>
113+
</label>
127114
</div>
128-
<div id="json-wrap" class="json hidden">
129-
<div class="caption">Raw JSON</div>
130-
<pre id="json"></pre>
115+
</div>
116+
<div class="panel-body result">
117+
<div class="result-split onecol">
118+
<div>
119+
<div class="caption">Annotated text</div>
120+
<div id="annotated" class="annotated" aria-live="polite"></div>
121+
<details id="selected-wrap" class="selected hidden">
122+
<summary>
123+
Selected:
124+
<span id="selected-title" class="selected-title"
125+
>(none)</span>
126+
</summary>
127+
<pre id="selected-json"></pre>
128+
</details>
129+
</div>
130+
<div id="json-wrap" class="json hidden">
131+
<div class="caption">Raw JSON</div>
132+
<pre id="json"></pre>
133+
</div>
131134
</div>
132135
</div>
133-
</div>
134-
</section>
136+
</section>
137+
</div>
135138
</main>
136139

137140
<footer class="foot">

‎docs/logo.png‎

25.8 KB
Loading

‎docs/style.css‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -45,24 +45,16 @@ body {
4545
}
4646

4747
.mark {
48+
display: none;
49+
}
50+
51+
.logo {
4852
width: 40px;
4953
height: 40px;
5054
border-radius: 12px;
51-
background: linear-gradient(
52-
180deg,
53-
rgba(10, 143, 135, 0.95),
54-
rgba(10, 120, 116, 0.95)
55-
);
56-
position: relative;
57-
}
58-
59-
.mark:after {
60-
content: "";
61-
position: absolute;
62-
inset: 8px;
63-
border-radius: 10px;
64-
background: rgba(15, 18, 23, 0.55);
65-
border: 1px solid rgba(255, 255, 255, 0.1);
55+
display: block;
56+
background: rgba(242, 244, 247, 0.04);
57+
border: 1px solid rgba(242, 244, 247, 0.12);
6658
}
6759

6860
.titles h1 {
@@ -121,6 +113,16 @@ body {
121113
align-items: start;
122114
}
123115

116+
.sidebar {
117+
grid-column: 1;
118+
}
119+
120+
.maincol {
121+
grid-column: 2;
122+
display: grid;
123+
gap: 14px;
124+
}
125+
124126
.panel {
125127
border-radius: var(--radius);
126128
background: rgba(242, 244, 247, 0.04);
@@ -404,6 +406,9 @@ pre#json {
404406
.grid {
405407
grid-template-columns: 1fr;
406408
}
409+
.maincol {
410+
grid-column: 1;
411+
}
407412
}
408413

409414
.status {

0 commit comments

Comments
 (0)