Hep.gg Documentation

Components

The full component kit for Hep.gg Docs pages, with examples: admonitions, cards, API blocks, code groups, tabs, steps, and the Prime components.

Components

On mdx pages you can use a kit of components on top of Markdown. The free kit is available on every site; a few extra components need Hep.gg Prime. On a free site the premium components render a small "Prime" notice in place, so your page never breaks.

Admonitions

Callout boxes in six styles: note, tip, info, warning, caution, and danger.

:::tip[Optional custom title]
Helpful aside text. Markdown works inside.
:::

Cards and grids

Link tiles, optionally in a grid. Give a card an icon from the Lucide set (for example Rocket, Terminal, Upload, Database, Mail, Globe, Sparkles), or an image URL for a picture card.

<CardGrid cols="3">
<Card title="Quickstart" icon="Rocket" href="/docs/quickstart">Get running in 5 minutes.</Card>
 
<Card title="API" icon="Terminal" href="/docs/api/overview">Every endpoint, with examples.</Card>
</CardGrid>

API reference blocks

Document an endpoint with a coloured verb badge, a full endpoint header, and a parameter table.

<Method method="POST" />
 
<Endpoint method="POST" path="/api/v1/things/:id" baseUrl="https://api.example.com" auth="required" summary="Create a thing." />
 
<Params title="Body">
<Param name="name" type="string" required>The thing's name.</Param>
 
<Param name="count" type="number" default="1">How many to create.</Param>
</Params>

Leave a blank line between each <Param> row.

WhereItLives

States the base URL for a section, so readers know where the endpoints live.

<WhereItLives host="https://api.example.com">All endpoints below live here.</WhereItLives>

Code groups

Tabbed code samples. Wrap fenced code blocks in <CodeGroup> and give each block a title and a matching entry in labels.

<CodeGroup labels="curl,node">
 
```bash title="curl"
curl https://api.example.com/things
```
 
```js title="node"
await fetch("https://api.example.com/things")
```
 
</CodeGroup>

Tabs and steps

<Tabs labels="macOS,Linux">
<TabItem>brew install x</TabItem>
 
<TabItem>apt install x</TabItem>
</Tabs>
 
<Steps>
<Step title="Install">Run the installer.</Step>
 
<Step title="Configure">Edit the config file.</Step>
</Steps>

Premium components

These need Hep.gg Prime. Prefer the free components unless your site is on Prime.

  • <Accordion> with <AccordionItem title="..."> for collapsible sections.
  • <Embed src="https://..." /> for an embedded video or iframe by URL.
  • <Callout color="...">...</Callout> for a custom-coloured callout.
<Accordion>
<AccordionItem title="What is included?">Everything in the free kit, plus these.</AccordionItem>
 
<AccordionItem title="How do I enable it?">Upgrade to Hep.gg Prime.</AccordionItem>
</Accordion>

Images and media

This app does not host image uploads. Reference images by URL (![alt](https://...)), and use <Embed> for video. Host your files on your Hep.gg uploader, then paste the URL into your page.