elem

Create a HTML element.

  1. Element elem(T content)
    elem
    (
    string name
    string[string] attributes = null
    T...
    )
    if (
    !T.length ||
    !is(T[0] == string[string])
    )
  2. Element elem(string[string] attributes, T content)
  3. Element elem(T content)

Parameters

name

Name of the element.

attributes

Attributes for the element.

Return Value

Type: Element

a Element type, implictly castable to string.

Examples

1 import std.stdio : writeln;
2 
3 // Compile-time empty type detection
4 assert(elem!"input" == "<input/>");
5 assert(elem!"hr" == "<hr/>");
6 assert(elem!"p" == "<p></p>");
7 
8 // Content
9 assert(elem!"p"("Hello, World!") == "<p>Hello, World!</p>");
10 
11 // Compile-time attributes — variant A
12 assert(
13 
14     elem!("a", [ "href": "about:blank", "title": "Destroy this page" ])("Hello, World!")
15 
16     == `<a href="about:blank" title="Destroy this page">Hello, World!</a>`
17 
18 );
19 
20 // Compile-time attributes — variant B
21 assert(
22 
23     elem!("a", q{
24         href="about:blank"
25         title="Destroy this page" })(
26         "Hello, World!"
27     )
28     == `<a href="about:blank" title="Destroy this page">Hello, World!</a>`
29 
30 );
31 
32 // Nesting and input sanitization
33 assert(
34 
35     elem!"div"(
36         elem!"p"("Hello, World!"),
37         "-> Sanitized"
38     )
39 
40     == "<div><p>Hello, World!</p>-&gt; Sanitized</div>"
41 
42 );
43 
44 // Sanitized user input in attributes
45 assert(
46 
47     elem!"input"(["value": `"XSS!"`])
48     == `<input value="&quot;XSS!&quot;" />`
49 
50 );
51 
52 // Alternative method of nesting
53 assert(
54 
55     elem!("div", q{ style="background:#500" })
56         .add!"p"("Hello, World!")
57         .add("-> Sanitized")
58 
59     == `<div style="background:#500"><p>Hello, World!</p>-&gt; Sanitized</div>`
60 
61 );

A general example page

1 import std.stdio : writeln;
2 import std.base64 : Base64;
3 
4 enum page = Element.HTMLDoctype ~ elem!"html"(
5 
6     elem!"head"(
7 
8         elem!("title")("An example document"),
9 
10         // Metadata
11         Element.MobileViewport,
12 
13         elem!("style")(`
14 
15             html, body {
16                 height: 100%;
17                 font-family: sans-serif;
18                 padding: 0;
19                 margin: 0;
20             }
21             .header {
22                 background: #f7a;
23                 font-size: 1.5em;
24                 margin: 0;
25                 padding: 5px;
26             }
27             .article {
28                 padding-left: 2em;
29             }
30 
31         `.split("\n").map!"a.strip".filter!"a.length".join),
32 
33     ),
34 
35     elem!"body"(
36 
37         elem!("header", q{ class="header" })(
38 
39             elem!"h1"("Example website")
40 
41         ),
42 
43         elem!"h1"("Welcome to my website!"),
44         elem!"p"("Hello there,",
45             elem!"br", "may you want to read some of my articles?"),
46 
47         elem!("div", q{ class="article" })(
48             elem!"h2"("Stuff"),
49             elem!"p"("Description")
50         )
51 
52     )
53 
54 );
55 
56 enum target = cast(string) Base64.decode([
57     "PCFET0NUWVBFIGh0bWw+PGh0bWw+PGhlYWQ+PHRpdGxlPkFuIGV4YW1wbGUgZG9jdW",
58     "1lbnQ8L3RpdGxlPjxtZXRhIG5hbWU9InZpZXdwb3J0IiBjb250ZW50PSJ3aWR0aD1k",
59     "ZXZpY2Utd2lkdGgsIGluaXRpYWwtc2NhbGU9MSIgLz48c3R5bGU+aHRtbCwgYm9keS",
60     "B7aGVpZ2h0OiAxMDAlO2ZvbnQtZmFtaWx5OiBzYW5zLXNlcmlmO3BhZGRpbmc6IDA7",
61     "bWFyZ2luOiAwO30uaGVhZGVyIHtiYWNrZ3JvdW5kOiAjZjdhO2ZvbnQtc2l6ZTogMS",
62     "41ZW07bWFyZ2luOiAwO3BhZGRpbmc6IDVweDt9LmFydGljbGUge3BhZGRpbmctbGVm",
63     "dDogMmVtO308L3N0eWxlPjwvaGVhZD48Ym9keT48aGVhZGVyIGNsYXNzPSJoZWFkZX",
64     "IiPjxoMT5FeGFtcGxlIHdlYnNpdGU8L2gxPjwvaGVhZGVyPjxoMT5XZWxjb21lIHRv",
65     "IG15IHdlYnNpdGUhPC9oMT48cD5IZWxsbyB0aGVyZSw8YnIvPm1heSB5b3Ugd2FudC",
66     "B0byByZWFkIHNvbWUgb2YgbXkgYXJ0aWNsZXM/PC9wPjxkaXYgY2xhc3M9ImFydGlj",
67     "bGUiPjxoMj5TdHVmZjwvaDI+PHA+RGVzY3JpcHRpb248L3A+PC9kaXY+PC9ib2R5Pj",
68     "wvaHRtbD4="
69 ].join);
70 
71 assert(page == target);

Meta