local h = require "html"

function code_example(source, output)
	return h.div {
		h.h3 "source",
		h.code {h.pre{source}},
		h.h3 "output",
		h.code {h.pre{output}}
	}
end


print(h.html {
	h.head {
		h.meta{charset = "utf-8"},
		h.style{h.raw[[
			body {
				max-width: 65ch; font-family: sans-serif; margin:auto;
			}
		]]}
	},
	h.body {
		h.h1[[simple HTML DSL for lua 5.3]],
		h.p[[
			this library returns a table which, when indexed with the name of
			an HTML tag, provides a function which generates a data structure
			representing an HTML element. when this data structure is converted
			to a string, the corresponding HTML is generated.
		]],
		h.code[[local h = require "html"]],
		h.p[[
			calling a tag's function with no arguments produces a self-closing
			tag.
		]],
		code_example([[print(h.hr())]], [[<hr />]]),
		h.p[[
			calling a tag's function with a single array or value argument
			produces a tag with the children provided in the array. non-table
			values may appear in the list of children or in its stead. they are
			converted to a string an escaped.
		]],
		code_example(
			[[print(h.section{h.h1"foo",h.p"bar"})]],
			[[<section><h1>foo</h1><p>bar</p></section>]]
		),
		h.p[[
			calling a tag's function with a single set of key/value pairs as
			the argument produces a self-closing tag with attributes
			corresponding to the key/value pairs
		]],
		code_example(
			[[print(h.meta{charset = "utf-8"})]],
			[[<meta charset="utf-8" />]]
		),
		h.p[[
			calling a tag's function with a set of key/value pairs and then an
			array or value as the arguments produces a tag with attributes
			corresponding to the key/value pairs.
		]],
		code_example(
			[[print(h.a({href = "https://example.com"}, "foobar"))]],
			[[<a href="https://example.com">foobar</a>]]
		),
		h.p[[
			a table used in a list of children must either be generated from
			the HTML functions or have a "tohtml" function or a "render"
			function, returning HTML structures or HTML source respectively. a
			table that is not a set of attributes or an array of element
			children may not be used as arguments to an HTML function.
		]],
		code_example(
			[[
local db_record = {name = "foobar", id = 256}
setmetatable(db_record, {
	tohtml = function(x)
		return h.a(
			{href = "https://example.com/" .. x.id}, x.name)
	end
})

print(h.p{"search result: ", db_record})
			]],
			'<p>search result: <a href="https://example.com/256">foobar</a></p>'
		),
		h.p[[
			the `raw` function will insert text verbatim into the HTML,
			unescaped.
		]],
		code_example(
			[[
local html_source = "<marquee>hello</marquee>"
print(h.p{html_source})
print(h.p{h.raw(html_source)})
			]],
			[[
<p>&lt;marquee&gt;hello&lt;/marquee&gt;</p>
<p><marquee>hello</marquee></p>
			]]
		),
		h.p[[
			included with this documentation is "example.lua" which produces
			this documenation in HTML via the DSL.
		]]
	}
})