@nu-appdev/northwestern-starlight-theme 1.0.1 → 1.1.0

package/CHANGELOG.md

@@ -7,7 +7,24 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-## [1.0.0] - 2025-06-01
+## [1.1.0] - 2026-03-25
+
+### Added
+
+- Automatic favicon — the theme ships Northwestern's official favicon and applies it without touching `public/`. Consumers can still override it with their own `favicon` in Starlight config.
+- `homepage.imageWidth` option to control hero image size. Defaults to `500px`, useful for wide lockup images that need more space.
+
+### Fixed
+
+- `showTitle: false` now works in the centered hero layout (previously only worked in split layout).
+- Search result titles and headings no longer appear white-on-white in light mode. The `.header a` selector was too broad and bled into Pagefind's search modal.
+- Search input focus ring now uses the Northwestern purple treatment instead of the browser's default blue outline.
+
+### Changed
+
+- Release workflow uses npm trusted publishing (OIDC) instead of long-lived tokens.
+
+## [1.0.0] - 2026-03-25
 
 - Initial public release
 - Northwestern Purple color palette mapped to Starlight's accent system
@@ -17,5 +34,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - OpenAPI plugin compatibility with method badge preservation
 - Reduced motion support for transitions
 
-[Unreleased]: https://github.com/NIT-Administrative-Systems/northwestern-starlight-theme/compare/v1.0.0...HEAD
+[Unreleased]: https://github.com/NIT-Administrative-Systems/northwestern-starlight-theme/compare/v1.1.0...HEAD
+[1.1.0]: https://github.com/NIT-Administrative-Systems/northwestern-starlight-theme/compare/v1.0.0...v1.1.0
 [1.0.0]: https://github.com/NIT-Administrative-Systems/northwestern-starlight-theme/releases/tag/v1.0.0

package/index.ts

@@ -1,3 +1,7 @@
+import { copyFileSync, mkdirSync, readFileSync } from "node:fs";
+import type { IncomingMessage, ServerResponse } from "node:http";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
 import type { StarlightPlugin } from "@astrojs/starlight/types";
 
 export interface NorthwesternHomepageConfig {
@@ -17,6 +21,15 @@ export interface NorthwesternHomepageConfig {
      * @default true
      */
     showTitle?: boolean;
+
+    /**
+     * Maximum width of the hero image in the centered layout, in pixels.
+     *
+     * Use a larger value for wide lockup images (e.g., `"750px"`, `"1000px"`).
+     *
+     * @default "500px"
+     */
+    imageWidth?: string;
 }
 
 export interface NorthwesternThemeConfig {
@@ -53,12 +66,27 @@ const RESOLVED_VIRTUAL_MODULE_ID = `\0${VIRTUAL_MODULE_ID}`;
 
 export default function northwesternTheme(config: NorthwesternThemeConfig = {}): StarlightPlugin {
     const { homepage = {}, mermaid = true } = config;
-    const themeConfig = { homepage: { layout: homepage.layout ?? "centered", showTitle: homepage.showTitle ?? true } };
+    const themeConfig = {
+        homepage: {
+            layout: homepage.layout ?? "centered",
+            showTitle: homepage.showTitle ?? true,
+            imageWidth: homepage.imageWidth ?? "500px",
+        },
+    };
 
     return {
         name: "northwestern-starlight-theme",
         hooks: {
             async "config:setup"({ config: starlightConfig, updateConfig, addIntegration, logger }) {
+                // Apply default favicon if consumer hasn't set one
+                const consumerSetFavicon =
+                    starlightConfig.favicon &&
+                    (starlightConfig.favicon as unknown as { href: string }).href !== "/favicon.svg";
+
+                // Read favicon bytes once for the Vite plugin to serve
+                const faviconPath = join(dirname(fileURLToPath(import.meta.url)), "src", "favicon.png");
+                const faviconBytes = consumerSetFavicon ? null : readFileSync(faviconPath);
+
                 addIntegration({
                     name: "northwestern-theme-config",
                     hooks: {
@@ -77,14 +105,54 @@ export default function northwesternTheme(config: NorthwesternThemeConfig = {}):
                                                 }
                                             },
                                         },
+                                        // Serve the bundled favicon during dev — no file touches public/
+                                        ...(faviconBytes
+                                            ? [
+                                                  {
+                                                      name: "northwestern-theme-favicon",
+                                                      configureServer(server: {
+                                                          middlewares: {
+                                                              use(
+                                                                  fn: (
+                                                                      req: IncomingMessage,
+                                                                      res: ServerResponse,
+                                                                      next: () => void,
+                                                                  ) => void,
+                                                              ): void;
+                                                          };
+                                                      }) {
+                                                          server.middlewares.use((req, res, next) => {
+                                                              if (req.url === "/favicon.png") {
+                                                                  res.setHeader("Content-Type", "image/png");
+                                                                  res.setHeader(
+                                                                      "Cache-Control",
+                                                                      "public, max-age=31536000, immutable",
+                                                                  );
+                                                                  res.end(faviconBytes);
+                                                              } else {
+                                                                  next();
+                                                              }
+                                                          });
+                                                      },
+                                                  },
+                                              ]
+                                            : []),
                                     ],
                                 },
                             });
                         },
+                        // Copy favicon into build output so nothing touches public/
+                        "astro:build:done": ({ dir }) => {
+                            if (faviconBytes) {
+                                const dest = join(fileURLToPath(dir), "favicon.png");
+                                mkdirSync(dirname(dest), { recursive: true });
+                                copyFileSync(faviconPath, dest);
+                            }
+                        },
                     },
                 });
                 // Detect mermaid availability
-                let mermaidEnabled = mermaid !== false;
+                let mermaidEnabled = mermaid;
 
                 if (mermaidEnabled) {
                     const hasMermaid = await canResolve("astro-mermaid");
@@ -102,6 +170,7 @@ export default function northwesternTheme(config: NorthwesternThemeConfig = {}):
                 }
 
                 updateConfig({
+                    ...(consumerSetFavicon ? {} : { favicon: "/favicon.png" }),
                     components: {
                         ...(starlightConfig.components ?? {}),
                         Hero:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nu-appdev/northwestern-starlight-theme",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "A Northwestern-branded theme for Astro Starlight",
   "license": "MIT",
   "author": "Danny Foster <danny@northwestern.edu>",

package/src/components/Hero.astro

@@ -7,11 +7,12 @@ const PAGE_TITLE_ID = "_top";
 const { data } = Astro.locals.starlightRoute.entry;
 const { title = data.title, tagline, image, actions = [] } = data.hero || {};
 
+const imageWidthPx = parseInt(themeConfig.homepage.imageWidth, 10) || 500;
+
 const imageAttrs = {
     loading: "eager" as const,
     decoding: "async" as const,
-    width: 400,
-    height: 400,
+    width: imageWidthPx,
     alt: image?.alt || "",
 };
 
@@ -32,9 +33,10 @@ if (image) {
 const hasImage = Boolean(darkImage || lightImage || rawHtml);
 const isSplit = hasImage && themeConfig.homepage.layout === "split";
 const showTitle = themeConfig.homepage.showTitle;
+const imageWidth = themeConfig.homepage.imageWidth;
 ---
 
-<div class:list={["hero", { "hero--split": isSplit }]}>
+<div class:list={["hero", { "hero--split": isSplit }]} style={`--hero-image-width: ${imageWidth};`}>
     {
         isSplit ? (
             <>
@@ -81,7 +83,7 @@ const showTitle = themeConfig.homepage.showTitle;
                     </div>
                 )}
                 <div class="sl-flex copy">
-                    <h1 id={PAGE_TITLE_ID} data-page-title set:html={title} />
+                    {showTitle && <h1 id={PAGE_TITLE_ID} data-page-title set:html={title} />}
                     {tagline && <div class="tagline" set:html={tagline} />}
                 </div>
                 {actions.length > 0 && (
@@ -163,7 +165,7 @@ const showTitle = themeConfig.homepage.showTitle;
     .hero-image-centered .hero-image,
     .hero-image-centered .hero-html {
         object-fit: contain;
-        width: min(90%, 500px);
+        width: min(90%, var(--hero-image-width, 500px));
         height: auto;
     }
 

package/src/styles/navigation.css

@@ -7,7 +7,8 @@
 
 @layer northwestern {
     .site-title,
-    .header a,
+    .header > a,
+    .header > nav a,
     .social-icons a,
     starlight-theme-select,
     starlight-theme-select label,
@@ -58,6 +59,13 @@
         line-height: 1 !important;
     }
 
+    /* stylelint-disable-next-line selector-id-pattern -- Starlight's own ID */
+    #starlight__search input:focus {
+        --pagefind-ui-border: var(--nu-focus-border) !important;
+        outline: none !important;
+        box-shadow: 0 0 0 0.25rem var(--nu-focus-shadow-color) !important;
+    }
+
     site-search button[data-open-modal] > svg {
         flex-shrink: 0;
         align-self: center;

package/src/virtual.d.ts

@@ -3,6 +3,7 @@ declare module "virtual:northwestern-theme/config" {
         homepage: {
             layout: "centered" | "split";
             showTitle: boolean;
+            imageWidth: string;
         };
     };
     export default config;