1.0.4 - tweaks to sidebar & ThemeSelector fixes
This commit is contained in:
ponzischeme89
+413
-474
@@ -1,513 +1,452 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<title>Sublogue — Documentation</title>
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>Sublogue</title>
|
||||||
<!-- Inter -->
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link
|
<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"
|
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">
|
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">
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
:root {
|
[x-cloak] {
|
||||||
--bg: #0b0b0c;
|
display: none !important;
|
||||||
--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(900px 400px at 50% -10%, #0f172a44, 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(14px);
|
|
||||||
border-bottom: 1px solid var(--border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-inner {
|
|
||||||
max-width: 1100px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0.9rem 1.25rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.6rem;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: -0.03em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: linear-gradient(145deg, #38bdf8, #0ea5e9);
|
|
||||||
box-shadow: 0 6px 20px rgba(56, 189, 248, 0.4);
|
|
||||||
animation: logoPulse 6s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes logoPulse {
|
|
||||||
|
|
||||||
0%,
|
|
||||||
100% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
50% {
|
|
||||||
transform: scale(1.06);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-links {
|
|
||||||
display: none;
|
|
||||||
gap: 1.5rem;
|
|
||||||
align-items: center;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.docker-link {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.4rem;
|
|
||||||
padding: 0.4rem 0.7rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: var(--card);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
font-size: 0.85rem;
|
|
||||||
transition: background 0.2s ease, transform 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.docker-link:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.08);
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-btn {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
color: var(--fg);
|
|
||||||
font-size: 1.4rem;
|
|
||||||
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(18px);
|
|
||||||
z-index: 200;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 2.5rem 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-menu a {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
margin: 1rem 0;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-close {
|
|
||||||
align-self: flex-end;
|
|
||||||
font-size: 1.8rem;
|
|
||||||
cursor: pointer;
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ---------------- HERO ---------------- */
|
|
||||||
header {
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 4.5rem 1.25rem 3.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
header::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
background: linear-gradient(120deg,
|
|
||||||
transparent 30%,
|
|
||||||
rgba(125, 211, 252, 0.12),
|
|
||||||
transparent 70%);
|
|
||||||
opacity: 0;
|
|
||||||
animation: headerGlow 7s ease-in-out infinite;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes headerGlow {
|
|
||||||
|
|
||||||
0%,
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
50% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero {
|
|
||||||
max-width: 720px;
|
|
||||||
margin: 0 auto;
|
|
||||||
animation: fadeUp 0.8s ease both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero h1 {
|
|
||||||
font-size: 2.6rem;
|
|
||||||
font-weight: 800;
|
|
||||||
letter-spacing: -0.04em;
|
|
||||||
margin-bottom: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero p {
|
|
||||||
color: var(--muted);
|
|
||||||
font-size: 1.05rem;
|
|
||||||
max-width: 520px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ---------------- ANIMATIONS ---------------- */
|
|
||||||
@keyframes fadeUp {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(14px);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
|
||||||
* {
|
|
||||||
animation: none !important;
|
|
||||||
transition: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ---------------- CARD ---------------- */
|
|
||||||
.card {
|
|
||||||
background: var(--card);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 1.6rem;
|
|
||||||
margin: 2rem auto;
|
|
||||||
max-width: 720px;
|
|
||||||
animation: fadeUp 0.6s ease both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card h2 {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
margin-bottom: 0.6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card p {
|
|
||||||
color: var(--soft);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ---------------- MAIN ---------------- */
|
|
||||||
main {
|
|
||||||
max-width: 720px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 2rem 1.25rem 6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
background: var(--code-bg);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 1.1rem;
|
|
||||||
overflow-x: auto;
|
|
||||||
margin: 1.5rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
||||||
color: #bae6fd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.install-section {
|
|
||||||
max-width: 720px;
|
|
||||||
margin: 5rem auto;
|
|
||||||
padding: 0 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.install-btn {
|
|
||||||
display: inline-block;
|
|
||||||
margin-top: 1.5rem;
|
|
||||||
background: linear-gradient(135deg, #22c55e, #16a34a);
|
|
||||||
color: #041b0f;
|
|
||||||
font-weight: 700;
|
|
||||||
padding: 0.75rem 1.2rem;
|
|
||||||
border-radius: 10px;
|
|
||||||
text-decoration: none;
|
|
||||||
box-shadow: 0 10px 30px rgba(34, 197, 94, 0.35);
|
|
||||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.install-btn:hover {
|
|
||||||
transform: translateY(-1px);
|
|
||||||
box-shadow: 0 14px 40px rgba(34, 197, 94, 0.45);
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-section {
|
|
||||||
max-width: 720px;
|
|
||||||
margin: 5rem auto;
|
|
||||||
padding: 0 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-title {
|
|
||||||
font-size: 1.4rem;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
letter-spacing: -0.01em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-card {
|
|
||||||
position: relative;
|
|
||||||
background: #050506;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 1.5rem;
|
|
||||||
min-height: 180px;
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-frame {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
padding: 1.5rem;
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(8px);
|
|
||||||
transition: opacity 0.6s ease, transform 0.6s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-frame.active {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-header {
|
|
||||||
font-family: "IBM Plex Sans", sans-serif;
|
|
||||||
font-size: 0.7rem;
|
|
||||||
letter-spacing: 0.15em;
|
|
||||||
opacity: 0.5;
|
|
||||||
margin-bottom: 0.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-title-line {
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
margin-bottom: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-meta {
|
|
||||||
font-family: "IBM Plex Sans", sans-serif;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: #9ca3af;
|
|
||||||
margin-bottom: 0.6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-text {
|
|
||||||
font-size: 0.95rem;
|
|
||||||
line-height: 1.6;
|
|
||||||
color: #cbd5e1;
|
|
||||||
}
|
}
|
||||||
</style>
|
</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>
|
</head>
|
||||||
|
|
||||||
<body x-data="{ menuOpen: false }">
|
<body class="bg-night-900 text-slate-100 font-body overflow-x-hidden">
|
||||||
|
<div class="min-h-screen bg-night-900">
|
||||||
<!-- NAV -->
|
<header class="border-b border-white/10" x-data="{ open: false }">
|
||||||
<nav>
|
<div
|
||||||
<div class="nav-inner">
|
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="brand">
|
<div class="flex w-full items-center justify-between gap-4 md:w-auto">
|
||||||
<div class="logo"></div>
|
<img src="sublogue_v2.png" alt="Sublogue" class="h-10 w-auto max-w-full sm:h-12" />
|
||||||
Sublogue
|
<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>
|
||||||
|
<button
|
||||||
<div class="nav-links">
|
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"
|
||||||
<a href="#usage">Usage</a>
|
type="button" aria-label="Toggle menu" aria-controls="mobile-menu" :aria-expanded="open.toString()"
|
||||||
<a href="#philosophy">Philosophy</a>
|
@click="open = !open">
|
||||||
<a class="docker-link" href="https://hub.docker.com" target="_blank">
|
<i data-lucide="menu" class="h-5 w-5"></i>
|
||||||
🐳 Docker Hub
|
</button>
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="hidden flex-wrap items-center justify-start gap-3 md:flex md:justify-end">
|
||||||
<button class="menu-btn" @click="menuOpen = true">☰</button>
|
<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>
|
</div>
|
||||||
</nav>
|
<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">
|
||||||
<!-- MOBILE MENU -->
|
<a class="text-slate-200 hover:text-white" href="#install" @click="open = false">Install</a>
|
||||||
<div x-show="menuOpen" x-transition.opacity @keydown.escape.window="menuOpen = false" class="mobile-menu" x-cloak>
|
<a class="text-slate-200 hover:text-white" href="#integrations" @click="open = false">Integrations</a>
|
||||||
<div class="mobile-close" @click="menuOpen = false">✕</div>
|
<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"
|
||||||
<a href="#usage" @click="menuOpen = false">Usage</a>
|
href="#quickstart" @click="open = false">Quickstart</a>
|
||||||
<a href="#philosophy" @click="menuOpen = false">Philosophy</a>
|
|
||||||
<a href="https://hub.docker.com" target="_blank">Docker Hub</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- HERO -->
|
|
||||||
<header>
|
|
||||||
<div class="hero">
|
|
||||||
<h1>Sublogue</h1>
|
|
||||||
<p>
|
|
||||||
Context-aware subtitle augmentation.
|
|
||||||
Plot summaries and metadata, inserted without breaking sync.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</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:
|
services:
|
||||||
sublogue:
|
sublogue:
|
||||||
image: ghcr.io/yourname/sublogue:latest
|
image: ponzischeme89/sublogue:latest
|
||||||
container_name: sublogue
|
container_name: sublogue
|
||||||
volumes:
|
|
||||||
- ./subs:/data/subs
|
|
||||||
restart: unless-stopped
|
restart: unless-stopped
|
||||||
</code></pre>
|
environment:
|
||||||
|
- TZ=Etc/UTC
|
||||||
<a href="https://hub.docker.com" target="_blank" class="install-btn">
|
- PUID=1000
|
||||||
⬇ View on Docker Hub
|
- PGID=1000
|
||||||
</a>
|
volumes:
|
||||||
</section>
|
- ./data:/config
|
||||||
|
- ./media:/media
|
||||||
<section class="demo-section">
|
ports:
|
||||||
<h2 class="demo-title">What Sublogue adds to your subtitles</h2>
|
- "5000:5000"</code></pre>
|
||||||
|
</div>
|
||||||
<div class="demo-card" id="subtitleDemo">
|
<div class="rounded-2xl border border-white/10 bg-night-800/70 p-6">
|
||||||
<div class="demo-frame active">
|
<h3 class="text-lg font-semibold font-display">🧰 Unraid</h3>
|
||||||
<div class="demo-header">SUBLOGUE</div>
|
<p class="mt-3 text-sm text-slate-300">
|
||||||
<div class="demo-title-line">Memento (2022)</div>
|
Use the bundled template and map volumes into /config and /media.
|
||||||
<div class="demo-meta">IMDb 8.0 · RT 54% · 113 min</div>
|
</p>
|
||||||
<div class="demo-text">
|
<div class="mt-4 rounded-2xl border border-white/10 bg-night-900/70 p-4 text-sm text-slate-200">
|
||||||
A man with short-term memory loss attempts to track down his wife’s
|
<p>/mnt/user/appdata/sublogue -> /config</p>
|
||||||
murderer using notes, tattoos, and fragmented recollections.
|
<p class="mt-2">/mnt/user/media -> /media</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="rounded-2xl border border-white/10 bg-night-800/70 p-6">
|
||||||
<div class="demo-frame">
|
<h3 class="text-lg font-semibold font-display">🐲 Komodo</h3>
|
||||||
<div class="demo-header">SUBLOGUE</div>
|
<p class="mt-3 text-sm text-slate-300">
|
||||||
<div class="demo-title-line">Arrival (2016)</div>
|
Paste a stack template and attach the NPM network.
|
||||||
<div class="demo-meta">IMDb 7.9 · RT 94% · 116 min</div>
|
</p>
|
||||||
<div class="demo-text">
|
<pre
|
||||||
A linguist is recruited to communicate with extraterrestrial visitors
|
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"
|
||||||
whose arrival challenges humanity’s understanding of time.
|
services:
|
||||||
</div>
|
sublogue:
|
||||||
</div>
|
image: ponzischeme89/sublogue:latest
|
||||||
|
container_name: sublogue
|
||||||
<div class="demo-frame">
|
environment:
|
||||||
<div class="demo-header">SUBLOGUE</div>
|
- TZ=Etc/UTC
|
||||||
<div class="demo-title-line">Ex Machina (2014)</div>
|
ports:
|
||||||
<div class="demo-meta">IMDb 7.7 · RT 92% · 108 min</div>
|
- "5000:5000"
|
||||||
<div class="demo-text">
|
volumes:
|
||||||
A programmer evaluates the consciousness of an advanced AI in a
|
- /volume1/Docker/sublogue/data:/config
|
||||||
secluded research facility.
|
- /volume1/Media:/media
|
||||||
</div>
|
restart: unless-stopped
|
||||||
|
networks:
|
||||||
|
- npm_network
|
||||||
|
networks:
|
||||||
|
npm_network:
|
||||||
|
external: true</code></pre>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- WHAT IT DOES -->
|
<section id="clean-srts" class="mb-12 md:mb-16">
|
||||||
<div class="card">
|
<div class="flex items-center gap-3">
|
||||||
<h2>What it does</h2>
|
<i data-lucide="eraser" class="h-6 w-6 text-ember-500"></i>
|
||||||
<p>
|
<h2 class="text-2xl font-semibold font-display">Clean SRTs</h2>
|
||||||
Sublogue appends a short, readable plot summary directly into
|
</div>
|
||||||
<code>.srt</code> subtitle files at the start of playback.
|
<p class="mt-3 text-sm text-slate-300 sm:text-base">
|
||||||
No timing drift. No destructive edits.
|
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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<!-- CONTENT -->
|
|
||||||
<main>
|
|
||||||
<section id="usage">
|
|
||||||
<h2>Basic usage</h2>
|
|
||||||
<pre><code>sublogue scan ./subs</code></pre>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="philosophy">
|
<section id="examples" class="mb-12 md:mb-16">
|
||||||
<h2>Philosophy</h2>
|
<div class="flex items-center gap-3">
|
||||||
<p>
|
<i data-lucide="sparkles" class="h-6 w-6 text-ember-500"></i>
|
||||||
Sublogue performs one task, carefully, and then gets out of the way.
|
<h2 class="text-2xl font-semibold font-display">Metadata Examples</h2>
|
||||||
It is not a downloader. It is not a media manager.
|
</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>
|
</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>
|
</section>
|
||||||
</main>
|
</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>
|
</body>
|
||||||
<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);
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@@ -156,25 +156,14 @@
|
|||||||
class={`flex items-center rounded-md bg-white/5 px-3 py-2 text-xs ${collapsed ? "justify-center" : "justify-between"}`}
|
class={`flex items-center rounded-md bg-white/5 px-3 py-2 text-xs ${collapsed ? "justify-center" : "justify-between"}`}
|
||||||
>
|
>
|
||||||
{#if !collapsed}
|
{#if !collapsed}
|
||||||
<span class="text-text-tertiary">Version</span>
|
|
||||||
<Badge className="bg-white/10 text-text-secondary"
|
<Badge className="bg-white/10 text-text-secondary"
|
||||||
>v1.0.2 Release Candiate</Badge
|
>v1.0.4 Release Candiate</Badge
|
||||||
>
|
>
|
||||||
{:else}
|
{:else}
|
||||||
<Badge className="bg-white/10 text-text-secondary">v</Badge>
|
<Badge className="bg-white/10 text-text-secondary">v</Badge>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<a
|
|
||||||
href="https://github.com/ponzischeme89/Sublogue/releases"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
class={`inline-flex items-center rounded-md bg-white/5 px-3 py-2 text-xs text-text-tertiary hover:text-white hover:bg-[color:var(--bg-hover)] transition-colors ${collapsed ? "justify-center" : "gap-2"}`}
|
|
||||||
>
|
|
||||||
<Download class="h-4 w-4" />
|
|
||||||
{#if !collapsed}
|
|
||||||
Check updates
|
|
||||||
{/if}
|
|
||||||
</a>
|
|
||||||
<a
|
<a
|
||||||
href="https://github.com/ponzischeme89/Sublogue"
|
href="https://github.com/ponzischeme89/Sublogue"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
@@ -183,7 +172,7 @@
|
|||||||
>
|
>
|
||||||
<Github class="h-4 w-4" />
|
<Github class="h-4 w-4" />
|
||||||
{#if !collapsed}
|
{#if !collapsed}
|
||||||
GitHub
|
Star on GitHub
|
||||||
{/if}
|
{/if}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -60,9 +60,6 @@
|
|||||||
>
|
>
|
||||||
<!-- Left -->
|
<!-- Left -->
|
||||||
<div class="flex items-center gap-3 text-[11px]">
|
<div class="flex items-center gap-3 text-[11px]">
|
||||||
<span class="font-medium text-text-primary tracking-tight">
|
|
||||||
Sublogue Version: v1.0.3 Release Candiate
|
|
||||||
</span>
|
|
||||||
<span class="hidden sm:inline opacity-30">•</span>
|
<span class="hidden sm:inline opacity-30">•</span>
|
||||||
<span class="text-text-secondary"> Open source (AGPL-3.0) </span>
|
<span class="text-text-secondary"> Open source (AGPL-3.0) </span>
|
||||||
<span class="hidden sm:inline opacity-30">•</span>
|
<span class="hidden sm:inline opacity-30">•</span>
|
||||||
|
|||||||
@@ -20,6 +20,8 @@
|
|||||||
value={$currentTheme}
|
value={$currentTheme}
|
||||||
placeholder="Appearance"
|
placeholder="Appearance"
|
||||||
className={className}
|
className={className}
|
||||||
|
dropup={true}
|
||||||
|
searchable={false}
|
||||||
on:change={handleThemeChange}
|
on:change={handleThemeChange}
|
||||||
>
|
>
|
||||||
<svelte:fragment slot="icon">
|
<svelte:fragment slot="icon">
|
||||||
|
|||||||
@@ -11,6 +11,8 @@
|
|||||||
export let placeholder = 'Select...'
|
export let placeholder = 'Select...'
|
||||||
export let disabled = false
|
export let disabled = false
|
||||||
export let className = ''
|
export let className = ''
|
||||||
|
export let searchable = true
|
||||||
|
export let dropup = false
|
||||||
|
|
||||||
let open = false
|
let open = false
|
||||||
let search = ''
|
let search = ''
|
||||||
@@ -22,10 +24,12 @@
|
|||||||
items.find((item) => item.value === itemValue)?.label
|
items.find((item) => item.value === itemValue)?.label
|
||||||
|
|
||||||
$: selectedLabel = getLabel(value)
|
$: selectedLabel = getLabel(value)
|
||||||
$: filteredItems = items.filter((item) => {
|
$: filteredItems = searchable
|
||||||
|
? items.filter((item) => {
|
||||||
const haystack = `${item.label} ${item.description || ''}`.toLowerCase()
|
const haystack = `${item.label} ${item.description || ''}`.toLowerCase()
|
||||||
return haystack.includes(search.toLowerCase())
|
return haystack.includes(search.toLowerCase())
|
||||||
})
|
})
|
||||||
|
: items
|
||||||
|
|
||||||
function toggle() {
|
function toggle() {
|
||||||
if (!disabled) open = !open
|
if (!disabled) open = !open
|
||||||
@@ -105,8 +109,11 @@
|
|||||||
|
|
||||||
{#if open}
|
{#if open}
|
||||||
<div
|
<div
|
||||||
class="absolute top-full mt-2 left-0 min-w-[220px] w-[92%] rounded-lg border border-border bg-card shadow-2xl overflow-hidden z-50"
|
class="absolute left-0 min-w-[220px] w-[92%] rounded-lg border border-border bg-card shadow-2xl overflow-hidden z-50 {dropup
|
||||||
|
? 'bottom-full mb-2'
|
||||||
|
: 'top-full mt-2'}"
|
||||||
>
|
>
|
||||||
|
{#if searchable}
|
||||||
<div class="p-2 border-b border-border bg-muted/40">
|
<div class="p-2 border-b border-border bg-muted/40">
|
||||||
<Input
|
<Input
|
||||||
value={search}
|
value={search}
|
||||||
@@ -115,6 +122,7 @@
|
|||||||
className="h-9 text-[12px]"
|
className="h-9 text-[12px]"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
{/if}
|
||||||
<div class="max-h-56 overflow-y-auto py-1">
|
<div class="max-h-56 overflow-y-auto py-1">
|
||||||
{#if filteredItems.length === 0}
|
{#if filteredItems.length === 0}
|
||||||
<div class="px-4 py-3 text-xs text-text-tertiary">
|
<div class="px-4 py-3 text-xs text-text-tertiary">
|
||||||
|
|||||||
Reference in New Issue
Block a user