Website: Add default OG image for link previews

- Add dark-mode app screenshot as `og-default.png` (1200×630)
- Default `ogImage` prop to `/og-default.png` in `Layout.astro` so all non-blog pages get an OG image
- Previously, pages without an explicit `ogImage` had no `og:image` tag, causing social platforms to scrape random hero layer images

Author: vdavid

apps/website/public/og-default.png

@@ -25,7 +25,8 @@ const shipped = [
         slug: 'keyboard-first',
         icon: '/icons/keyboard.svg',
         title: 'Keyboard-first',
-        description: 'Kb-first navigate, select, copy, move, rename; menus, tabs, settings; command palette. But works with a mouse, too.',
+        description:
+            'Kb-first navigate, select, copy, move, rename; menus, tabs, settings; command palette. But works with a mouse, too.',
     },
 ]
 
@@ -34,8 +35,7 @@ const upcoming = [
         slug: 'smart-search',
         icon: '/icons/search.svg',
         title: 'Smart search',
-        description:
-            'Find files by saying: "that PDF contract from last month" or "all my node_modules folders"',
+        description: 'Find files by saying: "that PDF contract from last month" or "all my node_modules folders"',
         badge: 'Works but early stage',
     },
     {
@@ -49,7 +49,8 @@ const upcoming = [
         slug: 'ai-batch',
         icon: '/icons/zap.svg',
         title: 'AI file organization',
-        description: 'Say "Clean up my Downloads folder" to get a list of move/delete suggestions you can approve/reject.',
+        description:
+            'Say "Clean up my Downloads folder" to get a list of move/delete suggestions you can approve/reject.',
         badge: 'Coming soon',
     },
 ]

apps/website/src/components/Features.astro

@@ -136,13 +136,37 @@ const currentYear = new Date().getFullYear()
             class="flex flex-wrap items-center justify-center gap-x-1 border-t border-[var(--color-border-subtle)] pt-8 text-sm text-[var(--color-text-tertiary)]"
         >
             <span>© {currentYear} David Veszelovszki ·</span>
-            <a href="https://veszelovszki.com" target="_blank" rel="noopener noreferrer" class="underline decoration-[var(--color-border)] underline-offset-2 transition-colors hover:text-[var(--color-text-primary)] hover:decoration-[var(--color-text-tertiary)]">veszelovszki.com</a>
+            <a
+                href="https://veszelovszki.com"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="underline decoration-[var(--color-border)] underline-offset-2 transition-colors hover:text-[var(--color-text-primary)] hover:decoration-[var(--color-text-tertiary)]"
+                >veszelovszki.com</a
+            >
             <span>·</span>
-            <a href="https://github.com/vdavid" target="_blank" rel="noopener noreferrer" class="underline decoration-[var(--color-border)] underline-offset-2 transition-colors hover:text-[var(--color-text-primary)] hover:decoration-[var(--color-text-tertiary)]">GitHub</a>
+            <a
+                href="https://github.com/vdavid"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="underline decoration-[var(--color-border)] underline-offset-2 transition-colors hover:text-[var(--color-text-primary)] hover:decoration-[var(--color-text-tertiary)]"
+                >GitHub</a
+            >
             <span>·</span>
-            <a href="https://x.com/vdavid" target="_blank" rel="noopener noreferrer" class="underline decoration-[var(--color-border)] underline-offset-2 transition-colors hover:text-[var(--color-text-primary)] hover:decoration-[var(--color-text-tertiary)]">X</a>
+            <a
+                href="https://x.com/vdavid"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="underline decoration-[var(--color-border)] underline-offset-2 transition-colors hover:text-[var(--color-text-primary)] hover:decoration-[var(--color-text-tertiary)]"
+                >X</a
+            >
             <span>·</span>
-            <a href="https://www.linkedin.com/in/veszelovszki/" target="_blank" rel="noopener noreferrer" class="underline decoration-[var(--color-border)] underline-offset-2 transition-colors hover:text-[var(--color-text-primary)] hover:decoration-[var(--color-text-tertiary)]">LinkedIn</a>
+            <a
+                href="https://www.linkedin.com/in/veszelovszki/"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="underline decoration-[var(--color-border)] underline-offset-2 transition-colors hover:text-[var(--color-text-primary)] hover:decoration-[var(--color-text-tertiary)]"
+                >LinkedIn</a
+            >
         </div>
     </div>
 </footer>

apps/website/src/components/Footer.astro

@@ -10,7 +10,7 @@ interface Props {
 const {
     title,
     description = 'The fastest two-pane file manager for macOS. Indexes your whole drive in minutes, shows folder sizes everywhere, instant search, keyboard-driven everything. Built in Rust, free for personal use.',
-    ogImage,
+    ogImage = '/og-default.png',
 } = Astro.props
 ---
 

apps/website/src/layouts/Layout.astro

@@ -234,7 +234,9 @@ import NewsletterInlineWrapper from '../components/NewsletterInlineWrapper.astro
 
         <!-- Download CTA -->
         <div class="mt-20 text-center">
-            <h2 class="mb-4 text-2xl font-bold text-[var(--color-text-primary)]">Wanna see it for yourself? Get Cmdr now.</h2>
+            <h2 class="mb-4 text-2xl font-bold text-[var(--color-text-primary)]">
+                Wanna see it for yourself? Get Cmdr now.
+            </h2>
             <p class="mb-8 text-[var(--color-text-secondary)]">
                 Free forever for personal use. No signup, no trial period.
             </p>