@dnbhq/wordmark

An accessible Astro component for the David's Neighbour wordmark and icon. The full wordmark is rendered as real text with tiny embedded WOFF2 subsets, the icon is rendered as inline SVG, and both link to davidsneighbour.dev with tracking parameters.

Install

npm install @dnbhq/wordmark

The npm package name remains @dnbhq/wordmark. The source repository is davidsneighbour/wordmark.

Usage

---
import Wordmark from '@dnbhq/wordmark';
---

<p>Built with care. <Wordmark /></p>
<p>Built with care. <Wordmark inline /></p>

Props

| Prop | Type | Default | Description | | ----------- | ---------------------- | --------------------------------------------- | ---------------------------------------------------------------------------------------- | | label | string | "A web production by David's Neighbour" | Accessible name and tooltip for the link. | | link | string | "https://davidsneighbour.dev/" | Destination URL. utm_source, utm_medium, and utm_campaign are appended automatically. | | type | 'wordmark' \| 'icon' | 'wordmark' | wordmark renders the full text logotype, icon renders the square SVG mark only. | | classes | string | undefined | Extra classes applied to the generated mark element. | | display | string | undefined | Extra classes applied to the wrapping <a>. Overrides the built-in standalone or inline class. | | inline | boolean | false | Makes the full wordmark participate naturally in surrounding prose. | | color | string | 'currentColor' | Any CSS colour value, applied to the text wordmark and SVG icon. | | utmSource | string | the current site's hostname (Astro.site) | Overrides the auto-detected utm_source value. |

Sizing

The wordmark is rendered at 1em, so it follows the font size of its parent. Use <Wordmark inline /> inside paragraphs, copyright lines, footer copy, and similar text. Use <Wordmark /> when the mark stands alone.

Colour

Colour is controlled by the color prop. The default is currentColor, so the mark matches the surrounding text colour.

Font subsets

The package includes only the generated WOFF2 subsets in src/fonts/. Do not publish the complete source fonts from scratch/fonts/; they are private source material and must remain outside the npm package. The subset source files, output files, brand text, and weights are configured in scripts/wordmark-fonts.config.sh. Regenerate the subsets with:

npm run build:fonts

The config currently uses weight 700 for DAVID'S and weight 200 for NEIGHBOUR. To test another pairing temporarily, run for example:

./scripts/build-wordmark-fonts.sh --davids-weight 600 --neighbour-weight 300

Example site

See example/ for a minimal Astro site using the component in both wordmark and icon form.

cd example
npm install
npm run dev