Match your website

Three kinds of files make the blog match your website, which are your own header, your own footer and slots that fill fixed places on every page.

When you create a site from a repository without blog.json, Notra offers Open starter PR (optional), which reads your Brand Identity and website and opens a pull request with blog.json, header.mdx, footer.mdx and a first post that already use your logo, colors and links.

Header and footer

Add header.mdx or footer.mdx next to blog.json, and each replaces the theme’s own. Write plain markup with Tailwind classes. You can paste HTML from your landing page if you change class to className, close empty tags like <img /> and remove  comments, because these files are MDX.

header.mdx

<header className="border-b border-border">
  <div className="site-container flex h-16 items-center gap-6">
    <a href="https://acme.com" className="flex items-center gap-2 font-semibold">
      <img src="/images/logo.svg" alt="" className="h-6" />
      Acme
    </a>
    <SiteAreas />
    <nav className="ml-auto hidden gap-6 text-sm md:flex">
      <a href="https://acme.com/product" className="text-muted-foreground hover:text-foreground">Product</a>
      <a href="https://acme.com/pricing" className="text-muted-foreground hover:text-foreground">Pricing</a>
    </nav>
    <ThemeToggle />
  </div>
</header>

Two built-in components cover what the theme’s header did:

Component	What it renders
`<SiteAreas />`	The Blog and Changelog switch, with the current one highlighted, and nothing when only one section is on
`<ThemeToggle />`	The light and dark mode button (hidden when `appearance.strict` is set)

Interactive parts like a mobile menu go in a component in snippets/ that you import as usual. See Your own components. Wrap your content in site-container to give it the same width as the posts below (it follows layout.width). Theme colors are available as these Tailwind classes: bg-background, text-foreground, bg-muted, text-muted-foreground, border-border, bg-card, bg-primary and text-primary. The header and footer get no data, so write your site name and links into them directly. With your own header, the navbar IDs like #topbar-cta-button don’t exist, so use your own class names. When Notra branding is on, Notra adds a small “Powered by Notra” line under your footer.

Slots

Slots add your own content at fixed places, and each one is a file in slots/:

File	Where it appears	Data you can use
`slots/blog-hero.mdx`	Replaces the top of the blog home	`site`, `area`
`slots/changelog-hero.mdx`	Replaces the top of the changelog	`site`, `area`
`slots/before-post.mdx`	Above every post	`post`
`slots/after-post.mdx`	Below every post	`post`
`slots/sidebar.mdx`	Next to every post under “On this page” on wide screens, above the post on phones and below the post in the narrow layout	`post`
`slots/after-changelog-entry.mdx`	Below every changelog entry, on the index and on the entry’s page	`entry`

Data	Fields
`site`	`name`, `description`
`area`	`id` (`blog` or `changelog`), `title`, `description`, `url`
`post`	`title`, `description`, `date` (formatted), `tags`, `authors` (each with `name`, `title`, `url`), `url`
`entry`	`title`, `version`, `date` (formatted), `url`

slots/after-post.mdx

<div className="mt-12 rounded-xl border border-border p-6">
  <p className="font-semibold">Enjoyed "{post.title}"?</p>
  <p className="mt-1 text-sm text-muted-foreground">Try Acme free for 14 days.</p>
  <a href="https://acme.com/signup" className="mt-4 inline-block rounded-lg bg-primary px-4 py-2 text-sm text-white">Start free trial</a>
</div>

A call to action under every post, a newsletter form or a product card in the sidebar each fit in a slot, while a file in slots/ with any other name stops the build with Unknown slot and the list of valid names.

Your own CSS

For anything the settings and files don’t cover, add style.css, which loads after the theme so it can override any style. See Design and CSS.

What isn’t allowed

Header, footer and slots follow the same rules as posts, so imports only come from your repository and Notra doesn’t allow <script> tags. Put JavaScript in script.js instead. See Analytics and scripts.

Get started

Domains

Write content

Components

Customize

Publish

Reference

Header and footer

Slots

Your own CSS

What isn’t allowed

​Header and footer

​Slots

​Your own CSS

​What isn’t allowed

Header and footer

Slots

Your own CSS

What isn’t allowed