@macromackie/oss-web

Shared CSS and React components for Next.js sites using Fumadocs 16 and Tailwind CSS 4.

npm install --save-exact @macromackie/oss-web

Import the stylesheet once in your root layout. It includes Tailwind, the Fumadocs presets, and the shared fonts. Remove duplicate imports of those styles from the application.

import '@macromackie/oss-web/styles.css';
import { SiteHeader, PageFooter } from '@macromackie/oss-web';

export function Page() {
  return <>
    <SiteHeader name="tenet">
      <a href="/docs">Docs</a>
      <a href="https://github.com/macromackie/tenet">GitHub</a>
    </SiteHeader>
    <main id="nd-page" className="home">
      <h1>tenet</h1>
    </main>
    <PageFooter><a href="/llms.txt">llms.txt</a></PageFooter>
  </>;
}

SiteHeader accepts a product name, an optional home href, and navigation children. PageFooter renders its children with the shared footer styles. Both work as React server components. Keep page content, navigation, release metadata, and deployment in the application. Import local CSS after the shared stylesheet for overrides.

PatchDiff renders each file in a Git patch with Pierre Diffs in the shared light style. It is an async server component: highlighting happens during rendering, and the browser receives static markup.

import { PatchDiff } from '@macromackie/oss-web/diffs';

<PatchDiff patch={gitDiffText} />

MIT licensed.