ponzischeme89
381 lines
18 KiB
HTML
381 lines
18 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Sublogue Documentation</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap"
|
|
rel="stylesheet" />
|
|
<style>
|
|
[x-cloak] {
|
|
display: none !important;
|
|
}
|
|
</style>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
body: ["Inter", "sans-serif"],
|
|
display: ["Space Grotesk", "sans-serif"],
|
|
mono: ["IBM Plex Mono", "monospace"],
|
|
},
|
|
colors: {
|
|
night: {
|
|
900: "#000000",
|
|
800: "#07090d",
|
|
700: "#0c1018",
|
|
600: "#121826",
|
|
500: "#182235",
|
|
},
|
|
ember: {
|
|
500: "#ff6b3d",
|
|
600: "#e95a2e",
|
|
},
|
|
},
|
|
boxShadow: {
|
|
glow: "0 0 30px rgba(255, 107, 61, 0.25)",
|
|
},
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
</head>
|
|
|
|
<body class="bg-night-900 text-slate-100 font-body overflow-x-hidden">
|
|
<div class="min-h-screen bg-night-900">
|
|
<header class="border-b border-white/10" x-data="{ open: false }">
|
|
<div
|
|
class="mx-auto flex max-w-6xl flex-col gap-4 px-4 py-5 sm:px-6 md:flex-row md:items-center md:justify-between">
|
|
<div class="flex w-full items-center justify-between gap-4 md:w-auto">
|
|
<a href="index.html" class="flex items-center gap-3">
|
|
<img src="sublogue_v2.png" alt="Sublogue" class="h-10 w-auto max-w-full sm:h-12" />
|
|
<div class="min-w-0">
|
|
<p class="text-lg font-semibold tracking-wide font-display">Sublogue</p>
|
|
<p class="text-sm text-slate-400 truncate">Subtitle metadata orchestration</p>
|
|
</div>
|
|
</a>
|
|
<button
|
|
class="ml-auto inline-flex h-10 w-10 items-center justify-center rounded-full border border-white/10 bg-night-800/80 text-slate-200 transition hover:border-ember-500/60 hover:text-white md:hidden"
|
|
type="button" aria-label="Toggle menu" aria-controls="mobile-menu" :aria-expanded="open.toString()"
|
|
@click="open = !open">
|
|
<i data-lucide="menu" class="h-5 w-5"></i>
|
|
</button>
|
|
</div>
|
|
<div class="hidden flex-wrap items-center justify-start gap-3 md:flex md:justify-end">
|
|
<a class="text-sm text-slate-300 hover:text-white" href="index.html">Overview</a>
|
|
<a class="text-sm text-slate-300 hover:text-white" href="#features">Features</a>
|
|
<a class="text-sm text-slate-300 hover:text-white" href="#integrations">Integrations</a>
|
|
<a class="text-sm text-slate-300 hover:text-white" href="#getting-started">Getting started</a>
|
|
</div>
|
|
<div id="mobile-menu" x-show="open" x-cloak x-transition.scale.origin.top.duration.200ms
|
|
class="flex flex-col gap-3 rounded-2xl border border-white/10 bg-night-800/90 p-4 text-sm shadow-2xl md:hidden">
|
|
<a class="text-slate-200 hover:text-white" href="index.html" @click="open = false">Overview</a>
|
|
<a class="text-slate-200 hover:text-white" href="#features" @click="open = false">Features</a>
|
|
<a class="text-slate-200 hover:text-white" href="#integrations" @click="open = false">Integrations</a>
|
|
<a class="text-slate-200 hover:text-white" href="#getting-started" @click="open = false">Getting started</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="mx-auto max-w-6xl px-4 sm:px-6">
|
|
<section class="grid gap-8 pb-10 pt-12 md:pb-12 md:pt-16 lg:grid-cols-[1.1fr_0.9fr]">
|
|
<div>
|
|
<p class="text-sm uppercase tracking-[0.3em] text-ember-500">Documentation</p>
|
|
<h1 class="mt-4 text-3xl font-semibold leading-tight font-display sm:text-4xl md:text-5xl">
|
|
Sublogue usage and setup
|
|
</h1>
|
|
<p class="mt-5 text-base text-slate-300 sm:text-lg">
|
|
Sublogue is a lightweight, open source tool that enriches subtitle files with metadata and plot
|
|
summaries. It keeps timing intact, respects safe insertion windows, and lets you choose the metadata
|
|
provider per scan or per folder.
|
|
</p>
|
|
<p class="mt-4 text-sm text-slate-400">
|
|
This page mirrors the README but adds extra context, limits, and setup notes so you can move from
|
|
install to first scan without guesswork.
|
|
</p>
|
|
</div>
|
|
<div class="rounded-3xl border border-white/10 bg-night-800/70 p-6 shadow-xl sm:p-7">
|
|
<div class="flex items-center gap-3">
|
|
<i data-lucide="file-text" class="h-6 w-6 text-ember-500"></i>
|
|
<h2 class="text-lg font-semibold font-display">Quick checklist</h2>
|
|
</div>
|
|
<ul class="mt-5 space-y-3 text-sm text-slate-300">
|
|
<li class="flex items-start gap-3">
|
|
<i data-lucide="check" class="mt-1 h-4 w-4 text-ember-500"></i>
|
|
Install the container and map /config + /media volumes.
|
|
</li>
|
|
<li class="flex items-start gap-3">
|
|
<i data-lucide="check" class="mt-1 h-4 w-4 text-ember-500"></i>
|
|
Enable integrations and add API keys where required.
|
|
</li>
|
|
<li class="flex items-start gap-3">
|
|
<i data-lucide="check" class="mt-1 h-4 w-4 text-ember-500"></i>
|
|
Scan a folder and review matches before applying.
|
|
</li>
|
|
<li class="flex items-start gap-3">
|
|
<i data-lucide="check" class="mt-1 h-4 w-4 text-ember-500"></i>
|
|
Use per-folder rules for language and formatting differences.
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="features" class="mb-12 md:mb-16">
|
|
<div class="flex items-center gap-3">
|
|
<i data-lucide="sparkles" class="h-6 w-6 text-ember-500"></i>
|
|
<h2 class="text-2xl font-semibold font-display">Features</h2>
|
|
</div>
|
|
<p class="mt-4 text-sm text-slate-300 sm:text-base">
|
|
Sublogue focuses on safe subtitle enrichment. It never shifts existing timecodes, and only inserts
|
|
content when there is a safe gap at the start or end of the file.
|
|
</p>
|
|
<div class="mt-6 grid gap-6 md:grid-cols-2">
|
|
<div class="rounded-2xl border border-white/10 bg-night-800/70 p-6">
|
|
<h3 class="text-lg font-semibold font-display">Metadata injection</h3>
|
|
<p class="mt-3 text-sm text-slate-300">
|
|
Pull plot, runtime, ratings, and credits from OMDb, TMDb, TVmaze, or Wikipedia and insert them in a
|
|
clean, readable format.
|
|
</p>
|
|
</div>
|
|
<div class="rounded-2xl border border-white/10 bg-night-800/70 p-6">
|
|
<h3 class="text-lg font-semibold font-display">Safe timing</h3>
|
|
<p class="mt-3 text-sm text-slate-300">
|
|
Sublogue refuses to insert if there is not enough gap, so subtitle timing stays intact.
|
|
</p>
|
|
</div>
|
|
<div class="rounded-2xl border border-white/10 bg-night-800/70 p-6">
|
|
<h3 class="text-lg font-semibold font-display">Folder rules</h3>
|
|
<p class="mt-3 text-sm text-slate-300">
|
|
Override metadata source, language, and formatting per directory for mixed media libraries.
|
|
</p>
|
|
</div>
|
|
<div class="rounded-2xl border border-white/10 bg-night-800/70 p-6">
|
|
<h3 class="text-lg font-semibold font-display">Web UI</h3>
|
|
<p class="mt-3 text-sm text-slate-300">
|
|
Scan folders, batch process results, and track history from a lightweight Svelte UI.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="integrations" class="mb-12 md:mb-16">
|
|
<div class="flex items-center gap-3">
|
|
<i data-lucide="plug" class="h-6 w-6 text-ember-500"></i>
|
|
<h2 class="text-2xl font-semibold font-display">Integrations</h2>
|
|
</div>
|
|
<p class="mt-4 text-sm text-slate-300 sm:text-base">
|
|
Each provider has a different signup and usage policy. Wikipedia is strict by design: exact title
|
|
matches with year validation are required to reduce false matches from an open encyclopedia.
|
|
</p>
|
|
<div class="mt-6 overflow-x-auto rounded-2xl border border-white/10 bg-night-800/70">
|
|
<table class="min-w-full text-sm text-slate-200">
|
|
<thead class="bg-night-900/60 text-xs uppercase tracking-wide text-slate-400">
|
|
<tr>
|
|
<th class="px-4 py-3 text-left">Provider</th>
|
|
<th class="px-4 py-3 text-left">Signup or API key</th>
|
|
<th class="px-4 py-3 text-left">Rate limits</th>
|
|
<th class="px-4 py-3 text-left">Notes</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-white/10">
|
|
<tr>
|
|
<td class="px-4 py-3 font-semibold">OMDb</td>
|
|
<td class="px-4 py-3">
|
|
<a class="text-ember-500 hover:text-ember-600" href="https://www.omdbapi.com/apikey.aspx"
|
|
target="_blank" rel="noopener noreferrer">Get an API key</a>
|
|
</td>
|
|
<td class="px-4 py-3">Free tier has a daily cap</td>
|
|
<td class="px-4 py-3">Best for movie matching</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-4 py-3 font-semibold">TMDb</td>
|
|
<td class="px-4 py-3">
|
|
<a class="text-ember-500 hover:text-ember-600" href="https://www.themoviedb.org/settings/api"
|
|
target="_blank" rel="noopener noreferrer">Request an API key</a>
|
|
</td>
|
|
<td class="px-4 py-3">Per-second rate limit</td>
|
|
<td class="px-4 py-3">Great for localization and posters</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-4 py-3 font-semibold">TVmaze</td>
|
|
<td class="px-4 py-3">
|
|
<a class="text-ember-500 hover:text-ember-600" href="https://www.tvmaze.com/api" target="_blank"
|
|
rel="noopener noreferrer">View API docs</a>
|
|
</td>
|
|
<td class="px-4 py-3">Polite usage limits</td>
|
|
<td class="px-4 py-3">No API key required</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-4 py-3 font-semibold">Wikipedia</td>
|
|
<td class="px-4 py-3">
|
|
<a class="text-ember-500 hover:text-ember-600" href="https://www.mediawiki.org/wiki/API:Main_page"
|
|
target="_blank" rel="noopener noreferrer">MediaWiki API</a>
|
|
</td>
|
|
<td class="px-4 py-3">No hard limits, be polite</td>
|
|
<td class="px-4 py-3">Strict title matching</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="screenshots" class="mb-12 md:mb-16">
|
|
<div class="flex items-center gap-3">
|
|
<i data-lucide="image" class="h-6 w-6 text-ember-500"></i>
|
|
<h2 class="text-2xl font-semibold font-display">Screenshots</h2>
|
|
</div>
|
|
<p class="mt-4 text-sm text-slate-300 sm:text-base">
|
|
The interface is designed for fast scans and quick metadata validation. These screenshots show the scan
|
|
results and settings panels.
|
|
</p>
|
|
<div class="mt-6 grid gap-6 lg:grid-cols-2">
|
|
<img src="screenshots/screenshot_scan.png" alt="Scan results"
|
|
class="rounded-2xl border border-white/10 shadow-lg" />
|
|
<img src="screenshots/screenshot_settings.png" alt="Settings panel"
|
|
class="rounded-2xl border border-white/10 shadow-lg" />
|
|
</div>
|
|
</section>
|
|
|
|
<section id="getting-started" class="mb-12 md:mb-16">
|
|
<div class="flex items-center gap-3">
|
|
<i data-lucide="rocket" class="h-6 w-6 text-ember-500"></i>
|
|
<h2 class="text-2xl font-semibold font-display">Getting started</h2>
|
|
</div>
|
|
<p class="mt-4 text-sm text-slate-300 sm:text-base">
|
|
Sublogue runs as a single container. Map /config for settings and /media for subtitles, then open the web
|
|
UI at http://localhost:5000.
|
|
</p>
|
|
<div class="mt-6 grid gap-6 lg:grid-cols-3">
|
|
<div class="rounded-2xl border border-white/10 bg-night-800/70 p-6">
|
|
<h3 class="text-lg font-semibold font-display">Docker Compose</h3>
|
|
<p class="mt-3 text-sm text-slate-300">
|
|
Create data/ and media/ folders next to your compose file.
|
|
</p>
|
|
<pre
|
|
class="mt-4 overflow-x-auto whitespace-pre-wrap break-words rounded-2xl border border-white/10 bg-night-900/90 p-4 text-xs font-mono leading-relaxed text-emerald-200 shadow-[0_12px_30px_rgba(0,0,0,0.45)]"><code>version: "3.9"
|
|
services:
|
|
sublogue:
|
|
image: ghcr.io/ponzischeme89/sublogue:latest
|
|
container_name: sublogue
|
|
restart: unless-stopped
|
|
environment:
|
|
- TZ=Pacific/Auckland
|
|
volumes:
|
|
- ./data:/config
|
|
- ./media:/media
|
|
ports:
|
|
- "5000:5000"</code></pre>
|
|
</div>
|
|
<div class="rounded-2xl border border-white/10 bg-night-800/70 p-6">
|
|
<h3 class="text-lg font-semibold font-display">Unraid</h3>
|
|
<p class="mt-3 text-sm text-slate-300">
|
|
Use the bundled template and map host paths into /config and /media.
|
|
</p>
|
|
<div class="mt-4 rounded-2xl border border-white/10 bg-night-900/70 p-4 text-sm text-slate-200">
|
|
<p>/mnt/user/appdata/sublogue -> /config</p>
|
|
<p class="mt-2">/mnt/user/appdata/sublogue/media -> /media</p>
|
|
</div>
|
|
</div>
|
|
<div class="rounded-2xl border border-white/10 bg-night-800/70 p-6">
|
|
<h3 class="text-lg font-semibold font-display">Komodo</h3>
|
|
<p class="mt-3 text-sm text-slate-300">
|
|
Create a new stack and attach your external network.
|
|
</p>
|
|
<pre
|
|
class="mt-4 overflow-x-auto whitespace-pre-wrap break-words rounded-2xl border border-white/10 bg-night-900/90 p-4 text-xs font-mono leading-relaxed text-emerald-200 shadow-[0_12px_30px_rgba(0,0,0,0.45)]"><code>version: "3.9"
|
|
services:
|
|
sublogue:
|
|
image: ghcr.io/ponzischeme89/sublogue:latest
|
|
container_name: sublogue
|
|
ports:
|
|
- "5000:5000"
|
|
environment:
|
|
- TZ=Etc/UTC
|
|
- PUID=1000
|
|
- PGID=1000
|
|
volumes:
|
|
- /volume1/Docker/sublogue/data:/config
|
|
- /volume1/Media:/media
|
|
restart: unless-stopped
|
|
networks:
|
|
- npm_network
|
|
networks:
|
|
npm_network:
|
|
external: true</code></pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="limitations" class="mb-12 md:mb-16">
|
|
<div class="flex items-center gap-3">
|
|
<i data-lucide="alert-triangle" class="h-6 w-6 text-ember-500"></i>
|
|
<h2 class="text-2xl font-semibold font-display">Limitations</h2>
|
|
</div>
|
|
<ul class="mt-4 space-y-2 text-sm text-slate-300 sm:text-base">
|
|
<li>API limits vary per provider and can throttle large scans.</li>
|
|
<li>Metadata gaps appear when providers do not have a title or plot.</li>
|
|
<li>Only TMDb supports localization. OMDb and TVmaze are English-first.</li>
|
|
<li>Long plots are inserted as-is. TVs may split them across screens.</li>
|
|
<li>Only .srt files are supported.</li>
|
|
<li>Reprocessing a file can insert multiple plot blocks.</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section id="roadmap" class="mb-12 md:mb-16">
|
|
<div class="flex items-center gap-3">
|
|
<i data-lucide="map" class="h-6 w-6 text-ember-500"></i>
|
|
<h2 class="text-2xl font-semibold font-display">Roadmap</h2>
|
|
</div>
|
|
<ul class="mt-4 grid gap-2 text-sm text-slate-300 sm:grid-cols-2 sm:text-base">
|
|
<li>More UI themes and high contrast variants</li>
|
|
<li>Poster and backdrop previews in results</li>
|
|
<li>Duplicate plot detection and auto-avoidance</li>
|
|
<li>Automatic backoff and retry logic</li>
|
|
<li>Short plot mode for long summaries</li>
|
|
<li>Expanded localization for plots and cast</li>
|
|
<li>Subtitle format support beyond SRT</li>
|
|
<li>Optional local cache for metadata lookups</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section id="support" class="mb-12 md:mb-16">
|
|
<div class="rounded-3xl border border-ember-500/30 bg-night-800/70 p-6 sm:p-8">
|
|
<div class="flex items-center gap-3">
|
|
<i data-lucide="message-circle" class="h-6 w-6 text-ember-500"></i>
|
|
<h2 class="text-2xl font-semibold font-display">Support</h2>
|
|
</div>
|
|
<p class="mt-4 text-sm text-slate-300 sm:text-base">
|
|
If Sublogue helps your library, consider starring the repo or sharing it with someone who cares about
|
|
clean subtitles. Bug reports and feature requests are welcome.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="border-t border-white/10">
|
|
<div
|
|
class="mx-auto flex max-w-6xl flex-col gap-4 px-4 py-8 text-sm text-slate-400 sm:px-6 md:flex-row md:items-center md:justify-between">
|
|
<p>© 2026 ponzischeme89. Released under AGLPL-3.0 licence.</p>
|
|
<div class="flex items-center gap-3">
|
|
<i data-lucide="github" class="h-4 w-4"></i>
|
|
<span>github.com/ponzischeme89/Sublogue</span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<script>
|
|
lucide.createIcons();
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|