29:null 2a:["$","title",null,{"children":"Interactive Blogging with Observable Notebooks and Hexo | Ben Simonds | Observable"}] 2f:T545, { const svgwidth = Math.min(width, 760) const height = 200; const margin = {left: 130, right: 40, top: 60, bottom: 10} const container = d3.create("div").attr("width", "100%") const svg = container.append("svg") .attr("height", height) .attr("viewBox", [0, 0, svgwidth, height]); const x = d3.scaleLinear() .domain([0, 1.0]) .range([margin.left, svgwidth - margin.right]); const y = d3.scaleBand() .domain(data.map(d => d.label)) .range([margin.top, height - margin.bottom]) .padding(0.1); // Plot Bars svg.append("g").attr("id", "bars").selectAll("rect") .data(data) .join("rect") .attr("x", d => x(0)) .attr("y", d => y(d.label)) .attr("width", d => x(d.value) - x(0)) .attr("height", y.bandwidth()) .attr("fill","black") // Show Axes const xAxis = d3.axisTop(x); xAxis.tickFormat(d3.format('.0%')) svg.append("g").attr("transform", "translate(0,50)").call(xAxis) svg.append("g").attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y)) // Add an axis title. svg.append("text") .attr("class", "x label") .attr("text-anchor", "middle") .attr("x", x(0.5)) .attr("y", 20) .attr("font-family", "sans-serif") .attr("font-size", "16px") .text("Proportion of this blog post by subject."); return container.node(); }30:T459,### Steps The steps are very similar to Robin's, with a few adjustments. 1. Create your notebook in observable. 2. Use the download code option in observable to find the link to your notebook code. For example, the url to download this notebook is `https://api.observablehq.com/@bensimonds/interactive-blogging-with-observable-notebooks-and-hexo@81.tgz?v=3`. 3. Add this link to your javascript dependencies for your project with `yarn add .` 4. We need some way to copy our notebook code from our `node_modules` folder to the `public/` folder when we build our static site. I added a step in my github actions workflow to do this. For developing locally I wrote a hexo script that does the same. 5. I created a helper function in hexo that generates the script and the div the notebook renders into and updated my post template to look in the post metadata for a `notebook` attribute and call the helper function. To update the post, I just need to republish the notebook, and update my package.json file with the latest version number. Committing the change then rebuilds the static version of the page.31:T4de,### Hexo Setup My post markdown just looks like the following. I just need to add the path to the notebook in the front matter, though I can add additional content that will appear below the main notebook too. ```yaml --- title: Observable Notebooks and Hexo author: Ben Simonds date: 2022-05-04 22:41:25 tags: notebook: "@bensimonds/interactive-blogging-with-observable-notebooks-and-hexo" --- ``` The helper function looks like this: ```javascript hexo.extend.helper.register('observable_notebook', function(path){ return `

` }); ``` And my post template just has a section that looks like this. ```ejs <% if (page.notebook) { %> <%- observable_notebook(page.notebook) %> <% } else { %>

<%- page.title %>

<% } %> ```32:[] 2d:{"id":"5da2161e9f1f2784","slug":"interactive-blogging-with-observable-notebooks-and-hexo","title":"Interactive Blogging with Observable Notebooks and Hexo","thumbnail":"37f68ec02f9ab14db6eb6a99492ea143feb11d076f34b7b9a264a24a7685d1b6","access_level":"public","create_time":"$D2022-05-04T20:09:02.886Z","update_time":"$D2023-03-01T16:13:09.731Z","view_time":null,"first_public_time":"$D2022-05-04T20:13:58.726Z","has_unpublished_edits":null,"fork":{"id":"662080314eb2cb2c","slug":"blog-post","title":"Blog Post","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":2,"starred":false,"owner":{"type":"team","id":"2e5e341b76bf2323","login":"bensimonds","name":"Ben Simonds","avatar_url":"https://avatars-next.observableusercontent.com/bb4a7fdf77be269eb0b697887a2808df69081986eef6aa2d96c81bb3c533528c","tier":"starter_2024"},"version":197,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"01828926f5962c33","login":"bensimonds","name":"Ben Simonds","avatar_url":"https://avatars-next.observableusercontent.com/bb4a7fdf77be269eb0b697887a2808df69081986eef6aa2d96c81bb3c533528c","tier":null}],"members":[{"type":"individual","id":"01828926f5962c33","login":"bensimonds","name":"Ben Simonds","avatar_url":"https://avatars-next.observableusercontent.com/bb4a7fdf77be269eb0b697887a2808df69081986eef6aa2d96c81bb3c533528c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Interactive Blogging with Observable Notebooks and Hexo","cells":[{"id":0,"value":"# Interactive Blogging with Observable Notebooks and Hexo\nI recently read Robin Linacre's [post](https://www.robinlinacre.com/interactive_blogging/) on using observable to author interactive blog posts with [Gatsby](https://www.gatsbyjs.com/). Since my personal site is built on [Hexo](https://hexo.io/) - a very similar style of static site generator, I was inspired to try out a very similar sort of thing thing.\n\nLets start with a brief summary of what this post is about:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":87,"value":"data = [\n {\"label\": \"Technical Messing Around\", \"value\": 0.95},\n {\"label\": \"Actual Data Visualisation\", \"value\": 0.05}\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"