feat: relayfile-landing-page

Author: khaliqgant

site/public/diagram-agents.svg

@@ -11,15 +11,18 @@ interface Props {
 
 const { snippets } = Astro.props;
 
+const escapeHtml = (code: string) =>
+  code.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+
 const highlightBash = (code: string) =>
-  code
+  escapeHtml(code)
     .replaceAll(/(curl|jq|TOKEN|relayfile)/g, '<span class="text-cyan-300">$1</span>')
     .replaceAll(/(-X|-H|-d|-s)/g, '<span class="text-blue-300">$1</span>')
     .replaceAll(/("https:[^"]+")/g, '<span class="text-emerald-300">$1</span>')
     .replaceAll(/("[^"]*")/g, '<span class="text-emerald-300">$1</span>');
 
 const highlightJson = (code: string) =>
-  code
+  escapeHtml(code)
     .replaceAll(/"([^"]+)"(?=\s*:)/g, '<span class="text-cyan-300">"$1"</span>')
     .replaceAll(/:\s*"([^"]*)"/g, ': <span class="text-emerald-300">"$1"</span>')
     .replaceAll(/:\s*(\d+)/g, ': <span class="text-blue-300">$1</span>');

site/public/diagram-architecture.svg

@@ -1,17 +1,25 @@
 ---
 interface Props {
+  overview: string[];
   steps: string[];
   properties: string[];
   stack: string[];
 }
 
-const { steps, properties, stack } = Astro.props;
+const { overview, steps, properties, stack } = Astro.props;
 ---
 
 <section class="grid gap-8 lg:grid-cols-[1fr_1.05fr]">
   <div class="section-shell p-8 sm:p-10">
     <p class="section-heading">How It Works</p>
     <h2 class="section-title">One workspace, one canonical state</h2>
+    <div class="content-prose mt-6">
+      {
+        overview.map((paragraph) => (
+          <p>{paragraph}</p>
+        ))
+      }
+    </div>
     <div class="mt-8 rounded-3xl border border-cyan-400/20 bg-zinc-950/80 p-6">
       <div class="grid gap-4 text-center text-sm text-zinc-300 sm:grid-cols-3">
         <div class="rounded-2xl border border-zinc-800 bg-zinc-900/80 p-4">Developer laptop<br /><span class="text-cyan-400">relayfile mount</span></div>