takumi 2.2.2

Render UI component trees to images.
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

use std::hint::black_box;

use takumi::{prelude::*, render};

const ITERS: usize = 80;

const LONG_TEXT: &str = "Typography is the art and technique of arranging type to make written language legible, \
   readable and appealing when displayed. The arrangement of type involves selecting typefaces, \
   point sizes, line lengths, line-spacing and letter-spacing, and adjusting the space between \
   pairs of letters. The term typography is also applied to the style, arrangement, and \
   appearance of the letters, numbers, and symbols created by the process. Type design is a \
   closely related craft, sometimes considered part of typography; most typographers do not \
   design typefaces, and some type designers do not consider themselves typographers.";

fn load_global() -> Fonts {
  let mut g = Fonts::default();
  let regular: &[u8] = include_bytes!("../../assets/fonts/geist/Geist[wght].woff2");
  g.register(
    FontResource::new(regular.to_vec())
      .override_info(FontOverride {
        family_name: Some("Geist".into()),
        ..Default::default()
      })
      .generic_family(GenericFamily::SANS_SERIF),
  )
  .unwrap();
  g
}

fn many_runs() -> Node {
  let palette = [
    "text-gray-900",
    "text-red-600",
    "text-green-600",
    "text-blue-600",
    "text-purple-600",
    "text-orange-600",
  ];
  let weights = [
    "font-normal",
    "font-medium",
    "font-semibold",
    "font-bold",
    "font-extrabold",
  ];
  let mut spans: Vec<Node> = Vec::new();
  for (i, word) in LONG_TEXT.split_whitespace().enumerate() {
    let color = palette[i % palette.len()];
    let weight = weights[i % weights.len()];
    let tw = format!("flex text-[26px] {color} {weight}");
    spans.push(Node::text(format!("{word} ")).with_tw(tw.parse().unwrap()));
  }
  Node::container(spans).with_tw("flex flex-row w-full h-full p-12 bg-white".parse().unwrap())
}

fn main() {
  let g = load_global();
  for _ in 0..ITERS {
    let opts = RenderOptions::builder()
      .viewport(Viewport::new((1200, 630)))
      .node(many_runs())
      .fonts(&g)
      .build();
    black_box(render(opts).unwrap());
  }
}