@@ -1,513 +1,452 @@
<!DOCTYPE html>
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" / >
< title > Sublogue — Documentation < / title >
<!-- Inter -->
< link rel = "preconnect" href = "https://fonts.googleapis.com" >
< link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin >
< meta name = "viewport" content = "width=device-width, initial-scale=1" / >
< title > Sublogue< / 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=Inter:wght@400;500;600;700;800 &family=IBM+Plex+Sans :wght@400;500;600&display=swap"
rel = "stylesheet" >
<!-- Alpine.js -->
< script defer src = "https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" > < / script >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
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 >
: root {
--bg : #0b0b0c ;
--bg-soft : #0f1115 ;
--fg : #e5e7eb ;
--muted : #9ca3af ;
--soft : #cbd5e1 ;
--accent : #7dd3fc ;
--accent-strong : #38bdf8 ;
--border : rgba ( 255 , 255 , 255 , 0.08 ) ;
--card : rgba ( 255 , 255 , 255 , 0.04 ) ;
--code-bg : #050506 ;
}
* {
box-sizing : border-box ;
}
html {
scroll-behavior : smooth ;
}
body {
margin : 0 ;
font-family : Inter , system-ui , sans-serif ;
background :
radial-gradient ( 900 px 400 px at 50 % -10 % , #0f172a 44 , transparent 70 % ) ,
var ( - - bg ) ;
color : var ( - - fg ) ;
line-height : 1.7 ;
-webkit- font-smoothing : antialiased ;
}
a {
color : var ( - - accent ) ;
text-decoration : none ;
}
/* ---------------- NAV ---------------- */
nav {
position : sticky ;
top : 0 ;
z-index : 100 ;
background : rgba ( 11 , 11 , 12 , 0.75 ) ;
backdrop-filter : blur ( 14 px ) ;
border-bottom : 1 px solid var ( - - border ) ;
}
. nav-inner {
max-width : 1100 px ;
margin : 0 auto ;
padding : 0.9 rem 1.25 rem ;
display : flex ;
align-items : center ;
justify-content : space-between ;
}
. brand {
display : flex ;
align-items : center ;
gap : 0.6 rem ;
font-weight : 700 ;
letter-spacing : -0.03 em ;
}
. logo {
width : 28 px ;
height : 28 px ;
border-radius : 8 px ;
background : linear-gradient ( 145 deg , #38bdf8 , #0ea5e9 ) ;
box-shadow : 0 6 px 20 px rgba ( 56 , 189 , 248 , 0.4 ) ;
animation : logoPulse 6 s ease-in-out infinite ;
}
@ keyframes logoPulse {
0 % ,
100 % {
transform : scale ( 1 ) ;
}
50 % {
transform : scale ( 1.06 ) ;
}
}
. nav-links {
display : none ;
gap : 1.5 rem ;
align-items : center ;
font-weight : 500 ;
font-size : 0.95 rem ;
}
. docker-link {
display : inline-flex ;
align-items : center ;
gap : 0.4 rem ;
padding : 0.4 rem 0.7 rem ;
border-radius : 8 px ;
background : var ( - - card ) ;
border : 1 px solid var ( - - border ) ;
font-size : 0.85 rem ;
transition : background 0.2 s ease , transform 0.2 s ease ;
}
. docker-link : hover {
background : rgba ( 255 , 255 , 255 , 0.08 ) ;
transform : translateY ( -1 px ) ;
}
. menu-btn {
background : none ;
border : none ;
color : var ( - - fg ) ;
font-size : 1.4 rem ;
cursor : pointer ;
}
@ media ( min-width : 768px ) {
. nav-links {
display : flex ;
}
. menu-btn {
display : none ;
}
}
/* ---------------- MOBILE MENU ---------------- */
. mobile-menu {
position : fixed ;
inset : 0 ;
background : rgba ( 11 , 11 , 12 , 0.96 ) ;
backdrop-filter : blur ( 18 px ) ;
z-index : 200 ;
display : flex ;
flex-direction : column ;
padding : 2.5 rem 2 rem ;
}
. mobile-menu a {
font-size : 1.5 rem ;
margin : 1 rem 0 ;
font-weight : 600 ;
}
. mobile-close {
align-self : flex-end ;
font-size : 1.8 rem ;
cursor : pointer ;
opacity : 0.8 ;
}
/* ---------------- HERO ---------------- */
header {
position : relative ;
overflow : hidden ;
padding : 4.5 rem 1.25 rem 3.5 rem ;
}
header :: after {
content : "" ;
position : absolute ;
inset : 0 ;
background : linear-gradient ( 120 deg ,
transparent 30 % ,
rgba ( 125 , 211 , 252 , 0.12 ) ,
transparent 70 % ) ;
opacity : 0 ;
animation : headerGlow 7 s ease-in-out infinite ;
pointer-events : none ;
}
@ keyframes headerGlow {
0 % ,
100 % {
opacity : 0 ;
}
50 % {
opacity : 1 ;
}
}
. hero {
max-width : 720 px ;
margin : 0 auto ;
animation : fadeUp 0.8 s ease both ;
}
. hero h1 {
font-size : 2.6 rem ;
font-weight : 800 ;
letter-spacing : -0.04 em ;
margin-bottom : 0.75 rem ;
}
. hero p {
color : var ( - - muted ) ;
font-size : 1.05 rem ;
max-width : 520 px ;
}
/* ---------------- ANIMATIONS ---------------- */
@ keyframes fadeUp {
from {
opacity : 0 ;
transform : translateY ( 14 px ) ;
}
to {
opacity : 1 ;
transform : translateY ( 0 ) ;
}
}
@ media ( prefers-reduced-motion : reduce ) {
* {
animation : none !important ;
transition : none !important ;
}
}
/* ---------------- CARD ---------------- */
. card {
background : var ( - - card ) ;
border : 1 px solid var ( - - border ) ;
border-radius : 16 px ;
padding : 1.6 rem ;
margin : 2 rem auto ;
max-width : 720 px ;
animation : fadeUp 0.6 s ease both ;
}
. card h2 {
font-size : 1.25 rem ;
margin-bottom : 0.6 rem ;
}
. card p {
color : var ( - - soft ) ;
}
/* ---------------- MAIN ---------------- */
main {
max-width : 720 px ;
margin : 0 auto ;
padding : 2 rem 1.25 rem 6 rem ;
}
pre {
background : var ( - - code - bg ) ;
border : 1 px solid var ( - - border ) ;
border-radius : 12 px ;
padding : 1.1 rem ;
overflow-x : auto ;
margin : 1.5 rem 0 ;
}
code {
font-family : ui-monospace , SFMono-Regular , Menlo , Consolas , monospace ;
color : #bae6fd ;
}
. install-section {
max-width : 720 px ;
margin : 5 rem auto ;
padding : 0 1.25 rem ;
}
. install-btn {
display : inline-block ;
margin-top : 1.5 rem ;
background : linear-gradient ( 135 deg , #22c55e , #16a34a ) ;
color : #041b0f ;
font-weight : 700 ;
padding : 0.75 rem 1.2 rem ;
border-radius : 10 px ;
text-decoration : none ;
box-shadow : 0 10 px 30 px rgba ( 34 , 197 , 94 , 0.35 ) ;
transition : transform 0.15 s ease , box-shadow 0.15 s ease ;
}
. install-btn : hover {
transform : translateY ( -1 px ) ;
box-shadow : 0 14 px 40 px rgba ( 34 , 197 , 94 , 0.45 ) ;
}
. demo-section {
max-width : 720 px ;
margin : 5 rem auto ;
padding : 0 1.25 rem ;
}
. demo-title {
font-size : 1.4 rem ;
margin-bottom : 1.5 rem ;
letter-spacing : -0.01 em ;
}
. demo-card {
position : relative ;
background : #050506 ;
border : 1 px solid rgba ( 255 , 255 , 255 , 0.1 ) ;
border-radius : 16 px ;
padding : 1.5 rem ;
min-height : 180 px ;
overflow : hidden ;
box-shadow : 0 30 px 80 px rgba ( 0 , 0 , 0 , 0.8 ) ;
}
. demo-frame {
position : absolute ;
inset : 0 ;
padding : 1.5 rem ;
opacity : 0 ;
transform : translateY ( 8 px ) ;
transition : opacity 0.6 s ease , transform 0.6 s ease ;
}
. demo-frame . active {
opacity : 1 ;
transform : translateY ( 0 ) ;
}
. demo-header {
font-family : "IBM Plex Sans" , sans-serif ;
font-size : 0.7 rem ;
letter-spacing : 0.15 em ;
opacity : 0.5 ;
margin-bottom : 0.4 rem ;
}
. demo-title-line {
font-weight : 700 ;
font-size : 1.1 rem ;
margin-bottom : 0.25 rem ;
}
. demo-meta {
font-family : "IBM Plex Sans" , sans-serif ;
font-size : 0.85 rem ;
color : #9ca3af ;
margin-bottom : 0.6 rem ;
}
. demo-text {
font-size : 0.95 rem ;
line-height : 1.6 ;
color : #cbd5e1 ;
[ 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 x-data = "{ menuOpen: false } " >
<!-- NAV -->
< nav >
< div class = "nav-inner " >
< div class = "brand " >
< div class = "logo" > < / div >
Sublogue
< 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 " >
< 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 >
< div class = "nav-links" >
< a href = "#usage" > Usage< / a >
< a href = "#philosophy" > Philosophy < / a >
< a class = "docker-link "href = "https://hub.docker.com" target = "_blank" >
🐳 Docker Hub
< / 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 >
< button class = "menu-btn" @ click = "menuOpen = true" > ☰ < / button >
< 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 = "#install" > Install < / a >
< a class = "text-sm text-slate-300 hover:text-white" href = "#integrations" > Integrations< / a >
< a class = "rounded-full border border-ember-500/60 px-4 py-2 text-sm font-semibold text-ember-500 hover:bg-ember-500 hover:text-night-900"
href = "#quickstart" > Quickstart< / a >
< / div >
< / nav >
<!-- MOBILE MENU -->
< div x-show = "menuOpen" x-transition . opacity @ keydown . escape . window = "menuOpen = false" class = "mobile-menu" x-cloak >
< div class = "mobile-close" @ click = "menuOpen = false" > ✕ < / div >
< a href = "#usage " @ click = "menuO pen = false" > Usage < / a >
< a href = "#philosophy" @ click = "menuOpen = false" > Philosophy< / a >
< a href = "https://hub.docker.com" target = "_blank" > Docker Hub< / a >
< 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 = "#install" @ click = "open = false" > Install< / a >
< a class = "text-slate-200 hover:text-white" href = "#integrations" @ click = "open = false" > Integrations < / a >
< a class = "rounded-full border border-ember-500/60 px-4 py-2 text-center font-semibold text-ember-500 hover:bg-ember-500 hover:text-night-900"
href = "#quickstart " @ click = "o pen = false" > Quickstart < / a >
< / div >
<!-- HERO -->
< header >
< div class = "hero" >
< h1 > Sublogue< / h1 >
< p >
Context-aware subtitle augmentation.
Plot summaries and metadata, inserted without breaking sync.
< / p >
< / div >
< / header >
< section class = "install-section" >
< h2 > Install with Docker< / h2 >
< pre > < code > docker pull ghcr.io/yourname/sublogue:latest < / code > < / pre >
< main class = "mx-auto max-w-6xl px-4 sm:px-6" >
< section class = "grid gap-10 pb-12 pt-12 md:pb-14 md:pt-16 lg:grid-cols-[1.2fr_0.8fr]" >
< div >
< h1 class = "mt-5 text-3xl font-semibold leading-tight font-display sm:text-4xl md:text-5xl" >
Add metadata to your subtitles with Sublogue
< / h1 >
< p class = "mt-6 text-base text-slate-300 sm:text-lg" >
Sublogue inserts story context into your subtitle files using OMDb, TMDb, and TVMaze. It can also
clean out ad blocks like YTS promo text while preserving timing, so every subtitle reads cleanly.
< / p >
< div class = "mt-8 flex flex-wrap gap-3" >
< span class = "rounded-full border border-white/15 px-4 py-2 text-xs font-mono uppercase" > SRT safe< / span >
< span class = "rounded-full border border-white/15 px-4 py-2 text-xs font-mono uppercase" > Multi-source< / span >
< span class = "rounded-full border border-white/15 px-4 py-2 text-xs font-mono uppercase" > Batch scans< / span >
< span class = "rounded-full border border-white/15 px-4 py-2 text-xs font-mono uppercase" > Web UI< / span >
< / div >
< / 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 = "sparkles" class = "h-6 w-6 text-ember-500" > < / i >
< h2 class = "text-lg font-semibold font-display" > Overview< / h2 >
< / div >
< p class = "mt-4 text-sm text-slate-300" >
Sublogue scans your subtitle folders, pulls metadata from OMDb, TMDb, and TVMaze, then injects plots,
ratings, and credits directly into SRT files without touching timing.
< / p >
< 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 >
Preserve original subtitle timing while enriching content.
< / li >
< li class = "flex items-start gap-3" >
< i data-lucide = "check" class = "mt-1 h-4 w-4 text-ember-500" > < / i >
Remove ad text and promo lines from SRT files (YTS and similar).
< / li >
< li class = "flex items-start gap-3" >
< i data-lucide = "check" class = "mt-1 h-4 w-4 text-ember-500" > < / i >
Choose preferred metadata sources per scan.
< / li >
< li class = "flex items-start gap-3" >
< i data-lucide = "check" class = "mt-1 h-4 w-4 text-ember-500" > < / i >
Monitor integration usage and cache clearing in settings.
< / li >
< / ul >
< / div >
< / section >
< pre > < code > version: "3.8"
< section id = "quickstart" class = "mb-12 rounded-3xl border border-white/10 bg-night-800/60 p-6 sm:p-8 md:mb-16" >
< div class = "flex items-center gap-3" >
< i data-lucide = "terminal" class = "h-6 w-6 text-ember-500" > < / i >
< h2 class = "text-2xl font-semibold font-display" > Quickstart< / h2 >
< / div >
< p class = "mt-4 text-sm text-slate-300 sm:text-base" >
Launch the container, point Sublogue at your media folder, then open the UI and run a scan.
< / p >
< div class = "mt-6 grid gap-6 lg:grid-cols-2" >
< div class = "rounded-2xl border border-white/10 bg-night-900/80 p-5" >
< p class = "text-xs font-mono uppercase text-slate-400" > Docker CLI< / 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)] sm:text-sm sm:whitespace-pre" > < code > docker run -d \
--name sublogue \
-p 5000:5000 \
-e TZ=Etc/UTC \
-e PUID=1000 -e PGID=1000 \
-v ./data:/config \
-v ./media:/media \
ponzischeme89/sublogue:latest< / code > < / pre >
< / div >
< div class = "rounded-2xl border border-white/10 bg-night-900/80 p-5" >
< p class = "text-xs font-mono uppercase text-slate-400" > Open UI< / p >
< div class = "mt-4 flex items-center gap-3 text-sm text-slate-200" >
< i data-lucide = "globe" class = "h-5 w-5 text-ember-500" > < / i >
http://localhost:5000
< / div >
< p class = "mt-4 text-sm text-slate-300" >
Head to Settings -> Integrations to add your metadata providers and start scanning.
< / p >
< / div >
< / div >
< / section >
< section id = "install" class = "mb-12 md:mb-16" >
< div class = "flex items-center gap-3" >
< i data-lucide = "download" class = "h-6 w-6 text-ember-500" > < / i >
< h2 class = "text-2xl font-semibold font-display" > Install< / h2 >
< / div >
< 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" >
Ideal for Portainer, Synology, or homelab setups.
< / 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-[0.7rem] font-mono leading-relaxed text-emerald-200 shadow-[0_12px_30px_rgba(0,0,0,0.45)] sm:text-xs sm:whitespace-pre" > < code > version: "3.9"
services:
sublogue:
image: ghcr.io/yourname /sublogue:latest
image: ponzischeme89 /sublogue:latest
container_name: sublogue
volumes:
- ./subs:/data/subs
restart: unless-stopped
< / code > < / pre >
< a href = "https://hub.docker.com" target = "_blank" class = "install-btn" >
⬇ View on Docker Hub
< / a >
< / section >
< section class = "demo-section" >
< h2 class = "demo-title" > What Sublogue adds to your subtitles < / h2 >
< div class = "demo-card" id = "subtitleDemo ">
< div class = "demo-frame active" >
< div class = "demo-header" > SUBLOGUE < / div >
< div class = "demo-title-line" > Memento (2022)< / div >
< div class = "demo-meta" > IMDb 8.0 · RT 54% · 113 min < / div >
< div class = "demo-text " >
A man with short-term memory loss attempts to track down his wife’
murderer using notes, tattoos, and fragmented recollections.
environment:
- TZ=Etc/UTC
- PUID=1000
- PGID=1000
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 volumes 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/media -> /media< / p >
< / div >
< / div >
< div class = "demo-frame" >
< div class = "demo-header" > SUBLOGUE < / div >
< div class = "demo-title-line" > Arrival (2016)< / div >
< div class = "demo-meta" > IMDb 7.9 · RT 94% · 116 min < / div >
< div class = "demo-text" >
A linguist is recruited to communicate with extraterrestrial visitors
whose arrival challenges humanity’
< / div >
< / div >
< div class = "demo-frame" >
< div class = "demo-header" > SUBLOGUE< / div >
< div class = "demo-title-line" > Ex Machina (2014)< / div >
< div class = "demo-meta" > IMDb 7.7 · RT 92% · 108 min< / div >
< div class = "demo-text" >
A programmer evaluates the consciousness of an advanced AI in a
secluded research facility.
< / 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" >
Paste a stack template and attach the NPM 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-[0.7rem] font-mono leading-relaxed text-emerald-200 shadow-[0_12px_30px_rgba(0,0,0,0.45)] sm:text-xs sm:whitespace-pre" > < code > version: "3.9"
services:
sublogue:
image: ponzischeme89/sublogue:latest
container_name: sublogue
environment:
- TZ=Etc/UTC
ports:
- "5000:5000"
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 >
<!-- WHAT IT DOES -->
< div class = "card " >
< h2 > What it does < / h2 >
< p >
Sublogue appends a short, readable plot summary directly into
< code > .srt< / code > subtitle files at the start of playback.
No timing drift. No destructive edits.
< section id = "clean-srts" class = "mb-12 md:mb-16" >
< div class = "flex items-center gap-3 " >
< i data-lucide = "eraser" class = "h-6 w-6 text-ember-500" > < / i >
< h2 class = "text-2xl font-semibold font-display" > Clean SRTs < / h2 >
< / div >
< p class = "mt-3 text-sm text-slate-300 sm:text-base" >
Remove ad blocks like YTS and other promo lines without touching timing. Sublogue keeps subtitle order
intact while cleaning the text.
< / p >
< div class = "mt-6 grid gap-6 lg:grid-cols-2" >
< div class = "rounded-2xl border border-white/10 bg-night-800/70 p-6" >
< div class = "flex items-center justify-between" >
< p class = "text-xs font-mono uppercase text-slate-400" > Before< / p >
< span
class = "rounded-full border border-white/10 px-3 py-1 text-[0.65rem] font-mono uppercase text-slate-400" >
YTS
< / span >
< / div >
< 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-[0.7rem] font-mono leading-relaxed text-slate-300 shadow-[0_12px_30px_rgba(0,0,0,0.45)] sm:text-xs sm:whitespace-pre" > < code > 1
00:00:01,000 --> 00:00:04,000
Visit YTS.mx for more movies
2
00:00:05,000 --> 00:00:07,200
Grab the latest releases< / code > < / pre >
< / div >
< div class = "rounded-2xl border border-white/10 bg-night-800/70 p-6" >
< div class = "flex items-center justify-between" >
< p class = "text-xs font-mono uppercase text-slate-400" > After< / p >
< span
class = "rounded-full border border-ember-500/40 bg-ember-500/10 px-3 py-1 text-[0.65rem] font-mono uppercase text-ember-500" >
Clean
< / span >
< / div >
< 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-[0.7rem] font-mono leading-relaxed text-emerald-200 shadow-[0_12px_30px_rgba(0,0,0,0.45)] sm:text-xs sm:whitespace-pre" > < code > 1
00:00:08,000 --> 00:00:10,200
You are early.< / code > < / pre >
< p class = "mt-4 text-sm text-slate-300" >
Ad-only blocks are removed, while the rest of the subtitle content remains untouched.
< / p >
< / div >
<!-- CONTENT -->
< main >
< section id = "usage" >
< h2 > Basic usage< / h2 >
< pre > < code > sublogue scan ./subs< / code > < / pre >
< / div >
< / section >
< section id = "philosophy " >
< h2 > Philosophy < / h2 >
< p >
Sublogue performs one task, carefully, and then gets out of the way.
It is not a downloader. It is not a media manager.
< section id = "examples" 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" > Metadata Examples< / h2 >
< / div >
< p class = "mt-3 text-sm text-slate-300 sm:text-base" >
Sublogue can insert plots, runtimes, directors, and ratings right into the subtitle header for quick
context before the dialogue begins.
< / 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" >
< div class = "flex items-center gap-3" >
< i data-lucide = "film" class = "h-5 w-5 text-ember-500" > < / i >
< h3 class = "text-lg font-semibold font-display" > Plot + Runtime< / h3 >
< / div >
< div class = "mt-4 rounded-2xl border border-white/10 bg-night-900/80 p-4 text-sm text-slate-200" >
< p class = "text-xs font-mono uppercase text-slate-400" > Injected Header< / p >
< p class = "mt-3 font-semibold" > Plot< / p >
< p class = "mt-2 text-slate-300" >
A retired detective returns for one last case and uncovers a hidden network in the city.
< / p >
< p class = "mt-3 text-xs font-mono uppercase text-ember-500" > Runtime: 112 min< / p >
< / div >
< / div >
< div class = "rounded-2xl border border-white/10 bg-night-800/70 p-6" >
< div class = "flex items-center gap-3" >
< i data-lucide = "clapperboard" class = "h-5 w-5 text-ember-500" > < / i >
< h3 class = "text-lg font-semibold font-display" > Director + Cast< / h3 >
< / div >
< div class = "mt-4 rounded-2xl border border-white/10 bg-night-900/80 p-4 text-sm text-slate-200" >
< p class = "text-xs font-mono uppercase text-slate-400" > Injected Header< / p >
< p class = "mt-3 font-semibold" > Director< / p >
< p class = "mt-2 text-slate-300" > Ava Solomon< / p >
< p class = "mt-3 font-semibold" > Cast< / p >
< p class = "mt-2 text-slate-300" > J. Harper, L. Chen, M. Brooks< / p >
< / div >
< / div >
< div class = "rounded-2xl border border-white/10 bg-night-800/70 p-6" >
< div class = "flex items-center gap-3" >
< i data-lucide = "star" class = "h-5 w-5 text-ember-500" > < / i >
< h3 class = "text-lg font-semibold font-display" > Ratings< / h3 >
< / div >
< div class = "mt-4 rounded-2xl border border-white/10 bg-night-900/80 p-4 text-sm text-slate-200" >
< p class = "text-xs font-mono uppercase text-slate-400" > Injected Header< / p >
< div class = "mt-4 flex flex-wrap items-center gap-3" >
< span
class = "flex items-center gap-2 rounded-full border border-white/10 bg-night-800/60 px-3 py-1 text-xs font-semibold" >
IMDb 7.8
< / span >
< span
class = "flex items-center gap-2 rounded-full border border-emerald-500/40 bg-emerald-500/10 px-3 py-1 text-xs font-semibold text-emerald-200" >
RT 94%
< / span >
< / div >
< div class = "mt-4 flex items-center gap-2 text-ember-500" >
< i data-lucide = "star" class = "h-4 w-4 fill-current" > < / i >
< i data-lucide = "star" class = "h-4 w-4 fill-current" > < / i >
< i data-lucide = "star" class = "h-4 w-4 fill-current" > < / i >
< i data-lucide = "star" class = "h-4 w-4 fill-current" > < / i >
< i data-lucide = "star" class = "h-4 w-4" > < / i >
< / div >
< / div >
< div class = "mt-4 flex items-center gap-3 text-xs text-slate-400" >
< img src = "sublogue_v2.png" alt = "Sublogue" class = "h-5 w-auto sm:h-6" / >
< span > Sublogue metadata branding< / span >
< / div >
< / div >
< / div >
< / section >
< section id = "integrations" class = "mb-12 grid gap-6 lg:grid-cols-[1fr_1.2fr] md:mb-16" >
< div class = "rounded-3xl border border-white/10 bg-night-800/70 p-6 sm:p-8" >
< 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" >
Start with zero providers enabled. Add OMDb, TMDb, or TVMaze when you have keys ready. Each scan can
choose its preferred source.
< / p >
< div class = "mt-6 space-y-4 text-sm text-slate-300" >
< div class = "rounded-2xl border border-white/10 bg-night-900/70 p-4" >
< div class = "flex items-center gap-3" >
< i data-lucide = "film" class = "h-5 w-5 text-ember-500" > < / i >
OMDb - Fast movie metadata
< / div >
< / div >
< div class = "rounded-2xl border border-white/10 bg-night-900/70 p-4" >
< div class = "flex items-center gap-3" >
< i data-lucide = "clapperboard" class = "h-5 w-5 text-ember-500" > < / i >
TMDb - Rich cast and ratings
< / div >
< / div >
< div class = "rounded-2xl border border-white/10 bg-night-900/70 p-4" >
< div class = "flex items-center gap-3" >
< i data-lucide = "tv" class = "h-5 w-5 text-ember-500" > < / i >
TVMaze - Series and episodes
< / div >
< / div >
< / div >
< / div >
< div class = "rounded-3xl border border-white/10 bg-night-800/70 p-6 sm:p-8" >
< div class = "flex items-center gap-3" >
< i data-lucide = "wand-2" class = "h-6 w-6 text-ember-500" > < / i >
< h2 class = "text-2xl font-semibold font-display" > API Notes< / h2 >
< / div >
< p class = "mt-4 text-sm text-slate-300" >
Sublogue expects your media folders to be readable by the container. Large scans stream results to the
UI while the API continues processing in the background.
< / p >
< div class = "mt-6 space-y-4 text-sm text-slate-300" >
< div class = "flex items-start gap-3" >
< i data-lucide = "folder" class = "mt-1 h-5 w-5 text-ember-500" > < / i >
< div >
< p class = "font-semibold" > Volumes< / p >
< p > Map /config for settings and /media for subtitle files.< / p >
< / div >
< / div >
< div class = "flex items-start gap-3" >
< i data-lucide = "activity" class = "mt-1 h-5 w-5 text-ember-500" > < / i >
< div >
< p class = "font-semibold" > Status< / p >
< p > Scan progress appears in the UI with streaming rows as files are processed.< / p >
< / div >
< / div >
< div class = "flex items-start gap-3" >
< i data-lucide = "settings" class = "mt-1 h-5 w-5 text-ember-500" > < / i >
< div >
< p class = "font-semibold" > Settings< / p >
< p > Integrations remain disabled until you add keys in the Settings tab.< / p >
< / div >
< / div >
< / div >
< / div >
< / section >
< section id = "community" 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" > Join the Community< / h2 >
< / div >
< p class = "mt-4 text-sm text-slate-300 sm:text-base" >
Jump into the ponzischeme89 Discord and visit < span
class = "font-semibold text-slate-200" > #sublogue-support< / span >
for help, updates, and feature requests.
< / p >
< div
class = "mt-5 inline-flex items-center gap-3 rounded-full border border-ember-500/40 bg-ember-500/10 px-4 py-2 text-sm font-semibold text-ember-500" >
< i data-lucide = "hash" class = "h-4 w-4" > < / i >
#sublogue-support
< / div >
< / div >
< / section >
< / main >
< / body >
< 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 > & copy 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 >
( function ( ) {
const frames = document . querySelectorAll ( '#subtitleDemo .demo-frame' ) ;
let index = 0 ;
setInterval ( ( ) => {
frames [ index ] . classList . remove ( 'active' ) ;
index = ( index + 1 ) % frames . length ;
frames [ index ] . classList . add ( 'active' ) ;
} , 4500 ) ;
} ) ( ) ;
lucide . createIcons ( ) ;
< / script >
< / body >
< / html >
ponzischeme89