runemarkv0.3.1

← All examples

Compact report

Verdict, metrics with trends, grouped findings and a next step, at 80 columns.

Compact report

site/src/showcase.ts
renderReport({
  schemaVersion: 1,
  title: "Site audit v1.2.0",
  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: "Accessibility violations",
      findings: [
        {
          message: "Image missing alt attribute",
          tone: "warning",
          ruleId: "a11y/img-alt",
          confidence: "high",
          badge: {
            label: "quick win",
            tone: "success"
          },
          location: {
            kind: "file",
            value: "src/pages/index.astro",
            line: 42,
            column: 10
          },
          remedy: "Add an alt=\"…\" description to the <img> tag."
        },
        {
          message: "Low contrast ratio on hero button",
          tone: "warning",
          ruleId: "a11y/contrast",
          location: {
            kind: "file",
            value: "src/components/Hero.astro",
            line: 18
          }
        }
      ]
    }
  ],
  nextSteps: [
    {
      text: "Run the auto-fixer for formatting issues",
      command: "audit --fix"
    }
  ]
}, { width: 80 })
⚠ Site audit v1.2.0

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

● Accessibility violations (2)
  - [quick win] Image missing alt attribute [a11y/img-alt] (high confidence)
    at 
  - Low contrast ratio on hero button [a11y/contrast]
    at 

Next steps:
  • Run the auto-fixer for formatting issues
    $ audit --fix
  • renderReport
  • compact