sulthan
ec74559ca5
kagane serves cover images from behind the same Cloudflare challenge as
its pages and with cross-origin-resource-policy: same-origin. The second
header is the decisive one: no <img> on the web UI's origin can load a
kagane cover even from a browser that already holds the clearance cookie,
verified 2026-08-08 by loading one from a foreign origin with and without
a referrer. Hot-linking cannot be made to work, so every kagane series
rendered the monogram placeholder.
Bookmark.CoverURL rewrites a stored kagane og:image to /img/kagane/{id}
and returns every other cover untouched; the templates render .CoverURL
in place of .Cover. The endpoint is session-gated like every other UI
route, and hands the id to the shared headless browser, whose fetch is
same-origin with kagane and therefore satisfies both the challenge and
the CORP header. Results are memoised in-process, so a cover costs one
navigation per deployment lifetime.
The id is matched against a UUID regex before it reaches the browser.
That gate is load-bearing rather than tidiness: the cover is a stored
client-supplied string, so an unvalidated one turns the endpoint into an
SSRF primitive aimed at the deployment's own network. ServeMux
path-cleans a traversal into a redirect before the handler runs, but the
handler does not rely on that, and a test pins it.
With BROWSER_WS_URL unset there is no browser and the endpoint answers
404 rather than reaching for a nil fetcher - the same degrade-to-
userscript behaviour the poller already has for these sites.
146 lines
7.5 KiB
HTML
146 lines
7.5 KiB
HTML
{{define "card"}}
|
|
{{/* One sheet per series. is-new turns the title crimson over an ember rule;
|
|
is-dim sinks archived and finished rows into italic grey. */}}
|
|
<article class="card{{if eq .Status "reading"}}{{if .HasNewChapter}} is-new{{end}}{{else}} is-dim{{end}}"
|
|
id="card-{{.Key}}" data-title="{{.Title}}">
|
|
<div class="row">
|
|
<a class="cover" href="{{.ContinueURL}}" target="_blank" rel="noopener noreferrer"
|
|
tabindex="-1" aria-hidden="true">
|
|
{{if .CoverURL}}<img src="{{.CoverURL}}" alt="" loading="lazy">
|
|
{{/* aria-hidden on the cover link is not enough — Chromium still exposes
|
|
the letter because the link is programmatically focusable — so the
|
|
monogram carries its own, same as the recent strip's. */}}
|
|
{{else}}<span class="monogram" aria-hidden="true">{{.Initial}}</span>{{end}}
|
|
{{if and (eq .Status "reading") .HasNewChapter}}<span class="foot-rule"></span>
|
|
{{else if .Favorite}}<span class="foot-rule brass"></span>{{end}}
|
|
</a>
|
|
<div class="body">
|
|
<div class="title-line">
|
|
<h3 class="title">{{.Title}}</h3>
|
|
{{if .Favorite}}
|
|
<svg class="fav-mark" viewBox="0 0 24 24" aria-label="Favourite" role="img"><use href="#i-star-on"/></svg>
|
|
{{end}}
|
|
</div>
|
|
<p class="meta">
|
|
<span class="site-{{.Site}}">{{.Site}}</span>
|
|
<span class="sep">/</span>
|
|
<span class="chapter">{{.DisplayChapter}}</span>
|
|
{{if and (eq .Status "reading") .HasNewChapter}}
|
|
<span class="sep">/</span>
|
|
<span class="new-chapter">{{.DisplayLatest}} out</span>
|
|
{{end}}
|
|
{{if eq .Status "archived"}}
|
|
<span class="sep">/</span>
|
|
<span class="state">archived</span>
|
|
{{else if eq .Status "finished"}}
|
|
<span class="sep">/</span>
|
|
<span class="state"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="#i-check"/></svg>finished</span>
|
|
{{end}}
|
|
</p>
|
|
</div>
|
|
<div class="actions">
|
|
<a class="play" href="{{.ContinueURL}}" target="_blank" rel="noopener noreferrer"
|
|
title="Continue reading" aria-label="Continue reading">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true"><use href="#i-play"/></svg>
|
|
</a>
|
|
<button class="fav{{if .Favorite}} on{{end}}"
|
|
title="{{if .Favorite}}Remove from favourites{{else}}Add to favourites{{end}}"
|
|
aria-label="Toggle favourite"
|
|
hx-post="/ui/bookmarks/{{.Key}}/favorite"
|
|
hx-target="[id='card-{{.Key}}']" hx-swap="outerHTML"
|
|
hx-indicator="[id='card-{{.Key}}']" hx-disabled-elt="this">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true"><use href="#i-star{{if .Favorite}}-on{{end}}"/></svg>
|
|
</button>
|
|
<button class="pencil" title="Set chapter" aria-label="Set chapter"
|
|
onclick="toggleChapterForm('{{.Key}}')">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true"><use href="#i-pencil"/></svg>
|
|
</button>
|
|
{{/* Restore is a reversal, so it fires straight away; every move *out* of
|
|
the list (archive, finish, remove) goes through a confirm row. */}}
|
|
{{if eq .Status "reading"}}
|
|
<button class="lifecycle box" title="Archive" aria-label="Archive"
|
|
aria-expanded="false" aria-controls="confirm-archive-{{.Key}}"
|
|
onclick="toggleConfirmRow('{{.Key}}', 'archive')">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true"><use href="#i-box"/></svg>
|
|
</button>
|
|
{{else}}
|
|
<button class="lifecycle restore" title="Restore to reading" aria-label="Restore to reading"
|
|
hx-post="/ui/bookmarks/{{.Key}}/status" hx-vals='{"status":"reading"}'
|
|
hx-target="[id='card-{{.Key}}']" hx-swap="outerHTML"
|
|
hx-indicator="[id='card-{{.Key}}']" hx-disabled-elt="this">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true"><use href="#i-undo"/></svg>
|
|
</button>
|
|
{{end}}
|
|
{{if ne .Status "finished"}}
|
|
<button class="lifecycle finish" title="Mark finished" aria-label="Mark finished"
|
|
aria-expanded="false" aria-controls="confirm-finish-{{.Key}}"
|
|
onclick="toggleConfirmRow('{{.Key}}', 'finish')">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true"><use href="#i-check"/></svg>
|
|
</button>
|
|
{{end}}
|
|
<button class="lifecycle remove" title="Remove" aria-label="Remove"
|
|
aria-expanded="false" aria-controls="confirm-remove-{{.Key}}"
|
|
onclick="toggleConfirmRow('{{.Key}}', 'remove')">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true"><use href="#i-trash"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<form class="chapter-form" id="chapter-form-{{.Key}}" hidden
|
|
hx-post="/ui/bookmarks/{{.Key}}/chapter"
|
|
hx-target="[id='card-{{.Key}}']" hx-swap="outerHTML"
|
|
hx-indicator="[id='card-{{.Key}}']" hx-disabled-elt="input, button">
|
|
{{/* The field holds your progress; "Latest known" is the published chapter.
|
|
Those are different numbers whenever this form is worth opening, so the
|
|
label names the field and the latest sits after it as context. */}}
|
|
<label class="hint" for="chapter-{{.Key}}">Chapter you're on</label>
|
|
<div class="field">
|
|
{{/* max is a fat-finger guard, not a real ceiling — no series is near it. */}}
|
|
<input id="chapter-{{.Key}}" name="chapter" type="number" step="0.1" min="0" max="9999"
|
|
value="{{.LastChapterNum}}" required>
|
|
<button type="submit">Save</button>
|
|
</div>
|
|
{{if .LatestChapter}}<p class="hint">Latest known: {{.DisplayLatest}}</p>{{end}}
|
|
</form>
|
|
{{/* One confirm row per way a series leaves the list. aria-live announces the
|
|
step to a screen reader, which otherwise gets no word that the tap
|
|
opened a second question. */}}
|
|
{{if eq .Status "reading"}}
|
|
<div class="confirm-row calm" id="confirm-archive-{{.Key}}" role="group" aria-live="polite" hidden>
|
|
<span>Archive this?</span>
|
|
<div>
|
|
<button class="go"
|
|
hx-post="/ui/bookmarks/{{.Key}}/status" hx-vals='{"status":"archived"}'
|
|
hx-target="[id='card-{{.Key}}']" hx-swap="outerHTML"
|
|
hx-indicator="[id='card-{{.Key}}']" hx-disabled-elt="this">Archive</button>
|
|
<button type="button" onclick="toggleConfirmRow('{{.Key}}', 'archive')">Cancel</button>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
{{if ne .Status "finished"}}
|
|
<div class="confirm-row calm" id="confirm-finish-{{.Key}}" role="group" aria-live="polite" hidden>
|
|
<span>Mark finished?</span>
|
|
<div>
|
|
<button class="go"
|
|
hx-post="/ui/bookmarks/{{.Key}}/status" hx-vals='{"status":"finished"}'
|
|
hx-target="[id='card-{{.Key}}']" hx-swap="outerHTML"
|
|
hx-indicator="[id='card-{{.Key}}']" hx-disabled-elt="this">Finish</button>
|
|
<button type="button" onclick="toggleConfirmRow('{{.Key}}', 'finish')">Cancel</button>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
<div class="confirm-row" id="confirm-remove-{{.Key}}" role="group" aria-live="polite" hidden>
|
|
<span>Remove “{{.Title}}”? Chapter progress is lost.</span>
|
|
<div>
|
|
<button class="danger-solid"
|
|
hx-delete="/ui/bookmarks/{{.Key}}"
|
|
hx-target="[id='card-{{.Key}}']" hx-swap="outerHTML"
|
|
hx-indicator="[id='card-{{.Key}}']" hx-disabled-elt="this">Remove</button>
|
|
<button type="button" onclick="toggleConfirmRow('{{.Key}}', 'remove')">Cancel</button>
|
|
</div>
|
|
</div>
|
|
{{/* role=status announces a failed write; without it the tap just looks
|
|
ignored to a screen reader. */}}
|
|
<p class="error-inline" role="status" hidden></p>
|
|
</article>
|
|
{{end}}
|