AboutPlate

$ npx shadcn@latest add https://lacodda.github.io/dowel/r/about-plate.json

See it liveTwo products' plates side by side, one with a licence and links added.→

Notes

Every desktop product has an About box, and every one was written from scratch: the mark at whatever size came to hand, the version inside a sentence, a line about the family somewhere or nowhere. Side by side they looked like products of different makers — the one thing a line is supposed not to look like.

<Dialog>
  <AboutPlate
    product="nitid"
    name="nitid"
    version={`v${version}`}
    tagline={t('tagline')}
    lineLabel={t('partOfTheLine')}
    lineHref="https://github.com/lacodda"
  >
    <span>{t('licence')}</span>
  </AboutPlate>
</Dialog>

The mark is drawn at its largest level, the one with the metaphor: the About screen is where a person has the time to see it. The version is in the monospace face a version is read in, never inside a sentence.

The line is named under a rule, with the λ tile and the words the product gives it. The plate has no English of its own.

Props

Read from the types in ui/about-plate.tsx, the file a product copies - so the description of each prop is also what an editor shows over it there.

Prop	Type	Default
productrequired	atlas | austeris | dowel | efema | furca | hilvan | kasl | kasl-server | kilna | lacodda | lyrid | lyrn | midda | nitid | nooma | rhapsod | rigger | scheda | sefy | turnout		Which product's mark to draw.
namerequired	string		The product's name, as it is written.
versionrequired	string		The version, as the product shows it: "v0.31.0".
tagline	string		The one-line promise, as on the product's README.
children	ReactNode		What the product adds: licence, links, where its data lives.
lineLabelrequired	string		The words beside λ, e.g. "Part of the lacodda line".
lineHref	string		Where those words lead, if anywhere.
level	1 | 2 | 3 | 4 | 5 | 6	2	Where the product's name stands in the page's outline: 2 by default, under the title of the screen or dialog the plate sits in.
className	string

Accessibility

The examples on the stand, through axe 4.14.0 in a browser, in both themes, against WCAG 2.2 A and AA and axe's best practices: 10 rules applied and passed, and none failed. The accessibility report has every item.

Left to a person, where axe could not decide: color-contrast.

History

Each release that changed ui/about-plate.tsx - the file a product copies - newest first.

1. v0.38.0
   • feat a heading stands at the level the page gives it 101c183
2. v0.31.0
   • feat the line's marks in the package, at the level their size calls for 192bb5f