---
title: Community
description: Splashes shared by users in the wild.
---

User-submitted splashes — the loosest tier on the showcase ladder. No
requirement that the config work in anyone else's environment; if it makes
sense in the author's terminal, that's enough. To submit yours, drop a TOML in
[`examples/community/`](https://github.com/unhappychoice/splashboard/tree/main/examples/community)
and open a PR — see the
[directory README](https://github.com/unhappychoice/splashboard/blob/main/examples/community/README.md)
for the metadata header.

If your dashboard ages into something broadly applicable, a maintainer may
promote it to [Use cases](/showcases/usecases/); if it works on a fresh
install, all the way up to a [bundled preset](/showcases/presets/).

export const communityHtml = Object.fromEntries(
  Object.entries(import.meta.glob('../../../assets/rendered/community/*.html', {
    query: '?raw',
    import: 'default',
    eager: true,
  })).map(([path, html]) => [path.split('/').pop().replace(/\.html$/, ''), html])
);

export const communityIndex = (() => {
  const indexes = import.meta.glob('../../../assets/rendered/community/_index.json', { eager: true });
  const first = Object.values(indexes)[0];
  return first ? (first.default ?? first) : [];
})();

{communityIndex.length === 0 && (
  <p><em>No community splashes yet — be the first! Open a PR with a TOML in <code>examples/community/</code>.</em></p>
)}

{communityIndex.map((item) => (
  <section key={item.slug}>
    <h3>{item.title} <code>{item.slug}</code></h3>
    <p>{item.description}</p>
    {(item.author || item.source) && (
      <p>
        {item.author && <span><strong>By:</strong> {item.author}</span>}
        {item.author && item.source && ' · '}
        {item.source && <a href={item.source}>source</a>}
      </p>
    )}
    {item.requires && item.requires.length > 0 && (
      <p><strong>Requires:</strong> {item.requires.join(', ')}</p>
    )}
    {item.code && (
      <details class="splash-config">
        <summary>Show config</summary>
        <pre><code>{item.code}</code></pre>
      </details>
    )}
    <div class="splash-landing" set:html={communityHtml[item.slug] ?? ''} />
  </section>
))}
