html/example.ts at main · sander-io/html · GitHub

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
77
78
79
80
81
82
83
84
85
import { html, type HtmlNode, tag } from "@sander/html";
import { assertEquals } from "@std/assert";

const title = "Cool Projects";

interface Project {
  title: string;
  url: string;
}

const projects: Project[] = [{
  title: "Deno",
  url: "https://deno.com/",
}, {
  title: "TypeScript",
  url: "https://www.typescriptlang.org/",
}];

const cssRules = [
  "* { --ts-blue: #3178c6; }",
  "body { font-family: sans-serif; line-height: 1.6; }",
  "li > a { color: var(--ts-blue); text-decoration: none; }",
];

function list(items: HtmlNode[]) {
  return tag("ul", items.map((item) => tag("li", item)));
}

function link({ title, url }: Project) {
  return tag("a", { href: url }, title);
}

const result = html(
  tag("html", { lang: "en" }, [
    tag("head", [
      tag("meta", { charset: "utf-8" }),
      tag("title", title),
      tag("style", cssRules),
    ]),
    tag("body", [
      tag("h1", title),
      list(projects.map(link)),
    ]),
  ]),
  {
    doctype: "html",
  },
);

assertEquals(
  result,
  `\
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>
      Cool Projects
    </title>
    <style>
      * { --ts-blue: #3178c6; }
      body { font-family: sans-serif; line-height: 1.6; }
      li > a { color: var(--ts-blue); text-decoration: none; }
    </style>
  </head>
  <body>
    <h1>
      Cool Projects
    </h1>
    <ul>
      <li>
        <a href="https://deno.com/">
          Deno
        </a>
      </li>
      <li>
        <a href="https://www.typescriptlang.org/">
          TypeScript
        </a>
      </li>
    </ul>
  </body>
</html>
`,
);