Tech Lead at Taktile.
Formerly Firebase, Google
// Prod post https://tomlarkworthy.endpointservices.net/blogs/partial-deployment.html
metadata = ({
title: "Netlify Deployment Manager Notebook",
description: "How this blog is deployed to Netlify by an open source notebook",
notebook: 'https://observablehq.com/@tomlarkworthy/blog-netlify-deployment-manager',
content: content.outerHTML,
target: "/blogs/partial-deployment.html",
tags: ["article", "jamstack"],
twitterCreator: "@tomlarkworthy",
image: imageUrl,
get url() {
return 'https://tomlarkworthy.endpointservices.net' + this.target;
}
})
page
imageUrl = FileAttachment("graphic.png").url()
graphic = svg`<center><svg viewbox="0 0 800 200" width="100%" height="200">
${Array(120).fill(0).map((v, idx) => svg`
<g transform="translate(${(idx-20)*11} 30)">
<rect x=0 y="0" width="5" height="50" fill="#c00">
<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="${idx*11} 60 70"
to="${idx*11 + 360} 60 70"
dur="3s"
repeatCount="indefinite"/>
</rect>
</g>
`)}
</svg></center>`
page = `<!doctype html>
<html class="has-navbar-fixed-top">
<head>
${articleHeader(metadata).outerHTML}
</head>
<body>
${topbar.outerHTML}
<div class="columns">
${sidebar.outerHTML}
<div class="column is-half">
${html`<div class="content"><h1>${metadata.title}`.outerHTML}
${content.outerHTML}
</div>
</div>
${articleFooter(metadata).outerHTML}
</body>
</html>`
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.
