Blame · landing.tsx

4bb999b	1	"use client";
4bb999b	2
4bb999b	3	import { useEffect, useRef, useState } from "react";
4bb999b	4	import { GroveLogo } from "@/app/components/grove-logo";
44863ab	5	import { useTheme } from "@/lib/theme";
4bb999b	6
4bb999b	7	export function LandingPage() {
4bb999b	8	const [islDomain, setIslDomain] = useState("");
44863ab	9	const { theme } = useTheme();
44863ab	10	const islRef = useRef<HTMLIFrameElement>(null);
4bb999b	11
4bb999b	12	useEffect(() => {
4bb999b	13	const host = window.location.hostname;
4bb999b	14	if (host !== "localhost" && !host.match(/^\d/)) {
7e5aa77	15	setIslDomain("https://isl.grove.host");
4bb999b	16	}
4bb999b	17	}, []);
4bb999b	18
44863ab	19	// Send theme changes to ISL iframe via postMessage
44863ab	20	useEffect(() => {
44863ab	21	if (islRef.current?.contentWindow) {
44863ab	22	islRef.current.contentWindow.postMessage({ type: "theme", value: theme }, "*");
44863ab	23	}
44863ab	24	}, [theme]);
44863ab	25
4bb999b	26	return (
d6f1620	27	<div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
44863ab	28	{/* Hero + Terminal + Features */}
44863ab	29	<div style={{ maxWidth: "800px", margin: "0 auto", padding: "60px 24px 0", width: "100%" }}>
44863ab	30
4bb999b	31	{/* Hero */}
4bb999b	32	<div style={{ textAlign: "center", marginBottom: "64px" }}>
4bb999b	33	<div style={{ display: "inline-block", marginBottom: "24px" }}>
4bb999b	34	<GroveLogo size={64} />
4bb999b	35	</div>
4bb999b	36	<h1
4bb999b	37	style={{
4bb999b	38	fontSize: "2rem",
4bb999b	39	fontWeight: 400,
4bb999b	40	color: "var(--text-primary)",
4bb999b	41	marginBottom: "12px",
4bb999b	42	}}
4bb999b	43	>
4bb999b	44	Source control, self-hosted
4bb999b	45	</h1>
4bb999b	46	<p
4bb999b	47	style={{
4bb999b	48	fontSize: "1rem",
4bb999b	49	color: "var(--text-muted)",
4bb999b	50	maxWidth: "480px",
4bb999b	51	margin: "0 auto 32px",
4bb999b	52	lineHeight: 1.6,
4bb999b	53	}}
4bb999b	54	>
4bb999b	55	Grove is a complete code hosting platform built on Sapling SCM and Mononoke.
4bb999b	56	Stacked diffs, interactive smartlog, CI pipelines — on your own infrastructure.
4bb999b	57	</p>
4bb999b	58	<a
4bb999b	59	href="/login"
4bb999b	60	style={{
4bb999b	61	display: "inline-block",
4bb999b	62	padding: "10px 24px",
4bb999b	63	backgroundColor: "var(--accent)",
4bb999b	64	color: "var(--accent-text)",
4bb999b	65	fontSize: "0.875rem",
4bb999b	66	textDecoration: "none",
4bb999b	67	}}
4bb999b	68	>
4bb999b	69	Get started
4bb999b	70	</a>
4bb999b	71	</div>
4bb999b	72
44863ab	73	</div>{/* end centered wrapper */}
44863ab	74
44863ab	75	{/* ISL — fills remaining viewport */}
44863ab	76	{islDomain && (
d6f1620	77	<section
d6f1620	78	style={{
d6f1620	79	padding: "24px",
d6f1620	80	}}
d6f1620	81	>
d6f1620	82	<iframe
d6f1620	83	ref={islRef}
d6f1620	84	src={`${islDomain}?theme=${theme}`}
44863ab	85	style={{
d6f1620	86	width: "100%",
d6f1620	87	height: "calc(100vh - 3.5rem)",
d6f1620	88	border: "1px solid var(--border-subtle)",
d6f1620	89	display: "block",
d6f1620	90	}}
d6f1620	91	title="Interactive Smartlog"
d6f1620	92	onLoad={() => {
d6f1620	93	islRef.current?.contentWindow?.postMessage({ type: "theme", value: theme }, "*");
44863ab	94	}}
d6f1620	95	/>
44863ab	96	</section>
44863ab	97	)}
4bb999b	98	</div>
4bb999b	99	);
4bb999b	100	}