Overview

Combine HTML, Markdown, live bot data, and dsc.bot components to create a useful listing page.

Overview basics

The editor accepts HTML. Standard headings, paragraphs, lists, links, images, tables, and code blocks are supported. Start with a clear introduction, explain the main features, and finish with installation or support information.

<h1>Meet my bot</h1>
<p>A short explanation of what the bot does.</p>

<h2>Features</h2>
<ul>
  <li>Useful feature</li>
  <li>Another useful feature</li>
</ul>

Markdown

Wrap Markdown in <db-markdown>. GitHub-style tables, task lists, links, and fenced code blocks are supported.

<db-markdown>
# Meet my bot

Build a better community with:

- Moderation tools
- Configurable welcome messages
- Useful slash commands

[Join our support server](https://discord.gg/example)
</db-markdown>

Buttons

Use <db-button> for listing actions. action is required and accepts add, vote, or link. Link actions also require a link URL.

<div class="actions">
  <db-button action="add" variant="default">Add to Discord</db-button>
  <db-button action="vote" variant="secondary">Vote for this bot</db-button>
  <db-button action="link" link="https://example.com" variant="outline">
    Visit our website
  </db-button>
</div>

Variants include default, link, destructive, outline, secondary, accent, and the supported ghost variants.

Carousels

Place <db-carousel-item> elements inside <db-carousel>. Add the boolean autoplay attribute to advance slides automatically.

<db-carousel autoplay>
  <db-carousel-item>
    <img src="https://example.com/dashboard.png" alt="Bot dashboard" />
  </db-carousel-item>
  <db-carousel-item>
    <div class="slide">
      <h2>Powerful moderation</h2>
      <p>Keep your community safe with configurable tools.</p>
    </div>
  </db-carousel-item>
</db-carousel>

Variables

Double-bracket variables insert current listing data when the overview renders:

<h1>{{ bot.username }}</h1>
<p>Used in approximately {{ bot.installs }} servers.</p>
<p>Community votes: {{ bot.votes }}</p>
<p>Avatar hash: {{ bot.avatarHash }}</p>

Available variables are bot.username, bot.avatarHash, bot.votes, and bot.installs. Translation variables may also be available when managing localized content.

Images and embeds

Use standard image markup and provide useful alternative text:

<img src="https://example.com/feature.png" alt="A preview of the feature" />

Embeds use an iframe with a valid src. Visitors must load or trust an unfamiliar host, and frames run in a restricted sandbox.

<iframe
  src="https://example.com/embed"
  width="100%"
  height="420"
></iframe>

Custom styles

Add a <style> block to customize your overview. Styles are scoped to the overview; imports and host selectors are removed.

<style>
  .feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
  }

  .feature-card {
    padding: 1rem;
    border: 1px solid currentColor;
    border-radius: 0.75rem;
  }
</style>

<div class="feature-grid">
  <div class="feature-card">Moderation</div>
  <div class="feature-card">Welcome messages</div>
</div>

Safe authoring

• Preview the overview before saving it.
• Use HTTPS content from hosts you control or trust.
• Give every image meaningful alternative text.
• Check narrow and wide layouts; avoid fixed widths where possible.
• Keep headings in order and make link text descriptive.