+
,
+ {
+ width: 1200,
+ height: 630,
+ fonts: [
+ { name: "Inter", data: fontRegular, weight: 400, style: "normal" },
+ { name: "Inter", data: fontRegular, weight: 500, style: "normal" },
+ { name: "Inter", data: fontBold, weight: 700, style: "normal" },
+ ],
+ },
+ );
+
+ const resvg = new Resvg(svg, { fitTo: { mode: "width", value: 1200 } });
+ const pngBuffer = resvg.render().asPng();
+
+ writeFileSync(join(rootDir, "public/og-image.png"), pngBuffer);
+ console.log("Generated public/og-image.png");
+}
+
+generateOgImage().catch(console.error);
diff --git a/website/src/App.tsx b/website/src/App.tsx
new file mode 100644
index 0000000..a4b5586
--- /dev/null
+++ b/website/src/App.tsx
@@ -0,0 +1,255 @@
+import { useState, useEffect } from "react";
+import icon from "/icon.svg";
+import { Icon } from "./components/Icon";
+import { screenshots } from "./data/screenshots";
+import { features } from "./data/features";
+import { heroButtons } from "./data/heroButtons";
+import { showcases } from "./data/showcases";
+import { installOptions } from "./data/installOptions";
+import { footerLinks } from "./data/footerLinks";
+import { DEV_URL } from "./data/urls";
+
+function App() {
+ const [lightboxSrc, setLightboxSrc] = useState
+ 
+
+ Switchyard
+
+
+
+ A rules-based browser launcher for Linux.
+
+
+ Download Now
+
+
+
+
+
+
+ 
+
+ + Switchyard +
++ A rules-based browser launcher for Linux. +
++ Work links in Chrome. Personal links in Firefox. +
+
+ 100% Free & Open Source
+
+
+ {heroButtons.map((btn) => (
+
+ {btn.icon && (
+
+
+ ![{screenshots[0].alt}]({screenshots[0].src})
openLightbox(screenshots[0].src)}
+ role="button"
+ tabIndex={0}
+ onKeyDown={(e) =>
+ e.key === "Enter" && openLightbox(screenshots[0].src)
+ }
+ className="w-full max-w-[280px] md:max-w-[480px] h-auto rounded-xl md:rounded-2xl shadow-lg border border-border cursor-pointer transition-transform duration-300 hover:scale-[1.02] focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2 mx-auto"
+ />
+
+
+
+ + Key Features +
+
+ {features.map((feature) => (
+
+
+
+ ))}
+
+
+ + {feature.title} +
++ {feature.description} +
+*]:[direction:ltr]"
+ : ""
+ }`}
+ >
+ {showcase.screenshot && (
+ 
openLightbox(showcase.screenshot!.src)}
+ role="button"
+ tabIndex={0}
+ onKeyDown={(e) =>
+ e.key === "Enter" && openLightbox(showcase.screenshot!.src)
+ }
+ className="w-full max-w-[600px] h-auto rounded-xl md:rounded-2xl border border-border shadow-lg cursor-pointer transition-transform duration-300 hover:scale-[1.02] focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2 mx-auto order-first md:order-none"
+ />
+ )}
+ {showcase.code && (
+
+
+
+ {showcase.code}
+
+
+ )}
+
+
+ + {showcase.title} +
++ {showcase.description} +
+
+
+ + Get Started +
+
+ {installOptions.map((option) => (
+
+
+
+ ))}
+
+
+ + {option.title} +
++ {option.description} +
+ {"command" in option ? ( +
+ {option.command}
+
+ ) : (
+
+ {option.linkText}
+
+ )}
+ setLightboxSrc(null)}
+ role="dialog"
+ aria-modal="true"
+ aria-label="Image preview"
+ >
+ 
+
+ )}
+
+ );
+}
+
+export default App;
diff --git a/website/src/components/Icon.tsx b/website/src/components/Icon.tsx
new file mode 100644
index 0000000..4dcc0a6
--- /dev/null
+++ b/website/src/components/Icon.tsx
@@ -0,0 +1,56 @@
+const icons = {
+ github: (
+