Public
Edited
Jun 26, 2024
viewof tag = Inputs.text({ placeholder: "e.g. llms, python, projects" })
viewof priorToDate = Inputs.text({ placeholder: "Prior to YYYY-MM-DD (optional)" })
viewof results = Inputs.button(
tag ? `Fetch all content tagged "${tag}"` : "Select a tag first",
{
value: "",
reduce: async () => fetchBlogEntriesByTag(tag),
disabled: !tag
}
)
results.result
async function fetchBlogEntriesByTag(tag) {
const baseUrl = "https://datasette.simonwillison.net/simonwillisonblog.json";
let where = "where tag_id in (select id from blog_tag where tag = :tag))";
if (priorToDate) {
where += " and created > :date";
}
let sql = `select '/e/' || id as id, title, body from blog_entry where id in (select entry_id from blog_entry_tags ${where}
union all
select '/q/' || id as id, source as title, quotation as body
from blog_quotation where id in (select quotation_id from blog_quotation_tags ${where}
union all
select '/b/' || id as id, link_title as title, commentary as body
from blog_blogmark where id in (select blogmark_id from blog_blogmark_tags ${where}
`;
const url = `${baseUrl}?sql=${encodeURIComponent(
sql
)}&tag=${encodeURIComponent(tag)}&_shape=objects&date=${priorToDate}`;
console.log(url);
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
const result = data.rows
.map(
(b, index) =>
`<article id="${b.id}" title="${b.title}">${stripTags(
b.body.replace(/\r\n/g, "\n").replace(/\r/g, "\n")
)}</article>`
)
.join("\n\n");
return { result, truncated: data.truncated };
} catch (error) {
console.error("Error fetching blog entries:", error);
throw error;
}
}
function stripTags(html) {
return html.replace(/<[^>]*>/g, "");
}
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.
