docs: link bounda.dev and the live demo from the docs header and the README

README.md

@@ -27,6 +27,7 @@ npm create bounda@latest my-app
 ```
 
 [bounda.dev](https://bounda.dev) ·
+[Live demo](https://demo.bounda.dev) ·
 **[Documentation](https://docs.bounda.dev)** ·
 [Getting started](https://docs.bounda.dev/getting-started/) ·
 [Core concepts](https://docs.bounda.dev/getting-started/core-concepts/) ·

docs/src/components/SocialIcons.astro

@@ -1,22 +1,42 @@
 ---
 import { Icon } from "@astrojs/starlight/components";
-import { REPOSITORY } from "../site.ts";
+import { DEMO, HOME, REPOSITORY } from "../site.ts";
 ---
 
+<a class="text" href={HOME}>bounda.dev</a>
+<a class="text" href={DEMO}>Demo</a>
 <a href={REPOSITORY} aria-label="GitHub">
   <Icon name="github" size="1.25rem" />
 </a>
 
 <style>
   a {
     display: flex;
+    align-items: center;
     padding: 0.5em;
     margin: -0.5em;
     color: var(--sl-color-gray-3);
+    text-decoration: none;
+  }
+
+  /* Set like bounda.dev's nav links. */
+  .text {
+    font-family: var(--bounda-display);
+    font-weight: 600;
+    font-stretch: 125%;
+    font-size: 0.6875rem;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
   }
 
   a:hover,
   a:focus-visible {
     color: var(--sl-color-white);
   }
+
+  @media (max-width: 50rem) {
+    .text {
+      display: none;
+    }
+  }
 </style>

docs/src/site.ts

@@ -2,6 +2,10 @@ export const SITE = "https://docs.bounda.dev";
 
 export const REPOSITORY = "https://github.com/bounda-dev/bounda";
 
+export const HOME = "https://bounda.dev";
+
+export const DEMO = "https://demo.bounda.dev";
+
 // Cloudflare Web Analytics, without cookies; the site is bounda.dev's, which counts this subdomain too.
 export const analytics: HeadTag = {
   tag: "script",