fix: header anchor-icon spacing + API reference header link

astro.config.mjs

@@ -44,6 +44,8 @@ export default defineConfig({
         Head: './src/components/Head.astro',
         PageTitle: './src/components/PageTitle.astro',
         Footer: './src/components/Footer.astro',
+        // Adds a header link to the Keboola API reference (api.keboola.com).
+        SocialIcons: './src/components/SocialIcons.astro',
       },
       pagination: true,
       editLink: {

src/components/SocialIcons.astro

@@ -0,0 +1,24 @@
+---
+// Override of Starlight's SocialIcons so we can add a header link to the
+// Keboola API reference (api.keboola.com). SocialIcons renders inside the
+// header's right-group, so this is the natural, view-transition-safe slot for
+// a persistent header link (no JS injection needed). The Default is kept so any
+// future `social` config still renders.
+import Default from '@astrojs/starlight/components/SocialIcons.astro';
+---
+
+<a
+  class="header-api-link"
+  href="https://api.keboola.com"
+  target="_blank"
+  rel="noopener noreferrer"
+  aria-label="Keboola API documentation (opens in a new tab)"
+>
+  <svg class="header-api-link__icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <polyline points="8 6 2 12 8 18" />
+    <polyline points="16 6 22 12 16 18" />
+  </svg>
+  <span class="header-api-link__label">API</span>
+</a>
+
+<Default {...Astro.props}><slot /></Default>

src/styles/custom.css

@@ -307,6 +307,36 @@ site-search kbd {
 /* Hide Starlight's social-icons separator (no social icons configured in this project) */
 .social-icons::after { display: none !important; }
 
+/* API reference link in the header (api.keboola.com). A refined, secondary
+   pill — quieter than the KAI button so the two sit together without competing. */
+.header-api-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 12px;
+  border: 1px solid var(--border-1);
+  border-radius: 6px;
+  background: var(--bg-1);
+  color: var(--fg-2);
+  font-family: var(--font-sans);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: color 0.15s, border-color 0.15s, background 0.15s;
+}
+.header-api-link:hover {
+  color: var(--link);
+  border-color: var(--kbc-blue-450);
+  background: var(--bg-2);
+}
+.header-api-link__icon {
+  color: var(--fg-4);
+  transition: color 0.15s;
+}
+.header-api-link:hover .header-api-link__icon { color: var(--link); }
+
 /* Auto / theme-select button — compact */
 starlight-theme-select button {
   padding: 4px 10px !important;
@@ -621,6 +651,14 @@ nav.sidebar {
 .sl-markdown-content h2 a.sl-anchor-link:hover,
 .sl-markdown-content h3 a.sl-anchor-link:hover { color: var(--link); }
 
+/* Push the heading anchor (chain) icon farther right so it sits clearly to
+   the side of the heading instead of colliding with the last word. Starlight
+   renders the link as a sibling of the heading and controls the text→icon
+   spacing via --sl-anchor-icon-gap on the wrapper (default 0.25em). */
+.sl-markdown-content .sl-heading-wrapper {
+  --sl-anchor-icon-gap: 0.5em;
+}
+
 .sl-markdown-content h3 {
   font-size: 16px;
   font-weight: 600;