1182 lines
51 KiB
HTML
1182 lines
51 KiB
HTML
|
{{define "title"}}{{if .IsNew}}{{ tr "New post" }}{{else}}{{ tr "Edit post" }}{{end}} · {{ tr "Volumen admin" }}{{end}}
|
||
|
|
{{define "content"}}
|
||
|
|
<div class="page-head">
|
||
|
|
<div class="page-head__text">
|
||
|
|
<h1>{{if .IsNew}}{{ tr "New post" }}{{else}}{{ tr "Edit post" }}{{end}}</h1>
|
||
|
|
<p class="page-head__lede">{{if .IsNew}}{{ tr "Draft a new article in Markdown." }}{{else}}{{ tr "Update and publish this post." }}{{end}}</p>
|
||
|
|
<p>
|
||
|
|
{{if and .IsEdit .Post.Draft}}
|
||
|
|
<span class="tag tag--warn">{{ tr "Draft, not visible to the public" }}</span>
|
||
|
|
{{else if and .IsEdit .Post.Scheduled}}
|
||
|
|
<span class="tag tag--accent">{{if .Post.PublishAt}}{{ trf "Scheduled for %s" .Post.PublishAt }}{{else}}{{ tr "Scheduled for later" }}{{end}}</span>
|
||
|
|
{{end}}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="page-head__actions">
|
||
|
|
{{if .IsEdit}}
|
||
|
|
<a class="btn btn--ghost" href="/api/volumen/posts/{{ .Post.Slug }}{{if .PreviewToken}}?preview_token={{ .PreviewToken }}{{end}}" target="_blank">
|
||
|
|
<svg aria-hidden="true"><use href="/admin/assets/graphis.svg#external-link"></use></svg>
|
||
|
|
API
|
||
|
|
</a>
|
||
|
|
<a class="btn btn--ghost" href="/admin/posts/{{ .Post.Slug }}/download">
|
||
|
|
<svg aria-hidden="true"><use href="/admin/assets/graphis.svg#download"></use></svg>
|
||
|
|
{{ tr "Download" }}
|
||
|
|
</a>
|
||
|
|
<a class="btn btn--ghost" href="/admin/posts/{{ .Post.Slug }}/history">
|
||
|
|
<svg aria-hidden="true"><use href="/admin/assets/graphis.svg#clock"></use></svg>
|
||
|
|
{{ tr "History" }}
|
||
|
|
</a>
|
||
|
|
<form method="post" action="/admin/posts/{{ .Post.Slug }}/duplicate" class="form-inline"
|
||
|
|
data-confirm="{{ tr "Duplicate this post as a draft?" }}">
|
||
|
|
<input type="hidden" name="_csrf" value="{{ .CSRFToken }}">
|
||
|
|
<button type="submit" class="btn btn--ghost" title="{{ tr "Duplicate as draft" }}">
|
||
|
|
<svg aria-hidden="true"><use href="/admin/assets/graphis.svg#copy"></use></svg>
|
||
|
|
{{ tr "Duplicate" }}
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
{{end}}
|
||
|
|
<a class="btn btn--ghost" href="/admin/">{{ tr "Cancel" }}</a>
|
||
|
|
<button type="button" class="icon-btn" id="show-shortcuts"
|
||
|
|
title="{{ tr "Keyboard shortcuts" }}" aria-label="{{ tr "Keyboard shortcuts" }}">
|
||
|
|
<svg aria-hidden="true"><use href="/admin/assets/graphis.svg#keyboard"></use></svg>
|
||
|
|
</button>
|
||
|
|
<button type="submit" form="post-form" class="btn btn--primary" title="{{ tr "Save (Ctrl+S)" }}">
|
||
|
|
<svg aria-hidden="true"><use href="/admin/assets/graphis.svg#save"></use></svg>
|
||
|
|
{{ tr "Save" }}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{{if .Error}}
|
||
|
|
<div class="status status--error" role="alert">
|
||
|
|
<svg aria-hidden="true"><use href="/admin/assets/graphis.svg#alert-circle"></use></svg>
|
||
|
|
<div>{{ .Error }}</div>
|
||
|
|
</div>
|
||
|
|
{{end}}
|
||
|
|
|
||
|
|
{{if .Restored}}
|
||
|
|
<div class="status status--ok" role="status">
|
||
|
|
<svg aria-hidden="true"><use href="/admin/assets/graphis.svg#check-circle"></use></svg>
|
||
|
|
<div>{{ tr "Revision restored. The previous content was archived; see" }} <a href="/admin/posts/{{ .Post.Slug }}/history">{{ tr "History" }}</a>.</div>
|
||
|
|
</div>
|
||
|
|
{{end}}
|
||
|
|
|
||
|
|
{{if .Duplicated}}
|
||
|
|
<div class="status status--ok" role="status">
|
||
|
|
<svg aria-hidden="true"><use href="/admin/assets/graphis.svg#check-circle"></use></svg>
|
||
|
|
<div>{{ tr "Duplicated as draft. The new slug is" }} <code>{{ .Post.Slug }}</code>{{ tr ", adjust the title and body, then publish." }}</div>
|
||
|
|
</div>
|
||
|
|
{{end}}
|
||
|
|
|
||
|
|
{{if and .IsNew .PostTemplates}}
|
||
|
|
<div class="field narrow-start">
|
||
|
|
<label class="field__label" for="tpl-select">{{ tr "Template" }}</label>
|
||
|
|
<select id="tpl-select" class="control">
|
||
|
|
<option value="">{{ tr "Blank" }}</option>
|
||
|
|
{{range $i, $t := .PostTemplates}}
|
||
|
|
<option value="{{ $i }}">{{ $t.Name }}</option>
|
||
|
|
{{end}}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<script nonce="{{ .CSPNonce }}">
|
||
|
|
var TEMPLATES = {{ .TemplatesJSON }};
|
||
|
|
document.getElementById("tpl-select").addEventListener("change", function () {
|
||
|
|
var idx = parseInt(this.value, 10);
|
||
|
|
if (isNaN(idx)) return;
|
||
|
|
var tpl = TEMPLATES[idx];
|
||
|
|
if (!tpl) return;
|
||
|
|
var f = document.getElementById("post-form");
|
||
|
|
if (tpl.title) f.querySelector("[name=title]").value = tpl.title;
|
||
|
|
if (tpl.slug) f.querySelector("[name=slug]").value = tpl.slug;
|
||
|
|
if (tpl.tags) f.querySelector("[name=tags]").value = tpl.tags.join(", ");
|
||
|
|
if (tpl.body) f.querySelector("[name=body]").value = tpl.body;
|
||
|
|
// The scientific extras (doi, orcid, series, author, …) ride in
|
||
|
|
// fields: fill any editor input the template names.
|
||
|
|
if (tpl.fields) {
|
||
|
|
for (var name in tpl.fields) {
|
||
|
|
var input = f.querySelector('[name="' + name + '"]');
|
||
|
|
if (input) input.value = tpl.fields[name];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
window.__volumenSlugTouched = true;
|
||
|
|
if (f.dispatchEvent) f.dispatchEvent(new Event("input", { bubbles: true }));
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
{{end}}
|
||
|
|
|
||
|
|
<div class="status status--warn" id="autosave-bar" hidden>
|
||
|
|
<svg aria-hidden="true"><use href="/admin/assets/graphis.svg#clock"></use></svg>
|
||
|
|
<span id="autosave-msg"></span>
|
||
|
|
<span class="status__actions">
|
||
|
|
<button type="button" class="btn btn--sm btn--primary" id="autosave-restore">{{ tr "Restore" }}</button>
|
||
|
|
<button type="button" class="btn btn--sm btn--ghost" id="autosave-discard">{{ tr "Discard" }}</button>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<form id="post-form" method="post"
|
||
|
|
action="{{if .IsNew}}/admin/posts{{else}}/admin/posts/{{ .Post.Slug }}{{end}}">
|
||
|
|
<input type="hidden" name="_csrf" value="{{ .CSRFToken }}">
|
||
|
|
|
||
|
|
<section class="card">
|
||
|
|
<div class="card__head">
|
||
|
|
<h2>{{ tr "Details" }}</h2>
|
||
|
|
<p class="card__note">{{ tr "Title, slug, and publishing options" }}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="field">
|
||
|
|
<label class="field__label" for="title">{{ tr "Title" }}</label>
|
||
|
|
<input id="title" class="control" type="text" name="title" value="{{ .Post.Title }}"
|
||
|
|
placeholder="{{ tr "A clear, descriptive title" }}" required
|
||
|
|
{{if .IsNew}}autofocus{{end}}>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grid-2">
|
||
|
|
<div class="field">
|
||
|
|
<label class="field__label" for="slug">{{ tr "Slug" }}</label>
|
||
|
|
<input id="slug" class="control mono" type="text" name="slug" value="{{ .Post.Slug }}"
|
||
|
|
{{if .IsNew}}required{{else}}readonly{{end}} placeholder="{{ tr "my-post-slug" }}"
|
||
|
|
data-exists-url="/admin/posts/exists">
|
||
|
|
<p class="field__hint is-live" id="slug-help" hidden></p>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<label class="field__label" for="lang">{{ tr "Language" }}</label>
|
||
|
|
<input id="lang" class="control" type="text" name="lang" value="{{ .Post.Lang }}" placeholder="en">
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<label class="field__label" for="author">{{ tr "Author" }}</label>
|
||
|
|
<input id="author" class="control" type="text" name="author" value="{{ .Post.Author }}"
|
||
|
|
placeholder="{{ .AuthorPlaceholder }}">
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<label class="field__label" for="fediverse_creator">{{ tr "Fediverse creator" }}</label>
|
||
|
|
<input id="fediverse_creator" class="control" type="text" name="fediverse_creator"
|
||
|
|
value="{{ .Post.FediverseCreator }}" placeholder="{{ tr "@user@instance.tld" }}">
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<label class="field__label" for="doi">{{ tr "DOI" }}</label>
|
||
|
|
<input id="doi" class="control" type="text" name="doi" value="{{ .Post.DOI }}"
|
||
|
|
placeholder="{{ tr "10.5281/zenodo.1234567" }}">
|
||
|
|
<p class="field__hint">{{ tr "Digital Object Identifier; a doi.org URL is stored as the bare 10.… form." }}</p>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<label class="field__label" for="orcid">{{ tr "Author ORCID" }}</label>
|
||
|
|
<input id="orcid" class="control" type="text" name="orcid" value="{{ .Post.ORCID }}"
|
||
|
|
placeholder="{{ tr "0000-0002-1825-0097" }}">
|
||
|
|
<p class="field__hint">{{ tr "The author's Open Researcher and Contributor ID, checked against its own digit." }}</p>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<label class="field__label" for="date">{{ tr "Publish date" }}</label>
|
||
|
|
<input id="date" class="control" type="date" name="date" value="{{ .Post.Date }}">
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<label class="field__label" for="publish_at">{{ tr "Schedule for" }}</label>
|
||
|
|
<input id="publish_at" class="control" type="date" name="publish_at"
|
||
|
|
value="{{ .Post.PublishAt }}"
|
||
|
|
data-warn-today="{{ tr "Will be published immediately (date is today or earlier)." }}">
|
||
|
|
<p class="field__hint">{{ tr "Leave empty to publish immediately. Date is interpreted as your local timezone." }}</p>
|
||
|
|
<p class="field__hint hint--warn" id="publish-at-warn" hidden></p>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<label class="field__label" for="tags">{{ tr "Tags" }}</label>
|
||
|
|
<input id="tags" class="control" type="text" name="tags" value="{{ .Post.TagsCSV }}"
|
||
|
|
placeholder="{{ tr "comma, separated" }}">
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<label class="field__label" for="series">{{ tr "Series" }}</label>
|
||
|
|
<input id="series" class="control mono" type="text" name="series" value="{{ .Post.Series }}"
|
||
|
|
placeholder="{{ tr "e.g. rust-tutorial" }}">
|
||
|
|
<p class="field__hint">{{ tr "Group multi-part posts; leave empty for standalone posts" }}</p>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<label class="field__label" for="series_order">{{ tr "Part number" }}</label>
|
||
|
|
<input id="series_order" class="control" type="number" name="series_order" min="1"
|
||
|
|
value="{{ .Post.SeriesOrder }}" placeholder="1">
|
||
|
|
<p class="field__hint">{{ tr "Order within the series" }}</p>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<label class="field__label" for="excerpt">{{ tr "Excerpt" }}</label>
|
||
|
|
<input id="excerpt" class="control" type="text" name="excerpt" value="{{ .Post.Excerpt }}"
|
||
|
|
placeholder="{{ .Post.ExcerptPlaceholder }}">
|
||
|
|
<p class="field__hint">{{ tr "Auto-generated from the first paragraph if left empty" }}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="check-row">
|
||
|
|
<label class="check">
|
||
|
|
<input type="checkbox" name="draft" {{if .Post.Draft}}checked{{end}}>
|
||
|
|
<span>{{ tr "Draft" }}</span>
|
||
|
|
</label>
|
||
|
|
<label class="check">
|
||
|
|
<input type="checkbox" name="all_langs" {{if .Post.AllLangs}}checked{{end}}>
|
||
|
|
<span>{{ tr "Available in all languages" }}</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="card">
|
||
|
|
<div class="card__head">
|
||
|
|
<h2>{{ tr "Cover image" }}</h2>
|
||
|
|
<p class="card__note">{{ tr "Header image shown on the article page" }}</p>
|
||
|
|
</div>
|
||
|
|
<div class="cover-row">
|
||
|
|
<input id="cover-input" class="control mono" type="text" name="cover" value="{{ .Post.Cover }}"
|
||
|
|
placeholder="{{ tr "/media/… or https://…" }}">
|
||
|
|
<button type="button" id="cover-upload" class="btn">{{ tr "Upload" }}</button>
|
||
|
|
<button type="button" id="cover-clear" class="btn btn--ghost">{{ tr "Clear" }}</button>
|
||
|
|
</div>
|
||
|
|
<div class="grid-2">
|
||
|
|
<input id="cover-alt-input" class="control" type="text" name="cover_alt" value="{{ .Post.CoverAlt }}"
|
||
|
|
placeholder="{{ tr "ALT text (for accessibility)" }}">
|
||
|
|
<input id="cover-caption-input" class="control" type="text" name="cover_caption" value="{{ .Post.CoverCaption }}"
|
||
|
|
placeholder="{{ tr "Caption (e.g. 'Generated by AI')" }}">
|
||
|
|
</div>
|
||
|
|
<img id="cover-preview" class="cover-preview" alt="" hidden>
|
||
|
|
<input type="file" id="cover-file" accept="image/webp,image/avif,image/svg+xml" hidden>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="card">
|
||
|
|
<div class="tabs" role="tablist" aria-label="{{ tr "Editor" }}">
|
||
|
|
<button type="button" role="tab" id="tab-markdown" data-tab="markdown"
|
||
|
|
aria-selected="true" aria-controls="markdown-view">{{ tr "Markdown" }}</button>
|
||
|
|
<button type="button" role="tab" id="tab-visual" data-tab="visual"
|
||
|
|
aria-selected="false" aria-controls="visual-view">{{ tr "Visual" }}</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="visual-view" hidden role="tabpanel" aria-labelledby="tab-visual">
|
||
|
|
<div class="editor">
|
||
|
|
<div class="editor__pane">
|
||
|
|
<div class="editor__head">
|
||
|
|
<span class="editor__label">{{ tr "Editor" }}</span>
|
||
|
|
<span class="flex"></span>
|
||
|
|
<button type="button" class="tool tool--bold" data-rich="bold" title="{{ tr "Bold (Ctrl+B)" }}">B</button>
|
||
|
|
<button type="button" class="tool tool--italic" data-rich="italic" title="{{ tr "Italic (Ctrl+I)" }}">I</button>
|
||
|
|
<button type="button" class="tool" data-rich="h2" title="{{ tr "Heading 2" }}">H2</button>
|
||
|
|
<button type="button" class="tool" data-rich="h3" title="{{ tr "Heading 3" }}">H3</button>
|
||
|
|
<button type="button" class="tool tool--wide" data-rich="link" title="{{ tr "Link (Ctrl+K)" }}">{{ tr "Link" }}</button>
|
||
|
|
<button type="button" class="tool" data-rich="ul" title="{{ tr "Bullet list" }}">•</button>
|
||
|
|
<button type="button" class="tool" data-rich="ol" title="{{ tr "Numbered list" }}">1.</button>
|
||
|
|
<button type="button" class="tool" data-rich="quote" title="{{ tr "Quote" }}">”</button>
|
||
|
|
<button type="button" class="tool" data-rich="code" title="{{ tr "Code" }}"></></button>
|
||
|
|
<button type="button" class="tool tool--wide" data-rich="image" title="{{ tr "Image" }}">IMG</button>
|
||
|
|
</div>
|
||
|
|
<div id="wysiwyg" class="prose editor__preview" contenteditable="true"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="markdown-view" role="tabpanel" aria-labelledby="tab-markdown">
|
||
|
|
<div class="editor" id="editor-grid">
|
||
|
|
<div class="editor__pane" id="markdown-pane">
|
||
|
|
<div class="editor__head">
|
||
|
|
<span class="editor__label">{{ tr "Markdown" }}</span>
|
||
|
|
<span class="flex"></span>
|
||
|
|
<button type="button" class="tool tool--bold" data-md="bold" title="{{ tr "Bold (Ctrl+B)" }}">B</button>
|
||
|
|
<button type="button" class="tool tool--italic" data-md="italic" title="{{ tr "Italic (Ctrl+I)" }}">I</button>
|
||
|
|
<button type="button" class="tool" data-md="h2" title="{{ tr "Heading 2" }}">H2</button>
|
||
|
|
<button type="button" class="tool" data-md="h3" title="{{ tr "Heading 3" }}">H3</button>
|
||
|
|
<button type="button" class="tool" data-md="link" title="{{ tr "Link (Ctrl+K)" }}">
|
||
|
|
<svg aria-hidden="true"><use href="/admin/assets/graphis.svg#link"></use></svg>
|
||
|
|
</button>
|
||
|
|
<button type="button" class="tool" data-md="ul" title="{{ tr "Bullet list" }}">•</button>
|
||
|
|
<button type="button" class="tool" data-md="ol" title="{{ tr "Numbered list" }}">1.</button>
|
||
|
|
<button type="button" class="tool" data-md="quote" title="{{ tr "Quote" }}">”</button>
|
||
|
|
<button type="button" class="tool" data-md="code" title="{{ tr "Code" }}"></></button>
|
||
|
|
<button type="button" class="tool tool--wide" data-md="image" title="{{ tr "Image" }}">IMG</button>
|
||
|
|
<button type="button" class="tool tool--wide" id="toggle-preview"
|
||
|
|
aria-pressed="false" title="{{ tr "Toggle preview" }}">{{ tr "Preview" }}</button>
|
||
|
|
</div>
|
||
|
|
<textarea id="body" name="body" class="editor__input" rows="22"
|
||
|
|
placeholder="{{ tr "Write your post in Markdown…" }}">{{ .Post.Body }}</textarea>
|
||
|
|
<div class="drop-overlay" id="body-drop" hidden>
|
||
|
|
<svg aria-hidden="true"><use href="/admin/assets/graphis.svg#upload"></use></svg>
|
||
|
|
{{ tr "Drop image to upload" }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="editor__pane" id="preview-pane">
|
||
|
|
<div class="editor__head">
|
||
|
|
<span class="editor__label">{{ tr "Preview" }}</span>
|
||
|
|
</div>
|
||
|
|
<div id="preview" class="prose editor__preview"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="editor__status" id="editor-status">
|
||
|
|
<span id="status-words">0</span>
|
||
|
|
<span id="status-read">1</span>
|
||
|
|
<span id="status-chars">0</span>
|
||
|
|
<span class="flex"></span>
|
||
|
|
<span class="editor__saved" id="status-saved">{{ tr "✓ saved" }}</span>
|
||
|
|
<button type="submit" class="btn btn--primary btn--sm" title="{{ tr "Save (Ctrl+S)" }}">{{ tr "Save" }}</button>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="card" id="refs-card">
|
||
|
|
<div class="card__head">
|
||
|
|
<h2>{{ tr "Bibliography" }}</h2>
|
||
|
|
<p class="card__note"><span id="refs-count">{{ trn .Post.RefsCount "refs.count" }}</span> · {{ tr "The numbered reference list; cite entries as [n] in the body" }}</p>
|
||
|
|
</div>
|
||
|
|
<input type="hidden" name="refs" id="refs-json" value="">
|
||
|
|
<div class="refs-scroll"><div id="refs-list" aria-live="polite"></div></div>
|
||
|
|
<p class="field__hint" id="refs-empty" hidden>{{ tr "No references yet." }}</p>
|
||
|
|
<div class="check-row">
|
||
|
|
<button type="button" class="btn" id="ref-add">{{ tr "Add reference" }}</button>
|
||
|
|
<button type="button" class="btn btn--ghost" id="ref-marker">{{ tr "Insert [[refs]] marker into the body" }}</button>
|
||
|
|
</div>
|
||
|
|
<p class="field__hint">{{ tr "Fill the verbatim citation line, or the structured fields; the marker places the list in the body and without it the list is appended." }}</p>
|
||
|
|
<template id="ref-row-template">
|
||
|
|
<div class="ref-row">
|
||
|
|
<div class="ref-row__head">
|
||
|
|
<span class="tag tag--accent ref-row__num" aria-hidden="true">1</span>
|
||
|
|
<span class="flex"></span>
|
||
|
|
<button type="button" class="icon-btn" data-ref="up" aria-label="{{ tr "Move up" }}">
|
||
|
|
<svg aria-hidden="true"><use href="/admin/assets/graphis.svg#chevron-up"></use></svg>
|
||
|
|
</button>
|
||
|
|
<button type="button" class="icon-btn" data-ref="down" aria-label="{{ tr "Move down" }}">
|
||
|
|
<svg aria-hidden="true"><use href="/admin/assets/graphis.svg#chevron-down"></use></svg>
|
||
|
|
</button>
|
||
|
|
<button type="button" class="icon-btn" data-ref="remove" aria-label="{{ tr "Remove reference" }}">
|
||
|
|
<svg aria-hidden="true"><use href="/admin/assets/graphis.svg#x"></use></svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<span class="field__label">{{ tr "Verbatim citation" }}</span>
|
||
|
|
<input class="control" data-ref-field="raw" placeholder="{{ tr "Author, title, venue, year" }}"
|
||
|
|
aria-label="{{ tr "Verbatim citation" }}">
|
||
|
|
</div>
|
||
|
|
<details>
|
||
|
|
<summary class="btn btn--ghost btn--sm">{{ tr "Structured fields" }}</summary>
|
||
|
|
<div class="grid-2 gap-top">
|
||
|
|
<div class="field field--wide">
|
||
|
|
<span class="field__label">{{ tr "Authors" }}</span>
|
||
|
|
<textarea class="control" data-ref-field="authors" rows="2"
|
||
|
|
placeholder="{{ tr "One author per line, optionally with [orcid:0000-0002-1825-0097]" }}"
|
||
|
|
aria-label="{{ tr "Authors" }}"></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="field field--wide">
|
||
|
|
<span class="field__label">{{ tr "Title" }}</span>
|
||
|
|
<input class="control" data-ref-field="title" aria-label="{{ tr "Title" }}">
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<span class="field__label">{{ tr "Venue" }}</span>
|
||
|
|
<input class="control" data-ref-field="venue" placeholder="{{ tr "Journal or proceedings" }}"
|
||
|
|
aria-label="{{ tr "Venue" }}">
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<span class="field__label">{{ tr "Year" }}</span>
|
||
|
|
<input class="control" data-ref-field="year" inputmode="numeric" placeholder="1998"
|
||
|
|
aria-label="{{ tr "Year" }}">
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<span class="field__label">{{ tr "Volume" }}</span>
|
||
|
|
<input class="control" data-ref-field="volume" placeholder="116" aria-label="{{ tr "Volume" }}">
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<span class="field__label">{{ tr "Pages" }}</span>
|
||
|
|
<input class="control" data-ref-field="pages" placeholder="1009" aria-label="{{ tr "Pages" }}">
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<span class="field__label">{{ tr "DOI" }}</span>
|
||
|
|
<input class="control mono" data-ref-field="doi" placeholder="10.5281/zenodo.1234567"
|
||
|
|
aria-label="{{ tr "DOI" }}">
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<span class="field__label">{{ tr "arXiv" }}</span>
|
||
|
|
<input class="control mono" data-ref-field="arxiv" placeholder="2401.12345"
|
||
|
|
aria-label="{{ tr "arXiv" }}">
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<span class="field__label">{{ tr "URL" }}</span>
|
||
|
|
<input class="control mono" data-ref-field="url" placeholder="https://…"
|
||
|
|
aria-label="{{ tr "URL" }}">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</details>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<input type="file" id="image-input" accept="image/webp,image/avif,image/svg+xml" hidden>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<dialog id="shortcut-help">
|
||
|
|
<form method="dialog">
|
||
|
|
<div class="dialog__head">
|
||
|
|
<h2>{{ tr "Keyboard shortcuts" }}</h2>
|
||
|
|
<button type="submit" value="cancel" class="icon-btn" aria-label="{{ tr "Close modal" }}">
|
||
|
|
<svg aria-hidden="true"><use href="/admin/assets/graphis.svg#x"></use></svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="dialog__body">
|
||
|
|
<table class="table">
|
||
|
|
<tbody>
|
||
|
|
<tr><td>{{ tr "Bold" }}</td><td class="table__actions"><kbd>Ctrl</kbd>+<kbd>B</kbd></td></tr>
|
||
|
|
<tr><td>{{ tr "Italic" }}</td><td class="table__actions"><kbd>Ctrl</kbd>+<kbd>I</kbd></td></tr>
|
||
|
|
<tr><td>{{ tr "Link" }}</td><td class="table__actions"><kbd>Ctrl</kbd>+<kbd>K</kbd></td></tr>
|
||
|
|
<tr><td>{{ tr "Save post" }}</td><td class="table__actions"><kbd>Ctrl</kbd>+<kbd>S</kbd></td></tr>
|
||
|
|
<tr><td>{{ tr "Show this help" }}</td><td class="table__actions"><kbd>?</kbd></td></tr>
|
||
|
|
<tr><td>{{ tr "Close modal" }}</td><td class="table__actions"><kbd>Esc</kbd></td></tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
<p class="muted">{{ trh "On macOS use <kbd>Cmd</kbd> instead of <kbd>Ctrl</kbd>." }}</p>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</dialog>
|
||
|
|
|
||
|
|
<script nonce="{{ .CSPNonce }}">
|
||
|
|
(() => {
|
||
|
|
const form = document.getElementById("post-form");
|
||
|
|
const textarea = document.getElementById("body");
|
||
|
|
const preview = document.getElementById("preview");
|
||
|
|
const wysiwyg = document.getElementById("wysiwyg");
|
||
|
|
const visualView = document.getElementById("visual-view");
|
||
|
|
const markdownView = document.getElementById("markdown-view");
|
||
|
|
const imageInput = document.getElementById("image-input");
|
||
|
|
const coverInput = document.getElementById("cover-input");
|
||
|
|
const coverFile = document.getElementById("cover-file");
|
||
|
|
const coverPreview = document.getElementById("cover-preview");
|
||
|
|
const previewUrl = "/admin/preview";
|
||
|
|
const uploadUrl = "/admin/uploads";
|
||
|
|
const csrf = "{{ .CSRFToken }}";
|
||
|
|
let timer = null;
|
||
|
|
|
||
|
|
// --- Markdown <-> HTML --------------------------------------------------
|
||
|
|
|
||
|
|
const mdToHtml = (md) => {
|
||
|
|
const data = new URLSearchParams({ body: md, _csrf: csrf });
|
||
|
|
// The saved post supplies the reference list to the preview: refs
|
||
|
|
// live in the frontmatter, which the body-only render cannot see.
|
||
|
|
const slugInput = document.getElementById("slug");
|
||
|
|
const langInput = document.getElementById("lang");
|
||
|
|
if (slugInput) data.set("slug", slugInput.value);
|
||
|
|
if (langInput) data.set("lang", langInput.value);
|
||
|
|
return fetch(previewUrl, {
|
||
|
|
method: "POST",
|
||
|
|
headers: { "Content-Type": "application/x-www-form-urlencoded" },
|
||
|
|
body: data.toString(),
|
||
|
|
}).then((response) => response.text());
|
||
|
|
};
|
||
|
|
|
||
|
|
const inlineToMd = (node) =>
|
||
|
|
Array.from(node.childNodes).map(inlineNode).join("");
|
||
|
|
|
||
|
|
function inlineNode(node) {
|
||
|
|
if (node.nodeType === Node.TEXT_NODE) return node.nodeValue.replace(/\s+/g, " ");
|
||
|
|
if (node.nodeType !== Node.ELEMENT_NODE) return "";
|
||
|
|
const tag = node.tagName.toLowerCase();
|
||
|
|
const inner = inlineToMd(node);
|
||
|
|
switch (tag) {
|
||
|
|
case "strong": case "b": return "**" + inner.trim() + "**";
|
||
|
|
case "em": case "i": return "*" + inner.trim() + "*";
|
||
|
|
case "code": return "`" + node.textContent + "`";
|
||
|
|
case "a": return "[" + inner + "](" + (node.getAttribute("href") || "") + ")";
|
||
|
|
case "img": {
|
||
|
|
const title = node.getAttribute("title");
|
||
|
|
let md = "![" + (node.getAttribute("alt") || "") + "](" + (node.getAttribute("src") || "") + ")";
|
||
|
|
if (title) md = md.replace(")", ' "' + title + '")');
|
||
|
|
return md;
|
||
|
|
}
|
||
|
|
case "br": return "\n";
|
||
|
|
default: return inner;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function listToMd(list, ordered) {
|
||
|
|
let index = 1;
|
||
|
|
return Array.from(list.children)
|
||
|
|
.filter((li) => li.tagName.toLowerCase() === "li")
|
||
|
|
.map((li) => (ordered ? index++ + ". " : "- ") + inlineToMd(li).trim())
|
||
|
|
.join("\n");
|
||
|
|
}
|
||
|
|
|
||
|
|
function htmlToMd(root) {
|
||
|
|
const blocks = [];
|
||
|
|
root.childNodes.forEach((node) => {
|
||
|
|
if (node.nodeType === Node.TEXT_NODE) {
|
||
|
|
const text = node.nodeValue.trim();
|
||
|
|
if (text) blocks.push(text);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (node.nodeType !== Node.ELEMENT_NODE) return;
|
||
|
|
const tag = node.tagName.toLowerCase();
|
||
|
|
if (/^h[1-6]$/.test(tag)) {
|
||
|
|
blocks.push("#".repeat(Number(tag.charAt(1))) + " " + inlineToMd(node).trim());
|
||
|
|
} else if (tag === "ul" || tag === "ol") {
|
||
|
|
blocks.push(listToMd(node, tag === "ol"));
|
||
|
|
} else if (tag === "blockquote") {
|
||
|
|
blocks.push(inlineToMd(node).trim().split("\n").map((l) => "> " + l).join("\n"));
|
||
|
|
} else if (tag === "pre") {
|
||
|
|
blocks.push("```\n" + node.textContent.replace(/\n$/, "") + "\n```");
|
||
|
|
} else if (tag === "hr") {
|
||
|
|
blocks.push("---");
|
||
|
|
} else {
|
||
|
|
const content = inlineToMd(node).trim();
|
||
|
|
if (content) blocks.push(content);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return blocks.join("\n\n").replace(/\n{3,}/g, "\n\n").trim() + "\n";
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Replace the content through a parse-and-move: a script inserted via
|
||
|
|
DOMParser carries the "already started" flag and never runs, so the
|
||
|
|
server sanitisation gets defence in depth. */
|
||
|
|
function setSafeHtml(target, html) {
|
||
|
|
target.replaceChildren();
|
||
|
|
const doc = new DOMParser().parseFromString("<div>" + html + "</div>", "text/html");
|
||
|
|
const source = doc.body.firstChild;
|
||
|
|
while (source?.firstChild) target.append(source.firstChild);
|
||
|
|
}
|
||
|
|
|
||
|
|
const renderPreview = () =>
|
||
|
|
mdToHtml(textarea.value).then((html) => setSafeHtml(preview, html));
|
||
|
|
|
||
|
|
function schedule() {
|
||
|
|
clearTimeout(timer);
|
||
|
|
timer = setTimeout(renderPreview, 250);
|
||
|
|
updateCounts();
|
||
|
|
scheduleAutosave();
|
||
|
|
}
|
||
|
|
|
||
|
|
// --- Image upload --------------------------------------------------------
|
||
|
|
|
||
|
|
async function uploadImage(file, onSuccess) {
|
||
|
|
const data = new FormData();
|
||
|
|
data.append("file", file);
|
||
|
|
data.append("_csrf", csrf);
|
||
|
|
let message;
|
||
|
|
try {
|
||
|
|
const response = await fetch(uploadUrl, { method: "POST", body: data });
|
||
|
|
const json = await response.json();
|
||
|
|
if (response.ok && json.url) {
|
||
|
|
onSuccess(json.url);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
message = json.message || json.error || "error";
|
||
|
|
} catch (error) {
|
||
|
|
message = String(error);
|
||
|
|
}
|
||
|
|
window.__volumen.toast(window.__f("upload.prefix", message), { kind: "error" });
|
||
|
|
}
|
||
|
|
|
||
|
|
imageInput.addEventListener("change", () => {
|
||
|
|
const file = imageInput.files[0];
|
||
|
|
if (!file) return;
|
||
|
|
uploadImage(file, (url) => {
|
||
|
|
if (visualView.hidden) insertIntoTextarea("![](" + url + ")");
|
||
|
|
else exec("insertImage", url);
|
||
|
|
});
|
||
|
|
imageInput.value = "";
|
||
|
|
});
|
||
|
|
|
||
|
|
// --- Cover image -----------------------------------------------------------
|
||
|
|
|
||
|
|
const refreshCoverPreview = () => {
|
||
|
|
if (coverInput.value) {
|
||
|
|
coverPreview.src = coverInput.value;
|
||
|
|
coverPreview.hidden = false;
|
||
|
|
} else {
|
||
|
|
coverPreview.hidden = true;
|
||
|
|
coverPreview.removeAttribute("src");
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
document.getElementById("cover-upload").addEventListener("click", () => coverFile.click());
|
||
|
|
document.getElementById("cover-clear").addEventListener("click", () => {
|
||
|
|
coverInput.value = "";
|
||
|
|
refreshCoverPreview();
|
||
|
|
});
|
||
|
|
coverFile.addEventListener("change", () => {
|
||
|
|
const file = coverFile.files[0];
|
||
|
|
if (!file) return;
|
||
|
|
uploadImage(file, (url) => {
|
||
|
|
coverInput.value = url;
|
||
|
|
refreshCoverPreview();
|
||
|
|
});
|
||
|
|
coverFile.value = "";
|
||
|
|
});
|
||
|
|
coverInput.addEventListener("input", refreshCoverPreview);
|
||
|
|
refreshCoverPreview();
|
||
|
|
|
||
|
|
// --- Bibliography -------------------------------------------------------
|
||
|
|
|
||
|
|
const refsList = document.getElementById("refs-list");
|
||
|
|
const refsEmpty = document.getElementById("refs-empty");
|
||
|
|
const refsHidden = document.getElementById("refs-json");
|
||
|
|
const refRowTemplate = document.getElementById("ref-row-template");
|
||
|
|
const refFields = ["raw", "title", "venue", "year", "volume", "pages", "doi", "arxiv", "url"];
|
||
|
|
|
||
|
|
const authorLines = (authors) => (authors || []).map((author) => {
|
||
|
|
if (typeof author === "string") return author;
|
||
|
|
if (author.orcid) return author.name + " [orcid:" + author.orcid + "]";
|
||
|
|
return author.name || "";
|
||
|
|
}).join("\n");
|
||
|
|
|
||
|
|
function refEntriesFrom(tables) {
|
||
|
|
return (tables || []).map((table) => {
|
||
|
|
const entry = { authorsText: authorLines(table.authors) };
|
||
|
|
refFields.forEach((name) => {
|
||
|
|
const value = table[name];
|
||
|
|
if (value !== undefined && value !== null && String(value) !== "") entry[name] = String(value);
|
||
|
|
});
|
||
|
|
const num = table.num;
|
||
|
|
if (num !== undefined && num !== null && String(num) !== "") entry.num = String(num);
|
||
|
|
return entry;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
let refEntries = refEntriesFrom({{ .Post.RefsJSON }});
|
||
|
|
|
||
|
|
function serializeRefs() {
|
||
|
|
refsHidden.value = JSON.stringify(refEntries.map((entry) => {
|
||
|
|
const out = {};
|
||
|
|
refFields.forEach((name) => { if (entry[name]) out[name] = entry[name]; });
|
||
|
|
const authors = (entry.authorsText || "").split("\n")
|
||
|
|
.map((line) => line.trim()).filter(Boolean)
|
||
|
|
.map((line) => {
|
||
|
|
const withOrcid = line.match(/^(.*?)\s*\[orcid:\s*([0-9Xx-]+)\]\s*$/);
|
||
|
|
return withOrcid ? { name: withOrcid[1].trim(), orcid: withOrcid[2] } : line;
|
||
|
|
});
|
||
|
|
if (authors.length) out.authors = authors;
|
||
|
|
if (entry.num) out.num = Number(entry.num);
|
||
|
|
return out;
|
||
|
|
}));
|
||
|
|
refsEmpty.hidden = refEntries.length > 0;
|
||
|
|
const count = document.getElementById("refs-count");
|
||
|
|
if (count) count.textContent = window.__n("refs.count", refEntries.length);
|
||
|
|
}
|
||
|
|
|
||
|
|
function renderRefs() {
|
||
|
|
refsList.replaceChildren();
|
||
|
|
refEntries.forEach((entry, index) => {
|
||
|
|
const row = refRowTemplate.content.firstElementChild.cloneNode(true);
|
||
|
|
row.querySelector(".ref-row__num").textContent = index + 1;
|
||
|
|
row.querySelector('[data-ref-field="raw"]').value = entry.raw || "";
|
||
|
|
row.querySelector('[data-ref-field="authors"]').value = entry.authorsText || "";
|
||
|
|
refFields.slice(1).forEach((name) => {
|
||
|
|
row.querySelector('[data-ref-field="' + name + '"]').value = entry[name] || "";
|
||
|
|
});
|
||
|
|
if (refFields.slice(1).some((name) => entry[name])) row.querySelector("details").open = true;
|
||
|
|
refsList.append(row);
|
||
|
|
});
|
||
|
|
serializeRefs();
|
||
|
|
}
|
||
|
|
|
||
|
|
function readRefs() {
|
||
|
|
refEntries = Array.from(refsList.children).map((row, index) => {
|
||
|
|
const previous = refEntries[index] || {};
|
||
|
|
const entry = { authorsText: row.querySelector('[data-ref-field="authors"]').value };
|
||
|
|
refFields.forEach((name) => {
|
||
|
|
if (name === "authors") return;
|
||
|
|
const value = row.querySelector('[data-ref-field="' + name + '"]').value.trim();
|
||
|
|
if (value) entry[name] = value;
|
||
|
|
});
|
||
|
|
if (previous.num) entry.num = previous.num;
|
||
|
|
return entry;
|
||
|
|
});
|
||
|
|
serializeRefs();
|
||
|
|
}
|
||
|
|
|
||
|
|
document.getElementById("ref-add").addEventListener("click", () => {
|
||
|
|
refEntries.push({ authorsText: "" });
|
||
|
|
renderRefs();
|
||
|
|
const last = refsList.lastElementChild;
|
||
|
|
if (last) last.querySelector('[data-ref-field="raw"]').focus();
|
||
|
|
});
|
||
|
|
document.getElementById("ref-marker").addEventListener("click", () => {
|
||
|
|
insertIntoTextarea("\n[[refs]]\n");
|
||
|
|
});
|
||
|
|
refsList.addEventListener("input", readRefs);
|
||
|
|
refsList.addEventListener("click", (event) => {
|
||
|
|
const button = event.target.closest("[data-ref]");
|
||
|
|
if (!button) return;
|
||
|
|
const row = button.closest(".ref-row");
|
||
|
|
const index = Array.prototype.indexOf.call(refsList.children, row);
|
||
|
|
const moved = refEntries.splice(index, 1)[0];
|
||
|
|
if (button.dataset.ref === "up" && index > 0) {
|
||
|
|
refEntries.splice(index - 1, 0, moved);
|
||
|
|
} else if (button.dataset.ref === "down" && index < refEntries.length) {
|
||
|
|
refEntries.splice(index + 1, 0, moved);
|
||
|
|
} else if (button.dataset.ref !== "remove") {
|
||
|
|
// An edge move (first up, last down): the entry goes back.
|
||
|
|
refEntries.splice(index, 0, moved);
|
||
|
|
}
|
||
|
|
renderRefs();
|
||
|
|
});
|
||
|
|
renderRefs();
|
||
|
|
|
||
|
|
// --- Markdown toolbar --------------------------------------------------
|
||
|
|
|
||
|
|
function insertIntoTextarea(text) {
|
||
|
|
const start = textarea.selectionStart;
|
||
|
|
textarea.value = textarea.value.slice(0, start) + text + textarea.value.slice(textarea.selectionEnd);
|
||
|
|
textarea.focus();
|
||
|
|
textarea.selectionStart = textarea.selectionEnd = start + text.length;
|
||
|
|
schedule();
|
||
|
|
}
|
||
|
|
|
||
|
|
function wrap(before, after) {
|
||
|
|
const start = textarea.selectionStart;
|
||
|
|
const end = textarea.selectionEnd;
|
||
|
|
textarea.value = textarea.value.slice(0, start) + before + textarea.value.slice(start, end)
|
||
|
|
+ after + textarea.value.slice(end);
|
||
|
|
textarea.focus();
|
||
|
|
textarea.selectionStart = start + before.length;
|
||
|
|
textarea.selectionEnd = end + before.length;
|
||
|
|
schedule();
|
||
|
|
}
|
||
|
|
|
||
|
|
function linePrefix(prefix) {
|
||
|
|
const start = textarea.selectionStart;
|
||
|
|
const lineStart = textarea.value.lastIndexOf("\n", start - 1) + 1;
|
||
|
|
textarea.value = textarea.value.slice(0, lineStart) + prefix + textarea.value.slice(lineStart);
|
||
|
|
textarea.focus();
|
||
|
|
schedule();
|
||
|
|
}
|
||
|
|
|
||
|
|
const mdActions = {
|
||
|
|
bold: () => wrap("**", "**"),
|
||
|
|
italic: () => wrap("*", "*"),
|
||
|
|
code: () => wrap("`", "`"),
|
||
|
|
link: () => wrap("[", "](https://)"),
|
||
|
|
h2: () => linePrefix("## "),
|
||
|
|
h3: () => linePrefix("### "),
|
||
|
|
ul: () => linePrefix("- "),
|
||
|
|
ol: () => linePrefix("1. "),
|
||
|
|
quote: () => linePrefix("> "),
|
||
|
|
image: () => imageInput.click(),
|
||
|
|
};
|
||
|
|
|
||
|
|
// --- Visual toolbar -------------------------------------------------------
|
||
|
|
|
||
|
|
function exec(command, value) {
|
||
|
|
document.execCommand(command, false, value ?? null);
|
||
|
|
wysiwyg.focus();
|
||
|
|
updateToolbarState();
|
||
|
|
}
|
||
|
|
|
||
|
|
function wrapInline(tagName) {
|
||
|
|
const selection = window.getSelection();
|
||
|
|
if (!selection.rangeCount) return;
|
||
|
|
const element = document.createElement(tagName);
|
||
|
|
try { selection.getRangeAt(0).surroundContents(element); } catch (error) {}
|
||
|
|
wysiwyg.focus();
|
||
|
|
updateToolbarState();
|
||
|
|
}
|
||
|
|
|
||
|
|
const richActions = {
|
||
|
|
bold: () => exec("bold"),
|
||
|
|
italic: () => exec("italic"),
|
||
|
|
h2: () => exec("formatBlock", "H2"),
|
||
|
|
h3: () => exec("formatBlock", "H3"),
|
||
|
|
quote: () => exec("formatBlock", "BLOCKQUOTE"),
|
||
|
|
ul: () => exec("insertUnorderedList"),
|
||
|
|
ol: () => exec("insertOrderedList"),
|
||
|
|
code: () => wrapInline("code"),
|
||
|
|
image: () => imageInput.click(),
|
||
|
|
link: async () => {
|
||
|
|
const url = await window.__volumen.prompt(window.__("link.prompt"), "https://");
|
||
|
|
if (url) exec("createLink", url);
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
// --- Toolbar active state --------------------------------------------------
|
||
|
|
|
||
|
|
const queryState = (command) => {
|
||
|
|
try { return document.queryCommandState(command); } catch (error) { return false; }
|
||
|
|
};
|
||
|
|
|
||
|
|
const currentBlock = () => {
|
||
|
|
try {
|
||
|
|
return (document.queryCommandValue("formatBlock") || "").toLowerCase().replace(/[<>]/g, "");
|
||
|
|
} catch (error) { return ""; }
|
||
|
|
};
|
||
|
|
|
||
|
|
function selectionInEditor() {
|
||
|
|
let node = window.getSelection().anchorNode;
|
||
|
|
while (node) {
|
||
|
|
if (node === wysiwyg) return true;
|
||
|
|
node = node.parentNode;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
function isInside(tagName) {
|
||
|
|
let node = window.getSelection().anchorNode;
|
||
|
|
while (node && node !== wysiwyg) {
|
||
|
|
if (node.nodeType === Node.ELEMENT_NODE && node.tagName.toLowerCase() === tagName) return true;
|
||
|
|
node = node.parentNode;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateToolbarState() {
|
||
|
|
if (visualView.hidden) return;
|
||
|
|
let active = {};
|
||
|
|
if (selectionInEditor()) {
|
||
|
|
const block = currentBlock();
|
||
|
|
active = {
|
||
|
|
bold: queryState("bold"),
|
||
|
|
italic: queryState("italic"),
|
||
|
|
ul: queryState("insertUnorderedList"),
|
||
|
|
ol: queryState("insertOrderedList"),
|
||
|
|
h2: block === "h2",
|
||
|
|
h3: block === "h3",
|
||
|
|
quote: block === "blockquote",
|
||
|
|
link: isInside("a"),
|
||
|
|
code: isInside("code"),
|
||
|
|
};
|
||
|
|
}
|
||
|
|
document.querySelectorAll("[data-rich]").forEach((button) => {
|
||
|
|
button.classList.toggle("is-active", !!active[button.dataset.rich]);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// --- Mode switching ------------------------------------------------------
|
||
|
|
|
||
|
|
const setActiveTab = (name) => document.querySelectorAll(".tabs [role='tab']").forEach((button) => {
|
||
|
|
button.setAttribute("aria-selected", String(button.dataset.tab === name));
|
||
|
|
});
|
||
|
|
|
||
|
|
const showVisual = () => {
|
||
|
|
mdToHtml(textarea.value).then((html) => setSafeHtml(wysiwyg, html));
|
||
|
|
visualView.hidden = false;
|
||
|
|
markdownView.hidden = true;
|
||
|
|
setActiveTab("visual");
|
||
|
|
};
|
||
|
|
|
||
|
|
const showMarkdown = () => {
|
||
|
|
textarea.value = htmlToMd(wysiwyg);
|
||
|
|
renderPreview();
|
||
|
|
visualView.hidden = true;
|
||
|
|
markdownView.hidden = false;
|
||
|
|
setActiveTab("markdown");
|
||
|
|
};
|
||
|
|
|
||
|
|
// --- Keyboard shortcuts ------------------------------------------------------
|
||
|
|
|
||
|
|
const shortcut = (actions) => (event) => {
|
||
|
|
if (!(event.ctrlKey || event.metaKey)) return;
|
||
|
|
const key = event.key.toLowerCase();
|
||
|
|
if (key === "b") { event.preventDefault(); actions.bold(); }
|
||
|
|
else if (key === "i") { event.preventDefault(); actions.italic(); }
|
||
|
|
else if (key === "k") { event.preventDefault(); actions.link(); }
|
||
|
|
};
|
||
|
|
|
||
|
|
// --- Wiring ------------------------------------------------------------
|
||
|
|
|
||
|
|
document.querySelectorAll("[data-md]").forEach((button) =>
|
||
|
|
button.addEventListener("click", () => mdActions[button.dataset.md]()));
|
||
|
|
document.querySelectorAll("[data-rich]").forEach((button) =>
|
||
|
|
button.addEventListener("click", () => richActions[button.dataset.rich]()));
|
||
|
|
document.querySelectorAll(".tabs [role='tab']").forEach((button) => {
|
||
|
|
button.addEventListener("click", () => {
|
||
|
|
if (button.dataset.tab === "visual") showVisual();
|
||
|
|
else showMarkdown();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
wysiwyg.addEventListener("paste", (event) => {
|
||
|
|
event.preventDefault();
|
||
|
|
document.execCommand("insertText", false, event.clipboardData.getData("text/plain"));
|
||
|
|
});
|
||
|
|
wysiwyg.addEventListener("keydown", shortcut(richActions));
|
||
|
|
wysiwyg.addEventListener("keyup", updateToolbarState);
|
||
|
|
wysiwyg.addEventListener("mouseup", updateToolbarState);
|
||
|
|
document.addEventListener("selectionchange", updateToolbarState);
|
||
|
|
|
||
|
|
textarea.addEventListener("input", schedule);
|
||
|
|
textarea.addEventListener("keydown", shortcut(mdActions));
|
||
|
|
|
||
|
|
form.addEventListener("submit", () => {
|
||
|
|
if (!visualView.hidden) textarea.value = htmlToMd(wysiwyg);
|
||
|
|
clearAutosave();
|
||
|
|
});
|
||
|
|
|
||
|
|
document.addEventListener("keydown", (event) => {
|
||
|
|
if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "s") {
|
||
|
|
event.preventDefault();
|
||
|
|
form.requestSubmit();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// --- Smart slug from title, and its live collision check --------------------
|
||
|
|
|
||
|
|
const titleInput = document.getElementById("title");
|
||
|
|
const slugInput = document.getElementById("slug");
|
||
|
|
let slugTouched = window.__volumenSlugTouched === true || slugInput.readOnly || slugInput.value !== "";
|
||
|
|
|
||
|
|
const slugify = (text) => text
|
||
|
|
.toLowerCase()
|
||
|
|
.normalize("NFKD")
|
||
|
|
.replace(/[\u0300-\u036f]/g, "")
|
||
|
|
.replace(/[^a-z0-9]+/g, "-")
|
||
|
|
.replace(/^-+|-+$/g, "")
|
||
|
|
.slice(0, 200);
|
||
|
|
|
||
|
|
titleInput.addEventListener("input", () => {
|
||
|
|
if (slugTouched || window.__volumenSlugTouched === true) return;
|
||
|
|
slugInput.value = slugify(titleInput.value);
|
||
|
|
});
|
||
|
|
slugInput.addEventListener("input", () => { slugTouched = true; });
|
||
|
|
|
||
|
|
const slugHelp = document.getElementById("slug-help");
|
||
|
|
let slugCheckTimer = null;
|
||
|
|
const slugExclude = slugInput.readOnly ? slugInput.value : "";
|
||
|
|
const slugCheckUrl = slugInput.dataset.existsUrl || "/admin/posts/exists";
|
||
|
|
|
||
|
|
async function checkSlug() {
|
||
|
|
const value = (slugInput.value || "").trim();
|
||
|
|
if (!value) {
|
||
|
|
slugHelp.hidden = true;
|
||
|
|
slugInput.classList.remove("is-invalid", "is-ok");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const url = slugCheckUrl + "?slug=" + encodeURIComponent(value)
|
||
|
|
+ (slugExclude ? "&exclude=" + encodeURIComponent(slugExclude) : "");
|
||
|
|
try {
|
||
|
|
const response = await fetch(url, { credentials: "same-origin" });
|
||
|
|
const data = response.ok ? await response.json() : null;
|
||
|
|
if (!data) return;
|
||
|
|
if (data.available) {
|
||
|
|
slugInput.classList.remove("is-invalid");
|
||
|
|
slugInput.classList.add("is-ok");
|
||
|
|
slugHelp.className = "field__hint is-live hint--ok";
|
||
|
|
slugHelp.textContent = window.__("slug.ok");
|
||
|
|
} else {
|
||
|
|
slugInput.classList.remove("is-ok");
|
||
|
|
slugInput.classList.add("is-invalid");
|
||
|
|
slugHelp.className = "field__hint is-live hint--error";
|
||
|
|
slugHelp.textContent = window.__f("slug.taken", data.title || data.slug);
|
||
|
|
}
|
||
|
|
slugHelp.hidden = false;
|
||
|
|
} catch (error) {
|
||
|
|
slugHelp.hidden = true;
|
||
|
|
slugInput.classList.remove("is-invalid", "is-ok");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
slugInput.addEventListener("input", () => {
|
||
|
|
clearTimeout(slugCheckTimer);
|
||
|
|
slugCheckTimer = setTimeout(checkSlug, 300);
|
||
|
|
});
|
||
|
|
if (slugInput.value && !slugInput.readOnly) checkSlug();
|
||
|
|
|
||
|
|
// --- publish_at warning when the date is today or earlier ----------------------
|
||
|
|
|
||
|
|
const publishAt = document.getElementById("publish_at");
|
||
|
|
const publishWarn = document.getElementById("publish-at-warn");
|
||
|
|
function checkPublishAt() {
|
||
|
|
const value = publishAt.value;
|
||
|
|
if (!value) { publishWarn.hidden = true; return; }
|
||
|
|
const today = new Date();
|
||
|
|
const ymd = today.getFullYear() + "-"
|
||
|
|
+ String(today.getMonth() + 1).padStart(2, "0") + "-"
|
||
|
|
+ String(today.getDate()).padStart(2, "0");
|
||
|
|
publishWarn.textContent = publishAt.dataset.warnToday;
|
||
|
|
publishWarn.hidden = value > ymd;
|
||
|
|
}
|
||
|
|
publishAt.addEventListener("input", checkPublishAt);
|
||
|
|
checkPublishAt();
|
||
|
|
|
||
|
|
// --- Word / reading-time counters -----------------------------------------------
|
||
|
|
|
||
|
|
const statusWords = document.getElementById("status-words");
|
||
|
|
const statusRead = document.getElementById("status-read");
|
||
|
|
const statusChars = document.getElementById("status-chars");
|
||
|
|
|
||
|
|
function updateCounts() {
|
||
|
|
const source = visualView.hidden ? textarea.value : wysiwyg.innerText;
|
||
|
|
const trimmed = source.trim();
|
||
|
|
const words = trimmed ? trimmed.split(/\s+/).length : 0;
|
||
|
|
const mins = Math.max(1, Math.floor((words + 199) / 200));
|
||
|
|
statusWords.textContent = window.__n("editor.words", words);
|
||
|
|
statusRead.textContent = window.__n("editor.reading", mins);
|
||
|
|
statusChars.textContent = window.__n("editor.chars", source.length);
|
||
|
|
}
|
||
|
|
|
||
|
|
// --- Autosave to localStorage ----------------------------------------------------
|
||
|
|
|
||
|
|
const AUTOSAVE_KEY = "volumen.autosave:" + (slugInput.value || "new");
|
||
|
|
const AUTOSAVE_FIELDS = [
|
||
|
|
"title", "slug", "lang", "author", "fediverse_creator", "doi", "orcid", "date",
|
||
|
|
"publish_at", "tags", "excerpt", "cover", "cover_alt", "cover_caption",
|
||
|
|
"series", "series_order", "refs",
|
||
|
|
];
|
||
|
|
let autosaveTimer = null;
|
||
|
|
let savedFlashTimer = null;
|
||
|
|
const statusSaved = document.getElementById("status-saved");
|
||
|
|
const autosaveBar = document.getElementById("autosave-bar");
|
||
|
|
const autosaveMsg = document.getElementById("autosave-msg");
|
||
|
|
|
||
|
|
function gatherForm() {
|
||
|
|
const data = {};
|
||
|
|
AUTOSAVE_FIELDS.forEach((name) => {
|
||
|
|
data[name] = form.elements[name]?.value || "";
|
||
|
|
});
|
||
|
|
data.draft = form.elements.draft.checked;
|
||
|
|
data.all_langs = form.elements.all_langs.checked;
|
||
|
|
data.body = visualView.hidden ? textarea.value : htmlToMd(wysiwyg);
|
||
|
|
return data;
|
||
|
|
}
|
||
|
|
|
||
|
|
function applyForm(data) {
|
||
|
|
AUTOSAVE_FIELDS.forEach((name) => {
|
||
|
|
const el = form.elements[name];
|
||
|
|
if (el && Object.hasOwn(data, name)) el.value = data[name];
|
||
|
|
});
|
||
|
|
if (Object.hasOwn(data, "refs")) {
|
||
|
|
try { refEntries = refEntriesFrom(JSON.parse(data.refs || "[]")); }
|
||
|
|
catch (error) { refEntries = []; }
|
||
|
|
}
|
||
|
|
form.elements.draft.checked = !!data.draft;
|
||
|
|
form.elements.all_langs.checked = !!data.all_langs;
|
||
|
|
textarea.value = data.body || "";
|
||
|
|
if (data.slug) slugTouched = true;
|
||
|
|
renderRefs();
|
||
|
|
refreshCoverPreview();
|
||
|
|
renderPreview();
|
||
|
|
updateCounts();
|
||
|
|
}
|
||
|
|
|
||
|
|
const clearAutosave = () => {
|
||
|
|
try { localStorage.removeItem(AUTOSAVE_KEY); } catch (error) {}
|
||
|
|
};
|
||
|
|
|
||
|
|
const flashSaved = () => {
|
||
|
|
statusSaved.style.opacity = "1";
|
||
|
|
clearTimeout(savedFlashTimer);
|
||
|
|
savedFlashTimer = setTimeout(() => { statusSaved.style.opacity = "0"; }, 1500);
|
||
|
|
};
|
||
|
|
|
||
|
|
function scheduleAutosave() {
|
||
|
|
clearTimeout(autosaveTimer);
|
||
|
|
autosaveTimer = setTimeout(() => {
|
||
|
|
try {
|
||
|
|
const data = gatherForm();
|
||
|
|
data._savedAt = Date.now();
|
||
|
|
localStorage.setItem(AUTOSAVE_KEY, JSON.stringify(data));
|
||
|
|
flashSaved();
|
||
|
|
} catch (error) {}
|
||
|
|
}, 800);
|
||
|
|
}
|
||
|
|
|
||
|
|
(() => {
|
||
|
|
let raw = null;
|
||
|
|
try { raw = localStorage.getItem(AUTOSAVE_KEY); } catch (error) {}
|
||
|
|
if (!raw) return;
|
||
|
|
let saved;
|
||
|
|
try { saved = JSON.parse(raw); } catch (error) { clearAutosave(); return; }
|
||
|
|
const current = gatherForm();
|
||
|
|
const differs = AUTOSAVE_FIELDS.concat(["body"]).some((key) =>
|
||
|
|
String(saved[key] || "") !== String(current[key] || ""))
|
||
|
|
|| !!saved.draft !== current.draft || !!saved.all_langs !== current.all_langs;
|
||
|
|
if (!differs) { clearAutosave(); return; }
|
||
|
|
const when = new Date(saved._savedAt || Date.now());
|
||
|
|
autosaveMsg.textContent = window.__f("autosave.available", when.toLocaleTimeString());
|
||
|
|
autosaveBar.hidden = false;
|
||
|
|
document.getElementById("autosave-restore").addEventListener("click", () => {
|
||
|
|
applyForm(saved);
|
||
|
|
clearAutosave();
|
||
|
|
autosaveBar.hidden = true;
|
||
|
|
});
|
||
|
|
document.getElementById("autosave-discard").addEventListener("click", () => {
|
||
|
|
clearAutosave();
|
||
|
|
autosaveBar.hidden = true;
|
||
|
|
});
|
||
|
|
})();
|
||
|
|
|
||
|
|
form.addEventListener("input", scheduleAutosave);
|
||
|
|
wysiwyg.addEventListener("input", () => { updateCounts(); scheduleAutosave(); });
|
||
|
|
|
||
|
|
// --- Drag & drop / paste images into the editor ------------------------------------
|
||
|
|
|
||
|
|
const mdPane = document.getElementById("markdown-pane");
|
||
|
|
const dropOverlay = document.getElementById("body-drop");
|
||
|
|
let dropDepth = 0;
|
||
|
|
|
||
|
|
const isUploadable = (file) => /\.(webp|avif|svg)$/i.test(file.name)
|
||
|
|
|| file.type === "image/webp" || file.type === "image/avif" || file.type === "image/svg+xml";
|
||
|
|
|
||
|
|
mdPane.addEventListener("dragenter", (event) => {
|
||
|
|
if (!event.dataTransfer?.types.includes("Files")) return;
|
||
|
|
dropDepth += 1;
|
||
|
|
mdPane.classList.add("is-drop");
|
||
|
|
dropOverlay.hidden = false;
|
||
|
|
});
|
||
|
|
mdPane.addEventListener("dragover", (event) => event.preventDefault());
|
||
|
|
mdPane.addEventListener("dragleave", () => {
|
||
|
|
dropDepth = Math.max(0, dropDepth - 1);
|
||
|
|
if (dropDepth === 0) {
|
||
|
|
mdPane.classList.remove("is-drop");
|
||
|
|
dropOverlay.hidden = true;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
mdPane.addEventListener("drop", (event) => {
|
||
|
|
event.preventDefault();
|
||
|
|
event.stopPropagation();
|
||
|
|
dropDepth = 0;
|
||
|
|
mdPane.classList.remove("is-drop");
|
||
|
|
dropOverlay.hidden = true;
|
||
|
|
Array.from(event.dataTransfer?.files || []).forEach((file) => {
|
||
|
|
if (!isUploadable(file)) {
|
||
|
|
window.__volumen.toast(window.__f("upload.rejected", file.name), { kind: "error" });
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const alt = file.name.replace(/\.(webp|avif|svg)$/i, "");
|
||
|
|
uploadImage(file, (url) => insertIntoTextarea("![" + alt + "](" + url + ")\n"));
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
textarea.addEventListener("paste", (event) => {
|
||
|
|
for (const item of event.clipboardData?.items || []) {
|
||
|
|
if (item.type.startsWith("image/")) {
|
||
|
|
event.preventDefault();
|
||
|
|
uploadImage(item.getAsFile(), (url) => insertIntoTextarea("![](" + url + ")\n"));
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// --- Preview toggle -------------------------------------------------------------
|
||
|
|
|
||
|
|
const editorGrid = document.getElementById("editor-grid");
|
||
|
|
const togglePreviewBtn = document.getElementById("toggle-preview");
|
||
|
|
|
||
|
|
function applyPreviewPreference() {
|
||
|
|
let on = false;
|
||
|
|
try { on = localStorage.getItem("volumen.preview") === "on"; } catch (error) {}
|
||
|
|
editorGrid.classList.toggle("is-preview", on);
|
||
|
|
document.getElementById("preview-pane").hidden = !on;
|
||
|
|
togglePreviewBtn.setAttribute("aria-pressed", String(on));
|
||
|
|
if (on) renderPreview();
|
||
|
|
}
|
||
|
|
|
||
|
|
togglePreviewBtn.addEventListener("click", () => {
|
||
|
|
const turningOn = !editorGrid.classList.contains("is-preview");
|
||
|
|
try { localStorage.setItem("volumen.preview", turningOn ? "on" : "off"); } catch (error) {}
|
||
|
|
applyPreviewPreference();
|
||
|
|
});
|
||
|
|
|
||
|
|
// Start in Markdown mode (primary), preview OFF by default.
|
||
|
|
applyPreviewPreference();
|
||
|
|
|
||
|
|
// Fill the counters for the content the post already carries.
|
||
|
|
updateCounts();
|
||
|
|
|
||
|
|
// --- "?" keyboard shortcut dialog -------------------------------------------------
|
||
|
|
|
||
|
|
const helpDialog = document.getElementById("shortcut-help");
|
||
|
|
const openHelp = () => helpDialog.showModal();
|
||
|
|
document.getElementById("show-shortcuts").addEventListener("click", openHelp);
|
||
|
|
document.addEventListener("keydown", (event) => {
|
||
|
|
const tag = event.target.tagName || "";
|
||
|
|
if (event.key === "?" && !event.ctrlKey && !event.metaKey && !event.altKey
|
||
|
|
&& !["INPUT", "TEXTAREA"].includes(tag) && !event.target.isContentEditable) {
|
||
|
|
event.preventDefault();
|
||
|
|
openHelp();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
})();
|
||
|
|
</script>
|
||
|
|
{{end}}
|