Components / Docs

DocsArticle

A docs page: breadcrumb, title and lede, the body styled by prose-docs, previous and next links, and an 'On this page' list that follows your scroll from the xl breakpoint up. Code blocks in an html body get a Copy button.

OriginNew in the system

Import

tsx

import { DocsArticle, Toc } from "@somnia-chain/ui"
// in a Next.js app, internal links use next/link:
import { DocsArticle, Toc } from "@somnia-chain/ui/next"

Examples

Article with table of contents

Data & Truth / Somnia Oracle

Ask a question

Questions name their sources and a resolution time. A committee of agents reads the sources and publishes one answer.

Pick a template

Templates fix the question's shape, such as price-above or match-winner, so venues can list markets without writing resolution logic.

Name the sources

oracle.ask({ template: "price-above", sources: ["binance", "coinbase"] })

Weights

Sources are weighted equally unless the template says otherwise.

examples/docs-article/default.tsxShow code

tsx

import { DocsArticle } from "@somnia-chain/ui"

// What a Markdown renderer such as marked produces.
const HTML = `<h2 id="ex-template">Pick a template</h2>
<p>Templates fix the question's shape, such as <code>price-above</code> or <code>match-winner</code>, so venues can list markets without writing resolution logic.</p>
<h2 id="ex-sources">Name the sources</h2>
<pre><code class="language-ts">oracle.ask({ template: "price-above", sources: ["binance", "coinbase"] })
</code></pre>
<h3 id="ex-weights">Weights</h3>
<blockquote><p>Sources are weighted equally unless the template says otherwise.</p></blockquote>`

export default function DocsArticleExample() {
  return (
    <div className="overflow-hidden rounded-[10px] border border-line bg-bg">
      <DocsArticle
        crumbs={["Data & Truth", "Somnia Oracle"]}
        title="Ask a question"
        lede="Questions name their sources and a resolution time. A committee of agents reads the sources and publishes one answer."
        toc={[
          { id: "ex-template", text: "Pick a template", level: 2 },
          { id: "ex-sources", text: "Name the sources", level: 2 },
          { id: "ex-weights", text: "Weights", level: 3 },
        ]}
        next={{ href: "#", label: "Track a question" }}
        html={HTML}
      />
    </div>
  )
}

Props

DocsArticle

Prop	Type	Default	Description
title	ReactNode	—	Page title (h1).
lede	ReactNode	—	Summary under the title.
crumbs	string[]	—	Breadcrumb.
toc	{ id, text, level: 2 \| 3 }[]	—	Headings for 'On this page'. Ids must exist in the body.
prev / next	{ href, label }	—	Pager links.
meta	ReactNode	—	Small line under the body, e.g. the content source.
html	string	—	Rendered HTML for the body, e.g. from Markdown. Each <pre> gets a Copy button.
children	ReactNode	—	Body as JSX, when html isn't set. Use CodeBlock for copyable code.