From 4958220c55839ca980d8fcd6a1585f39066af1ab Mon Sep 17 00:00:00 2001 From: Adrian Bonpin Date: Sun, 28 Jun 2026 22:49:13 +0800 Subject: [PATCH] feat: add /plugin docs page + TDP peripheral overhead Plugin docs page (/plugin): - Hero, feature grid, numbered install guide, screenshot gallery, install CTA - Navbar 'Plugin' link added - Screenshot slots with placeholders for 6 captures (flip HAS_SCREENSHOT once PNGs are dropped into /public/plugin/) - Structured data (SoftwareApplication) + breadcrumbs TDP fix: - Add 3W fixed overhead to CPU+GPU power for screen/fan/speakers/peripherals so reported TDP is closer to total system power draw --- apps/web/app/plugin/page-client.tsx | 457 ++++++++++++++++++++++++++++ apps/web/app/plugin/page.tsx | 67 ++++ apps/web/lib/routes.ts | 4 + plugins/decky-vault/main.py | 9 +- 4 files changed, 536 insertions(+), 1 deletion(-) create mode 100644 apps/web/app/plugin/page-client.tsx create mode 100644 apps/web/app/plugin/page.tsx diff --git a/apps/web/app/plugin/page-client.tsx b/apps/web/app/plugin/page-client.tsx new file mode 100644 index 0000000..2797e09 --- /dev/null +++ b/apps/web/app/plugin/page-client.tsx @@ -0,0 +1,457 @@ +"use client" + +import { useState } from "react" +import Link from "next/link" +import { motion } from "motion/react" +import { + QrCodeIcon, + GaugeIcon, + UploadIcon, + Gamepad2Icon, + ShieldCheckIcon, + ZapIcon, + DownloadIcon, + TerminalIcon, + ArrowRightIcon, + CopyIcon, + CheckIcon, + CodeIcon, +} from "lucide-react" + +// ── Screenshot slots ──────────────────────────────────────────── +// Each screenshot is a self-contained card. Until you drop real +// screenshots into /public/plugin/ and set showScreenshot=true, a +// styled placeholder describing the exact shot to capture is shown. +interface Shot { + id: string + title: string + caption: string + // filename the user should save the capture as (in /public/plugin/) + file: string +} + +const SCREENSHOTS: Shot[] = [ + { + id: "panel-overview", + title: "The plugin panel", + caption: + "The full DeckyVault panel in the Quick Access Menu — recording, account, and setup sections all in one scrollable view.", + file: "panel-overview.png", + }, + { + id: "pair-qr", + title: "Pair with your phone", + caption: + "Tap 'Pair with Phone' and a QR code appears. Scan it with your phone, confirm on deckyvault.xyz, and your account links automatically — no copy-pasting API keys.", + file: "pair-qr.png", + }, + { + id: "launch-option", + title: "Add the launch option", + caption: + "In Steam, right-click your game → Properties → Launch Options, and paste the MangoHud wrapper command. Copy it straight from the plugin.", + file: "launch-option.png", + }, + { + id: "recording", + title: "Record while you play", + caption: + "Once in-game, open the panel and hit Start Recording. A live timer tracks your session. Stop when you're done benchmarking.", + file: "recording.png", + }, + { + id: "session-form", + title: "Review & submit", + caption: + "After stopping, review the captured FPS, 1% lows, and power draw. Add notes, then upload straight to DeckyVault — or export to a file.", + file: "session-form.png", + }, + { + id: "entry-live", + title: "See it on DeckyVault", + caption: + "Your submission appears on the game's page instantly — FPS averages, frame-time consistency, and TDP, all tied to your account.", + file: "entry-live.png", + }, +] + +// Screenshot files that actually exist in /public/plugin/ — flip these +// to true once you've captured and saved the corresponding PNG. +const HAS_SCREENSHOT: Record = { + "panel-overview": false, + "pair-qr": false, + "launch-option": false, + recording: false, + "session-form": false, + "entry-live": false, +} + +const LAUNCH_COMMAND = "~/deckyvault-mangohud.sh %command%" + +const FEATURES = [ + { + icon: GaugeIcon, + title: "Capture real gameplay", + body: "Records FPS, frame times, and 1% lows with MangoHud — not synthetic benchmarks, but how the game actually runs on your Deck.", + }, + { + icon: ZapIcon, + title: "Power draw & TDP", + body: "Measures CPU + GPU power and adds peripheral overhead (screen, fan, speakers) for a realistic estimate of total system draw.", + }, + { + icon: QrCodeIcon, + title: "QR-code pairing", + body: "Link the plugin to your DeckyVault account by scanning a QR code with your phone. No manual key entry, no fiddly typing.", + }, + { + icon: UploadIcon, + title: "One-tap upload", + body: "Submit entries straight to DeckyVault from the Quick Access Menu. They appear on the game's page instantly, tied to your profile.", + }, + { + icon: Gamepad2Icon, + title: "Auto game detection", + body: "Detects the running game and its Steam App ID, reads the Proton version, and resolves the game name automatically.", + }, + { + icon: ShieldCheckIcon, + title: "Your key, your control", + body: "Pairing creates a real API key you can view and revoke anytime from Settings → API Keys. Nothing is stored without your say-so.", + }, +] + +const STEPS = [ + { + icon: DownloadIcon, + title: "Install Decky Loader", + body: ( + <> + If you haven't, install{" "} + + Decky Loader + {" "} + on your Steam Deck. Then install the DeckyVault plugin from the + Plugin Browser, or from the ZIP below. + + ), + }, + { + icon: QrCodeIcon, + title: "Pair your account", + body: ( + <> + Open the plugin in the Quick Access Menu → Account →{" "} + Pair with Phone. Scan the QR code with your phone + and confirm on deckyvault.xyz. Your API key is created and saved + automatically. + + ), + }, + { + icon: TerminalIcon, + title: "Set the launch option", + body: ( + <> + In MangoHud Setup, tap Write Config. + Then add the launch option to your game (Steam → right-click → + Properties → Launch Options): + + ), + code: LAUNCH_COMMAND, + }, + { + icon: GaugeIcon, + title: "Record & upload", + body: ( + <> + Launch the game, open the panel, and hit Start Recording{" "} + once you're in-game. When you're done, stop it, review the + stats, and upload to DeckyVault. + + ), + }, +] + +export function PluginPageClient() { + const [copied, setCopied] = useState(false) + + async function copyCommand() { + try { + await navigator.clipboard.writeText(LAUNCH_COMMAND) + setCopied(true) + setTimeout(() => setCopied(false), 2000) + } catch { + // ignore + } + } + + return ( +
+ {/* ── Hero ────────────────────────────────────────────── */} +
+
+
+ + + Decky Loader Plugin · v1.0.0 + + + + Benchmark your Steam Deck,{" "} + + straight from the Quick Access Menu + + + + + The DeckyVault plugin captures real-world FPS, frame times, + and power draw with MangoHud — then uploads them to + DeckyVault with a single tap. No spreadsheets, no manual + screenshots, no fuss. + + + + + + Download Plugin ZIP + + + Installation Guide + + + +
+
+ + {/* ── Features grid ────────────────────────────────────── */} +
+
+

+ Built for the Steam Deck +

+

+ Everything you need to capture and share performance data, + designed around the Deck's controller-friendly UI. +

+
+ {FEATURES.map((f, i) => ( + +
+ +
+

{f.title}

+

+ {f.body} +

+ + ))} +
+
+
+ + {/* ── How it works (steps) ─────────────────────────────── */} +
+
+

+ How it works +

+

+ Four steps from install to your first uploaded benchmark. +

+ +
+ {STEPS.map((step, i) => ( + +
+
+ {i + 1} +
+ {i < STEPS.length - 1 && ( +
+ )} +
+
+
+ +

{step.title}

+
+

+ {step.body} +

+ {step.code && ( +
+ + {step.code} + + +
+ )} +
+ + ))} +
+
+
+ + {/* ── Screenshots gallery ──────────────────────────────── */} +
+
+

+ See it in action +

+

+ A walkthrough of the plugin, from pairing to publishing. +

+ +
+ {SCREENSHOTS.map((shot, i) => ( + +
+ {HAS_SCREENSHOT[shot.id] ? ( + // eslint-disable-next-line @next/next/no-img-element + {shot.title} + ) : ( +
+ + + /plugin/{shot.file} + + + screenshot coming soon + +
+ )} +
+
+
+ + {i + 1} + + {shot.title} +
+

+ {shot.caption} +

+
+ + ))} +
+
+
+ + {/* ── Install CTA ──────────────────────────────────────── */} +
+
+
+ +
+

+ Ready to start benchmarking? +

+

+ Download the plugin ZIP and install it via Decky Loader's{" "} + Install Plugin from ZIP File option, or grab it from + URL. +

+ +
+
+
+ ) +} \ No newline at end of file diff --git a/apps/web/app/plugin/page.tsx b/apps/web/app/plugin/page.tsx new file mode 100644 index 0000000..9892ca4 --- /dev/null +++ b/apps/web/app/plugin/page.tsx @@ -0,0 +1,67 @@ +import type { Metadata } from "next" +import { buildBreadcrumbList } from "@/lib/utils/seo" +import { PluginPageClient } from "./page-client" + +export const dynamic = "force-dynamic" + +export const metadata: Metadata = { + title: "DeckyVault Plugin — Record & Upload Steam Deck Benchmarks", + description: + "Install the DeckyVault Decky Loader plugin to capture FPS, frame times, and power draw with MangoHud, then upload performance entries straight to DeckyVault from your Steam Deck.", + keywords: [ + "decky loader plugin", + "steam deck plugin", + "mangohud", + "steam deck benchmark", + "performance logging", + "deckyvault", + ], + alternates: { canonical: "https://deckyvault.xyz/plugin" }, + openGraph: { + title: "DeckyVault Plugin — Record & Upload Steam Deck Benchmarks", + description: + "Capture FPS and power draw with MangoHud, then upload to DeckyVault straight from your Steam Deck.", + url: "https://deckyvault.xyz/plugin", + siteName: "DeckyVault", + type: "website", + }, + twitter: { + card: "summary_large_image", + title: "DeckyVault Plugin", + description: + "Record Steam Deck performance and upload to DeckyVault with the Decky Loader plugin.", + }, +} + +const jsonLd = { + "@context": "https://schema.org", + "@type": "SoftwareApplication", + name: "DeckyVault Plugin", + applicationCategory: "UtilitiesApplication", + operatingSystem: "SteamOS", + offers: { "@type": "Offer", price: "0", priceCurrency: "USD" }, + description: + "A Decky Loader plugin that records Steam Deck performance metrics with MangoHud and uploads them to DeckyVault.", + url: "https://deckyvault.xyz/plugin", +} + +const breadcrumbs = buildBreadcrumbList([ + { name: "Home", url: "https://deckyvault.xyz/" }, + { name: "Plugin", url: "https://deckyvault.xyz/plugin" }, +]) + +export default function PluginPage() { + return ( + <> +