Layout

Where to make changes

Start by finding the location that matches what you want to change.

As a rule, editing files under app/ changes how the site looks and is structured. The exception is app/.riebeckite/, which Riebeckite generates automatically; it is refreshed on every build, so do not edit it directly.

Creating components

You can write ordinary Hono JSX components under app/components/.

// app/components/callout.tsx
export function Callout({ children }: { children?: unknown }) {
  return <aside class="callout">{children}</aside>;
}

Import the component from a route or another component as usual.

Riebeckite UI primitives

When building article pages you can also use the UI primitives that @riebeckite/honox/ui provides:

• Article
• ArticleLayout
• ArticleContent

They are small pieces for assembling Riebeckite's article structure. They are not a dedicated component framework, so you do not have to use them; a site can build its own HTML structure instead.

See UI primitives.

Changing the article page layout

In the starter, the article page is mainly assembled in two places:

app/components/article.tsx
app/routes/_renderer.tsx

app/components/article.tsx

SiteArticle here decides the article page layout.

Typical changes made here include:

• Moving the article title
• Adding UI before or after the article
• Moving breadcrumbs
• Moving backlinks or related posts
• Adding a sidebar

SiteArticle is built on the Article primitive from @riebeckite/honox/ui, but it is a site component, so you can edit it freely.

Note that the Article used in a route example is this site component, not the @riebeckite/honox/ui Article with the same name.

app/routes/_renderer.tsx

_renderer.tsx is the outer layout that wraps the whole site. It mainly manages:

• <head>
• Header
• Footer
• Navigation
• Shared UI for the whole page
• Head tags and styles generated by Riebeckite or plugins
• RiebeckiteHead for rendering standard head contents

Edit it when you want to change something shared across the site.

To delegate the standard head contents to the framework while adding custom head elements:

import { RiebeckiteHead, ThemeRoot } from "@riebeckite/honox/ui";
 
export default jsxRenderer(({ children }, c) => (
  <ThemeRoot
    theme={config.theme}
    lang={c.get("htmlLanguage") ?? config.site.locale}
  >
    <head>
      <RiebeckiteHead
        title={config.site.title}
        headTags={c.get("headTags") ?? []}
      />
      <meta name="custom-site-value" content="..." />
    </head>
    <body class="riebeckite-page rb-site">{children}</body>
  </ThemeRoot>
);

See Head tag handoff for the RiebeckiteHead pattern and how the site keeps ownership of <head> while delegating standard head rendering to the framework.