HTML Document From A Template And Page
Template with front matter with two token values:
---
tokens: {
pageTitle: Greetings,
greeting: Hello World
}
---
Page with two tokens:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{pageTitle}</title>
</head>
<body>
<main>
<h1>{greeting}</h1>
</main>
</body>
</html>
Generated HTML Document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Greetings</title>
</head>
<body>
<main>
<h1>Hello World</h1>
</main>
</body>
</html>
HTML Document Using A Component To Generates A List
team.json data source:
[
{"name": { "first": "John", "last": "Doe" }},
{"name": { "first": "Jane", "last": "Doe" }},
{"name": { "first": "Julia", "last": "Doe" }}
]
Template with a TeamMembers component tag that consumes team.json as a data source:
---
tokens: {
pageTitle: Team Members
}
---
<h1>Team</h1>
<p>Thanks to our team our rollout has been a huge success.</p>
<h2>Contributors</h2>
<TeamMembers datasources="team.json" />
TeamMembers component implemented in JavaScript:
function formatName(member) {
return `${member.name.first} ${member.name.last}`;
}
export const TeamMembers = function({ team }) {
return (
<ul>
{team.map(member => {
return <li>
<p><{formatName(member)}</p>
</li>;
})}
</ul>
);
};
TeamMembers component implementation in TypeScript:
interface TeamMember {
"name": {
"first": string,
"last": string
}
}
interface Props {
team: TeamMember[]
}
function formatName(member: TeamMember): string {
return `${member.name.first} ${member.name.last}`;
}
export const TeamMembers = function({ team }: Props): string {
return (
<ul>
{team.map(member => {
return <li>
<p><{formatName(member)}</p>
</li>;
})}
</ul>
);
};
Page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{pageTitle}</title>
</head>
<body>
<main>
{{template}}
</main>
</body>
</html>
Generated HTML Document:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Team Members</title>
</head>
<body>
<main>
<h1>team</h1>
<p>Thanks to our team our rollout has been a huge success.</p>
<h2>Contributors</h2>
<ul>
<li><p>John Doe</p></li>
<li><p>Jane Doe</p></li>
<li><p>Julia Doe</p></li>
</ul>
</main>
</body>
</html>
