feat(header): add hideNpm config to hide the npm icon

Sites that aren't published as an npm package (e.g. standalone product
sites) can set `hideNpm: true` on DocsKitConfig to render only the GitHub
icon in the header. Gated in both HeaderV2 and the v1 Header.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: jaysin586

src/lib/components/Header.svelte

@@ -91,21 +91,23 @@
                     <GitHubIcon class="size-3.5" />
                 </MotionDiv>
             </a>
-            <a
-                href={npmUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                class="inline-flex items-center justify-center text-text-muted hover:text-text-secondary"
-                aria-label="NPM"
-            >
-                <MotionDiv
-                    class="inline-flex size-6 items-center justify-center rounded-full border border-border-muted transition-colors hover:border-border-mid"
-                    whileTap={tapScale}
-                    whileHover={hoverScaleIcon}
+            {#if !config.hideNpm}
+                <a
+                    href={npmUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="inline-flex items-center justify-center text-text-muted hover:text-text-secondary"
+                    aria-label="NPM"
                 >
-                    <NpmIcon class="size-3.5" />
-                </MotionDiv>
-            </a>
+                    <MotionDiv
+                        class="inline-flex size-6 items-center justify-center rounded-full border border-border-muted transition-colors hover:border-border-mid"
+                        whileTap={tapScale}
+                        whileHover={hoverScaleIcon}
+                    >
+                        <NpmIcon class="size-3.5" />
+                    </MotionDiv>
+                </a>
+            {/if}
         </div>
     </header>
 </div>

src/lib/components/HeaderV2.svelte

@@ -190,21 +190,23 @@
                     <GitHubIcon class="size-3.5" />
                 </MotionDiv>
             </a>
-            <a
-                href={npmUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                class="dk-icon-link dk-npm-link"
-                aria-label="NPM"
-            >
-                <MotionDiv
-                    class="dk-icon-square"
-                    whileTap={tapScale}
-                    whileHover={hoverScaleIcon}
+            {#if !config.hideNpm}
+                <a
+                    href={npmUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="dk-icon-link dk-npm-link"
+                    aria-label="NPM"
                 >
-                    <NpmIcon class="size-3.5" />
-                </MotionDiv>
-            </a>
+                    <MotionDiv
+                        class="dk-icon-square"
+                        whileTap={tapScale}
+                        whileHover={hoverScaleIcon}
+                    >
+                        <NpmIcon class="size-3.5" />
+                    </MotionDiv>
+                </a>
+            {/if}
         </div>
     </div>
 

src/lib/config.ts

@@ -7,6 +7,12 @@ export interface DocsKitConfig {
     npmPackage: string
     /** Optional override for the header npm icon URL */
     npmUrl?: string
+    /**
+     * Hide the npm icon in the header. Set this on sites that aren't
+     * published as an npm package (e.g. a standalone product site) so the
+     * header shows only the GitHub icon.
+     */
+    hideNpm?: boolean
     /** GitHub repo in owner/name format, e.g. 'humanspeak/svelte-markdown' */
     repo: string
     /** Optional override for the header GitHub icon URL */