make a cute little canvas to draw on and hook it up to some ojs

.quarto/_freeze/site_libs/quarto-listing/quarto-listing.js

@@ -2,8 +2,7 @@ const kProgressiveAttr = "data-src";
 let categoriesLoaded = false;
 
 window.quartoListingCategory = (category) => {
-  // category is URI encoded in EJS template for UTF-8 support
+  category = atob(category);
-  category = decodeURIComponent(atob(category));
   if (categoriesLoaded) {
     activateCategory(category);
     setCategoryHash(category);

ghost-upload/.gitlab-ci.yml

@@ -13,17 +13,3 @@ publish:
     - pages
   rules:
     - if: "$CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH"
-
-publish_update:
-  stage: deploy
-  image: rust:latest
-  variables:
-    UPDATE_EXISTING: "true"
-  script:
-    - cd ./ghost-upload
-    - cargo run
-  needs:
-    - pages
-  rules:
-    - if: "$CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH"
-      when: manual

ghost-upload/README.md

@@ -1,17 +1,3 @@
 # ghost-upload
 
-This tool uploads posts from https://projects.ansonbiggs.com to https://notes.ansonbiggs.com.
+This code uploads posts from https://projects.ansonbiggs.com to https://notes.ansonbiggs.com. I couldn't figure out how to update posts, and the kagi API doesn't make it clear how long it caches results for so for now only posts that don't exist on the ghost blog will be uploaded. If you want to update content you need to manually make edits to the code and delete posts on the blog.
-
-What's new:
-- Uses the Ghost Admin API to check for existing posts by slug instead of probing the public site.
-- Optional update support: set `UPDATE_EXISTING=true` to update an existing post in-place (via `PUT /ghost/api/v3/admin/posts/{id}?source=html`).
-- Safer slug handling (trims trailing `/` and falls back to the last path segment).
-
-Env vars:
-- `admin_api_key`: Ghost Admin API key in `key_id:secret` format.
-- `kagi_api_key`: Kagi Summarizer API key.
-- `UPDATE_EXISTING` (optional): if `true`/`1`, update posts that already exist in Ghost.
-
-Notes:
-- Updates use optimistic concurrency by sending the current `updated_at` from Ghost. If someone edits a post in Ghost after we fetch it, the update will fail with a 409 and be reported in the console.
-- Summaries are always regenerated when creating or updating; if you want to avoid re-summarizing on updates, leave `UPDATE_EXISTING` unset.

ghost-upload/src/main.rs

@@ -1,5 +1,6 @@
 use feed_rs::model::Entry;
 use feed_rs::parser;
+use futures::future::join_all;
 use jsonwebtoken::{encode, Algorithm, EncodingKey, Header};
 use maud::html;
 use reqwest::Client;
@@ -19,29 +20,6 @@ struct PostPayload {
     posts: Vec<Post>,
 }
 
-#[derive(Serialize, Debug, Clone)]
-struct UpdatePost {
-    id: String,
-    title: String,
-    slug: String,
-    html: String,
-    status: String,
-    published_at: String,
-    updated_at: String,
-    canonical_url: String,
-    tags: Vec<String>,
-    feature_image: Option<String>,
-    feature_image_alt: Option<String>,
-    feature_image_caption: Option<String>,
-    meta_description: Option<String>,
-    custom_excerpt: Option<String>,
-}
-
-#[derive(Serialize, Debug)]
-struct UpdatePayload {
-    posts: Vec<UpdatePost>,
-}
-
 #[derive(Serialize, Debug, Clone)]
 struct Post {
     title: String,
@@ -143,54 +121,24 @@ impl Post {
             meta_description,
             custom_excerpt,
         };
+        dbg!(&x);
         x
     }
 }
 
 fn get_slug(link: &str) -> String {
-    // Prefer portion after "/posts/" if present, otherwise fall back to the last path segment
+    link.split_once("/posts/").unwrap().1.to_string()
-    let raw = match link.split_once("/posts/") {
-        Some((_, rest)) => rest,
-        None => link.rsplit('/').next().unwrap_or(link),
-    };
-    raw.trim_end_matches('/')
-        .to_string()
 }
 
-#[derive(Deserialize, Debug)]
+async fn check_if_post_exists(entry: &Entry) -> bool {
-struct GhostPostSummary {
+    let posts_url = "https://notes.ansonbiggs.com/";
-    id: String,
+    let link = entry.links.first().unwrap().href.as_str();
-    slug: String,
+    let slug = get_slug(link);
-    updated_at: String,
-}
 
-#[derive(Deserialize, Debug)]
+    match reqwest::get(format!("{}{}", posts_url, slug)).await {
-struct GhostPostsResponse<T> {
+        Ok(response) => response.status().is_success(),
-    posts: Vec<T>,
+        Err(_) => false,
-}
-
-async fn get_existing_post_by_slug(
-    client: &Client,
-    ghost_admin_base: &str,
-    token: &str,
-    slug: &str,
-) -> Option<GhostPostSummary> {
-    // Use Ghost Admin API to search by slug
-    let url = format!(
-        "{}/posts/?filter=slug:{}&fields=id,slug,updated_at",
-        ghost_admin_base, slug
-    );
-    let resp = client
-        .get(url)
-        .header("Authorization", format!("Ghost {}", token))
-        .send()
-        .await
-        .ok()?;
-    if !resp.status().is_success() {
-        return None;
     }
-    let json = resp.json::<GhostPostsResponse<GhostPostSummary>>().await.ok()?;
-    json.posts.into_iter().next()
 }
 
 async fn fetch_feed(url: &str) -> Vec<Entry> {
@@ -257,8 +205,7 @@ async fn summarize_url(url: &str) -> String {
 }
 #[tokio::main]
 async fn main() {
-    let ghost_admin_base = "https://notes.ansonbiggs.com/ghost/api/v3/admin";
+    let ghost_api_url = "https://notes.ansonbiggs.com/ghost/api/v3/admin/posts/?source=html";
-    let ghost_posts_create_url = format!("{}/posts/?source=html", ghost_admin_base);
     let ghost_admin_api_key = env::var("admin_api_key").unwrap();
 
     let feed = "https://projects.ansonbiggs.com/index.xml";
@@ -291,87 +238,51 @@ async fn main() {
     )
     .expect("JWT encoding failed");
 
-    let client = Client::new();
     // Prepare the post data
     let entries = fetch_feed(feed).await;
 
-    // Control whether to update existing posts via env var
+    let post_exists_futures = entries.into_iter().map(|entry| {
-    let update_existing = env::var("UPDATE_EXISTING").map(|v| v == "1" || v.eq_ignore_ascii_case("true")).unwrap_or(false);
+        let entry_clone = entry.clone();
+        async move { (entry_clone, check_if_post_exists(&entry).await) }
+    });
 
-    for entry in entries {
+    let post_exists_results = join_all(post_exists_futures).await;
-        let link = entry.links.first().unwrap().href.as_str();
-        let slug = get_slug(link);
 
-        let existing = get_existing_post_by_slug(&client, ghost_admin_base, &token, &slug).await;
+    let filtered_entries: Vec<Entry> = post_exists_results
+        .into_iter()
+        .filter_map(|(entry, exists)| if !exists { Some(entry) } else { None })
+        .collect();
 
-        match existing {
+    if filtered_entries.is_empty() {
-            None => {
+        println!("Nothing to post.");
-                // Create new post
+        return;
-                let post = Post::new(entry.clone()).await;
+    }
-                let post_payload = PostPayload { posts: vec![post.clone()] };
 
-                let response = client
+    let post_futures = filtered_entries.into_iter().map(Post::new);
-                    .post(&ghost_posts_create_url)
-                    .header("Authorization", format!("Ghost {}", token))
-                    .json(&post_payload)
-                    .send()
-                    .await
-                    .expect("Request failed");
 
-                if response.status().is_success() {
+    let client = Client::new();
-                    println!("Post {} published successfully.", post.title);
-                } else {
-                    println!(
-                        "Failed to publish post {}.\n\tStatus: {}",
-                        &post.title,
-                        response.status()
-                    );
-                }
-            }
-            Some(summary) => {
-                if !update_existing {
-                    println!("Post '{}' exists (slug: {}), skipping.", entry.title.unwrap().content, slug);
-                    continue;
-                }
 
-                // Update existing post
+    for post in join_all(post_futures).await {
-                let post = Post::new(entry.clone()).await;
+        let post_payload = PostPayload {
-                let update = UpdatePost {
+            posts: vec![post.clone()],
-                    id: summary.id,
+        };
-                    title: post.title,
-                    slug: post.slug,
-                    html: post.html,
-                    status: post.status,
-                    published_at: post.published_at,
-                    updated_at: summary.updated_at,
-                    canonical_url: post.canonical_url,
-                    tags: post.tags,
-                    feature_image: post.feature_image,
-                    feature_image_alt: post.feature_image_alt,
-                    feature_image_caption: post.feature_image_caption,
-                    meta_description: post.meta_description,
-                    custom_excerpt: post.custom_excerpt,
-                };
 
-                let update_url = format!("{}/posts/{}/?source=html", ghost_admin_base, update.id);
+        let response = client
-                let response = client
+            .post(ghost_api_url)
-                    .put(update_url)
+            .header("Authorization", format!("Ghost {}", token))
-                    .header("Authorization", format!("Ghost {}", token))
+            .json(&post_payload)
-                    .json(&UpdatePayload { posts: vec![update] })
+            .send()
-                    .send()
+            .await
-                    .await
+            .expect("Request failed");
-                    .expect("Update request failed");
 
-                if response.status().is_success() {
+        // Check the response
-                    println!("Post '{}' updated successfully.", entry.title.unwrap().content);
+        if response.status().is_success() {
-                } else {
+            println!("Post {} published successfully.", post.title);
-                    println!(
+        } else {
-                        "Failed to update post '{}' (status: {}).",
+            println!(
-                        entry.title.unwrap().content,
+                "Failed to publish post {}.\n\tResp: {:?}",
-                        response.status()
+                &post.title, response
-                    );
+            );
-                }
-            }
         }
     }
 }

posts/2025-05-25-Brachistochrone/index.qmd

@@ -0,0 +1,114 @@
+---
+title: "Brachistochrone"
+description: |
+  Lets create a double pendulum in Observable JS!
+date: 2025-05-09
+categories:
+  - Observable JS
+  - Code
+  - Math
+---
+
+This is a bunch of text This is a bunch of text This is a bunch of text This is a bunch of text This is a bunch of text This is a bunch of text This is a bunch of text This is a bunch of text This is a bunch of text This is a bunch of text This is a bunch of text 
+
+:::{.column-screen}
+```{ojs}
+//| echo: false
+
+
+viewof canvas = {
+  const height = 500;
+  const canvas = html`<canvas width=${width} height="${height}" style="border: 1px solid #ccc; cursor: crosshair;"></canvas>`;
+  const ctx = canvas.getContext('2d');
+
+  let isDrawing = false;
+  let lastX = 0;
+  let lastY = 0;
+  let pathLength = 0;
+  let pathHistory = [{time: Date.now(), length: 0}];
+
+  // Drawing settings
+  ctx.strokeStyle = '#000';
+  ctx.lineWidth = 2;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  canvas.addEventListener('mousedown', (e) => {
+    if (!isDrawing) {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.arc(300, 100, 5, 0, 2 * Math.PI);
+      ctx.fillStyle = 'red';
+      ctx.fill();
+      ctx.arc(600, 300, 5, 0, 2 * Math.PI);
+      ctx.fillStyle = 'red';
+      ctx.fill();
+      pathLength = 0;
+      pathHistory = [{time: Date.now(), length: 0}];
+      canvas.value = {length: pathLength, history: pathHistory};
+      canvas.dispatchEvent(new CustomEvent("input"));
+    }
+    isDrawing = true;
+    [lastX, lastY] = [e.offsetX, e.offsetY];
+  });
+
+  canvas.addEventListener('mousemove', (e) => {
+    if (!isDrawing) return;
+
+    // Calculate distance
+    const distance = Math.sqrt(
+      Math.pow(e.offsetX - lastX, 2) + 
+      Math.pow(e.offsetY - lastY, 2)
+    );
+    const angle = Math.atan2(e.offsetY - lastY, e.offsetX - lastX)
+    pathLength += distance;
+
+    // Draw
+    ctx.beginPath();
+    ctx.moveTo(lastX, lastY);
+    ctx.lineTo(e.offsetX, e.offsetY);
+    ctx.stroke();
+    [lastX, lastY] = [e.offsetX, e.offsetY];
+
+    // Update value and emit event
+    pathHistory.push({time: Date.now(), length: pathLength});
+    canvas.value = {length: pathLength, history: pathHistory};
+    canvas.dispatchEvent(new CustomEvent("input"));
+  });
+
+  canvas.addEventListener('mouseup', () => isDrawing = false);
+  canvas.addEventListener('mouseout', () => isDrawing = false);
+
+  // Initial value
+  canvas.value = {length: 0, history: pathHistory};
+  return canvas;
+}
+
+```
+
+
+```{ojs}
+//| echo: false
+md`Current path length: **${canvas.length?.toFixed(0) || 0} pixels**`
+```
+
+```{ojs}
+//| echo: false
+import {Plot} from "@observablehq/plot"
+
+pathChart = Plot.plot({
+  width: width,
+  height: 200,
+  y: {label: "Path Length (pixels)"},
+  x: {label: "Time", type: "time"},
+  marks: [
+    Plot.line(canvas.history || [], {
+      x: "time", 
+      y: "length",
+      stroke: "steelblue",
+      strokeWidth: 2
+    })
+  ]
+})
+```
+
+This is a bunch of text This is a bunch of text This is a bunch of text This is a bunch of text This is a bunch of text This is a bunch of text This is a bunch of text This is a bunch of text This is a bunch of text This is a bunch of text This is a bunch of text