$def with (now, characters, toc, story, api, readme)
<!doctype html>
<html>
<head>
<title>Understory Stream</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Faustina&display=swap" rel="stylesheet">
<style>
body {
background-color: #002b36;
color: #839496;
font-family: 'Faustina', sans-serif;
font-size: 16px;
margin: 4em auto;
max-width: 50em; }
img {
width: 100%; }
a {
color: #c1d1e7;
text-decoration: none; }
a:link {
color: #268bd2; }
a:visited {
color: #6c71c4; }
a:active {
color: #dc322f; }
.filler { height: 10em; width: 1em; }
.storyboard { column-count: $len(characters); }
.storyboard img { border: 0; .1em solid #586e75; }
/* section {{ margin: 6em 0; }} */
.character-name { font-weight: bold; }
pre {
background-color: #073642;
font-size: .75em;
margin-left: 4em;
padding: 1em;
width: 50em; }
</style>
</head>
<body class=h-entry>
<header>
<h1><a class="p-name u-url" href=/>Understory Stream</a></h1>
<p><small>Last updated <time class=dt-updated
datetime="$now.to_iso8601_string()">$now.to_formatted_date_string()</time> by <a
class="p-author h-card" href=https://angelogladding.com>Angelo Gladding</a></small></p>
<p class=p-summary>The <a href=https://github.com/canopy/understory>understory</a>
implements IndieWeb technologies. The <a href=https://github.com/canopy/canopy>canopy</a>
uses the understory to provide an easy to use first-class IndieWeb "client".</p>
</header>
<aside>
<a href=#map>Map</a><br>
<a href=#nursery>Nursery</a>
</aside>
<!--nav>
<ul>
<li><a href=#identity>identity</a></li>
<li><a href=#content>content</a></li>
<li><a href=#collaboration>collaboration</a></li>
</ul>
</nav-->
<div class=e-content>
<article>
<p>This is Alice and Bob using separately mounted IndieWeb applications
to communicate.</p>
<nav>
<ol>
$:toc
</ol>
</nav>
<section>
$:story
</section>
</article>
<article>
<h2 id=map>Map</h2>
<ul>
$for package_name, package_description in api:
<li><span style="display: inline-block; width: 4em;">$package_name</span> $package_description[0]</li>
</ul>
</article>
<article>
<h2 id=nursery>Nursery</h2>
$:mkdn(readme)
</article>
</div>
<script>
if (window.location.href.startsWith("file:///")) {
document.querySelectorAll("img").forEach((el) => {
parts = el.src.split("/")
el.src = parts[parts.length - 1]
})
}
</script>
</body>
</html>
