renderreport 0.2.0

Data-driven report generation with Typst as embedded render engine — no CLI dependency
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

// SpotlightCard Component
// General-purpose spotlight card with left severity stripe

#let spotlight-card-color(variant) = {
  if variant == "critical"         { color-bad }
  else if variant == "info"        { color-info }
  else if variant == "feature"     { color-ok }
  else if variant == "opportunity" { color-warn }
  else { color-primary }
}

#let spotlight-card(data) = {
  let variant      = if data.variant != none { data.variant } else { "info" }
  let stripe-color = spotlight-card-color(variant)

  block(
    width: 100%,
    fill: color-surface,
    stroke: (paint: color-border, thickness: component-card-border-width),
    radius: 10pt,
    clip: true,
  )[
    #block(
      width: 100%,
      inset: (left: 4pt),
      fill: stripe-color,
      radius: (left: 10pt),
    )[
      #block(
        width: 100%,
        fill: color-surface,
        inset: (x: spacing-4, y: spacing-4),
      )[
        #grid(
          columns: if data.metric != none { (1fr, auto) } else { (1fr,) },
          column-gutter: spacing-4,
          align: (top, right),

          // Left: eyebrow, title, body, detail, action
          stack(
            spacing: spacing-2,

            if data.eyebrow != none {
              text(
                size: font-size-xs,
                weight: "bold",
                fill: stripe-color,
                tracking: 0.08em,
                upper(data.eyebrow),
              )
            },

            text(size: font-size-lg, weight: "bold", fill: color-text)[#data.title],

            par(justify: true)[#text(size: font-size-sm, fill: color-text)[#data.body]],

            if data.detail != none {
              text(size: font-size-xs, fill: color-text-muted)[#data.detail]
            },

            if data.action != none {
              text(weight: "semibold", size: font-size-sm, fill: stripe-color)[#data.action →]
            },
          ),

          // Right: big metric (only if present)
          ..if data.metric != none {(
            align(right + top)[
              #text(size: font-size-3xl, weight: "bold", fill: stripe-color)[#data.metric]
            ],
          )},
        )
      ]
    ]
  ]
}