chore: format landing docs

Author: DjDeveloperr

docs/.vitepress/theme/SimDeckHome.vue

@@ -10,9 +10,18 @@ function updateNavState() {
   const bgCameraY = Math.min(scrollY * 0.58, window.innerHeight * 0.7);
   const bgOpacity = Math.max(1 - scrollY / (window.innerHeight * 0.95), 0);
 
-  document.documentElement.style.setProperty("--sd-nav-progress", progress.toFixed(3));
-  document.documentElement.style.setProperty("--sd-hero-bg-camera-y", `${(-bgCameraY).toFixed(1)}px`);
-  document.documentElement.style.setProperty("--sd-hero-bg-opacity", bgOpacity.toFixed(3));
+  document.documentElement.style.setProperty(
+    "--sd-nav-progress",
+    progress.toFixed(3),
+  );
+  document.documentElement.style.setProperty(
+    "--sd-hero-bg-camera-y",
+    `${(-bgCameraY).toFixed(1)}px`,
+  );
+  document.documentElement.style.setProperty(
+    "--sd-hero-bg-opacity",
+    bgOpacity.toFixed(3),
+  );
   document.documentElement.classList.toggle("sd-nav-scrolled", progress > 0.02);
 }
 
@@ -24,7 +33,10 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   window.removeEventListener("scroll", updateNavState);
-  document.documentElement.classList.remove("sd-home-active", "sd-nav-scrolled");
+  document.documentElement.classList.remove(
+    "sd-home-active",
+    "sd-nav-scrolled",
+  );
   document.documentElement.style.removeProperty("--sd-nav-progress");
   document.documentElement.style.removeProperty("--sd-hero-bg-camera-y");
   document.documentElement.style.removeProperty("--sd-hero-bg-opacity");
@@ -41,7 +53,11 @@ async function copyCommand() {
     textarea.select();
     const copiedViaSelection = document.execCommand("copy");
     textarea.remove();
-    if (!copiedViaSelection && typeof navigator !== "undefined" && navigator.clipboard) {
+    if (
+      !copiedViaSelection &&
+      typeof navigator !== "undefined" &&
+      navigator.clipboard
+    ) {
       await navigator.clipboard.writeText(command);
     }
   } catch {
@@ -61,19 +77,27 @@ async function copyCommand() {
         <h1 id="simdeck-title">SimDeck</h1>
         <p>Simulator Superpowers for you and your fleet of agents</p>
         <div class="sd-command-wrap" aria-label="Install and start SimDeck">
-          <pre class="sd-command"><code><span>npm i -g simdeck@latest</span><span>simdeck</span></code></pre>
+          <pre
+            class="sd-command"
+          ><code><span>npm i -g simdeck@latest</span><span>simdeck</span></code></pre>
           <button
             class="sd-copy"
             type="button"
-            :aria-label="copied ? 'Copied SimDeck install command' : 'Copy SimDeck install command'"
+            :aria-label="
+              copied
+                ? 'Copied SimDeck install command'
+                : 'Copy SimDeck install command'
+            "
             :data-copied="copied ? 'true' : 'false'"
             @click="copyCommand"
           >
             <svg viewBox="0 0 24 24" aria-hidden="true">
               <path v-if="copied" d="m5 12 4 4 10-10" />
               <template v-else>
                 <path d="M9 9h10v10H9z" />
-                <path d="M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1" />
+                <path
+                  d="M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1"
+                />
               </template>
             </svg>
           </button>
@@ -91,8 +115,8 @@ async function copyCommand() {
     <section class="sd-story" aria-labelledby="simdeck-story">
       <div class="sd-story-head sd-reveal">
         <h2 id="simdeck-story">
-          SimDeck does not get in the way. It makes the way for agents to work without dividing your
-          attention.
+          SimDeck does not get in the way. It makes the way for agents to work
+          without dividing your attention.
         </h2>
       </div>
 
@@ -102,9 +126,11 @@ async function copyCommand() {
           <div class="sd-moment-copy">
             <h3>Live Simulator, where your work already happens</h3>
             <p>
-              Open Simulator side by side in your favorite IDE or agent orchestrator. Supported in VS Code,
-              Codex, Cursor, Claude Code, and more. Simulators run headlessly in the background for agents to
-              operate on while you stay focused on what matters in the current context.
+              Open Simulator side by side in your favorite IDE or agent
+              orchestrator. Supported in VS Code, Codex, Cursor, Claude Code,
+              and more. Simulators run headlessly in the background for agents
+              to operate on while you stay focused on what matters in the
+              current context.
             </p>
           </div>
           <figure class="sd-shot sd-shot-image sd-shot-ide">
@@ -120,9 +146,9 @@ async function copyCommand() {
           <div class="sd-moment-copy">
             <h3>Pull request previews for mobile apps</h3>
             <p>
-              GitHub Actions can build the app, boot a simulator, and stream the session back through
-              SimDeck. Review a mobile PR like a web preview: open it, tap around, and merge with actual
-              confidence.
+              GitHub Actions can build the app, boot a simulator, and stream the
+              session back through SimDeck. Review a mobile PR like a web
+              preview: open it, tap around, and merge with actual confidence.
             </p>
           </div>
           <figure class="sd-shot sd-shot-image sd-shot-pr-image">
@@ -138,8 +164,9 @@ async function copyCommand() {
           <div class="sd-moment-copy">
             <h3>Remote simulator access without the screen-share lag</h3>
             <p>
-              WebRTC carries the live stream to browsers, teammates, and SimDeck Studio on iOS. Pair
-              once, then drive the simulator from wherever the work is happening.
+              WebRTC carries the live stream to browsers, teammates, and SimDeck
+              Studio on iOS. Pair once, then drive the simulator from wherever
+              the work is happening.
             </p>
           </div>
           <figure class="sd-shot sd-shot-remote-card">
@@ -155,11 +182,15 @@ async function copyCommand() {
           <div class="sd-moment-copy">
             <h3>A CLI your agents can actually trust</h3>
             <p>
-              Boot, install, launch, tap, type, describe, screenshot, record, and assert. Stable commands
-              and clear JSON errors turn simulators into end-to-end test rigs for every agent in your fleet.
+              Boot, install, launch, tap, type, describe, screenshot, record,
+              and assert. Stable commands and clear JSON errors turn simulators
+              into end-to-end test rigs for every agent in your fleet.
             </p>
           </div>
-          <div class="sd-shot sd-shot-cli" aria-label="Screenshot placeholder for SimDeck CLI automation">
+          <div
+            class="sd-shot sd-shot-cli"
+            aria-label="Screenshot placeholder for SimDeck CLI automation"
+          >
             <div class="sd-cli-lines" aria-hidden="true">
               <span>$ simdeck boot "iPhone 17"</span>
               <span>$ simdeck install app.app</span>
@@ -175,8 +206,9 @@ async function copyCommand() {
       <div>
         <h2>Don't switch context. Give the simulator a URL.</h2>
         <p>
-          Run it headlessly on your Mac, stream it into your editor or pull request, and let agents tap,
-          type, inspect, screenshot, and verify without taking over your screen.
+          Run it headlessly on your Mac, stream it into your editor or pull
+          request, and let agents tap, type, inspect, screenshot, and verify
+          without taking over your screen.
         </p>
       </div>
       <a href="/guide/quick-start">Start with the quick start</a>

docs/.vitepress/theme/custom.css

@@ -15,10 +15,11 @@
   --sd-shadow: 0 32px 110px rgba(0, 0, 0, 0.12);
 
   --vp-font-family-base:
-    "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-    sans-serif;
+    "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", sans-serif;
   --vp-font-family-mono:
-    "SFMono-Regular", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+    "SFMono-Regular", ui-monospace, "SF Mono", Menlo, Monaco, Consolas,
+    monospace;
   --vp-c-bg: var(--sd-bg);
   --vp-c-bg-alt: var(--sd-bg-soft);
   --vp-c-bg-soft: var(--sd-bg-soft);
@@ -122,13 +123,23 @@ html:not(.sd-home-active) .VPNavBar.screen-open {
   right: 0;
   left: 0;
   z-index: 50;
-  border-bottom-color: rgba(128, 128, 128, calc(var(--sd-nav-progress, 0) * 0.11));
+  border-bottom-color: rgba(
+    128,
+    128,
+    128,
+    calc(var(--sd-nav-progress, 0) * 0.11)
+  );
   background: rgba(255, 255, 255, calc(var(--sd-nav-progress, 0) * 0.76));
   backdrop-filter: blur(calc(var(--sd-nav-progress, 0) * 18px)) saturate(140%);
 }
 
 .dark.sd-home-active .VPNav {
-  border-bottom-color: rgba(128, 128, 128, calc(var(--sd-nav-progress, 0) * 0.11));
+  border-bottom-color: rgba(
+    128,
+    128,
+    128,
+    calc(var(--sd-nav-progress, 0) * 0.11)
+  );
   background: rgba(0, 0, 0, calc(var(--sd-nav-progress, 0) * 0.74));
 }
 
@@ -144,7 +155,12 @@ html:not(.sd-home-active) .VPNavBar.screen-open {
 .sd-home-active .VPNav .divider,
 .sd-home-active .VPNav .divider-line {
   border-color: transparent !important;
-  background-color: rgba(128, 128, 128, calc(var(--sd-nav-progress, 0) * 0.11)) !important;
+  background-color: rgba(
+    128,
+    128,
+    128,
+    calc(var(--sd-nav-progress, 0) * 0.11)
+  ) !important;
 }
 
 .sd-home-active:not(.sd-nav-scrolled) .VPNav {
@@ -451,7 +467,13 @@ html:not(.sd-home-active) .VPNavBar.screen-open {
   bottom: 8px;
   left: 26px;
   width: 1px;
-  background: linear-gradient(180deg, transparent, var(--sd-line-strong) 8%, var(--sd-line-strong) 92%, transparent);
+  background: linear-gradient(
+    180deg,
+    transparent,
+    var(--sd-line-strong) 8%,
+    var(--sd-line-strong) 92%,
+    transparent
+  );
 }
 
 .sd-moment {
@@ -513,7 +535,11 @@ html:not(.sd-home-active) .VPNavBar.screen-open {
   border: 1px solid var(--sd-line);
   border-radius: var(--sd-radius);
   background:
-    linear-gradient(180deg, color-mix(in srgb, var(--sd-panel-subtle) 74%, transparent), color-mix(in srgb, var(--sd-panel) 90%, transparent)),
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--sd-panel-subtle) 74%, transparent),
+      color-mix(in srgb, var(--sd-panel) 90%, transparent)
+    ),
     var(--sd-panel);
   overflow: hidden;
   transition:
@@ -524,8 +550,16 @@ html:not(.sd-home-active) .VPNavBar.screen-open {
 
 .dark .sd-shot {
   background:
-    radial-gradient(circle at 72% 18%, rgba(50, 145, 255, 0.14), transparent 32%),
-    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
+    radial-gradient(
+      circle at 72% 18%,
+      rgba(50, 145, 255, 0.14),
+      transparent 32%
+    ),
+    linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.06),
+      rgba(255, 255, 255, 0.02)
+    ),
     #050505;
 }
 
@@ -570,15 +604,31 @@ html:not(.sd-home-active) .VPNavBar.screen-open {
   place-items: center;
   padding: 28px;
   background:
-    radial-gradient(circle at 50% 24%, rgba(0, 112, 243, 0.12), transparent 42%),
-    linear-gradient(180deg, color-mix(in srgb, var(--sd-panel-subtle) 80%, transparent), var(--sd-panel));
+    radial-gradient(
+      circle at 50% 24%,
+      rgba(0, 112, 243, 0.12),
+      transparent 42%
+    ),
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--sd-panel-subtle) 80%, transparent),
+      var(--sd-panel)
+    );
   box-shadow: 0 22px 80px rgba(0, 0, 0, 0.16);
 }
 
 .dark .sd-shot-remote-card {
   background:
-    radial-gradient(circle at 50% 24%, rgba(50, 145, 255, 0.22), transparent 42%),
-    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
+    radial-gradient(
+      circle at 50% 24%,
+      rgba(50, 145, 255, 0.22),
+      transparent 42%
+    ),
+    linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.055),
+      rgba(255, 255, 255, 0.018)
+    ),
     #050505;
   box-shadow: 0 24px 94px rgba(0, 0, 0, 0.48);
 }
@@ -824,7 +874,12 @@ html:not(.sd-home-active) .VPNavBar.screen-open {
   border: 7px solid var(--sd-text);
   border-radius: 26px;
   background:
-    linear-gradient(180deg, transparent 0 38%, var(--sd-blue-soft) 38% 40%, transparent 40%),
+    linear-gradient(
+      180deg,
+      transparent 0 38%,
+      var(--sd-blue-soft) 38% 40%,
+      transparent 40%
+    ),
     radial-gradient(circle at 50% 18%, var(--sd-line-strong), transparent 26%),
     var(--sd-bg);
 }