jskelet 0.2.2 → 0.2.4

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.
@@ -5,56 +5,208 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
6
  <meta name="robots" content="noindex, nofollow, noarchive, nosnippet" />
7
7
  <meta name="referrer" content="no-referrer" />
8
- <title>Cache</title>
8
+ <title>Cache · JSkelet</title>
9
+ <link rel="icon" href="logo.png" />
9
10
  <link rel="stylesheet" href="panel.css" />
10
11
  </head>
11
12
  <body>
12
13
  <header>
13
- <h1>Cache</h1>
14
+ <div class="brand">
15
+ <img src="logo.png" alt="" width="30" height="30" />
16
+ <span class="wordmark">JSkelet</span>
17
+ <span class="badge" id="version">—</span>
18
+ </div>
19
+
20
+ <nav class="crumbs" aria-label="Panel">
21
+ <span aria-current="page" data-i18n="nav.cache">Cache</span>
22
+ </nav>
23
+
24
+ <span class="spacer"></span>
25
+
14
26
  <span class="chip" id="env">—</span>
15
27
  <span class="chip" id="pid">—</span>
16
28
  <span class="chip" id="uptime">—</span>
17
29
  <span class="chip" id="memory">—</span>
18
- <span class="spacer"></span>
30
+
31
+ <span id="language"></span>
32
+
19
33
  <label class="check">
20
34
  <input type="checkbox" id="auto" checked />
21
- live
35
+ <span data-i18n="shell.live">live</span>
22
36
  </label>
23
- <button id="refresh">Refresh</button>
24
- <button id="logout">Sign out</button>
37
+ <button id="refresh" data-i18n="shell.refresh">Refresh</button>
38
+ <button id="logout" data-i18n="shell.signOut">Sign out</button>
25
39
  </header>
26
40
 
27
41
  <main>
28
42
  <div class="cards">
29
43
  <div class="card">
30
- <div class="label">HTML entries</div>
44
+ <div class="label" data-i18n="card.htmlEntries">HTML entries</div>
31
45
  <div class="value" id="html-size">—</div>
32
46
  <div class="sub" id="html-sub">—</div>
33
47
  </div>
34
48
  <div class="card">
35
- <div class="label">HTML in memory</div>
49
+ <div class="label" data-i18n="card.htmlMemory">HTML in memory</div>
36
50
  <div class="value" id="html-bytes">—</div>
37
51
  <div class="sub" id="html-stale">—</div>
38
52
  </div>
39
53
  <div class="card">
40
- <div class="label">Data entries</div>
54
+ <div class="label" data-i18n="card.dataEntries">Data entries</div>
41
55
  <div class="value" id="data-size">—</div>
42
56
  <div class="sub" id="data-sub">—</div>
43
57
  </div>
44
58
  <div class="card">
45
- <div class="label">Shared tier</div>
59
+ <div class="label" data-i18n="card.sharedTier">Shared tier</div>
46
60
  <div class="value" id="redis-state">—</div>
47
61
  <div class="sub" id="redis-sub">—</div>
48
62
  </div>
49
63
  <div class="card">
50
- <div class="label">Prewarm</div>
64
+ <div class="label" data-i18n="card.prewarm">Prewarm</div>
51
65
  <div class="value" id="prewarm-state">—</div>
52
66
  <div class="sub" id="prewarm-sub">—</div>
53
67
  </div>
54
68
  </div>
55
69
 
56
70
  <section>
57
- <h2>Actions</h2>
71
+ <h2>
72
+ <span data-i18n="redis.section">Shared tier</span>
73
+ <span class="count" id="redis-heading">—</span>
74
+ </h2>
75
+ <div class="body">
76
+ <dl class="kv" id="redis-kv"></dl>
77
+
78
+ <div class="row" id="redis-actions" hidden>
79
+ <button id="redis-inspect" data-i18n="redis.inspect">Count keys in Redis</button>
80
+ <button class="danger" id="redis-html" data-i18n="redis.dropHtml">
81
+ Drop shared HTML keys
82
+ </button>
83
+ <button class="danger" id="redis-data" data-i18n="redis.dropData">
84
+ Drop shared data keys
85
+ </button>
86
+ </div>
87
+
88
+ <div class="suggest" id="redis-suggest" hidden>
89
+ <p class="m0">
90
+ <strong data-i18n="redis.suggest.title">No shared tier.</strong>
91
+ <span data-i18n="redis.suggest.body"></span>
92
+ </p>
93
+ <pre><code>npm install ioredis</code></pre>
94
+ <pre><code>// jskelet.config.mjs
95
+ cache() {
96
+ return {
97
+ redis: { enabled: true, url: process.env.REDIS_URL },
98
+ };
99
+ }</code></pre>
100
+ <p class="hint m0" data-i18n="redis.suggest.hint"></p>
101
+ </div>
102
+ </div>
103
+ </section>
104
+
105
+ <section>
106
+ <h2>
107
+ <span data-i18n="cf.section">Cloudflare</span>
108
+ <span class="count" id="cf-heading">—</span>
109
+ <span class="tabs">
110
+ <button id="cf-refresh" data-i18n="cf.refresh">Refresh</button>
111
+ </span>
112
+ </h2>
113
+ <div class="body">
114
+ <dl class="kv" id="cf-kv"></dl>
115
+
116
+ <div id="cf-tools" hidden>
117
+ <div class="row">
118
+ <button class="danger" id="cf-purge-all" data-i18n="cf.purgeAll">
119
+ Purge everything
120
+ </button>
121
+ <button id="cf-purge-cached" data-i18n="cf.purgeCached">
122
+ Purge URLs cached here
123
+ </button>
124
+ <label class="check">
125
+ <input type="checkbox" id="cf-dev" />
126
+ <span data-i18n="cf.devMode"></span>
127
+ </label>
128
+ </div>
129
+
130
+ <div class="row">
131
+ <select id="cf-kind">
132
+ <option value="prefixes" data-i18n="cf.kind.prefixes">prefixes</option>
133
+ <option value="hosts" data-i18n="cf.kind.hosts">hosts</option>
134
+ <option value="tags" data-i18n="cf.kind.tags">cache tags</option>
135
+ </select>
136
+ <input
137
+ class="grow"
138
+ type="text"
139
+ id="cf-values"
140
+ spellcheck="false"
141
+ data-i18n-ph="cf.values.placeholder"
142
+ />
143
+ <button class="primary" id="cf-purge-keys" data-i18n="cf.purge">Purge</button>
144
+ </div>
145
+
146
+ <div class="row">
147
+ <button id="cf-tiered" data-i18n="cf.toggleTiered">Toggle Tiered Cache</button>
148
+ <button id="cf-reserve" data-i18n="cf.toggleReserve">Toggle Cache Reserve</button>
149
+ <button class="danger" id="cf-reserve-clear" data-i18n="cf.clearReserve">
150
+ Clear Cache Reserve
151
+ </button>
152
+ </div>
153
+
154
+ <div class="row">
155
+ <input
156
+ class="grow"
157
+ type="text"
158
+ id="cf-path"
159
+ spellcheck="false"
160
+ data-i18n-ph="cf.path.placeholder"
161
+ />
162
+ <button id="cf-analytics" data-i18n="cf.queryAnalytics">Query analytics</button>
163
+ </div>
164
+
165
+ <div id="cf-report" class="report" hidden></div>
166
+
167
+ <p class="hint" data-i18n="cf.edgeHint"></p>
168
+ </div>
169
+
170
+ <div class="suggest" id="cf-suggest" hidden>
171
+ <p class="m0">
172
+ <strong data-i18n="cf.suggest.title">Cloudflare is not connected.</strong>
173
+ <span data-i18n="cf.suggest.body"></span>
174
+ </p>
175
+ <pre><code>JSKELET_CLOUDFLARE_KEY=your_api_token
176
+ JSKELET_CLOUDFLARE_ZONE_ID=your_zone_id</code></pre>
177
+ <p class="hint m0" data-i18n-html="cf.suggest.hint"></p>
178
+ </div>
179
+ </div>
180
+ </section>
181
+
182
+ <section>
183
+ <h2>
184
+ <span data-i18n="host.section">Host</span>
185
+ <span class="count" id="host-heading">—</span>
186
+ </h2>
187
+ <div class="body">
188
+ <div class="meter">
189
+ <div class="meter-head">
190
+ <span data-i18n="host.memory">Memory</span>
191
+ <span class="mono" id="ram-text">—</span>
192
+ </div>
193
+ <div class="bar"><span id="ram-bar"></span></div>
194
+ <p class="hint m0" id="ram-note">—</p>
195
+ </div>
196
+
197
+ <div class="meter">
198
+ <div class="meter-head">
199
+ <span data-i18n="host.disk">Disk</span>
200
+ <span class="mono" id="disk-text">—</span>
201
+ </div>
202
+ <div class="bar"><span id="disk-bar"></span></div>
203
+ <p class="hint m0" id="disk-note">—</p>
204
+ </div>
205
+ </div>
206
+ </section>
207
+
208
+ <section>
209
+ <h2><span data-i18n="actions.section">Actions</span></h2>
58
210
  <div class="body">
59
211
  <div class="row">
60
212
  <input
@@ -62,13 +214,15 @@
62
214
  type="text"
63
215
  id="target"
64
216
  spellcheck="false"
65
- placeholder="/news/:slug · /news/some-post · invalidation target"
217
+ data-i18n-ph="actions.target.placeholder"
66
218
  />
67
219
  <label class="check">
68
220
  <input type="checkbox" id="hard" />
69
- hard (delete instead of marking stale)
221
+ <span data-i18n="actions.hard"></span>
70
222
  </label>
71
- <button class="primary" id="invalidate">Invalidate</button>
223
+ <button class="primary" id="invalidate" data-i18n="actions.invalidate">
224
+ Invalidate
225
+ </button>
72
226
  </div>
73
227
 
74
228
  <div class="row">
@@ -77,33 +231,33 @@
77
231
  type="text"
78
232
  id="prefix"
79
233
  spellcheck="false"
80
- placeholder="data key prefix — empty clears every data entry"
234
+ data-i18n-ph="actions.prefix.placeholder"
81
235
  />
82
- <button class="danger" id="clear-data">Clear data cache</button>
83
- <button class="danger" id="clear-html">Clear HTML cache</button>
236
+ <button class="danger" id="clear-data" data-i18n="actions.clearData">
237
+ Clear data cache
238
+ </button>
239
+ <button class="danger" id="clear-html" data-i18n="actions.clearHtml">
240
+ Clear HTML cache
241
+ </button>
84
242
  </div>
85
243
 
86
244
  <div class="row">
87
- <button id="prewarm">Prewarm all paths</button>
88
- <button id="redis-html">Drop shared HTML keys</button>
89
- <button id="redis-data">Drop shared data keys</button>
245
+ <button id="prewarm" data-i18n="actions.prewarm">Prewarm all paths</button>
90
246
  </div>
91
247
 
92
- <p class="hint">
93
- Invalidation marks entries stale by default: visitors keep getting
94
- the old HTML while a single background refresh runs. Hard mode
95
- deletes them, so the next visitor waits for a cold render.
96
- </p>
248
+ <p class="hint" data-i18n="actions.hint"></p>
97
249
  </div>
98
250
  </section>
99
251
 
100
252
  <section>
101
253
  <h2>
102
- Entries
254
+ <span data-i18n="entries.section">Entries</span>
103
255
  <span class="count" id="listed">—</span>
104
256
  <span class="tabs" role="tablist">
105
257
  <button id="tab-html" role="tab" aria-selected="true">HTML</button>
106
- <button id="tab-data" role="tab" aria-selected="false">Data</button>
258
+ <button id="tab-data" role="tab" aria-selected="false" data-i18n="tab.data">
259
+ Data
260
+ </button>
107
261
  </span>
108
262
  </h2>
109
263
  <div class="body">
@@ -113,7 +267,7 @@
113
267
  type="search"
114
268
  id="search"
115
269
  spellcheck="false"
116
- placeholder="Filter by key"
270
+ data-i18n-ph="entries.search"
117
271
  />
118
272
  </div>
119
273
  </div>
@@ -122,11 +276,32 @@
122
276
  <thead id="thead"></thead>
123
277
  <tbody id="tbody"></tbody>
124
278
  </table>
125
- <div class="empty" id="empty" hidden>No entries.</div>
279
+ <div class="empty" id="empty" data-i18n="entries.empty" hidden>No entries.</div>
126
280
  </div>
127
281
  </section>
128
282
  </main>
129
283
 
284
+ <footer>
285
+ <div class="foot-brand">
286
+ <img src="logo.png" alt="" width="24" height="24" />
287
+ <span class="wordmark">JSkelet</span>
288
+ <span class="mono" id="foot-release">—</span>
289
+ </div>
290
+
291
+ <div class="foot-links">
292
+ <a id="foot-repo" href="https://github.com/ayberkenis/jskelet" rel="noreferrer noopener">
293
+ GitHub
294
+ </a>
295
+ <span class="dot" aria-hidden="true">·</span>
296
+ <span data-i18n="footer.panel">Cache panel</span>
297
+ <span class="dot" aria-hidden="true">·</span>
298
+ <span class="live">
299
+ <span class="pulse"></span>
300
+ <span data-i18n="footer.rotates">Password rotates on restart</span>
301
+ </span>
302
+ </div>
303
+ </footer>
304
+
130
305
  <div id="toast"></div>
131
306
  <script type="module" src="panel.js"></script>
132
307
  </body>