` (with format: `{postTitle} | alex wein's blog` or just `alex wein's blog` for homepage)\n- OG meta tags:\n - `og:type` = \"website\"\n - `og:title` = the page title\n - `og:description` = (optional, can be empty or a default)\n - `og:image` = URL to `/og-image.png?title={encodedTitle}`\n- Twitter card meta tags:\n - `twitter:card` = \"summary_large_image\"\n - `twitter:title` = the page title\n - `twitter:image` = same as og:image\n\nProps should include:\n- `title: string` - The page/post title\n\n### 4. Update `Layout.tsx`\n\nModify Layout to accept and use the Head component:\n- Add a `title` prop\n- Replace the existing `<head>` contents with the new Head component\n- Keep the existing stylesheet link\n\n### 5. Update `index.tsx`\n\nUpdate all routes to pass the appropriate title:\n\n#### Homepage (`/`)\n- Title: `\"alex wein's blog\"`\n\n#### Individual post pages (`/posts/*`)\n- **Extract the title from the markdown content** by finding the first `## ` or `# ` heading\n- Pass this extracted title to Layout\n\n#### About page (`/about`)\n- Title: `\"About\"`\n\n#### Special pages (like `/dbt`, `/2019/03/15/visualizing-visualizers/`)\n- Extract title from markdown or use a sensible default\n\n### 6. Title Extraction Helper\n\nCreate a helper function to extract the title from markdown:\n\n```typescript\nfunction extractTitleFromMarkdown(markdown: string): string {\n // Look for first h1 (# ) or h2 (## ) heading\n const h1Match = markdown.match(/^#\\s+(.+)$/m);\n const h2Match = markdown.match(/^##\\s+(.+)$/m);\n \n // Prefer h1, fall back to h2, then default\n return h1Match?.[1] || h2Match?.[1] || \"alex wein's blog\";\n}\n```\n\nNote: The current posts use `##` (h2) as their top-level headings, so make sure to check for both `#` and `##`.\n\n## Important Details\n\n### Base URL\nYou'll need to determine the base URL for constructing absolute OG image URLs. Options:\n1. Hardcode it (e.g., `https://alexwein-alexblogs.web.val.run`)\n2. Derive it from `req.url` in the handler\n3. Use a constant file like the reference does\n\n### Route Integration\nThe `/og-image.png` route needs to be added to the main handler in `index.tsx`. Add it before the 404 fallback:\n\n```typescript\nif (url.pathname === \"/og-image.png\") {\n // Import and use the og-image handler\n}\n```\n\nOr create it as a sub-app using Hono like the reference does.\n\n### Dependencies to Add\n- `https://esm.sh/word-wrap@1.2.5` - For wrapping long titles\n- `https://deno.land/x/resvg_wasm@0.2.0/mod.ts` - For SVG to PNG conversion\n\n## Design Notes\n\nKeep the OG image design simple and readable:\n- White background\n- Black text\n- A colored horizontal line as a separator (pick a nice accent color)\n- The post title large and prominent\n- \"alex wein's blog\" smaller, at the bottom\n\n## Summary of Files to Create/Modify\n\n| File | Action |\n|------|--------|\n| `components/OGImage.tsx` | **Create** - SVG image component |\n| `components/Head.tsx` | **Create** - Head component with OG tags |\n| `og-image.tsx` or `routes/og-image.tsx` | **Create** - PNG endpoint |\n| `Layout.tsx` | **Modify** - Use Head component, accept title prop |\n| `index.tsx` | **Modify** - Extract titles, pass to Layout, add og-image route |\n\n## Testing\n\nAfter implementation, test by:\n1. Visiting `/og-image.png` - should show default \"alex wein's blog\" image\n2. Visiting `/og-image.png?title=Test%20Title` - should show \"Test Title\"\n3. Using a social media debugger (Twitter Card Validator, Facebook Sharing Debugger, etc.) to verify the OG tags are working\n",[],[324],"99ee30ec-046d-11f1-aa51-42dde27851f2","og-image.tsx","99ee31d2-046d-11f1-aa51-42dde27851f2",6,["D",1770500420558],"http","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { render as renderPNG } from \"https://deno.land/x/resvg_wasm@0.2.0/mod.ts\";\nimport { renderToStaticMarkup } from \"https://esm.sh/react-dom@18.2.0/server\";\nimport OGImage from \"./components/OGImage.tsx\";\n\nexport default async function(req: Request): Promise<Response> {\n const url = new URL(req.url);\n const title = url.searchParams.get(\"title\") || undefined;\n const format = url.searchParams.get(\"format\");\n \n const svg = renderToStaticMarkup(<OGImage title={title} />);\n\n // Return SVG if requested (useful for debugging)\n if (format === \"svg\") {\n return new Response(svg, {\n headers: {\n \"Content-Type\": \"image/svg+xml\",\n },\n });\n }\n\n // Convert to PNG\n const png = await renderPNG(svg);\n\n return new Response(png, {\n headers: {\n \"Content-Type\": \"image/png\",\n \"Content-Length\": png.length.toString(),\n \"Cache-Control\": \"public, max-age=86400\", // Cache for 24 hours\n },\n });\n}\n",[],[332],"af824164-046d-11f1-9255-42dde27851f2","index.tsx","019c3a08-f196-704e-b9ee-ce4c488ff8da",["D",1770500456744],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport Markdown from \"https://esm.sh/react-markdown@9?deps=react@18.2.0\";\nimport remarkGfm from \"https://esm.sh/remark-gfm?deps=react@18.2.0\";\nimport { listFiles, readFile } from \"https://esm.town/v/std/utils@79-main/index.ts\";\nimport { renderToString } from \"npm:react-dom@18.2.0/server\";\nimport { getHits } from \"./analytics.ts\";\nimport { Layout } from \"./Layout.tsx\";\n\nconst SITE_NAME = \"alex wein's blog\";\n\n// Extract title from markdown - looks for first h1 or h2\nfunction extractTitleFromMarkdown(markdown: string): string {\n const h1Match = markdown.match(/^#\\s+(.+)$/m);\n const h2Match = markdown.match(/^##\\s+(.+)$/m);\n return h1Match?.[1] || h2Match?.[1] || SITE_NAME;\n}\n\n// Custom image component that supports width/maxWidth via URL fragment\n// Usage: ![alt](url#width=300) or ![alt](url#maxWidth=400)\nfunction CustomImage({ src, alt, ...props }: { src?: string; alt?: string; [key: string]: any }) {\n let cleanSrc = src || \"\";\n let style: Record<string, string> = {};\n\n // Parse fragment for size hints\n if (src && src.includes(\"#\")) {\n const [baseSrc, fragment] = src.split(\"#\");\n cleanSrc = baseSrc;\n \n const params = new URLSearchParams(fragment);\n if (params.get(\"width\")) {\n style.width = params.get(\"width\") + \"px\";\n }\n if (params.get(\"maxWidth\")) {\n style.maxWidth = params.get(\"maxWidth\") + \"px\";\n }\n if (params.get(\"height\")) {\n style.height = params.get(\"height\") + \"px\";\n }\n }\n\n return <img src={cleanSrc} alt={alt} style={style} {...props} />;\n}\n\nconst markdownComponents = {\n img: CustomImage,\n};\n\nfunction Header() {\n return (\n <header style={{ marginBottom: \"20px\", padding: \"10px\", borderBottom: \"1px solid gray\" }}>\n <a href=\"/\" style={{ marginRight: \"20px\" }}>Home</a>\n <a href=\"/about\">About</a>\n </header>\n );\n}\n\nfunction PostComponent({ markdown, link }: { markdown: string; link?: string }) {\n return (\n <div style={{ border: \"1px solid gray\", padding: \"10px\", marginBottom: \"20px\", borderRadius: \"5px\" }}>\n <a href={`/posts/${link}`}>{link}</a>\n <Markdown remarkPlugins={[remarkGfm]} components={markdownComponents}>{markdown}</Markdown>\n </div>\n );\n}\n\nexport default async function(req: Request): Promise<Response> {\n const url = new URL(req.url);\n const baseUrl = `${url.protocol}//${url.host}`;\n const referer = req.headers.get(\"referer\");\n \n let monthHits, todayHits;\n try {\n const hits = await getHits(url.pathname, referer);\n monthHits = hits.monthHits;\n todayHits = hits.todayHits;\n } catch (e) {\n console.log(\"Caught database error: \", e);\n }\n \n if (url.pathname === \"/\") {\n const files = await listFiles(import.meta.url);\n const posts = files.filter((file) => file.path.startsWith(\"posts/\"));\n const postContents = await Promise.all(\n posts.map(async (file) => readFile(file.path, import.meta.url)),\n );\n\n return html(\n <div>\n <Header />\n <h1>Alex Wein has some thoughts</h1>\n {postContents.map((markdown, i) => <PostComponent markdown={markdown} link={posts[i].name} />)}\n <a href=\"https://www.val.town/x/alexwein/alexBlogs\">View source</a>\n </div>,\n SITE_NAME,\n baseUrl,\n );\n }\n \n if (url.pathname.startsWith(\"/posts/\")) {\n const markdown = await readFile(url.pathname, import.meta.url);\n const title = extractTitleFromMarkdown(markdown);\n return html(\n <div>\n <Header />\n <Markdown remarkPlugins={[remarkGfm]} components={markdownComponents}>{markdown}</Markdown>\n </div>,\n title,\n baseUrl,\n );\n }\n \n const aboutPaths = [\"/about\", \"/about/\"];\n if (aboutPaths.includes(url.pathname)) {\n const markdown = await readFile(\"/about.md\", import.meta.url);\n const title = extractTitleFromMarkdown(markdown) || \"About\";\n return html(\n <div>\n <Header />\n <Markdown>{markdown}</Markdown>\n </div>,\n title,\n baseUrl,\n );\n }\n\n const visualizerPaths = [\"/2019/03/15/visualizing-visualizers/\", \"/2019/03/15/visualizing-visualizers\"];\n if (visualizerPaths.includes(url.pathname)) {\n const markdown = await readFile(\"/other-posts/dvs-spin.md\", import.meta.url);\n const response = await fetch(\n \"https://raw.githubusercontent.com/a-lexwein/weblog/refs/heads/master/public/dvs-fragment.html\",\n );\n const fragmentText = await response.text();\n const title = extractTitleFromMarkdown(markdown);\n\n const style = `\n body {\n background-color: #E5E5E5;\n }\n svg {\n animation-name: spin;\n animation-duration: 7000ms;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n transform-origin: 400px 315px;\n }\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 16.66% {\n transform: rotate(-120deg); \n }\n 33.32% {\n transform: rotate(-120deg); \n } \n 49.98% {\n transform: rotate(-240deg); \n } \n 66.64% {\n transform: rotate(-240deg); \n } \n 83.3% {\n transform: rotate(-360deg); \n } \n 100% {\n transform: rotate(-360deg);\n }\n }\n `;\n\n // Build OG image URL\n const ogImageUrl = new URL(\"/og-image.png\", baseUrl);\n ogImageUrl.searchParams.set(\"title\", title);\n\n const markdownText = renderToString(<Markdown>{markdown}</Markdown>);\n const fullHtml = `\n <!DOCTYPE html>\n <html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>${title}

\n {markdown}\n

,\n title,\n baseUrl,\n );\n }\n\n if (url.pathname === \"/robots.txt\") {\n const robots = await readFile(\"/robots.txt\", import.meta.url);\n return new Response(robots, {\n headers: {\n \"content-type\": \"text/plain\",\n },\n });\n }\n\n return new Response(\"Not found\", { status: 404 });\n}\n\nfunction html(children: React.ReactNode, title: string = SITE_NAME, baseUrl: string) {\n return new Response(\n renderToString(\n \n {children}\n ,\n ),\n {\n headers: {\n \"content-type\": \"text/html;\",\n },\n },\n );\n}\n",[],[341],"10e4380a-046d-11f1-89df-42dde27851f2","analytics.ts","019c3a08-f196-704e-b9ee-ca339f7247c5",["D",1770500190628],"script","// inspired by steve's implementation https://www.val.town/x/stevekrouse/stevekrouse_dot_com/branch/main/version/26/code/analytics.ts\n// import { sqlite } from \"https://esm.town/v/std/sqlite?v=5\";\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite/main.tsx\";\n\nexport async function getHits(url, referer) {\n await sqlite.batch([\n \"CREATE TABLE IF NOT EXISTS blog_hits (id INTEGER PRIMARY KEY AUTOINCREMENT, url TEXT, referer TEXT, timestamp DATETIME DEFAULT CURRENT_TIMESTAMP)\",\n { sql: `INSERT INTO blog_hits (url, referer) VALUES (:url, :referer)`, args: { url, referer } },\n // \"SELECT COUNT(*) FROM blog_hits WHERE strftime('%m', timestamp) = strftime('%m', 'now') AND strftime('%Y', timestamp) = strftime('%Y', 'now')\",\n // \"SELECT COUNT(*) from blog_hits WHERE strftime('%m', timestamp) = strftime('%m', 'now') AND strftime('%Y', timestamp) = strftime('%Y', 'now') AND strftime('%d', timestamp) = strftime('%d', 'now')\",\n ]);\n return {};\n}",[],[348],"10e434c2-046d-11f1-89df-42dde27851f2","about.md","019c3a08-f196-704e-b9ee-c76d9b39a7cc",["D",1770500190628],"## Alex Wein's web site\n\nThank you for finding my personal website. I live in Oakland, California\nand work as an analytics engineer for a software company.\nI sometimes make little word games; here's one called [Gord Wame](https://gordwame.val.run/play/pbesoans).\n\n\nI'm on [Bluesky](https://bsky.app/profile/alexwein.bsky.social).",[],[356],"10e4312a-046d-11f1-89df-42dde27851f2","README.md","019c3a08-f196-704e-b9ee-c2d18c37b5d6",["D",1770500190628],"# myBlog\n\nThis is a simple static blog.\n\nPosts go in the /posts directory.\n\n\n## Sizing images\n\n```\n\n![screenshot](https://example.com/image.jpg#maxWidth=350)\n\n\n![screenshot](https://example.com/image.jpg#width=300)\n\n\n![screenshot](https://example.com/image.jpg#maxWidth=400&height=300)\n```",[],[363],"9cce939c-046d-11f1-9255-42dde27851f2","Layout.tsx","019c3a08-f196-704e-b9ee-bd3a0c016b07",7,["D",1770500425380],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { ReactNode } from \"https://esm.sh/react@18.2.0\";\nimport Head from \"./components/Head.tsx\";\n\nexport function Layout({ \n children, \n title = \"alex wein's blog\",\n baseUrl \n}: { \n children: ReactNode;\n title?: string;\n baseUrl: string;\n}) {\n return (\n \n \n \n {children}\n \n \n );\n}\n",[],[370],["D",1770500190628],[],[18,82],["D",1770500190628],[],[18,93],["D",1770500190628],[],[18,99],["D",1770500190628],[],[18,105],["D",1770500190628],[],[18,111],["D",1770500190628],[],[18,117],["D",1770500190628],[],[18,123],["D",1770500190628],[],[18,129],["D",1770500190628],[],[18,134],["D",1770500190628],[298,299,300,301,302,303,304,305,306],[18],"10e33a4a-046d-11f1-89df-42dde27851f2","dvs-spin.md","019c3a08-f196-704e-b9ee-8f2c735a2d8a","019c3a08-f196-704e-b9ee-91e394f2e7cf",["D",1770500190628],"# Visualizing The Visualizers\n\n(2025-03-29: This was an old post from 2019 on my previous blog. I noticed some 404 traffic from DVS and figured it was worth hosting on this iteration of the blog)\n\n\"The purpose of visualization is insight, not pictures\" went the headline of [a great interview](https://medium.com/multiple-views-visualization-research-explained/the-purpose-of-visualization-is-insight-not-pictures-an-interview-with-visualization-pioneer-ben-beb15b2d8e9b) with Ben Schneiderman.\n\nTo that I say: \"Usually.\"\n\nNot this chart though. I made this chart -- plotting how members of the Data Visualization Society (including me!) self assess their skills in three dimensions -- with several purposes in mind, and they honestly had very little to do with \"insight\". Instead my goals were the following:\n\n1. Make something attention-grabbing that would stand out among dozens of charts of the same data.\n1. Play with some new-to-me tools and techniques.\n1. Make something aesthetically pleasing.\n1. Get a blog post out of it.\n\nInsights are great. But other stuff is good too!\n\n## How I made the chart\n\n1. The data comes from the [sign-up survey](https://docs.google.com/forms/d/e/1FAIpQLScfivalT2ma3iJZNT8x3hGBJwniWS2rK_Czacnmnj6q1ShlIQ/viewform) for the Data Visualization Society. (If you're into data viz, regardless of experience -- join us!) The data was shared with everyone who joined the DVS, many of whom are also be trying to chart this data.\n1. The actual data work was done in R. I then made a quantile dot plot for the distributions of each of the three survey categories. Matthew Kay showed off some quantile dot plots in his [Tapestry talk](https://www.youtube.com/watch?v=E1kSnWvqCw0) on visualizing uncertainty, which is where I discovered the chart type. Here, each point is percentile. For every 100 DVS members, we'd expect 10 to self-rate as 1.0 or lower for their data skills, indicated by the 10 teal dots from 0 to 1. The ggplot and the code to produce it is at the bottom of this post.\n1. I saved the ggplot as an SVG brought the plots into Figma, a design tool that I hadn't used before. It took a lot of fiddling and even a little math to align the plots with the edges of an equilateral triangle. [Here's a link](https://www.figma.com/file/RwtqrHqLVCRtw4JfEkaN86mr/awein-dvs-thing?node-id=0%3A1) to where the chart was after Figma. (I first tried to do this step with [Google Drawings](https://docs.google.com/drawings/d/1xEtY2v9DeuzBPtwlRMrupECacw00YtqNityAtYFSK60/edit?usp=sharing) before switching to Figma.) I've been wanting to experiment with charts are on tilted axes since getting inspired by *Info We Trust* by RJ Andrews. But while [RJ's connected scatterplot](https://twitter.com/infowetrust/status/1048255077377404928) uses the title to enhance insight, my use actually makes it harder to understand the data!\n1. I then exported the work from Figma as an SVG in order to animate the chart using CSS. This was also a new experience for me and it took a lot of fiddling. My starting point for how to spin the chart was [this Codepen example](https://codepen.io/eveness/pen/BjLaoa). The rotation makes it even harder to draw genuine insight from the chart. Good thing that's not the point.\n1. Finally, I brought the SVG and CSS code back into R with the `htmltools` package, so I could include it in this blog you're currently reading, which was made using [RMarkdown and blogdown](https://bookdown.org/yihui/blogdown/).",[],[415,408],"other-posts","10e2f8fa-046d-11f1-89df-42dde27851f2","dbt-cheatsheet.md","019c3a08-f196-704e-b9ee-8b92a4e7e9a4",["D",1770500190628],"## Cheatsheet for a dbt technical assessment\n\nI have a job interview and wanted to have stuff handy.\n\n### Problem solving strategy:\n\nDon't be dogmatic about following this but it's better than no plan.\n\n1. Ask questions to understand stakeholder needs \n - User story: Dashboard will be visited by this persona at this cadence to make this decision.\n\n1. Ask questions to understand data\n\n1. Sketch dashboard (on pen and paper) \n - Chart elements \n - Define filters\n\n1. SQL queries to generate input to dashboard elements using `some_ideal_clean_and_pristine.table_that_you_think_exists`\n\n1. Before starting model, consider doing sensemaking queries on the source data.\n\n1. Start writing the dbt model to produce `some_ideal_clean_and_pristine.table_that_you_think_exists` \n 1. Configure sources, test non-null/uniqueness \n 1. Speak to materialization strategy (don’t add `is_incremental` until you have a running model) \n 1. Create model. Start with import CTEs. \n 1. Scaffold with step-by-step CTEs before you start hacking away. \n 1. Filter near the top: \n - Deleted records \n - Excluded users \n - Events too old to be relevant\n\n1. Create yaml\n - add relevant tests\n\n1. Make the dashboard\n\n\n### Incremental syntax:\n\n#### [Big easy](https://discourse.getdbt.com/t/on-the-limits-of-incrementality/303)\n```\nwith events as (\n select * from {{ref('events')}}\n {% if is_incremental() %}\n where event_timestamp >= (select max(event_timestamp)::date from {{this}})\n {% endif %}\n)\n--rest of model...\n```\n\n#### Unique Key ([Incremental Models docs](https://docs.getdbt.com/docs/build/incremental-models))\n\n```\n{{\n config(\n materialized='incremental',\n unique_key='date_day'\n )\n}}\n\nselect\n date_trunc('day', event_at) as date_day,\n count(distinct user_id) as daily_active_users\n\nfrom {{ ref('app_data_events') }}\n\n{% if is_incremental() %}\n\n -- this filter will only be applied on an incremental run\n -- (uses >= to include records arriving later on the same day as the last run of this model)\n where date_day >= (select coalesce(max(date_day), '1900-01-01') from {{ this }})\n\n{% endif %}\n\ngroup by 1\n```\n\n#### Run full refresh\n\n`dbt run --full-refresh --select my_incremental_model+`\n\n### [Using packages](https://docs.getdbt.com/docs/build/packages#how-do-i-add-a-package-to-my-project)\n\nI probably want to avoid packages, but if you need codegen or utils, create a `packages.yml` file in the dir as the project yaml, and run `dbt deps`. \n```\npackages:\n - package: dbt-labs/codegen\n version: 0.10.0\n\n```\n\nRun `dbt deps`. And then here's the [command line](https://hub.getdbt.com/dbt-labs/codegen/latest/)\n\n`dbt --quiet run-operation generate_source --args '{\"table_names\": [\"orders\"]}' > models/staging/jaffle_shop/_sources.yml`\n\n\n#### Redshift materializations\n\n- Late binding views `WITH NO SCHEMA BINDING;` in dbt it's `{{ config(materialized='view', bind=False) }}`.\n- Auto-refresh\n\n#### Redshift key config in dbt\n\nVia the [dbt docs for Redshift config](https://docs.getdbt.com/reference/resource-configs/redshift-configs#using-sortkey-and-distkey)\n\nBe up-front about not being super familiar. But my basic understanding is: distkey is for joining, sortkey is for grouping and filtering.\n\n```\n-- Example with one sort key\n{{ config(materialized='table', sort='reporting_day', dist='unique_id') }}\n\nselect ...\n\n\n-- Example with multiple sort keys\n{{ config(materialized='table', sort=['category', 'region', 'reporting_day'], dist='received_at') }}\n\nselect ...\n\n\n-- Example with interleaved sort keys\n{{ config(materialized='table',\n sort_type='interleaved'\n sort=['category', 'region', 'reporting_day'],\n dist='unique_id')\n}}\n\nselect ...\n```\n\n#### window syntax\n\nunbounded: Where BETWEEN is not specified, the frame is implicitly bounded by the current row. For example, ROWS 5 PRECEDING is equal to ROWS BETWEEN 5 PRECEDING AND CURRENT ROW. Also, ROWS UNBOUNDED FOLLOWING is equal to ROWS BETWEEN CURRENT ROW AND UNBOUNDED FOLLOWING.\n\n- seems like `over (order by day rows unbounded preceding)` is enough\n\n⬜⬜⬜🟨⬜
\n🟨🟨⬜🟨🟨
\n🟨🟩⬜🟩🟩
\n⬜🟩🟩🟩🟩
\n🟩🟩🟩🟩🟩",[],[415,417],"10e355b6-046d-11f1-89df-42dde27851f2",["D",1770500190628],[295,296],[415],"93cf880a-046d-11f1-947b-42dde27851f2","OGImage.tsx","93cf88aa-046d-11f1-947b-42dde27851f2","8e85c346-046d-11f1-9255-42dde27851f2",4,["D",1770500410290],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport wrap from \"https://esm.sh/word-wrap@1.2.5\";\n\nconst LINE_HEIGHT = 72;\n\nexport default function OGImage({\n title = \"alex wein's blog\",\n ...props\n}: React.SVGProps & {\n title?: string;\n}) {\n const wrapped = wrap(title, { width: 40 });\n const lines = wrapped.split(/\\n/g);\n\n return (\n \n \n \n {/* Title text */}\n {lines.map((line, i) => (\n \n {line}\n \n ))}\n\n {/* Horizontal separator line */}\n \n\n {/* Site name footer */}\n \n alex wein's blog\n \n \n );\n}\n",[],[436,428],"components","973cddbc-046d-11f1-a6f1-42dde27851f2","Head.tsx","973cde66-046d-11f1-a6f1-42dde27851f2",5,["D",1770500416043],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nconst SITE_NAME = \"alex wein's blog\";\nconst SITE_DESCRIPTION = \"Thoughts on data visualization, technology, and other things.\";\n\nexport default function Head({ \n title, \n baseUrl \n}: { \n title: string;\n baseUrl: string;\n}) {\n const pageTitle = title === SITE_NAME ? title : `${title} | ${SITE_NAME}`;\n \n const ogImageUrl = new URL(\"/og-image.png\", baseUrl);\n ogImageUrl.searchParams.set(\"title\", title);\n\n return (\n \n \n \n \n {pageTitle}\n \n\n {/* Open Graph / Facebook */}\n \n \n \n \n \n\n {/* Twitter */}\n \n \n \n \n \n\n {/* Stylesheet */}\n \n \n );\n}\n",[],[436,438],"8e85c29c-046d-11f1-9255-42dde27851f2",3,["D",1770500401418],[292,293],[436],["D",1741530120955],["D",1789513278143],{"_11":12,"_191":87},{"_11":12,"_186":187,"_86":87,"_31":85,"_188":189,"_190":30},{"_39":176,"_13":16,"_33":36,"_177":138,"_178":76,"_179":180,"_181":142,"_182":138,"_183":42,"_184":14,"_185":12},"ctx",{"_52":-5,"_212":488,"_489":490,"_491":492,"_493":30,"_494":30,"_495":30,"_496":24,"_497":-5,"_498":-7,"_499":-7,"_500":26,"_501":30,"_502":30,"_503":-5,"_504":30,"_505":30,"_506":30,"_507":-5},"ENV",{"_459":460,"_461":462,"_463":77,"_464":465,"_466":467,"_468":469,"_470":471,"_472":473,"_474":475,"_476":477,"_478":479,"_480":481,"_482":483,"_484":485,"_486":487},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · posts