From f451e73aa87701dbad26feec0f65eb7230ee348b Mon Sep 17 00:00:00 2001
From: David Cramer <dcramer@gmail.com>
Date: Wed, 22 Jan 2025 11:00:40 -0800
Subject: [PATCH 1/2] Move getting started actions above hero

---
 .../src/components/DownloadButton.astro       | 28 ++++++++-----------
 packages/website/src/components/Hero.astro    | 18 ++++--------
 2 files changed, 17 insertions(+), 29 deletions(-)

diff --git a/packages/website/src/components/DownloadButton.astro b/packages/website/src/components/DownloadButton.astro
index a9889c53..bd85c9ed 100644
--- a/packages/website/src/components/DownloadButton.astro
+++ b/packages/website/src/components/DownloadButton.astro
@@ -46,22 +46,18 @@ const links = assets.map(asset => {
   }
 </style>
 
-<div class="p-4">
-  <div class="group relative text-center">
-    or download for<br />
-    {
-      links.map(link => (
-        <a
-          href={link.url}
-          class="downloadButton inline-flex items-center justify-center px-2 py-2 mx-2 text-base text-s text-white bg-gray-800 border border-transparent rounded-md hover:bg-gray-700 no-underline"
-        >
-          {link.name}
-        </a>
-      ))
-    }
-    <br />
-    <span class="text-xs text-gray-400">latest version: {version}</span>
-  </div>
+<div class="group relative text-center text-sm">
+  <div>{
+    links.map(link => (
+      <a
+        href={link.url}
+        class="downloadButton inline-flex items-center justify-center px-2 py-2 mx-2 text-base text-s text-white bg-gray-800 border border-transparent rounded-md hover:bg-gray-700 no-underline"
+      >
+        {link.name}
+      </a>
+    ))
+  }</div>
+  <div class="text-xs text-gray-400 mt-2">latest version: {version}</div>
 </div>
 
 <script>
diff --git a/packages/website/src/components/Hero.astro b/packages/website/src/components/Hero.astro
index 90b21b52..0b657588 100644
--- a/packages/website/src/components/Hero.astro
+++ b/packages/website/src/components/Hero.astro
@@ -63,7 +63,6 @@ import DownloadButton from './DownloadButton.astro';
     text-align: center;
     max-width: 80%;
     opacity: 0;
-    margin-bottom: 3rem;
     animation: fade-in 1s ease-in-out 1s forwards;
   }
 
@@ -75,14 +74,6 @@ import DownloadButton from './DownloadButton.astro';
     animation: fade-in 1s ease-in-out 1s forwards;
   }
 
-  .actions {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-top: 1rem;
-    gap: 2rem;
-  }
-
   @media (min-width: 768px) {
     .sub-heading {
       letter-spacing: 3px;
@@ -92,10 +83,11 @@ import DownloadButton from './DownloadButton.astro';
 
 <div class="wrapper">
   <h1 class="neon-header">Sentry for Development</h1>
-  <div class="sub-heading">Spotlight is a highly customizable debug tool embedded in your web app.</div>
-  <img src="/images/trace.png" alt="Spotlight Hero" class="hero-image" />
-  <p class="actions">
+  <div class="sub-heading mb-4">Spotlight is a highly customizable debug tool embedded in your web app.</div>
+  <div class="flex flex-col items-center justify-center gap-2 py-4 mb-4">
     <ButtonLink href="/about/">Get Started</ButtonLink>
+    <div class="text-xs uppercase">or download for</div>
     <DownloadButton>Download for Mac</DownloadButton>
-  </p>
+  </div>
+  <img src="/images/trace.png" alt="Spotlight Hero" class="hero-image" />
 </div>

From b4c57a03af5e9c0b6df931d9b35c43a34cef61fe Mon Sep 17 00:00:00 2001
From: David Cramer <dcramer@gmail.com>
Date: Wed, 22 Jan 2025 11:01:01 -0800
Subject: [PATCH 2/2] Add docker-compose instructions (fixes GH-653)

---
 .../website/src/content/docs/sidecar/docker.mdx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/website/src/content/docs/sidecar/docker.mdx b/packages/website/src/content/docs/sidecar/docker.mdx
index ce1c04e0..2953f9d0 100644
--- a/packages/website/src/content/docs/sidecar/docker.mdx
+++ b/packages/website/src/content/docs/sidecar/docker.mdx
@@ -8,7 +8,7 @@ import { Tabs, TabItem } from '@astrojs/starlight/components';
 
 We provide a Docker container which runs the Sidecar (including the overlay).
 
-```
+```shell
 docker run --rm \
     --pull always \
     --name spotlight \
@@ -16,3 +16,18 @@ docker run --rm \
     -p 8969:8969/tcp \
     ghcr.io/getsentry/spotlight:latest
 ```
+
+If you're already using Docker Compose, we recommend adding Spotlight to your `docker-compose.yml` file:
+
+
+```yaml
+version: "3.7"
+services:
+  # ...
+  spotlight:
+    image: ghcr.io/getsentry/spotlight:latest
+    restart: on-failure
+    pull_policy: always
+    ports:
+      - "8969:8969"
+```