@jgarber/templatetemplate
Version:
A very small JavaScript <template> manipulation library.
126 lines (105 loc) • 2.58 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TemplateTemplate: Examples</title>
<style>
body {
color: #333;
font-family: sans-serif;
line-height: 1.5;
padding: 3rem;
}
a {
color: #c00;
text-decoration: underline;
}
a:focus,
a:hover {
color: #a00;
}
table {
border-collapse: collapse;
width: 100%;
}
caption {
font-size: 1.25rem;
font-weight: bold;
margin-bottom: 0.5rem;
text-align: left;
}
thead {
background-color: #eee;
border-bottom: 0.25rem solid #ccc;
}
tbody tr {
border-bottom: 0.0625rem solid #ccc;
}
tr:hover {
background-color: #fafafa;
}
th,
td {
padding: 0.75rem 0.5rem 0.5rem;
}
th {
font-weight: bold;
text-align: left;
}
</style>
</head>
<body>
<h1>TemplateTemplate: Example</h1>
<table id="projects">
<caption>A table of open source projects.</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Author</th>
<th scope="col">URL</th>
<th scope="col">Languages</th>
</tr>
</thead>
<tbody></tbody>
</table>
<template id="row-template">
<tr>
<th class="name" scope="row"></th>
<td class="author"></td>
<td class="url"></td>
<td class="languages"></td>
</tr>
</template>
<template id="anchor-template">
<a></a>
</template>
<script type="module">
import TemplateTemplate from "../index.js";
const anchor = document.createElement("a");
anchor.href = "https://sixtwothree.org";
anchor.textContent = "Jason Garber";
document.querySelector("#projects tbody").append(
TemplateTemplate(document.querySelector("#row-template"), {
".name": "TemplateTemplate",
".author": "Jason Garber",
".url": "https://codeberg.org/jgarber/TemplateTemplate",
".languages": "JavaScript",
}),
TemplateTemplate("#row-template", {
"th": "CashCash",
"th + td": anchor,
".url": ["https://codeberg.org/jgarber/CashCash", {
"style": "font-style: italic;",
}],
"td:last-child": TemplateTemplate("#anchor-template", {
"a": ["JavaScript", {
"href": "https://codeberg.org/explore/repos?q=javascript&topic=1",
"target": "_blank",
}],
}),
})
);
</script>
</body>
</html>