svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+export {
+ Avatar,
+ AvatarImage,
+ AvatarFallback,
+ AvatarBadge,
+ AvatarGroup,
+ AvatarGroupCount,
+}
diff --git a/website/src/components/ui/badge.tsx b/website/src/components/ui/badge.tsx
new file mode 100644
index 00000000..6eb2a057
--- /dev/null
+++ b/website/src/components/ui/badge.tsx
@@ -0,0 +1,48 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+ "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
+ {
+ variants: {
+ variant: {
+ default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+ secondary:
+ "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+ destructive:
+ "bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
+ outline:
+ "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+ ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+ link: "text-primary underline-offset-4 [a&]:hover:underline",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+)
+
+function Badge({
+ className,
+ variant = "default",
+ asChild = false,
+ ...props
+}: React.ComponentProps<"span"> &
+ VariantProps
& { asChild?: boolean }) {
+ const Comp = asChild ? Slot.Root : "span"
+
+ return (
+
+ )
+}
+
+export { Badge, badgeVariants }
diff --git a/website/src/components/ui/button.tsx b/website/src/components/ui/button.tsx
new file mode 100644
index 00000000..81b76d3b
--- /dev/null
+++ b/website/src/components/ui/button.tsx
@@ -0,0 +1,64 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+ "inline-flex shrink-0 items-center justify-center gap-2 rounded-full text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ {
+ variants: {
+ variant: {
+ default: "bg-primary text-primary-foreground hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+ outline:
+ "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+ secondary:
+ "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ ghost:
+ "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-9 px-4 py-2 has-[>svg]:px-3",
+ xs: "h-6 gap-1 px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+ sm: "h-8 gap-1.5 px-3 has-[>svg]:px-2.5",
+ lg: "h-10 px-6 has-[>svg]:px-4",
+ icon: "size-9",
+ "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
+ "icon-sm": "size-8",
+ "icon-lg": "size-10",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+)
+
+function Button({
+ className,
+ variant = "default",
+ size = "default",
+ asChild = false,
+ ...props
+}: React.ComponentProps<"button"> &
+ VariantProps & {
+ asChild?: boolean
+ }) {
+ const Comp = asChild ? Slot.Root : "button"
+
+ return (
+
+ )
+}
+
+export { Button, buttonVariants }
diff --git a/website/src/components/ui/card.tsx b/website/src/components/ui/card.tsx
new file mode 100644
index 00000000..acf57dc5
--- /dev/null
+++ b/website/src/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+export {
+ Card,
+ CardHeader,
+ CardFooter,
+ CardTitle,
+ CardAction,
+ CardDescription,
+ CardContent,
+}
diff --git a/website/src/components/ui/sheet.tsx b/website/src/components/ui/sheet.tsx
new file mode 100644
index 00000000..cb53bb28
--- /dev/null
+++ b/website/src/components/ui/sheet.tsx
@@ -0,0 +1,143 @@
+"use client"
+
+import * as React from "react"
+import { XIcon } from "lucide-react"
+import { Dialog as SheetPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Sheet({ ...props }: React.ComponentProps) {
+ return
+}
+
+function SheetTrigger({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
+function SheetClose({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
+function SheetPortal({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
+function SheetOverlay({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function SheetContent({
+ className,
+ children,
+ side = "right",
+ showCloseButton = true,
+ ...props
+}: React.ComponentProps & {
+ side?: "top" | "right" | "bottom" | "left"
+ showCloseButton?: boolean
+}) {
+ return (
+
+
+
+ {children}
+ {showCloseButton && (
+
+
+ Close
+
+ )}
+
+
+ )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function SheetTitle({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function SheetDescription({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+export {
+ Sheet,
+ SheetTrigger,
+ SheetClose,
+ SheetContent,
+ SheetHeader,
+ SheetFooter,
+ SheetTitle,
+ SheetDescription,
+}
diff --git a/website/src/components/ui/tabs.tsx b/website/src/components/ui/tabs.tsx
new file mode 100644
index 00000000..b463afd1
--- /dev/null
+++ b/website/src/components/ui/tabs.tsx
@@ -0,0 +1,91 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Tabs as TabsPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+ className,
+ orientation = "horizontal",
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+const tabsListVariants = cva(
+ "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
+ {
+ variants: {
+ variant: {
+ default: "bg-muted",
+ line: "gap-1 bg-transparent",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+)
+
+function TabsList({
+ className,
+ variant = "default",
+ ...props
+}: React.ComponentProps &
+ VariantProps) {
+ return (
+
+ )
+}
+
+function TabsTrigger({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function TabsContent({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
diff --git a/website/src/components/ui/tooltip.tsx b/website/src/components/ui/tooltip.tsx
new file mode 100644
index 00000000..ec65c1e4
--- /dev/null
+++ b/website/src/components/ui/tooltip.tsx
@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+ delayDuration = 0,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function Tooltip({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
+function TooltipTrigger({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
+function TooltipContent({
+ className,
+ sideOffset = 0,
+ children,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+ {children}
+
+
+
+ )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/website/src/content/blog/getting-started-with-dbackup.mdx b/website/src/content/blog/getting-started-with-dbackup.mdx
new file mode 100644
index 00000000..6a41ecde
--- /dev/null
+++ b/website/src/content/blog/getting-started-with-dbackup.mdx
@@ -0,0 +1,58 @@
+---
+title: "Getting Started with DBackup in 5 Minutes"
+date: "2026-07-01"
+excerpt: "Spin up DBackup with a single docker-compose file and create your first encrypted backup job."
+tags: ["tutorial", "docker", "quickstart"]
+author: "Skyfay"
+---
+
+DBackup ships as a single multi-arch Docker image (amd64/arm64) with no external database required to run the app itself - it manages its own SQLite database internally. Here's the whole setup.
+
+## 1. Create a docker-compose.yml
+
+```yaml
+# docker-compose.yml
+services:
+ dbackup:
+ image: skyfay/dbackup:latest
+ container_name: dbackup
+ restart: always
+ ports:
+ - "3000:3000"
+ environment:
+ - ENCRYPTION_KEY= # openssl rand -hex 32
+ - BETTER_AUTH_URL=https://localhost:3000
+ - BETTER_AUTH_SECRET= # openssl rand -base64 32
+ volumes:
+ - ./data:/data # All persistent data (db, storage, certs)
+ - ./backups:/backups # Optional: used for local backups
+```
+
+Two environment variables need real values before you start the container:
+
+- `ENCRYPTION_KEY` - generate one with `openssl rand -hex 32`. This key protects every encrypted backup and credential DBackup stores - back it up somewhere safe, separately from the `./data` volume.
+- `BETTER_AUTH_SECRET` - generate one with `openssl rand -base64 32`. This signs session tokens for the built-in auth system.
+
+## 2. Start the container
+
+```bash
+docker-compose up -d
+```
+
+DBackup listens on port 3000 with a self-signed HTTPS certificate generated automatically on first run.
+
+## 3. Create your admin account
+
+Open `https://localhost:3000`, accept the self-signed certificate warning, and complete the first-run setup wizard to create your admin account.
+
+## 4. Add a database source and a storage destination
+
+From the dashboard, add the database you want to back up (MySQL, PostgreSQL, MongoDB, and five other engines are supported) and a storage destination - even the local filesystem works to start with. Both connections can be tested before saving.
+
+## 5. Create your first job
+
+A job pairs one or more sources with one or more destinations, a schedule, encryption, compression, and a retention policy. Save it, run it once manually to confirm everything works, then let the cron schedule take over.
+
+That's the whole loop: source, destination, job, schedule. Everything else - notifications, SSO, the Storage Explorer, restore workflows - builds on top of that same foundation whenever you need it.
+
+Full environment variable reference, reverse proxy setup, and production hardening notes: [docs.dbackup.app/user-guide/getting-started](https://docs.dbackup.app/user-guide/getting-started)
diff --git a/website/src/content/blog/why-no-vendor-lock-in-matters.mdx b/website/src/content/blog/why-no-vendor-lock-in-matters.mdx
new file mode 100644
index 00000000..ee693696
--- /dev/null
+++ b/website/src/content/blog/why-no-vendor-lock-in-matters.mdx
@@ -0,0 +1,35 @@
+---
+title: "Why We Built DBackup: No Vendor Lock-In by Design"
+date: "2026-07-10"
+excerpt: "Every DBackup backup is a standard database dump encrypted with open AES-256-GCM - here's why that matters and how the Recovery Kit works."
+tags: ["philosophy", "encryption", "recovery"]
+author: "Skyfay"
+---
+
+Most backup tools ask you to trust them twice: once to create the backup, and once again to restore it. If the tool disappears, changes its pricing, or simply stops working, the backup format often becomes a liability instead of a safety net.
+
+DBackup takes a different position: **every backup is a standard database dump**, exactly what `pg_dump`, `mysqldump`, `mongodump`, or `redis-cli --rdb` would have produced on their own. The only thing DBackup adds on top is encryption and compression as separate steps, not a replacement for the dump itself. Open the archive without DBackup, and you find the same SQL, BSON, or RDB output any database administrator already knows how to work with.
+
+## What "open encryption" actually means
+
+Encrypted backups use AES-256-GCM, a well-documented, widely implemented standard - not a custom cipher or a format that only DBackup understands. AES-256-GCM support exists in virtually every programming language's standard library, so decrypting a DBackup archive is a matter of a few dozen lines of code, not a dependency on a specific vendor's software.
+
+## The Recovery Kit
+
+Every encryption profile in DBackup can generate a **Recovery Kit** - a downloadable ZIP containing:
+
+- The raw encryption key for that profile
+- A standalone Node.js decryption script that needs nothing but Node.js itself to run
+- A short instructions file covering the exact decrypt to decompress to restore sequence
+
+Keep this kit somewhere DBackup itself can't reach - a password manager, a safe, a printed QR code - and it becomes your insurance policy against the one scenario every self-hoster should plan for: the tool that made the backup is no longer available when you need to restore.
+
+## The actual recovery path
+
+If DBackup is ever unavailable, restoring a backup manually comes down to three steps:
+
+1. **Decrypt** - run the standalone script from the Recovery Kit against the encrypted file and your key to get back the compressed dump.
+2. **Decompress** - `gunzip` or `brotli -d`, depending on which compression the job used (recorded in the backup's metadata file).
+3. **Import** - feed the resulting dump into the native restore tool for that database engine (`mysql`, `psql`, `mongorestore`, `redis-cli --pipe`, and so on) exactly as if you'd made the dump yourself.
+
+None of these steps involve DBackup. That's deliberate. A backup tool's job is to make backups easy to create and easy to manage day-to-day, not to make itself indispensable for the one moment that actually matters.
diff --git a/website/src/lib/adapter-icons.ts b/website/src/lib/adapter-icons.ts
new file mode 100644
index 00000000..84d86089
--- /dev/null
+++ b/website/src/lib/adapter-icons.ts
@@ -0,0 +1,107 @@
+import type { IconifyIcon } from "@iconify/react";
+
+// SVG Logos (multi-colored, color baked into the SVG)
+import mysqlIcon from "@iconify-icons/logos/mysql-icon";
+import mariadbIcon from "@iconify-icons/logos/mariadb-icon";
+import postgresqlIcon from "@iconify-icons/logos/postgresql";
+import mongodbIcon from "@iconify-icons/logos/mongodb-icon";
+import sqliteIcon from "@iconify-icons/logos/sqlite";
+import redisIcon from "@iconify-icons/logos/redis";
+import awsIcon from "@iconify-icons/logos/aws";
+import cloudflareIcon from "@iconify-icons/logos/cloudflare-icon";
+import googleDriveIcon from "@iconify-icons/logos/google-drive";
+import dropboxIcon from "@iconify-icons/logos/dropbox";
+import onedriveIcon from "@iconify-icons/logos/microsoft-onedrive";
+import discordIcon from "@iconify-icons/logos/discord-icon";
+import slackIcon from "@iconify-icons/logos/slack-icon";
+import teamsIcon from "@iconify-icons/logos/microsoft-teams";
+import telegramIcon from "@iconify-icons/logos/telegram";
+
+// Simple Icons (monochrome - brand color applied via getAdapterColor)
+import mssqlIcon from "@iconify-icons/simple-icons/microsoftsqlserver";
+import minioIcon from "@iconify-icons/simple-icons/minio";
+import hetznerIcon from "@iconify-icons/simple-icons/hetzner";
+
+// Material Design Icons (protocol/generic - no branded npm icon exists)
+import harddiskIcon from "@iconify-icons/mdi/harddisk";
+import sshIcon from "@iconify-icons/mdi/ssh";
+import swapVerticalIcon from "@iconify-icons/mdi/swap-vertical";
+import cloudUploadIcon from "@iconify-icons/mdi/cloud-upload";
+import folderNetworkIcon from "@iconify-icons/mdi/folder-network";
+import folderSyncIcon from "@iconify-icons/mdi/folder-sync";
+import emailIcon from "@iconify-icons/mdi/email";
+import webhookIcon from "@iconify-icons/mdi/webhook";
+import bellRingIcon from "@iconify-icons/mdi/bell-ring";
+import messageTextIcon from "@iconify-icons/mdi/message-text";
+import cellphoneMessageIcon from "@iconify-icons/mdi/cellphone-message";
+import discIcon from "@iconify-icons/mdi/disc";
+
+// No npm package ships a Valkey icon - copied verbatim from
+// src/components/adapter/utils.ts (main app) for pixel parity.
+const valkeyIcon: IconifyIcon = {
+ body: '',
+ width: 512,
+ height: 512,
+};
+
+const ADAPTER_ICON_MAP: Record = {
+ // Databases
+ mysql: mysqlIcon,
+ mariadb: mariadbIcon,
+ postgres: postgresqlIcon,
+ mongodb: mongodbIcon,
+ sqlite: sqliteIcon,
+ redis: redisIcon,
+ valkey: valkeyIcon,
+ mssql: mssqlIcon,
+ // Storage
+ "local-filesystem": harddiskIcon,
+ "s3-aws": awsIcon,
+ "s3-generic": minioIcon,
+ "s3-r2": cloudflareIcon,
+ "s3-hetzner": hetznerIcon,
+ "google-drive": googleDriveIcon,
+ dropbox: dropboxIcon,
+ onedrive: onedriveIcon,
+ sftp: sshIcon,
+ ftp: swapVerticalIcon,
+ webdav: cloudUploadIcon,
+ smb: folderNetworkIcon,
+ rsync: folderSyncIcon,
+ // Notifications
+ discord: discordIcon,
+ slack: slackIcon,
+ teams: teamsIcon,
+ "generic-webhook": webhookIcon,
+ gotify: bellRingIcon,
+ ntfy: messageTextIcon,
+ telegram: telegramIcon,
+ "twilio-sms": cellphoneMessageIcon,
+ email: emailIcon,
+};
+
+export function getAdapterIcon(adapterId: string): IconifyIcon {
+ return ADAPTER_ICON_MAP[adapterId] ?? discIcon;
+}
+
+// Brand colors for monochrome simple-icons entries only
+// (logos:* icons already have colors embedded in their SVGs)
+const ADAPTER_COLOR_MAP: Record = {
+ mssql: "#CC2927",
+ "s3-generic": "#C72E49",
+ "s3-hetzner": "#D50C2D",
+};
+
+export function getAdapterColor(adapterId: string): string | undefined {
+ return ADAPTER_COLOR_MAP[adapterId];
+}
+
+// These logos bake in dark navy/teal fills with no light variant, so they nearly
+// disappear against the dark tinted circle used in dark mode. Brighten them via
+// a CSS filter rather than swapping backgrounds, to keep the same circle look
+// as every other icon.
+const LOW_DARK_MODE_CONTRAST = new Set(["mysql", "mariadb", "sqlite"]);
+
+export function needsDarkModeBoost(adapterId: string): boolean {
+ return LOW_DARK_MODE_CONTRAST.has(adapterId);
+}
diff --git a/website/src/lib/blog.ts b/website/src/lib/blog.ts
new file mode 100644
index 00000000..0d48d830
--- /dev/null
+++ b/website/src/lib/blog.ts
@@ -0,0 +1,43 @@
+import fs from "node:fs";
+import path from "node:path";
+import matter from "gray-matter";
+
+const BLOG_DIR = path.join(process.cwd(), "src/content/blog");
+
+export interface PostFrontmatter {
+ title: string;
+ date: string;
+ excerpt: string;
+ tags: string[];
+ author: string;
+}
+
+export interface PostSummary extends PostFrontmatter {
+ slug: string;
+}
+
+export interface Post extends PostSummary {
+ content: string;
+}
+
+export function getAllSlugs(): string[] {
+ return fs
+ .readdirSync(BLOG_DIR)
+ .filter((file) => file.endsWith(".mdx"))
+ .map((file) => file.replace(/\.mdx$/, ""));
+}
+
+export function getPostBySlug(slug: string): Post {
+ const raw = fs.readFileSync(path.join(BLOG_DIR, `${slug}.mdx`), "utf8");
+ const { data, content } = matter(raw);
+ return { slug, content, ...(data as PostFrontmatter) };
+}
+
+export function getAllPosts(): PostSummary[] {
+ return getAllSlugs()
+ .map((slug) => {
+ const { content: _content, ...meta } = getPostBySlug(slug);
+ return meta;
+ })
+ .sort((a, b) => (a.date < b.date ? 1 : -1));
+}
diff --git a/website/src/lib/content.ts b/website/src/lib/content.ts
new file mode 100644
index 00000000..f2f8881e
--- /dev/null
+++ b/website/src/lib/content.ts
@@ -0,0 +1,150 @@
+export const TAGLINE =
+ "Self-hosted database backup automation with encryption, compression, and smart retention.";
+
+export const GITHUB_REPO = "Skyfay/DBackup";
+export const DOCS_URL = "https://docs.dbackup.app";
+export const API_DOCS_URL = "https://api.dbackup.app";
+export const DISCORD_URL = "https://discord.com/invite/YvgPyky";
+export const GETTING_STARTED_URL = `${DOCS_URL}/user-guide/getting-started`;
+
+export const STATS = [
+ { value: "8", label: "Database Engines" },
+ { value: "13", label: "Storage Adapters" },
+ { value: "9", label: "Notification Channels" },
+ { value: "GPL-3.0", label: "Open Source" },
+];
+
+export const FEATURES = [
+ {
+ title: "Database Backup",
+ description:
+ "8 database engines, selective per-database backup, multi-database jobs with a unified TAR format, AES-256-GCM encryption, GZIP/Brotli compression, and SSH remote execution.",
+ },
+ {
+ title: "Storage & Destinations",
+ description:
+ "13 storage adapters, multi-destination jobs for redundancy, a Storage Explorer to browse and download backups, and alerts for usage spikes or missing backups.",
+ },
+ {
+ title: "Restore & Recovery",
+ description:
+ "One-click restore, database remapping, version compatibility checks, SHA-256/MD5 integrity verification, and a Recovery Kit for restoring without DBackup itself.",
+ },
+ {
+ title: "Monitoring & Visibility",
+ description:
+ "Live progress tracking, an interactive dashboard, a GitHub-style backup calendar, a Database Explorer, and full execution history.",
+ },
+ {
+ title: "Notifications",
+ description:
+ "9 notification channels, per-job notification settings, system event notifications, and configurable reminder intervals.",
+ },
+ {
+ title: "Scheduling & Retention",
+ description:
+ "Cron-based scheduling with a visual picker, reusable GFS retention policy templates, naming templates, and automated config backups.",
+ },
+ {
+ title: "Access Control & Security",
+ description:
+ "SSO/OIDC, RBAC with granular permissions, 2FA and passkeys, a credential vault, and HTTPS by default.",
+ },
+ {
+ title: "API & Automation",
+ description:
+ "A full REST API, fine-grained API keys with expiration, and ready-made cURL, Bash, and Ansible examples.",
+ },
+ {
+ title: "Designed for Simplicity",
+ description:
+ "Configure almost everything from the UI instead of environment variables - a guided setup for beginners, deep configurability for power users.",
+ },
+];
+
+export interface AdapterItem {
+ id: string;
+ label: string;
+}
+
+export const DATABASES: AdapterItem[] = [
+ { id: "mysql", label: "MySQL" },
+ { id: "mariadb", label: "MariaDB" },
+ { id: "postgres", label: "PostgreSQL" },
+ { id: "mongodb", label: "MongoDB" },
+ { id: "sqlite", label: "SQLite" },
+ { id: "redis", label: "Redis" },
+ { id: "valkey", label: "Valkey" },
+ { id: "mssql", label: "Microsoft SQL Server" },
+];
+
+export const STORAGE_ADAPTERS: AdapterItem[] = [
+ { id: "local-filesystem", label: "Local Filesystem" },
+ { id: "s3-aws", label: "Amazon S3" },
+ { id: "s3-generic", label: "S3 Compatible" },
+ { id: "s3-r2", label: "Cloudflare R2" },
+ { id: "s3-hetzner", label: "Hetzner Object Storage" },
+ { id: "google-drive", label: "Google Drive" },
+ { id: "dropbox", label: "Dropbox" },
+ { id: "onedrive", label: "Microsoft OneDrive" },
+ { id: "sftp", label: "SFTP" },
+ { id: "ftp", label: "FTP/FTPS" },
+ { id: "webdav", label: "WebDAV" },
+ { id: "smb", label: "SMB/Samba" },
+ { id: "rsync", label: "Rsync" },
+];
+
+export const NOTIFICATION_CHANNELS: AdapterItem[] = [
+ { id: "discord", label: "Discord" },
+ { id: "slack", label: "Slack" },
+ { id: "teams", label: "Microsoft Teams" },
+ { id: "telegram", label: "Telegram" },
+ { id: "gotify", label: "Gotify" },
+ { id: "ntfy", label: "ntfy" },
+ { id: "generic-webhook", label: "Webhook" },
+ { id: "twilio-sms", label: "SMS (Twilio)" },
+ { id: "email", label: "Email (SMTP)" },
+];
+
+export const QUICK_START_SNIPPET = `# docker-compose.yml
+services:
+ dbackup:
+ image: skyfay/dbackup:latest
+ container_name: dbackup
+ restart: always
+ ports:
+ - "3000:3000"
+ environment:
+ - ENCRYPTION_KEY= # openssl rand -hex 32
+ - BETTER_AUTH_URL=https://localhost:3000
+ - BETTER_AUTH_SECRET= # openssl rand -base64 32
+ volumes:
+ - ./data:/data
+ - ./backups:/backups`;
+
+export const FAQS = [
+ {
+ question: "What happens if DBackup becomes unavailable - can I still restore?",
+ answer:
+ "Yes. Every backup is a standard database dump encrypted with open AES-256-GCM. With the key from your Recovery Kit and a standalone Node.js script, you can decrypt and restore without DBackup running at all.",
+ },
+ {
+ question: "Which databases are supported?",
+ answer:
+ "MySQL, MariaDB, PostgreSQL, MongoDB, SQLite, Redis, Valkey, and Microsoft SQL Server, with more engines added regularly.",
+ },
+ {
+ question: "Is there a hosted or cloud version?",
+ answer:
+ "No. DBackup is self-hosted only, distributed as a single Docker image you run on your own infrastructure.",
+ },
+ {
+ question: "What license is DBackup released under?",
+ answer: "GPL-3.0. The source code is fully open and available on GitHub.",
+ },
+ {
+ question: "Can I send one backup to multiple storage destinations?",
+ answer:
+ "Yes. Multi-destination jobs upload each backup to several storage adapters at once for redundancy or off-site copies.",
+ },
+];
diff --git a/website/src/lib/github.ts b/website/src/lib/github.ts
new file mode 100644
index 00000000..2ba3a860
--- /dev/null
+++ b/website/src/lib/github.ts
@@ -0,0 +1,27 @@
+export async function fetchWithCache(
+ key: string,
+ url: string,
+ ttlMs: number
+): Promise {
+ try {
+ const cached = sessionStorage.getItem(key);
+ if (cached) {
+ const { data, ts } = JSON.parse(cached) as { data: T; ts: number };
+ if (Date.now() - ts < ttlMs) return data;
+ }
+ } catch {
+ // sessionStorage unavailable - fall through to fetch
+ }
+
+ const res = await fetch(url);
+ if (!res.ok) throw new Error(String(res.status));
+ const data: T = await res.json();
+
+ try {
+ sessionStorage.setItem(key, JSON.stringify({ data, ts: Date.now() }));
+ } catch {
+ // sessionStorage unavailable - skip caching
+ }
+
+ return data;
+}
diff --git a/website/src/lib/highlight.ts b/website/src/lib/highlight.ts
new file mode 100644
index 00000000..399ef6f7
--- /dev/null
+++ b/website/src/lib/highlight.ts
@@ -0,0 +1,10 @@
+import { codeToHtml } from "shiki";
+
+export async function highlightCode(code: string, lang: string) {
+ return codeToHtml(code, {
+ lang,
+ themes: { light: "github-light-default", dark: "github-dark-default" },
+ defaultColor: false,
+ structure: "inline",
+ });
+}
diff --git a/website/src/lib/roadmap.ts b/website/src/lib/roadmap.ts
new file mode 100644
index 00000000..d345b4f3
--- /dev/null
+++ b/website/src/lib/roadmap.ts
@@ -0,0 +1,349 @@
+export type RoadmapStatus = "idea" | "planned" | "in-progress";
+
+export type RoadmapCategory =
+ | "backup-engine"
+ | "storage"
+ | "monitoring-dashboard"
+ | "database-tools"
+ | "security-access"
+ | "developer-experience";
+
+export const ROADMAP_CATEGORIES: { value: RoadmapCategory; label: string }[] = [
+ { value: "backup-engine", label: "Backup Engine" },
+ { value: "storage", label: "Storage" },
+ { value: "monitoring-dashboard", label: "Monitoring & Dashboard" },
+ { value: "database-tools", label: "Database Tools" },
+ { value: "security-access", label: "Security & Access" },
+ { value: "developer-experience", label: "Developer Experience" },
+];
+
+export interface RoadmapItem {
+ slug: string;
+ title: string;
+ description: string;
+ status: RoadmapStatus;
+ category: RoadmapCategory;
+ issueNumber?: number;
+}
+
+export const ROADMAP_ITEMS: RoadmapItem[] = [
+ {
+ slug: "firebird-support",
+ title: "Firebird Support",
+ description:
+ "Firebird (3.x/4.x/5.x) as a new database source, with direct and SSH connection modes.",
+ status: "in-progress",
+ category: "backup-engine",
+ },
+ {
+ slug: "file-based-linked-backup-restore",
+ title: "File-Based & Linked Backup and Restore",
+ description:
+ "Direct file-based backup and restore for engines that support file-level snapshots, with linked/incremental backups to reduce storage usage.",
+ status: "planned",
+ category: "backup-engine",
+ },
+ {
+ slug: "stream-based-backup-pipeline",
+ title: "Stream-based Backup Pipeline",
+ description:
+ "Opt-in \"Large DB Mode\" that pipes dumps directly to storage without staging on disk first, with parallel multi-destination upload and inline checksums for databases too large for local /tmp.",
+ status: "idea",
+ category: "backup-engine",
+ issueNumber: 76,
+ },
+ {
+ slug: "runner-resilience",
+ title: "Runner Resilience",
+ description:
+ "Exponential backoff retry logic for transient errors, plus a dead letter queue for jobs that fail repeatedly and need investigation.",
+ status: "planned",
+ category: "backup-engine",
+ },
+ {
+ slug: "restic-storage-backend",
+ title: "Restic Storage Backend",
+ description:
+ "Restic as a storage destination with block-level deduplication and rsyncable compression, using its own repository, browsing, and retention model instead of file-based storage.",
+ status: "idea",
+ category: "storage",
+ issueNumber: 68,
+ },
+ {
+ slug: "encryption-key-rotation",
+ title: "Encryption Key Rotation",
+ description:
+ "Rotate the system ENCRYPTION_KEY without downtime, re-encrypting all stored secrets with the new key.",
+ status: "idea",
+ category: "security-access",
+ },
+ {
+ slug: "user-invite-flow",
+ title: "User Invite Flow",
+ description:
+ "Email-based user invitations with a forced password change on first login, built on the existing SMTP notification adapter.",
+ status: "idea",
+ category: "security-access",
+ },
+ {
+ slug: "backup-tags-annotations",
+ title: "Backup Tags & Annotations",
+ description:
+ "Manually tag backups (e.g. \"pre-migration\"), pin them to protect against retention deletion, and filter by tag in the Storage Explorer.",
+ status: "idea",
+ category: "backup-engine",
+ },
+ {
+ slug: "backup-anomaly-detection",
+ title: "Backup Anomaly Detection",
+ description:
+ "Alert when a backup's size deviates significantly from previous runs, plus a scheduled \"test restore\" task.",
+ status: "idea",
+ category: "monitoring-dashboard",
+ },
+ {
+ slug: "prometheus-metrics-endpoint",
+ title: "Prometheus Metrics Endpoint",
+ description:
+ "A /metrics endpoint exposing backup count, duration, size, success rate, and queue depth, plus a ready-made Grafana dashboard.",
+ status: "idea",
+ category: "monitoring-dashboard",
+ },
+ {
+ slug: "backup-size-limits-alerts",
+ title: "Backup Size Limits & Alerts",
+ description:
+ "Per-job configurable thresholds that warn when a backup is unexpectedly larger or smaller than expected.",
+ status: "idea",
+ category: "monitoring-dashboard",
+ },
+ {
+ slug: "backup-drift-detection",
+ title: "Backup Drift Detection",
+ description:
+ "Compare a database's current state against its last backup and alert when it has drifted significantly (new tables, size growth, dropped objects).",
+ status: "idea",
+ category: "database-tools",
+ },
+ {
+ slug: "server-health-dashboard",
+ title: "Server Health Dashboard",
+ description:
+ "Per-adapter server health metrics (uptime, active connections, running queries, replication status) as a pre-backup health indicator.",
+ status: "idea",
+ category: "database-tools",
+ },
+ {
+ slug: "direct-sql-execution",
+ title: "Direct SQL Execution",
+ description:
+ "Run custom SQL queries against configured sources from the web UI, read-only by default with write access behind a separate permission.",
+ status: "idea",
+ category: "database-tools",
+ },
+ {
+ slug: "query-library",
+ title: "Query Library",
+ description:
+ "Pre-built query templates for common tasks like user management and table maintenance, available as quick actions in the UI.",
+ status: "idea",
+ category: "database-tools",
+ },
+ {
+ slug: "user-privileges-viewer",
+ title: "User & Privileges Viewer",
+ description:
+ "Read-only view of database users and their permissions, to verify the backup user has sufficient privileges as a security audit helper.",
+ status: "idea",
+ category: "database-tools",
+ },
+ {
+ slug: "storage-trend-graph",
+ title: "Storage Trend Graph",
+ description:
+ "Historical database size over time derived from backup metadata, with growth-rate visualization for capacity planning.",
+ status: "idea",
+ category: "database-tools",
+ },
+ {
+ slug: "e2e-test-suite",
+ title: "End-to-End Test Suite",
+ description:
+ "Playwright/Cypress coverage for critical flows - login, create job, run backup, restore, verify - running in CI.",
+ status: "idea",
+ category: "developer-experience",
+ },
+ {
+ slug: "internationalization",
+ title: "Internationalization (i18n)",
+ description: "Multi-language UI support with room for community-contributed translations.",
+ status: "idea",
+ category: "developer-experience",
+ },
+ {
+ slug: "mobile-responsive-ui",
+ title: "Mobile Responsive UI",
+ description: "Optimized layouts for tablet and mobile, so backup status can be checked on the go.",
+ status: "idea",
+ category: "developer-experience",
+ },
+ {
+ slug: "dark-mode-refinement",
+ title: "Dark Mode Refinement",
+ description:
+ "A systematic pass over every component for dark mode consistency, plus a high-contrast accessibility mode.",
+ status: "idea",
+ category: "developer-experience",
+ },
+ {
+ slug: "oracle-support",
+ title: "Oracle Support",
+ description: "Oracle Database as a new supported source, using RMAN or Data Pump exports.",
+ status: "idea",
+ category: "backup-engine",
+ },
+ {
+ slug: "influxdb-support",
+ title: "InfluxDB Support",
+ description: "InfluxDB as a new supported source for backing up time-series data.",
+ status: "idea",
+ category: "backup-engine",
+ },
+];
+
+export interface ShippedItem {
+ slug: string;
+ title: string;
+ description: string;
+ version: string;
+ releaseDate: string;
+ changelogAnchor?: string;
+}
+
+export const SHIPPED_ITEMS: ShippedItem[] = [
+ {
+ slug: "valkey-support",
+ title: "Valkey Database Support",
+ description: "Valkey as a database source, using the same RDB backup mechanism as Redis.",
+ version: "v2.9.0",
+ releaseDate: "2026-07-04",
+ changelogAnchor: "v2-9-0-valkey-support-storage-alert-fix-and-multiple-improvements",
+ },
+ {
+ slug: "notification-templates",
+ title: "Notification Templates",
+ description:
+ "Reusable, per-channel, event-filtered notification templates replacing flat per-job notification config.",
+ version: "v2.8.0",
+ releaseDate: "2026-06-28",
+ changelogAnchor: "v2-8-0-notification-templates-per-job-event-filters-and-multiple-bug-fixes",
+ },
+ {
+ slug: "backup-integrity-verification",
+ title: "Backup Integrity Verification",
+ description:
+ "SHA-256/MD5 checksums, on-demand Verify Now, native checksum verification across adapters, and scheduled integrity checks.",
+ version: "v2.7.0",
+ releaseDate: "2026-06-14",
+ changelogAnchor: "v2-7-0-backup-integrity-verification-storage-explorer-caching-and-multiple-improvements",
+ },
+ {
+ slug: "vault-credential-profiles-extended",
+ title: "Vault Credential Profiles for Webhooks & OAuth",
+ description: "Credential vault profiles extended to WEBHOOK, OAUTH, and TOKEN types.",
+ version: "v2.6.0",
+ releaseDate: "2026-06-06",
+ changelogAnchor:
+ "v2-6-0-security-update-vault-credential-profiles-oauth-improvements-and-multiple-bug-fixes",
+ },
+ {
+ slug: "database-explorer-version-history",
+ title: "Database Explorer Version History",
+ description: "An engine-version timeline and change log per database source.",
+ version: "v2.5.0",
+ releaseDate: "2026-05-31",
+ changelogAnchor: "v2-5-0-version-history-general-improvements",
+ },
+ {
+ slug: "database-explorer-drill-down",
+ title: "Database Explorer",
+ description: "A table/data viewer with pagination, search, and schema inspection across all adapters.",
+ version: "v2.4.0",
+ releaseDate: "2026-05-25",
+ changelogAnchor: "v2-4-0-database-explorer-browser-drill-down-data-viewer-and-bug-fixes",
+ },
+ {
+ slug: "templates-system",
+ title: "Templates System",
+ description:
+ "A dedicated Templates page with reusable Retention Policies, Naming Templates, and Schedule Presets, assignable across jobs.",
+ version: "v2.2.0",
+ releaseDate: "2026-05-07",
+ changelogAnchor: "v2-2-0-templates-system-docker-image-update-and-bug-fixes",
+ },
+ {
+ slug: "credential-profile-system",
+ title: "Credential Profile System",
+ description:
+ "Centralized, encrypted Credential Profiles that adapters reference instead of storing secrets inline, plus one-click cloning for sources, destinations, and jobs.",
+ version: "v2.0.0",
+ releaseDate: "2026-05-03",
+ changelogAnchor: "v2-0-0-credential-profiles-naming-template-cloning-and-major-refactor",
+ },
+ {
+ slug: "live-history-redesign",
+ title: "Live History Redesign",
+ description: "Pipeline-stage tracking with real-time speed and progress for every backup and restore.",
+ version: "v1.4.0",
+ releaseDate: "2026-03-31",
+ changelogAnchor: "v1-4-0-live-history-redesign",
+ },
+ {
+ slug: "ssh-remote-execution",
+ title: "SSH Remote Execution",
+ description:
+ "Run backups directly on the remote database host via SSH, without a local database client.",
+ version: "v1.3.0",
+ releaseDate: "2026-03-29",
+ changelogAnchor: "v1-3-0-ssh-remote-execution",
+ },
+ {
+ slug: "https-by-default",
+ title: "HTTPS by Default & Certificate Management",
+ description: "Built-in HTTPS with auto-generated certificates by default, plus a Certificate Management UI.",
+ version: "v1.2.0",
+ releaseDate: "2026-03-25",
+ changelogAnchor:
+ "v1-2-0-https-by-default-certificate-management-per-adapter-health-notifications",
+ },
+ {
+ slug: "first-stable-release",
+ title: "First Stable Release",
+ description: "The first stable release, stabilizing the platform after the beta phase.",
+ version: "v1.0.0",
+ releaseDate: "2026-03-10",
+ changelogAnchor: "v1-0-0-first-stable-release",
+ },
+];
+
+export interface Milestone {
+ slug: string;
+ title: string;
+ description: string;
+ target: number;
+ unit: string;
+ liveSource?: "github-stars";
+ fallbackCurrent: number;
+}
+
+export const MILESTONES: Milestone[] = [
+ {
+ slug: "200-github-stars",
+ title: "200 GitHub Stars",
+ description: "Help DBackup reach its next community milestone.",
+ target: 200,
+ unit: "stars",
+ liveSource: "github-stars",
+ fallbackCurrent: 0,
+ },
+];
diff --git a/website/src/lib/utils.ts b/website/src/lib/utils.ts
new file mode 100644
index 00000000..a5ef1935
--- /dev/null
+++ b/website/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
diff --git a/website/tsconfig.json b/website/tsconfig.json
new file mode 100644
index 00000000..cf9c65d3
--- /dev/null
+++ b/website/tsconfig.json
@@ -0,0 +1,34 @@
+{
+ "compilerOptions": {
+ "target": "ES2017",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "bundler",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "react-jsx",
+ "incremental": true,
+ "plugins": [
+ {
+ "name": "next"
+ }
+ ],
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ },
+ "include": [
+ "next-env.d.ts",
+ "**/*.ts",
+ "**/*.tsx",
+ ".next/types/**/*.ts",
+ ".next/dev/types/**/*.ts",
+ "**/*.mts"
+ ],
+ "exclude": ["node_modules"]
+}
diff --git a/website/wrangler.jsonc b/website/wrangler.jsonc
new file mode 100644
index 00000000..2526624c
--- /dev/null
+++ b/website/wrangler.jsonc
@@ -0,0 +1,10 @@
+{
+ "$schema": "https://raw.githubusercontent.com/cloudflare/workers-sdk/main/packages/wrangler/config-schema.json",
+ "name": "dbackup-website",
+ "compatibility_date": "2026-01-31",
+ "workers_dev": true,
+ "preview_urls": false,
+ "assets": {
+ "directory": "./out"
+ }
+}