JSPrismarine

Brand kit ​

The rules live in the brand guide. This page renders the pieces they describe from the same source the site uses, so what you see here is what ships.

Palette ​

accent--jsp-accent#5ca48aPrimary accent: buttons, highlights, active states.
forest--jsp-forest#003829Dark brand surface and light-mode link color.
deep--jsp-deep#00281dDarkest surface: tile backgrounds and shadows.
mint--jsp-mint#a9d9c6Body text on forest and the light facet of the mark.
cream--jsp-cream#efe9daLight surface and text on dark.
ink--jsp-ink#0b1713Text on light and the terminal surface.
signal--jsp-signal#ff6b3dSpot color for prompts, cursors and the core of the mark.

Mark ​

vue
<PrismMark :size="48" />

Type ​

The Bedrock server you own.

Bricolage Grotesque 800 · tracking −0.05em

pnpm run dev

JetBrains Mono 400

Components ​

Every component below is registered globally, so a site page can use it without an import.

BrandButton ​

Run a serverRead the docs
Packages
vue
<BrandButton href="/guide/running">Run a server</BrandButton>
<!-- outline sits on forest or ink, secondary on the page background -->
<BrandButton href="/guide/" variant="outline">Read the docs</BrandButton>
<BrandButton href="/packages" variant="secondary">Packages</BrandButton>

TerminalWindow ​

jsprismarine
$ pnpm run dev[info] JSPrismarine is now listening on port 19132>
vue
<TerminalWindow>
    <span class="t-line"><span class="t-prompt">$</span> pnpm run dev</span>
    <span class="t-line"><span class="t-ok">[info]</span> JSPrismarine is now listening</span>
</TerminalWindow>

BentoGrid and BentoTile ​

47

accentPublished packages.

2

signalProtocol versions.

19132

deepDefault port.

vue
<BentoGrid>
    <BentoTile tone="accent" :span="2">
        <div class="bento-figure">45</div>
        <p class="bento-caption"><b>Packages</b>Published on npm.</p>
    </BentoTile>
</BentoGrid>

ParityBars ​

vue
<ParityBars :limit="3" />

LatestRelease ​

Latest release

v0.20.0

  • Run every command from one registry.
  • The query protocol is part of the server's networking now, with a new query-port setting beside enable-query, which stays on by default.
  • Remove the legacy recipe manager.

Read the release notes4 breaking, read before upgrading

vue
<LatestRelease :release="releases.releases[0]" :limit="3" />

ReleaseNotes ​

Release notes from the changelog, as on the releases page. Long groups collapse behind a button.

vue
<ReleaseNotes :releases="releases.releases" />

PackageDirectory ​

The filterable package grid on the packages page.

vue
<PackageDirectory :packages="project.packages" :repository-url="project.repositoryUrl" />

CopyButton ​

vue
<CopyButton text="pnpm run dev" />

Code ​

Fenced code uses the ink surface and the brand syntax colors in both modes.

ts
import { palette } from './tokens.ts';

// Keywords, strings, names and comments each take a brand color.
export const accent = palette.accent.hex;
export const names = Object.keys(palette).slice(0, 3);

Ticker ​

It stops on hover and has a Pause button, which a mouse sees on hover and a touch screen always shows. Under reduced motion it does not move, and the button is hidden.

vue
<Ticker :items="['Play it', 'Host it']" />