Published unlisted
Edited
May 26, 2021
Insert cell
Insert cell
config = ({
title: "Tom Larkworthy' Personal Blog",
description: "Random tech stuff",
notebook:
"https://observablehq.com/@tomlarkworthy/blog-index-html?collection=@tomlarkworthy/blog",
target: "/index.html",
subdomain: "tomlarkworthy",
app_id: "b6a918d2-9cda-4fde-b2ec-add91b22ea02",
base_url: "https://tomlarkworthy.endpointservices.net",
dependsOnTags: ["article", 'notebook'],
limit: 20
})
Insert cell
Insert cell
preview = deploy("preview", (req, res) => {
return res.send(page);
})
Insert cell
page = `<html class="has-navbar-fixed-top">
<head>
${header.outerHTML}
</head>
<body>
${topbar.outerHTML}
<div class="columns">
${sidebar.outerHTML}
<div class="column is-half">
<h1>Recent Articles</h1>
${content.outerHTML}
</div>
</div>
${articleFooter(config).outerHTML}
</body>
</html>`
Insert cell
content = html`
${articles.map(article => html`<section class="section content">
<small>${toDate(article.creationDate)}</small>
<h2><a href=${article.target}>${article.title}</a></h2>
${span(article.content)}
<hr class="hr"/>
</section>`)}
`
Insert cell
function toDate(timestamp) {
const date = new Date(0)
date.setUTCSeconds(timestamp.seconds)
return date
}
Insert cell
function span(content) {
const span = document.createElement("span");
span.innerHTML = content;
return span;
}
Insert cell
articles
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more