dtoro
bbde491f4b
Publish form now uses a single dashed drop area for .html uploads (click-to-browse fallback included). Removes the paste-HTML textarea since real artifacts always come from a file. Server-side multipart handling is unchanged; the `file` form field already took precedence. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
174 lines
8.6 KiB
HTML
174 lines
8.6 KiB
HTML
{{ define "dashboard" }}
|
|
{{ template "head" "Dashboard" }}
|
|
{{ template "header" true }}
|
|
<main class="max-w-6xl mx-auto px-6 py-8">
|
|
|
|
<!-- Stat tiles -->
|
|
<section class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-8">
|
|
<div class="rounded border border-slate-800 bg-slate-900/50 px-4 py-3">
|
|
<div class="text-xs uppercase tracking-wide text-slate-400">Artifacts</div>
|
|
<div class="text-2xl font-semibold mt-1">{{ .Stats.TotalArtifacts }}</div>
|
|
</div>
|
|
<div class="rounded border border-slate-800 bg-slate-900/50 px-4 py-3">
|
|
<div class="text-xs uppercase tracking-wide text-slate-400">Views (7d)</div>
|
|
<div class="text-2xl font-semibold mt-1">{{ .Stats.Views7d }}</div>
|
|
</div>
|
|
<div class="rounded border border-slate-800 bg-slate-900/50 px-4 py-3">
|
|
<div class="text-xs uppercase tracking-wide text-slate-400">Views (30d)</div>
|
|
<div class="text-2xl font-semibold mt-1">{{ .Stats.Views30d }}</div>
|
|
</div>
|
|
<div class="rounded border border-slate-800 bg-slate-900/50 px-4 py-3">
|
|
<div class="text-xs uppercase tracking-wide text-slate-400">Storage</div>
|
|
<div class="text-2xl font-semibold mt-1">{{ humanSize .Stats.StorageBytes }}</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Publish form -->
|
|
<section class="rounded border border-slate-800 bg-slate-900/50 p-4 mb-8">
|
|
<h2 class="text-lg font-semibold mb-3">Publish</h2>
|
|
<form method="post" action="/api/publish" enctype="multipart/form-data" class="space-y-3" id="publishForm">
|
|
<label for="dropInput"
|
|
id="dropZone"
|
|
class="flex flex-col items-center justify-center text-center cursor-pointer
|
|
border-2 border-dashed border-slate-700 hover:border-indigo-500
|
|
rounded-lg bg-slate-950/50 hover:bg-slate-950 transition-colors
|
|
px-6 py-12 text-sm text-slate-400">
|
|
<svg class="w-10 h-10 mb-3 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
|
|
d="M7 16a4 4 0 01-.88-7.9A5 5 0 0115.9 6.56 4 4 0 1118 16M8 13l4-4m0 0l4 4m-4-4v10"/>
|
|
</svg>
|
|
<div><span class="text-indigo-300 font-medium">Drop HTML file here</span> or click to browse</div>
|
|
<div class="text-xs text-slate-500 mt-1" id="dropHint">.html · up to 5 MB</div>
|
|
<input id="dropInput" type="file" name="file" accept=".html,text/html" class="sr-only" required>
|
|
</label>
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-3">
|
|
<label class="block">
|
|
<span class="block text-xs text-slate-400 mb-1">Custom slug (optional)</span>
|
|
<input type="text" name="slug" pattern="[a-z0-9][a-z0-9-]{2,31}" placeholder="auto"
|
|
class="w-full bg-slate-950 border border-slate-800 rounded px-3 py-2 text-sm">
|
|
</label>
|
|
<label class="block">
|
|
<span class="block text-xs text-slate-400 mb-1">Title (optional)</span>
|
|
<input type="text" name="title" placeholder="from <title> if blank"
|
|
class="w-full bg-slate-950 border border-slate-800 rounded px-3 py-2 text-sm">
|
|
</label>
|
|
<label class="block">
|
|
<span class="block text-xs text-slate-400 mb-1">Password (optional)</span>
|
|
<input type="password" name="password" autocomplete="new-password"
|
|
class="w-full bg-slate-950 border border-slate-800 rounded px-3 py-2 text-sm">
|
|
</label>
|
|
<label class="block">
|
|
<span class="block text-xs text-slate-400 mb-1">Expires</span>
|
|
<select name="expires_in" class="w-full bg-slate-950 border border-slate-800 rounded px-3 py-2 text-sm">
|
|
<option value="never">never</option>
|
|
<option value="1h">1 hour</option>
|
|
<option value="24h">1 day</option>
|
|
<option value="7d">7 days</option>
|
|
<option value="30d">30 days</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<div class="flex items-center justify-end">
|
|
<button class="bg-indigo-600 hover:bg-indigo-500 text-white rounded px-4 py-2 font-medium text-sm">Publish</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<script>
|
|
(function () {
|
|
const zone = document.getElementById('dropZone');
|
|
const input = document.getElementById('dropInput');
|
|
const hint = document.getElementById('dropHint');
|
|
const form = document.getElementById('publishForm');
|
|
if (!zone || !input) return;
|
|
|
|
const ACTIVE = ['border-indigo-500', 'bg-indigo-500/10'];
|
|
const prevent = e => { e.preventDefault(); e.stopPropagation(); };
|
|
['dragenter', 'dragover'].forEach(ev =>
|
|
zone.addEventListener(ev, e => { prevent(e); zone.classList.add(...ACTIVE); }));
|
|
['dragleave', 'drop'].forEach(ev =>
|
|
zone.addEventListener(ev, e => { prevent(e); zone.classList.remove(...ACTIVE); }));
|
|
|
|
zone.addEventListener('drop', e => {
|
|
const f = e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files[0];
|
|
if (!f) return;
|
|
if (!/\.html?$/i.test(f.name) && f.type !== 'text/html') {
|
|
hint.textContent = 'Only .html files are accepted';
|
|
hint.classList.add('text-red-400');
|
|
return;
|
|
}
|
|
// DataTransfer into the input so form submit picks it up.
|
|
const dt = new DataTransfer();
|
|
dt.items.add(f);
|
|
input.files = dt.files;
|
|
showSelection(f);
|
|
});
|
|
|
|
input.addEventListener('change', () => {
|
|
if (input.files && input.files[0]) showSelection(input.files[0]);
|
|
});
|
|
|
|
function showSelection(f) {
|
|
const kb = (f.size / 1024).toFixed(1);
|
|
hint.textContent = `${f.name} · ${kb} KB`;
|
|
hint.classList.remove('text-red-400');
|
|
hint.classList.add('text-indigo-300');
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
{{ if .FlashSlug }}
|
|
<div class="rounded border border-emerald-800 bg-emerald-900/30 text-emerald-100 px-4 py-3 mb-6 text-sm flex items-center justify-between">
|
|
<div>
|
|
Published: <code class="bg-slate-900 px-2 py-0.5 rounded">{{ .BaseURL }}/p/{{ .FlashSlug }}</code>
|
|
</div>
|
|
<button onclick="navigator.clipboard.writeText('{{ .BaseURL }}/p/{{ .FlashSlug }}')"
|
|
class="bg-emerald-700 hover:bg-emerald-600 rounded px-3 py-1 text-xs">Copy link</button>
|
|
</div>
|
|
{{ end }}
|
|
|
|
<!-- Artifact list -->
|
|
<section class="rounded border border-slate-800 bg-slate-900/30 overflow-hidden">
|
|
<table class="w-full text-sm">
|
|
<thead class="bg-slate-900 text-slate-400 text-xs uppercase tracking-wide">
|
|
<tr>
|
|
<th class="text-left px-4 py-2">Slug</th>
|
|
<th class="text-left px-4 py-2">Title</th>
|
|
<th class="text-right px-4 py-2">Views</th>
|
|
<th class="text-left px-4 py-2">Last viewed</th>
|
|
<th class="text-left px-4 py-2">7-day</th>
|
|
<th class="text-left px-4 py-2">Size</th>
|
|
<th class="text-right px-4 py-2">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{ range .Items }}
|
|
<tr id="row-{{ .Slug }}" class="border-t border-slate-800 hover:bg-slate-900/50">
|
|
<td class="px-4 py-2">
|
|
<a class="font-mono text-indigo-300 hover:text-indigo-200" href="/a/{{ .Slug }}">{{ .Slug }}</a>
|
|
{{ if .HasPassword }}<span class="ml-1 text-xs text-amber-400" title="Password-protected">🔒</span>{{ end }}
|
|
</td>
|
|
<td class="px-4 py-2 text-slate-300">{{ if .Title }}{{ .Title }}{{ else }}<span class="text-slate-500">—</span>{{ end }}</td>
|
|
<td class="px-4 py-2 text-right tabular-nums">{{ .ViewCount }}</td>
|
|
<td class="px-4 py-2 text-slate-400">{{ humanTime .LastViewedAt }}</td>
|
|
<td class="px-4 py-2 spark text-indigo-300">{{ sparkline .Spark }}</td>
|
|
<td class="px-4 py-2 text-slate-400">{{ humanSize .SizeBytes }}</td>
|
|
<td class="px-4 py-2 text-right">
|
|
<button onclick="navigator.clipboard.writeText('{{ $.BaseURL }}/p/{{ .Slug }}')"
|
|
class="text-xs px-2 py-1 rounded bg-slate-800 hover:bg-slate-700">Copy</button>
|
|
<a href="/p/{{ .Slug }}" target="_blank" class="text-xs px-2 py-1 rounded bg-slate-800 hover:bg-slate-700">Open</a>
|
|
<button hx-delete="/a/{{ .Slug }}" hx-target="#row-{{ .Slug }}" hx-swap="outerHTML"
|
|
hx-confirm="Delete {{ .Slug }}? This cannot be undone."
|
|
class="text-xs px-2 py-1 rounded bg-red-900/60 hover:bg-red-800">Delete</button>
|
|
</td>
|
|
</tr>
|
|
{{ else }}
|
|
<tr><td colspan="7" class="px-4 py-10 text-center text-slate-500">No artifacts yet. Paste some HTML above to publish your first one.</td></tr>
|
|
{{ end }}
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
</main>
|
|
{{ template "footer" }}
|
|
{{ end }}
|