docs: clarify herdr workflows and agent skill

1 files changed, 102 insertions, 0 deletions

diff --git a/website/src/components/SiteTitle.astro b/website/src/components/SiteTitle.astro
new file mode 100644
index 00000000..04839c38
--- /dev/null
+++ b/website/src/components/SiteTitle.astro
@@ -0,0 +1,102 @@
+---
+import { logos } from 'virtual:starlight/user-images';
+import config from 'virtual:starlight/user-config';
+
+const { siteTitle, siteTitleHref } = Astro.locals.starlightRoute;
+---
+
+<div class="title-row sl-flex">
+  <a href={siteTitleHref} class="site-title sl-flex">
+    {
+      config.logo && logos.dark && (
+        <>
+          <img
+            class:list={{ 'light:sl-hidden print:hidden': !('src' in config.logo) }}
+            alt={config.logo.alt}
+            src={logos.dark.src}
+            width={logos.dark.width}
+            height={logos.dark.height}
+          />
+          {!('src' in config.logo) && (
+            <img
+              class="dark:sl-hidden print:block"
+              alt={config.logo.alt}
+              src={logos.light?.src}
+              width={logos.light?.width}
+              height={logos.light?.height}
+            />
+          )}
+        </>
+      )
+    }
+    <span class:list={{ 'sr-only': config.logo?.replacesTitle }} translate="no">
+      {siteTitle}
+    </span>
+  </a>
+  <nav class="title-nav" aria-label="Primary">
+    <a href="/docs/">Docs</a>
+  </nav>
+</div>
+
+<style>
+  @layer starlight.core {
+    .title-row {
+      align-items: baseline;
+      gap: 1rem;
+      min-width: 0;
+    }
+
+    .site-title {
+      align-items: baseline;
+      gap: var(--sl-nav-gap);
+      font-size: var(--sl-text-h4);
+      font-weight: 600;
+      color: var(--sl-color-text-accent);
+      text-decoration: none;
+      white-space: nowrap;
+      min-width: 0;
+    }
+
+    span {
+      overflow: hidden;
+    }
+
+    img {
+      height: calc(var(--sl-nav-height) - 2 * var(--sl-nav-pad-y));
+      width: auto;
+      max-width: 100%;
+      object-fit: contain;
+      object-position: 0 50%;
+    }
+
+    .title-nav {
+      display: flex;
+      align-items: baseline;
+      gap: 0.75rem;
+      font-size: var(--sl-text-sm);
+      font-weight: 600;
+      line-height: 1;
+    }
+
+    .title-nav a {
+      color: var(--sl-color-text-accent);
+      text-decoration: none;
+      transition: color 120ms ease;
+    }
+
+    .site-title {
+      transition: color 120ms ease;
+    }
+
+    .site-title:hover,
+    .title-nav a:hover {
+      color: var(--sl-color-accent-high);
+    }
+
+    @media (max-width: 35rem) {
+      .title-nav {
+        display: none;
+      }
+    }
+  }
+</style>