@defra/docusaurus-theme-govuk 0.0.3-alpha → 0.0.5-alpha

package/README.md

@@ -10,7 +10,7 @@ A Docusaurus 3 theme that applies the [GOV.UK Design System](https://design-syst
 - Syntax-highlighted code blocks with copy button
 - Admonition blocks (:::note, :::warning, etc.) rendered as GOV.UK InsetText / WarningText
 - 404 page with GOV.UK styling
-- Bundled GDS Transport fonts and GOV.UK static assets
+- GOV.UK static assets included (GDS Transport is **not** bundled — the theme uses Helvetica/Arial)
 - Compatible with React 18 and React 19
 
 
@@ -63,6 +63,8 @@ module.exports = {
       header: {
         serviceName: 'My Service',
         serviceHref: '/',
+        organisationText: 'My Organisation',
+        organisationHref: 'https://example.gov.uk',
       },
 
       navigation: [
@@ -108,6 +110,8 @@ module.exports = {
 |----------|------|-------------|
 | `serviceName` | `string` | Service name displayed in the GOV.UK header |
 | `serviceHref` | `string` | Link for the service name (default: `/`) |
+| `organisationText` | `string` | Organisation name displayed in the header crown block |
+| `organisationHref` | `string` | URL the organisation name links to |
 
 #### `themeConfig.govuk.navigation`
 

package/index.js

@@ -91,6 +91,13 @@ module.exports = function themeGovuk(context, options) {
         return path.resolve(pkgDir, main);
       }
 
+      // Use MiniCssExtractPlugin for production/server builds, style-loader for dev/client
+      let MiniCssExtractPlugin;
+      if (!isServer && process.env.NODE_ENV === 'production') {
+        MiniCssExtractPlugin = require('mini-css-extract-plugin');
+        if (!config.plugins) config.plugins = [];
+        config.plugins.push(new MiniCssExtractPlugin({ filename: 'assets/css/govuk-theme.[contenthash].css' }));
+      }
       return {
         // Also resolve webpack loaders from the theme's own node_modules.
         // When consumed via file: (local dev), loaders like style-loader,
@@ -212,7 +219,9 @@ module.exports = function themeGovuk(context, options) {
             {
               test: /\.scss$/,
               use: [
-                'style-loader',
+                (!isServer && process.env.NODE_ENV === 'production')
+                  ? require('mini-css-extract-plugin').loader
+                  : 'style-loader',
                 {
                   loader: 'css-loader',
                   options: {
@@ -234,10 +243,6 @@ module.exports = function themeGovuk(context, options) {
                   loader: 'sass-loader',
                   options: {
                     implementation: require(require.resolve('sass', { paths: [siteDir] })),
-                    // Override GOV.UK asset path to include the Docusaurus baseUrl.
-                    // The default '../../assets/' produces URLs without baseUrl,
-                    // causing 404s when baseUrl is not '/'.
-                    // Only prepend for SCSS/Sass files — plain CSS can't use Sass variables.
                     additionalData: (content, loaderContext) => {
                       if (/\.scss$|\.sass$/.test(loaderContext.resourcePath)) {
                         return `$govuk-assets-path: '${baseUrl}assets/';\n` + content;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@defra/docusaurus-theme-govuk",
-  "version": "0.0.3-alpha",
+  "version": "0.0.5-alpha",
   "description": "A Docusaurus theme implementing the GOV.UK Design System for consistent, accessible documentation sites",
   "main": "index.js",
   "license": "MIT",
@@ -41,5 +41,8 @@
   },
   "engines": {
     "node": ">=18.0"
+  },
+  "devDependencies": {
+    "mini-css-extract-plugin": "^2.10.0"
   }
 }

package/src/css/components.scss

@@ -29,7 +29,7 @@
   border-bottom: 1px solid #b1b4b6;
   font-size: 0.875rem;
   font-weight: 700;
-  font-family: 'GDS Transport', arial, sans-serif;
+  font-family: Helvetica, Arial, sans-serif;
 }
 
 .app-code-block__pre {
@@ -38,7 +38,7 @@
   overflow: auto;
   font-size: 0.875rem;
   line-height: 1.6;
-  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  font-family: Menlo, Consolas, 'Courier New', monospace;
   position: relative;
   border: 1px solid #b1b4b6;
   margin: 0;
@@ -54,7 +54,7 @@
   border-radius: 0;
   background: #f3f2f1;
   cursor: pointer;
-  font-family: 'GDS Transport', arial, sans-serif;
+  font-family: Helvetica, Arial, sans-serif;
   color: #0b0c0c;
 
   &:hover {

package/src/css/theme.scss

@@ -9,10 +9,27 @@
 
 /*
  * Set the default font on the body so that ALL elements
- * (header, footer, service-nav, etc.) inherit GDS Transport.
+ * (header, footer, service-nav, etc.) inherit the same stack.
  * The prose-scope only covers content inside .app-prose-scope;
  * without this, outer chrome inherits the browser default serif.
+ * GDS Transport is not bundled — Helvetica/Arial is used instead.
  */
 body {
-  font-family: 'GDS Transport', arial, sans-serif;
+  font-family: Helvetica, Arial, sans-serif;
+}
+
+/*
+ * Sticky footer: Docusaurus inserts a #__docusaurus wrapper between body
+ * and our layout, breaking GOV.UK Frontend's flex sticky-footer chain.
+ * Rather than patching the chain, own the full-height context here.
+ */
+.govuk-template--rebranded {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.govuk-template--rebranded > .govuk-width-container {
+  flex: 1 0 auto;
+  width: 100%;
 }

package/src/lib/react-foundry-router-shim.js

@@ -41,15 +41,28 @@ const includes = (haystack, needle) => {
 export const useIsActive = () => {
   const location = useLocation();
 
-  return (href, exact = true) => {
+  return (href, exact = true, options = {}) => {
     const target = URI.parse(href, location.pathname);
-    const dir = target.pathname.endsWith('/') ? target.pathname : target.pathname + '/';
-    // Root path '/' should only match exactly, not as a prefix for all paths
-    const pathStart = target.pathname === '' || (target.pathname !== '/' && location.pathname.startsWith(dir));
-    const pathMatch = target.pathname === '' || location.pathname === target.pathname;
+    const pathMatch = location.pathname === target.pathname;
     const queryMatch = includes(location.query, target.query);
-    const activeExact = !!(pathMatch && queryMatch);
-    return exact ? activeExact : !!(activeExact || (pathStart && queryMatch));
+    // Home link: exact match only (must match exactly, not as a prefix)
+    if (
+      target.pathname === '/' ||
+      /^\/[^/]+\/?$/.test(target.pathname) // e.g. /interactive-map or /interactive-map/
+    ) {
+      // Only highlight if the current path matches the home link's pathname exactly
+      return location.pathname === target.pathname && queryMatch;
+    }
+    // Overview link: href is a prefix of current path, and next char is '/' or nothing
+    const isOverview = location.pathname.startsWith(target.pathname)
+      && location.pathname.charAt(target.pathname.length) === '/';
+    if (isOverview) {
+      return pathMatch && queryMatch;
+    }
+    // All other links: startsWith logic
+    const dir = target.pathname.endsWith('/') ? target.pathname : target.pathname + '/';
+    const pathStart = location.pathname === target.pathname || location.pathname.startsWith(dir);
+    return pathStart && queryMatch;
   };
 };
 

package/src/theme/Heading/index.js

@@ -15,15 +15,6 @@ export default function Heading({as: Tag = 'h2', id, children, ...props}) {
   return (
     <Tag id={id} className={className} {...props}>
       {children}
-      {id && (
-        <a
-          href={`#${id}`}
-          className="govuk-link app-heading-anchor"
-          aria-label={`Direct link to ${typeof children === 'string' ? children : 'heading'}`}
-        >
-          #
-        </a>
-      )}
     </Tag>
   );
 }

package/src/theme/Layout/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import '../../css/theme.scss';
 import {SkipLink, Header, Footer, PhaseBanner, ServiceNavigation, NavigationMenu} from '@not-govuk/simple-components';
 import {useLocation} from '@docusaurus/router';
 import Head from '@docusaurus/Head';
@@ -136,14 +137,17 @@ export default function Layout(props) {
         <SkipLink for="main-content">Skip to main content</SkipLink>
 
         <Header
-          govUK
           rebrand
+          organisationText={header.organisationText}
+          organisationHref={header.organisationHref}
+        />
+
+        <ServiceNavigation 
+          items={serviceNavItems}
           serviceName={header.serviceName}
           serviceHref={withBase(header.serviceHref || '/')}
         />
 
-        <ServiceNavigation items={serviceNavItems} />
-
         <div className="govuk-width-container">
           {phaseBanner && (
             <PhaseBanner phase={phaseBanner.phase}>
@@ -173,7 +177,7 @@ export default function Layout(props) {
         </div>
 
         {!noFooter && (
-          <Footer govUK rebrand meta={footer.meta} />
+          <Footer rebrand meta={footer.meta} />
         )}
       </div>
     </LayoutProvider>