danvics/zerobyte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

feat: og

Browse source
This commit is contained in:
Nicolas Meienberger 2026-04-15 22:22:12 +02:00
parent 8a5ec9a160
commit d0d2ac597b
No known key found for this signature in database
4 changed files with 61 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
docs/public/images/og.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 890 KiB

BIN
docs/public/images/screenshot.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5 MiB

After

Width:  |  Height:  |  Size: 1.4 MiB

13
docs/src/components/LandingPage.tsx
View file

@ -194,14 +194,14 @@ const faqs = [
function BrowserMockup() {
return (
<div className="w-full overflow-hidden rounded-lg border border-border bg-card shadow-2xl">
<div className="relative flex items-center border-b border-border bg-secondary/80 px-4 py-2">
<div className="flex gap-1.5">
<div className="relative flex items-center gap-3 border-b border-border bg-secondary/80 px-4 py-2">
<div className="flex shrink-0 gap-1.5">
<div className="h-3 w-3 rounded-full bg-red-500" />
<div className="h-3 w-3 rounded-full bg-yellow-500" />
<div className="h-3 w-3 rounded-full bg-green-500" />
</div>
<div className="pointer-events-none absolute inset-0 flex items-center justify-center px-10 sm:px-20">
<div className="w-full max-w-md rounded bg-background/80 px-3 py-0.5 text-center text-xs text-muted-foreground">
<div className="min-w-0 flex-1 sm:pointer-events-none sm:absolute sm:inset-0 sm:flex sm:items-center sm:justify-center sm:px-20">
<div className="w-full rounded bg-background/80 px-3 py-0.5 text-center text-xs text-muted-foreground sm:max-w-md">
localhost:4096
</div>
</div>
@ -353,7 +353,10 @@ export default function LandingPage() {
<div className="absolute left-6 top-0 hidden h-full w-px bg-border lg:left-1/2 lg:block" />
<div className="space-y-8 lg:space-y-12">
{steps.map((step, index) => (
<div key={step.number} className="relative flex flex-col gap-6 lg:flex-row lg:items-center lg:gap-12">
<div
key={step.number}
className="relative flex flex-col gap-6 pl-16 lg:flex-row lg:items-center lg:gap-12 lg:pl-0"
>
<div className={`lg:w-1/2 ${index % 2 === 0 ? "lg:pr-12 lg:text-right" : "lg:order-2 lg:pl-12"}`}>
<h3 className="text-lg font-semibold text-foreground">{step.title}</h3>
<p className="mt-2 text-muted-foreground">{step.description}</p>

53
docs/src/routes/__root.tsx
View file

@ -5,6 +5,9 @@ import Header from "../components/Header";
import appCss from "../styles.css?url";
const siteUrl = "https://zerobyte.app";
const ogImageUrl = `${siteUrl}/images/og.png`;
export const Route = createRootRoute({
head: () => ({
meta: [
@ -23,6 +26,56 @@ export const Route = createRootRoute({
content:
"Zerobyte is a web control plane for Restic backups with scheduling, encrypted repositories, monitoring, and restore workflows.",
},
{
property: "og:title",
content: "Zerobyte | Backup automation for Restic",
},
{
property: "og:description",
content:
"Zerobyte is a web control plane for Restic backups with scheduling, encrypted repositories, monitoring, and restore workflows.",
},
{
property: "og:type",
content: "website",
},
{
property: "og:url",
content: siteUrl,
},
{
property: "og:image",
content: ogImageUrl,
},
{
property: "og:image:width",
content: "2048",
},
{
property: "og:image:height",
content: "1152",
},
{
property: "og:image:alt",
content: "Zerobyte backups dashboard preview",
},
{
name: "twitter:card",
content: "summary_large_image",
},
{
name: "twitter:title",
content: "Zerobyte | Backup automation for Restic",
},
{
name: "twitter:description",
content:
"Zerobyte is a web control plane for Restic backups with scheduling, encrypted repositories, monitoring, and restore workflows.",
},
{
name: "twitter:image",
content: ogImageUrl,
},
],
links: [
{