@entur/uniformen
v0.1.2
Published
Header and footer for Entur apps via the Uniformen layout service.
Readme
@entur/uniformen
Client library for consuming the Uniformen layout service. Fetches the shared header, footer, and head assets from Uniformen and provides ready-to-use React components for rendering them in your app.
What it does
Uniformen is Entur's shared navigation shell. This package fetches the SSR layout from the Uniformen service and gives you typed data and React components to embed it in your application.
The fetched layout contains:
headerHtml— rendered HTML for the top navigationfooterHtml— rendered HTML for the footerheadAssets— raw HTML (<link>/<style>tags) to inject into<head>scripts— raw<script>HTML to inject before</body>csp— per-directive CSP sources (e.g.{ "style-src": [...], "script-src": [...] }) to union into your page's Content-Security-Policy header
Installation
npm install @entur/uniformen
# or
bun add @entur/uniformenReact 18 or later is required as a peer dependency.
Usage
Fetch the layout
import { fetchUniformenLayout } from "@entur/uniformen";
const layout = await fetchUniformenLayout();
export default function app() {
return html`
<html>
<head>
${layout.headAssets}
</head>
<body>
${layout.headerHtml}
<main>{/* your app */}</main>
${layout.footerHtml}
${layout.scripts}
</body>
</html>
`;Returns UniformenLayout | null. Returns null if the request fails.
React adapter
import { fetchUniformenComponents } from "@entur/uniformen/react";
const { HeadAssets, Header, Footer, Scripts } = await fetchUniformenComponents();
export default function App() {
return (
<>
<head>
<HeadAssets />
</head>
<body>
<Header />
<main>{/* your app */}</main>
<Footer />
<Scripts />
</body>
</>
);
}If the layout fetch fails, all components render nothing.
The adapter parses the layout HTML into real React elements.
- Place
<HeadAssets />inside<head>. - Place
<Header />inside<body>before<main>. - If needed, place
<Footer />inside<body>after<main>. - Place
<Scripts />inside<body>as the last element.
Project structure
packages/uniformen/
├── src/
│ ├── index.ts # Public API: exports fetchUniformenLayout + UniformenLayout type
│ ├── types.ts # UniformenLayout type definition
│ ├── index.test.ts # Tests for fetchUniformenLayout
│ ├── reactAdapter.tsx # React adapter: fetchUniformenComponents
│ └── lib/
│ └── fetchUniformenLayout.ts # Fetches layout from the Uniformen SSR endpoint
├── dist/ # Compiled output (generated by bun run build)
├── tsconfig.json # TypeScript config for type checking and local dev
├── tsconfig.build.json # TypeScript config for emitting .d.ts declaration files
└── package.jsonBuilding
bun run buildPublishing
bun run build
bun publish