Properties

Render each note's frontmatter as an Obsidian-style property panel at build time. No client-side JavaScript is required.

日本語

Overview

When the content manifest is created, properties() renders a section.rb-properties[data-properties] from every entry's frontmatter. The note HTML is left untouched and the panel is published on ContentManifestEntry.bodySlots["article.metadata"], so the Site decides where to render it. The frontmatter stays the single source of truth — there is nothing to write in the Markdown body.

Values are rendered by type:

Values that cannot be rendered as structured HTML are emitted as escaped text and reported as a properties-unrenderable-value warning.

Usage

import { defineConfig } from "@riebeckite/core";
import { properties } from "@riebeckite/plugin-properties";
 
export default defineConfig({
  // ...
  plugins: [properties()],
});

Options

properties({
  title: "メタデータ",
  exclude: ["publish", "permalink", "aliases", "redirect_from", "draft"],
  collapsed: true,
});

Rendering the metadata slot

The plugin writes the panel to ContentManifestEntry.bodySlots["article.metadata"]. The Site route passes bodySlots to its article component and chooses the metadata position in its layout. Combine include and order to decide which keys are shown and in what order:

// app/components/article.tsx (site side)
import type { ContentBodySlots } from "@riebeckite/core";
import { ContentSlot } from "@riebeckite/honox/ui";
 
function SiteArticle({ bodySlots }: { bodySlots?: ContentBodySlots }) {
  return (
    <ContentSlot
      slots={bodySlots}
      name="article.metadata"
      class="site-article__metadata"
    />
  );
}

properties({
  include: ["title", "created", "updated", "tags"],
  order: ["title", "created", "updated", "tags"],
});

The handoff follows the ContentManifestEntry.bodySlots contract. A plugin never owns routes or the shell.

Exports

• properties(options?) / propertiesPlugin(options?) — plugin factory
• resolvePropertiesOptions(options?) — default resolution
• renderPropertiesPanel(frontmatter, options?, context?) — pure renderer
• buildTagHref(tag) — tag route builder
• Types: PropertiesOptions, ResolvedPropertiesOptions, PropertiesRenderContext, PropertiesLinkResolver, PropertiesMessage

See also

• Plugin guide