runemarkv0.3.1

← All examples

Narrow terminal

At 44 columns summary metrics stack and long messages wrap with a hanging indent.

Narrow terminal

site/src/showcase.ts
renderReport({
  schemaVersion: 1,
  title: "Content audit",
  verdict: "warning",
  metrics: [
    {
      key: "Errors",
      value: "0"
    },
    {
      key: "Warnings",
      value: "4",
      trend: "negative",
      delta: "+2"
    },
    {
      key: "Score",
      value: "94/100",
      trend: "positive",
      delta: "+5%"
    }
  ],
  groups: [
    {
      title: "Navigation",
      findings: [
        {
          message: "The main navigation contains more links than can be reached comfortably with a keyboard",
          tone: "warning",
          ruleId: "ux/nav-size"
        },
        {
          message: "Two landmarks share the label \"Menu\", so screen reader users cannot tell them apart",
          tone: "warning",
          ruleId: "a11y/landmark-label"
        }
      ]
    }
  ]
}, { width: 44 })
⚠ Content audit

  Errors: 0
  Warnings: 4 (+2)
  Score: 94/100 (+5%)

● Navigation (2)
  - The main navigation contains more links
    than can be reached comfortably with a
    keyboard [ux/nav-size]
  - Two landmarks share the label "Menu", so
    screen reader users cannot tell them
    apart [a11y/landmark-label]
  • renderReport
  • width