[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_452":453,"_454":455},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_72":216,"_41":-7,"_217":-5,"_17":218,"_219":220,"_221":222,"_223":224,"_225":226,"_152":-5,"_227":228,"_229":230,"_231":51,"_232":233,"_234":26,"_235":-5,"_236":-5,"_237":238},"routes/_app.x.$handle.$name.compare.$branch",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24,"_25":26,"_27":28,"_29":30,"_31":-5},"handle","alexwein","name","alexBlogs","branchName","og-images","project",{"_32":40,"_13":14,"_34":173,"_49":-5,"_174":51,"_52":53,"_175":53,"_176":177,"_178":-5,"_179":180,"_181":97,"_182":26,"_183":-5,"_184":185,"_186":135,"_55":56,"_187":188,"_189":190,"_191":192,"_193":135,"_194":195,"_196":195,"_197":198,"_199":198,"_200":198,"_201":195,"_202":195,"_203":204,"_205":206,"_207":28,"_50":51},"ahead",15,"behind",9,"diff",{"_64":65,"_66":67,"_68":69},"hasChanges",true,"sourceBranch",{"_41":58,"_13":16,"_32":59,"_39":40,"_43":33,"_45":60,"_61":53,"_62":40,"_63":56,"_57":14,"_54":12},"targetBranch",{"_32":33,"_34":35,"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":-5,"_50":51,"_52":53,"_54":12,"_55":56,"_57":14},"pull","id","ddc5a5ea-fcf1-11ef-8cc6-569c3dd06744","createdAt",["D",1741530120955],"updatedAt",["D",1781616277460],"main","projectId","ddc30ef2-fcf1-11ef-8cc6-569c3dd06744","version",113,"forkedBranchId","8e73c264-d835-11ef-bbbf-e6cdfca9ef9f","forkedBranchVersion",159,"lockfileKey","1781616277649-esm.town_v_alexwein_alexBlogs@113-main","deletedAt","isOwned",false,"privacy","public","userHandle","orgId","875ed3cd-ae4b-40bb-a45f-6a1970e11689","projectName",16,"e30f8e48-0467-11f1-b45c-42dde27851f2",104,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","added",[122,123,124,125,126],"deleted",[],"modified",[70,71],{"_72":103,"_74":104,"_76":105},{"_72":73,"_74":75,"_76":77},"path","index.tsx","targetFile",{"_32":96,"_13":73,"_79":97,"_81":-5,"_82":33,"_83":60,"_84":26,"_34":98,"_41":99,"_87":88,"_89":100,"_66":51,"_91":-5,"_92":-7,"_72":101,"_94":102},"sourceFile",{"_32":78,"_13":73,"_79":80,"_81":-5,"_82":59,"_83":58,"_84":26,"_34":85,"_41":86,"_87":88,"_89":90,"_66":51,"_91":-5,"_92":-7,"_72":93,"_94":95},"68529ea2-046c-11f1-9084-42dde27851f2","fileId","019c39e7-00d0-73db-9796-38d34fd17d80","parentId","branchId","branchVersion","latest",["D",1770499907836],4,"fileType","http","content","/** @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 { renderToStaticMarkup } from \"https://esm.sh/react-dom@18.2.0/server\";\nimport { render as renderPNG } from \"https://deno.land/x/resvg_wasm@0.2.0/mod.ts\";\nimport { getHits } from \"./analytics.ts\";\nimport { Layout } from \"./Layout.tsx\";\nimport OGImage from \"./components/OGImage.tsx\";\nimport { extractTitleFromMarkdown } from \"./utils/extractTitle.ts\";\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 = {};\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 {alt}

;\n}\n\nconst markdownComponents = {\n img: CustomImage,\n};\n\nfunction Header() {\n return (\n

\n Home\n About\n

\n );\n}\n\nfunction PostComponent({ markdown, link }: { markdown: string; link?: string }) {\n return (\n

\n {link}\n {markdown}\n

\n );\n}\n\nexport default async function(req: Request): Promise {\n const url = new URL(req.url);\n const referer = req.headers.get(\"referer\");\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 // OG Image route\n if (url.pathname === \"/og-image.png\") {\n const title = url.searchParams.get(\"title\") || undefined;\n const format = url.searchParams.get(\"format\");\n const svg = renderToStaticMarkup();\n\n if (format === \"svg\") {\n return new Response(svg, {\n headers: {\n \"Content-Type\": \"image/svg+xml\",\n },\n });\n }\n\n const png = await renderPNG(svg);\n return new Response(png, {\n headers: {\n \"Content-Type\": \"image/png\",\n \"Content-Length\": png.length.toString(),\n },\n });\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

Alex Wein has some thoughts

\n {postContents.map((markdown, i) => )}\n View source\n

,\n );\n }\n if (url.pathname.startsWith(\"/posts/\")) {\n const markdown = await readFile(url.pathname, import.meta.url);\n const postTitle = extractTitleFromMarkdown(markdown);\n \n return html(\n

\n {markdown}\n

,\n postTitle || undefined\n );\n }\n const aboutPaths = [\"/about\", \"/about/\"];\n if (aboutPaths.includes(url.pathname)) {\n const markdown = await readFile(\"/about.md\", import.meta.url);\n return html(\n

\n {markdown}\n

,\n \"About\"\n );\n }\n\nconst visualizerPaths = [\"/2019/03/15/visualizing-visualizers/\", \"/2019/03/15/visualizing-visualizers\"];\n if (visualizerPaths.includes(url.pathname)) {\n\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\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 const markdownText = renderToString({markdown});\n const fullHtml = `\n \n \n \n \n \n SVG Animation\n \n \n \n ${fragmentText}\n ${markdownText}\n \n \n \n `;\n return new Response(fullHtml, {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n }\n \n if (url.pathname === \"/dbt\") {\n const markdown = await readFile(\"/other-posts/dbt-cheatsheet.md\", import.meta.url);\n return html(\n

\n {markdown}\n

,\n \"dbt Cheatsheet\"\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) {\n return new Response(\n renderToString(\n \n {children}\n ,\n ),\n {\n headers: {\n \"content-type\": \"text/html;\",\n },\n },\n );\n}\n","label","children",[73],"contentHash","aadb761936a943004fa9795b91edb2f8cb5655be770eab48b3dca7447f2a4282","c9c0e2ae-fec0-11f0-a609-42dde27851f2","955d7b6e-1855-4b84-a436-6ce9b2f43845",["D",1769876442036],29,"/** @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\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 = {};\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 {alt}

;\n}\n\nconst markdownComponents = {\n img: CustomImage,\n};\n\nfunction Header() {\n return (\n

\n Home\n About\n

\n );\n}\n\nfunction PostComponent({ markdown, link }: { markdown: string; link?: string }) {\n return (\n

\n {link}\n {markdown}\n

Alex Wein has some thoughts

\n {postContents.map((markdown, i) => )}\n View source\n

,\n );\n }\n if (url.pathname.startsWith(\"/posts/\")) {\n const markdown = await readFile(url.pathname, import.meta.url);\n return html(\n

\n {markdown}\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 return html(\n

\n {markdown}\n

,\n );\n }\n\nconst visualizerPaths = [\"/2019/03/15/visualizing-visualizers/\", \"/2019/03/15/visualizing-visualizers\"];\n if (visualizerPaths.includes(url.pathname)) {\n\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\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 const markdownText = renderToString({markdown});\n const fullHtml = `\n \n \n \n \n \n SVG Animation\n \n \n \n ${fragmentText}\n ${markdownText}\n \n \n \n `;\n return new Response(fullHtml, {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n }\n \n if (url.pathname === \"/dbt\") {\n const markdown = await readFile(\"/other-posts/dbt-cheatsheet.md\", import.meta.url);\n return html(\n

\n {markdown}\n

,\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) {\n return new Response(\n renderToString(\n \n {children}\n ,\n ),\n {\n headers: {\n \"content-type\": \"text/html;\",\n },\n },\n );\n}",[73],"c8924dc21b8af0968df290d91f8f92c458f2cc99671ddc40326bb843d6e3aa55","Layout.tsx",{"_32":114,"_13":103,"_79":115,"_81":-5,"_82":33,"_83":116,"_84":26,"_34":117,"_41":118,"_87":110,"_89":119,"_66":51,"_91":-5,"_92":-7,"_72":120,"_94":121},{"_32":106,"_13":103,"_79":107,"_81":-5,"_82":59,"_83":20,"_84":26,"_34":108,"_41":109,"_87":110,"_89":111,"_66":51,"_91":-5,"_92":-7,"_72":112,"_94":113},"55bc8cf8-046c-11f1-b764-42dde27851f2","019c39e7-00d0-73db-9796-2bd59b9140bf",["D",1770499876652],3,"script","/** @jsxImportSource npm:react@18.2.0 */\nimport type { ReactNode } from \"npm:react@18.2.0\";\n\nconst BASE_URL = \"https://alexwein-alexblogs.web.val.run\";\n\ninterface LayoutProps {\n children: ReactNode;\n title?: string;\n description?: string;\n ogImageTitle?: string;\n}\n\nexport function Layout({ \n children, \n title = \"alex wein's blog\",\n description = \"Alex Wein has some thoughts\",\n ogImageTitle,\n}: LayoutProps) {\n const pageTitle = title === \"alex wein's blog\" ? title : `${title} | alex wein's blog`;\n const ogTitle = ogImageTitle || title;\n const ogImageUrl = `${BASE_URL}/og-image.png?title=${encodeURIComponent(ogTitle)}`;\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 \n \n \n {children}\n \n \n );\n}\n",[103],"afedd1c30fefb39e16af4efbca8ac2e642653f4c8dd2edb99d58e56599b1ebfe","aaa894ec-fd2d-11ef-aff3-569c3dd06744","032f82af-0a67-4a3a-910b-5e06133325ca",54,["D",1741555805021],2,"/** @jsxImportSource npm:react@18.2.0 */\nimport type { ReactNode } from \"npm:react@18.2.0\";\n\nexport function Layout({ children }: { children: ReactNode }) {\n return (\n \n \n \n \n Alex Whines\n \n \n \n {children}\n \n \n );\n}",[103],"670a0f32fec50e2681cc048dffc757eb0c70fdc7ae1251710559c2ea68a2f18b",{"_72":167,"_74":-7,"_76":168},{"_72":156,"_74":-7,"_76":157},{"_72":146,"_74":-7,"_76":147},{"_72":139,"_74":-7,"_76":140},{"_72":127,"_74":-7,"_76":128},"utils/extractTitle.ts",{"_32":129,"_13":130,"_79":131,"_81":132,"_82":59,"_83":133,"_84":26,"_34":134,"_41":135,"_87":110,"_89":136,"_66":51,"_91":-5,"_92":-7,"_72":137,"_94":138},"50a039b8-046c-11f1-9084-42dde27851f2","extractTitle.ts","50a03a94-046c-11f1-9084-42dde27851f2","49643fe6-046c-11f1-9084-42dde27851f2",14,["D",1770499868078],0,"/**\n * Extract the title from markdown content.\n * Looks for the first h1 (# ) or h2 (## ) heading.\n * Returns null if no heading is found.\n */\nexport function extractTitleFromMarkdown(markdown: string): string | null {\n // Match first h1 or h2 at the start of a line\n const match = markdown.match(/^#{1,2}\\s+(.+)$/m);\n return match ? match[1].trim() : null;\n}\n",[139,130],"0c8ae46bec2b68b0df6f59b8d2b89adc3e8377f2bb2eea6102944c455310a2b8","utils",{"_32":141,"_13":139,"_79":132,"_81":-5,"_82":59,"_83":142,"_84":26,"_34":143,"_41":135,"_87":144,"_89":-5,"_66":51,"_91":-5,"_92":-7,"_72":145,"_94":-5},"49643f14-046c-11f1-9084-42dde27851f2",12,["D",1770499855910],"directory",[139],"prompt.md",{"_32":148,"_13":146,"_79":149,"_81":-5,"_82":59,"_83":150,"_84":26,"_34":151,"_41":135,"_87":152,"_89":153,"_66":51,"_91":-5,"_92":-7,"_72":154,"_94":155},"0dde59ca-046c-11f1-a2bc-42dde27851f2","0dde5aba-046c-11f1-a2bc-42dde27851f2",10,["D",1770499756070],"file","# Open Graph Images Implementation Prompt for Townie\n\n## Goal\n\nAdd Open Graph (OG) meta tags to this blog so posts display rich previews when shared on social media (Twitter, Facebook, LinkedIn, Slack, etc.). Each page should have a dynamically generated OG image.\n\n## Reference Implementation\n\nStudy how `valdottown/blog` implements OG images:\n- `components/OGImage.tsx` - SVG component that renders the OG image with title text\n- `routes/og-image.tsx` - HTTP route that renders SVG to PNG using `resvg_wasm`\n- `components/Head.tsx` - Adds OG meta tags to the HTML head, constructing image URL with title query param\n\n## Requirements\n\n### 1. Create an OG Image Component (`components/OGImage.tsx`)\n\nCreate an SVG-based React component similar to the reference:\n- Default title: **\"alex wein's blog\"**\n- For individual posts, show the post title with \"alex wein's blog\" displayed smaller (similar to how Val Town Blog shows \"Blog\" at the bottom)\n- Use `word-wrap` package to handle long titles across multiple lines\n- Simple, clean design (white background, black text)\n- Standard OG image dimensions: 1200x640\n\n```tsx\n/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport wrap from \"https://esm.sh/word-wrap@1.2.5\";\n\nexport default function OGImage({ title = \"alex wein's blog\" }: { title?: string }) {\n // Implementation here\n}\n```\n\n### 2. Create an OG Image Route\n\nAdd a route handler for `/og-image.png` that:\n- Accepts a `?title=` query parameter\n- Renders the OGImage component to SVG using `renderToStaticMarkup`\n- Converts SVG to PNG using `resvg_wasm`:\n ```tsx\n import { render as renderPNG } from \"https://deno.land/x/resvg_wasm@0.2.0/mod.ts\";\n ```\n- Returns PNG with proper `Content-Type: image/png` header\n- Optionally support `?format=svg` for debugging\n\n### 3. Extract Post Titles from Markdown\n\n**Important**: This blog does NOT use front-matter. Instead, extract the title from the first `## ` or `# ` heading in each markdown file.\n\nCreate a utility function to extract the title:\n```tsx\nfunction extractTitleFromMarkdown(markdown: string): string | null {\n // Match first h1 or h2\n const match = markdown.match(/^#{1,2}\\s+(.+)$/m);\n return match ? match[1] : null;\n}\n```\n\n### 4. Update Layout.tsx to Accept OG Meta Props\n\nModify `Layout.tsx` to accept and render OG meta tags:\n- `og:title` - page title\n- `og:description` - optional description \n- `og:image` - URL to the OG image endpoint with title param\n- `og:type` - \"website\" or \"article\"\n- `twitter:card` - \"summary_large_image\"\n- `twitter:title`, `twitter:image`\n\nExample:\n```tsx\nexport function Layout({ \n children, \n title = \"alex wein's blog\",\n description,\n ogImageTitle \n}: { \n children: ReactNode;\n title?: string;\n description?: string;\n ogImageTitle?: string;\n}) {\n const baseUrl = \"https://alexwein-alexblogs.web.val.run\"; // Update with actual URL\n const ogImageUrl = `${baseUrl}/og-image.png?title=${encodeURIComponent(ogImageTitle || title)}`;\n \n return (\n \n \n {/* existing meta tags */}\n \n \n \n \n \n {description && }\n \n {children}\n \n );\n}\n```\n\n### 5. Update index.tsx Routes\n\nModify each route to:\n1. Extract the post title from markdown content\n2. Pass the title to the Layout component\n3. Add the `/og-image.png` route handler\n\nFor the homepage (`/`):\n- Use default title \"alex wein's blog\"\n\nFor individual posts (`/posts/:slug`):\n- Extract title from the markdown's first h1/h2\n- Pass to Layout for OG tags\n- OG image should show post title with \"alex wein's blog\" as subtitle\n\nFor special pages (about, dbt, visualizer):\n- Use appropriate page-specific titles\n\n## File Structure After Implementation\n\n```\nalexBlogs/\n├── components/\n│ └── OGImage.tsx # NEW: SVG OG image component\n├── utils/\n│ └── extractTitle.ts # NEW: Extract title from markdown\n├── Layout.tsx # MODIFIED: Add OG meta tag support\n├── index.tsx # MODIFIED: Add /og-image.png route, pass titles\n├── posts/\n│ └── *.md\n└── ...\n```\n\n## Testing\n\nAfter implementation:\n1. Visit `/og-image.png` - should show default \"alex wein's blog\" image\n2. Visit `/og-image.png?title=Test%20Title` - should show custom title\n3. Visit `/og-image.png?format=svg` - should return SVG for debugging\n4. Use a social media debugger (Facebook Sharing Debugger, Twitter Card Validator) to verify meta tags\n5. Check that each blog post page has unique OG image with its title\n\n## Notes\n\n- The current posts use `## ` (h2) for titles, not `# ` (h1). Handle both cases.\n- Keep the implementation simple - no need for custom fonts or complex styling initially\n- The base URL will need to be determined from the request or hardcoded for now\n- Consider caching the PNG renders if performance becomes an issue\n",[146],"df7164496556626f2341b9c9561d72c2d5cb042db0ac97740fcbca5a1e96e008","components/OGImage.tsx",{"_32":158,"_13":159,"_79":160,"_81":161,"_82":59,"_83":162,"_84":26,"_34":163,"_41":135,"_87":110,"_89":164,"_66":51,"_91":-5,"_92":-7,"_72":165,"_94":166},"4f6ef57a-046c-11f1-9084-42dde27851f2","OGImage.tsx","4f6ef64c-046c-11f1-9084-42dde27851f2","4907ccd4-046c-11f1-bf75-42dde27851f2",13,["D",1770499866057],"/** @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 isDefaultTitle = title === \"alex wein's blog\";\n const wrapped = wrap(title, { width: 40 });\n const lines = wrapped.split(/\\n/g);\n\n return (\n \n \n \n {/* Main title text */}\n {lines.map((line, i) => (\n \n {line}\n \n ))}\n\n {/* Decorative line */}\n \n\n {/* Blog name subtitle (only shown for post titles) */}\n {!isDefaultTitle && (\n \n alex wein's blog\n \n )}\n \n );\n}\n",[167,159],"cd881325e3033274f2dbbe33ed711fb4d0230510f6ed3ade56f1bf9d94777e5f","components",{"_32":169,"_13":167,"_79":161,"_81":-5,"_82":59,"_83":170,"_84":26,"_34":171,"_41":135,"_87":144,"_89":-5,"_66":51,"_91":-5,"_92":-7,"_72":172,"_94":-5},"4907cc02-046c-11f1-bf75-42dde27851f2",11,["D",1770499855322],[167],["D",1741530120955],"legacyEnvVars","httpPrivacy","description","me writing about things maybe","imageUrl","userId","b85dcfbf-50f1-466c-9e2b-28ac90e0dd23","pinnedFileId","pinPreview","pinMigrated","screenshotVersion",82,"likeCount","tursoName","ddc30ef2fcf111ef8cc6569c3dd06744","tursoHostname","ddc30ef2fcf111ef8cc6569c3dd06744-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789513278143],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_215":211},"org",{"_11":12,"_208":209,"_210":211,"_179":180,"_212":213,"_214":51},"branch","displayName","Alex Wein","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycjh6emNHdk9mMnY5djU3OFZBbEdleGhQZFAifQ","tier","pro","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":40,"_13":14,"_34":447,"_49":-5,"_174":51,"_52":53,"_175":53,"_176":177,"_178":-5,"_179":180,"_181":97,"_182":26,"_183":-5,"_184":185,"_186":135,"_55":56,"_187":188,"_189":190,"_191":448,"_193":135,"_194":195,"_196":195,"_197":198,"_199":198,"_200":198,"_201":195,"_202":195,"_203":449,"_205":450,"_207":451,"_50":51},"tree",[314,316,319,329,331,332,333,334,335,336,337],"files",[314,315,316,317,318,319,320,321,322,323,324,325,326,327,328,329,330,331,332,333,334,335,336,337],"counts",{"_304":135,"_305":150,"_306":262,"_307":308,"_309":310},"contents",[248,249,250,251,252,253,254,255,256,257,258],"upstreamProject",{"_32":241,"_13":242,"_176":243,"_178":244,"_52":53,"_203":245},"upstreamBranch",{"_32":33,"_34":239,"_36":240,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":-5,"_50":51,"_52":53,"_54":12,"_55":56,"_57":14},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1741530120955],["D",1781616277460],"8e7382ae-d835-11ef-bbbf-e6cdfca9ef9f","markdownBlogStarter","Starter template for a markdown blog","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/44a31e5c-3e8a-48a8-d067-5785c0b08200/square512?exp=1789581599&sig=5ca4d4b407767733e79ff28bab4904224900a4f9c9d1512dfcb0b54af34a1ab3",{"_11":246,"_215":247},"stevekrouse","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg",{"_32":169,"_13":167,"_79":161,"_81":-5,"_82":59,"_83":170,"_84":26,"_34":302,"_41":135,"_87":144,"_89":-5,"_66":51,"_91":-5,"_72":303},{"_32":297,"_13":298,"_79":299,"_81":-5,"_82":59,"_83":262,"_84":26,"_34":300,"_41":135,"_87":144,"_89":-5,"_66":51,"_91":-5,"_72":301},{"_32":292,"_13":293,"_79":294,"_81":-5,"_82":59,"_83":262,"_84":26,"_34":295,"_41":135,"_87":144,"_89":-5,"_66":51,"_91":-5,"_72":296},{"_32":141,"_13":139,"_79":132,"_81":-5,"_82":59,"_83":142,"_84":26,"_34":290,"_41":135,"_87":144,"_89":-5,"_66":51,"_91":-5,"_72":291},{"_32":106,"_13":103,"_79":107,"_81":-5,"_82":59,"_83":20,"_84":26,"_34":288,"_41":109,"_87":110,"_89":111,"_66":51,"_91":-5,"_72":289},{"_32":282,"_13":283,"_79":284,"_81":-5,"_82":59,"_83":262,"_84":26,"_34":285,"_41":135,"_87":152,"_89":286,"_66":51,"_91":-5,"_72":287},{"_32":276,"_13":277,"_79":278,"_81":-5,"_82":59,"_83":262,"_84":26,"_34":279,"_41":135,"_87":152,"_89":280,"_66":51,"_91":-5,"_72":281},{"_32":270,"_13":271,"_79":272,"_81":-5,"_82":59,"_83":262,"_84":26,"_34":273,"_41":135,"_87":110,"_89":274,"_66":51,"_91":-5,"_72":275},{"_32":78,"_13":73,"_79":80,"_81":-5,"_82":59,"_83":58,"_84":26,"_34":268,"_41":86,"_87":88,"_89":90,"_66":51,"_91":-5,"_72":269},{"_32":148,"_13":146,"_79":149,"_81":-5,"_82":59,"_83":150,"_84":26,"_34":266,"_41":135,"_87":152,"_89":153,"_66":51,"_91":-5,"_72":267},{"_32":259,"_13":260,"_79":261,"_81":-5,"_82":59,"_83":262,"_84":26,"_34":263,"_41":135,"_87":152,"_89":264,"_66":51,"_91":-5,"_72":265},"e313c742-0467-11f1-b45c-42dde27851f2","robots.txt","019c39e7-00d0-73db-9796-3c74df0e2daf",1,["D",1770497966290],"User-agent: *\nAllow: /\n\n# Cribbed from macwright.org who cribbed from ifixit\nUser-agent: Amazonbot\nDisallow: /\nUser-agent: anthropic-ai\nDisallow: /\nUser-agent: Applebot-Extended\nDisallow: /\nUser-agent: AwarioRssBot\nDisallow: /\nUser-agent: AwarioSmartBot\nDisallow: /\nUser-agent: Bytespider\nDisallow: /\nUser-agent: CCBot\nDisallow: /\nUser-agent: ClaudeBot\nDisallow: /\nUser-agent: Claude-Web\nDisallow: /\nUser-agent: cohere-ai\nDisallow: /\nUser-agent: DataForSeoBot\nDisallow: /\nUser-agent: Diffbot\nDisallow: /\nUser-agent: FacebookBot\nDisallow: /\nUser-agent: Google-Extended\nDisallow: /\nUser-agent: GPTBot\nDisallow: /\nUser-agent: magpie-crawler\nDisallow: /\nUser-agent: NewsNow\nDisallow: /\nUser-agent: news-please\nDisallow: /\nUser-agent: omgili\nDisallow: /\nUser-agent: omgilibot\nDisallow: /\nUser-agent: peer39_crawler\nDisallow: /\nUser-agent: peer39_crawler/1.0\nDisallow: /\nUser-agent: PerplexityBot\nDisallow: /\nUser-agent: Scrapy\nDisallow: /\nUser-agent: TurnitinBot\nDisallow: /",[260],["D",1770499756070],[146],["D",1770499907836],[73],"e313a406-0467-11f1-b45c-42dde27851f2","analytics.ts","019c39e7-00d0-73db-9796-3745b2f06afa",["D",1770497966290],"// 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}",[271],"e313a0be-0467-11f1-b45c-42dde27851f2","about.md","019c39e7-00d0-73db-9796-301611b1a685",["D",1770497966290],"## 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).",[277],"e3139d12-0467-11f1-b45c-42dde27851f2","README.md","019c39e7-00d0-73db-9796-2f62092b140a",["D",1770497966290],"# 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```",[283],["D",1770499876652],[103],["D",1770499855910],[139],"e3139628-0467-11f1-b45c-42dde27851f2","posts","019c39e7-00d0-73db-9796-24f4a3b63f09",["D",1770497966290],[293],"e312dd82-0467-11f1-b45c-42dde27851f2","other-posts","019c39e7-00d0-73db-9795-fd15ca291d88",["D",1770497966290],[298],["D",1770499855322],[167],"pulls","branches","forks","envVars",{"_311":262,"_313":135},"connections",{"_311":135,"_312":135},"count","unfilledCount","emptyCount",{"_32":169,"_13":167,"_79":161,"_81":-5,"_82":59,"_83":170,"_84":26,"_34":171,"_41":135,"_87":144,"_89":-5,"_66":51,"_91":-5,"_92":445,"_72":446},{"_32":158,"_13":159,"_79":160,"_81":161,"_82":59,"_83":162,"_84":26,"_34":163,"_41":135,"_87":110,"_89":164,"_66":51,"_91":-5,"_92":443,"_72":444},{"_32":297,"_13":298,"_79":299,"_81":-5,"_82":59,"_83":262,"_84":26,"_34":440,"_41":135,"_87":144,"_89":-5,"_66":51,"_91":-5,"_92":441,"_72":442},{"_32":433,"_13":434,"_79":435,"_81":299,"_82":59,"_83":262,"_84":26,"_34":436,"_41":135,"_87":152,"_89":437,"_66":51,"_91":-5,"_92":438,"_72":439},{"_32":426,"_13":427,"_79":428,"_81":299,"_82":59,"_83":262,"_84":26,"_34":429,"_41":135,"_87":152,"_89":430,"_66":51,"_91":-5,"_92":431,"_72":432},{"_32":292,"_13":293,"_79":294,"_81":-5,"_82":59,"_83":262,"_84":26,"_34":423,"_41":135,"_87":144,"_89":-5,"_66":51,"_91":-5,"_92":424,"_72":425},{"_32":416,"_13":417,"_79":418,"_81":294,"_82":59,"_83":262,"_84":26,"_34":419,"_41":135,"_87":152,"_89":420,"_66":51,"_91":-5,"_92":421,"_72":422},{"_32":409,"_13":410,"_79":411,"_81":294,"_82":59,"_83":262,"_84":26,"_34":412,"_41":135,"_87":152,"_89":413,"_66":51,"_91":-5,"_92":414,"_72":415},{"_32":402,"_13":403,"_79":404,"_81":294,"_82":59,"_83":262,"_84":26,"_34":405,"_41":135,"_87":152,"_89":406,"_66":51,"_91":-5,"_92":407,"_72":408},{"_32":395,"_13":396,"_79":397,"_81":294,"_82":59,"_83":262,"_84":26,"_34":398,"_41":135,"_87":152,"_89":399,"_66":51,"_91":-5,"_92":400,"_72":401},{"_32":388,"_13":389,"_79":390,"_81":294,"_82":59,"_83":262,"_84":26,"_34":391,"_41":135,"_87":152,"_89":392,"_66":51,"_91":-5,"_92":393,"_72":394},{"_32":381,"_13":382,"_79":383,"_81":294,"_82":59,"_83":262,"_84":26,"_34":384,"_41":135,"_87":152,"_89":385,"_66":51,"_91":-5,"_92":386,"_72":387},{"_32":374,"_13":375,"_79":376,"_81":294,"_82":59,"_83":262,"_84":26,"_34":377,"_41":135,"_87":152,"_89":378,"_66":51,"_91":-5,"_92":379,"_72":380},{"_32":367,"_13":368,"_79":369,"_81":294,"_82":59,"_83":262,"_84":26,"_34":370,"_41":135,"_87":152,"_89":371,"_66":51,"_91":-5,"_92":372,"_72":373},{"_32":360,"_13":361,"_79":362,"_81":294,"_82":59,"_83":262,"_84":26,"_34":363,"_41":135,"_87":152,"_89":364,"_66":51,"_91":-5,"_92":365,"_72":366},{"_32":141,"_13":139,"_79":132,"_81":-5,"_82":59,"_83":142,"_84":26,"_34":143,"_41":135,"_87":144,"_89":-5,"_66":51,"_91":-5,"_92":358,"_72":359},{"_32":129,"_13":130,"_79":131,"_81":132,"_82":59,"_83":133,"_84":26,"_34":134,"_41":135,"_87":110,"_89":136,"_66":51,"_91":-5,"_92":356,"_72":357},{"_32":106,"_13":103,"_79":107,"_81":-5,"_82":59,"_83":20,"_84":26,"_34":108,"_41":109,"_87":110,"_89":111,"_66":51,"_91":-5,"_92":354,"_72":355},{"_32":282,"_13":283,"_79":284,"_81":-5,"_82":59,"_83":262,"_84":26,"_34":351,"_41":135,"_87":152,"_89":286,"_66":51,"_91":-5,"_92":352,"_72":353},{"_32":276,"_13":277,"_79":278,"_81":-5,"_82":59,"_83":262,"_84":26,"_34":348,"_41":135,"_87":152,"_89":280,"_66":51,"_91":-5,"_92":349,"_72":350},{"_32":270,"_13":271,"_79":272,"_81":-5,"_82":59,"_83":262,"_84":26,"_34":345,"_41":135,"_87":110,"_89":274,"_66":51,"_91":-5,"_92":346,"_72":347},{"_32":78,"_13":73,"_79":80,"_81":-5,"_82":59,"_83":58,"_84":26,"_34":85,"_41":86,"_87":88,"_89":90,"_66":51,"_91":-5,"_92":343,"_72":344},{"_32":148,"_13":146,"_79":149,"_81":-5,"_82":59,"_83":150,"_84":26,"_34":151,"_41":135,"_87":152,"_89":153,"_66":51,"_91":-5,"_92":341,"_72":342},{"_32":259,"_13":260,"_79":261,"_81":-5,"_82":59,"_83":262,"_84":26,"_34":338,"_41":135,"_87":152,"_89":264,"_66":51,"_91":-5,"_92":339,"_72":340},["D",1770497966290],[],[260],[],[146],[],[73],["D",1770497966290],[],[271],["D",1770497966290],[],[277],["D",1770497966290],[],[283],[],[103],[],[139,130],[330],[139],"e3138192-0467-11f1-b45c-42dde27851f2","2025-12-25-chart-games-2025.md","019c39e7-00d0-73db-9796-22daa5b698b6",["D",1770497966290],"## The Two Best Data Visualization-Centric Digital Games of 2025\n\nThere have been video games with great uses of data visualization before, but before this year,\nI don't think I'd ever played a game that was **Really About The Charts**.\nAnd this year I played two! And both were kind of awesome in very different ways.\n\n### [Pocket Boss](https://pocketboss.ch/)\n\nMostly by default, Mario von Rickenbach has made the definitive piece of art about working in business intelligence.\n*Pocket Boss* is a mobile game. You play as a data worker, remotely communicating with your boss through chat DMs.\nEach level is a chart your boss needs you to clean up.\n\n![5509C048-FB3C-410B-AD5C-FA26E60D191B_1_105_c.jpeg](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/40002f3a-1294-4e73-4283-eaa867020000/public#maxWidth=350)\n\nGameplay wise, it has a bit in common with some kids apps I love like Windowsill and Sago Mini. To make the bars on the chart \"go up\" or whatever your current objective is, you tap or drag or swipe. It's tactilely satisfying with just a splash of puzzling.\n\nBut the reason to the play the game is for the writing, which I found very funny and **shockingly relatable**.\nAlthough all my managers have been wonderful and open-minded people, in my career in business intelligence,\nit's hard to totally escape the feeling that the numbers don't matter,\nwe're just making pretty pictures to justify whatever decision management was going to make anyways.\n*Pocket Boss* deals with these existential questions of the data worker with wit and a sense of play.\n\n### [Alphadots](https://www.bloomberg.com/games/alphadots)\n\nThere were even more new entrants into the little daily word game racket in 2025.\nBloomberg launched their Games section in September that included *Alphadots*, created by crossword constructor Jeff Chen.\nYou are presented with a crossword-style question mark clue. And the letters are displayed in a line chart, ordered alphabetically along the Y-axis. Hints let you add horizontal baselines.\n\n![345DFBCD-2E4C-419E-B141-320528C9121F_1_105_c.jpeg](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/ea9a172e-739c-40ba-9321-4000807f7600/public#maxWidth=350)\n\nIt doesn't have anything to do its chart based nature, but what really keeps me coming back are the consistently solid \"?\" clues. A light, satisfying bit of wordplay every day with a novel solving mechanic.\nI can't remember another word game I've played where alphabetical order played any role.\nIt adds a unique texture to which puzzles are easy or heard: As are always easy to identify, repeating letters are also crucial information, and most of the your time is spent wondering if those dots in the middle are Ls, Ms, or Ns\n\nAnd it's really a chart game! Unlike *Pocket Boss*, *Alphadots* actually actually asks you to interpret some data. You start with a chart. It might take a little time to decode, but the chart has all the information you need solve the puzzle. It's a good time.",[],[293,361],"e3137a94-0467-11f1-b45c-42dde27851f2","2025-12-24-five-friendly-sql-tips.md","019c39e7-00d0-73db-9796-1edaa14a012c",["D",1770497966290],"## [Five Cool Little Bits of \"Friendly\" SQL for wrangling data in DuckDB (or Snowflake)](https://observablehq.com/@a-lexwein/five-cool-little-bits-of-friendly-sql)\nIn a attempt to get out of my not-blogging rut,\nI wrote a little SQL Tips and Tricks post, focusing on some \"friendly\" additions to the query syntax that DuckDB has introduced over the last few years and Snowflake has adopted as well.\n\nI cover the following keywords.\n\n1. `group by all`\n2. terminal commas (this is not a keyword)\n3. `count_if`\n4. `sample`\n5. `values`\n\nSo that I could use interactive queries, I wrote it as an Observable Notebook, the fantastic Javascript focused live coding platform where DuckDB comes standard.\nIn addition to the tips, I've smuggled in a few opinions about SQL style. Check it out.\n\n### https://observablehq.com/@a-lexwein/five-cool-little-bits-of-friendly-sql",[],[293,368],"e313470e-0467-11f1-b45c-42dde27851f2","2025-04-06-comics-about-comics.md","019c39e7-00d0-73db-9796-185b55cbd6b5",["D",1770497966290],"## The next addition to your data viz bookshelf should be a Comic About Comics.\n\n![IMG_0626.jpg](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/03100f91-56e9-400c-96d9-e7c9d3b7c200/public \"A photograph of the books in this post\")\n\nThere are many wonderful books on/of data visualization, and if you work in data,\nyou probably have a few (hopefully more than just *that one*). You should probably get more.\n\nAs your collection grows, consider that the next great book to inspire the chartmaker in you --\nto further you on your journey to master the craft -- may not be a treatise on chart types or data storytelling,\nbut something possibly even cooler: **A Comic About Comics**.\n\nThese are just the ones I own. You really can't go wrong with any of them.\nAnd even if you have no interest in data viz, this Comics About Comics genre is still a fantastic mind-expanded set of books.\nThis books are really special: they're formally inventive but personal and emotional in their own ways.\nThey provide a wonderful set of boxes to think outside of.\n\n### Scott McCloud's *Understanding Comics* ~~Trilogy~~ Ouvre\n\nI discovered Scott McCloud's work in 2018,\nwhen he was interviewed for [an episode of the design podcast 99% Invisible.](https://99percentinvisible.org/episode/speech-bubbles-understanding-comics-scott-mccloud/)\n\nThat conversation -- but especially his 1993 classic *Understanding Comics* which I read right afterwards -- completely blew my mind.\nThere have been less than a handful of times in my career where I felt that lightbulb above my head go on with anywhere near the wattage of when I digested *Understanding Comics*. \n\nI walked away from *Understanding Comics* with this incredible insight that data visualization was really a form of comics\n(\"sequential art\" if you're worried the person you're talking too thinks \"comics\" is a dirty word).\nCharts -- and especially sequences of charts to make things like dashboards or powerpoint presentations -- very definitely count per McCloud's definition:\n\n> Juxtaposed pictorial and other images in deliberate sequence, intended to convey information and/or to produce an aesthetic response in the viewer.\n\nAt that point in 2018, I had been a data person for several years, always making charts to understand and communicate things both professionally and recreationally for many years.\nI had some successes: charts that helped my colleagues make decisions, charts that made cool nerds on tumblr chuckle, even a few that I didn't think were hideous.\nI didn't yet have a full bookshelf of data viz books, but I had more than one (the first I bought was indeed *that one*).\nDespite not having much academic training in it, I felt like I understood visualization pretty well at that point, but *Understanding Comics*\nmade clear how limited by understanding was (and still is).\nEven more so than the grammar of graphics: to me personally this idea of **Charts Are Comics** has been the most powerful aha moment in my \"career\" as a chartmaker.\n\nIf you've read *Understanding Comics* and got something out of it, I'd encourage you to keep going with McCloud's work.\nAlthough 1996's *Making Comics* did not quite inspire me to start making comics, it has great lessons about composition and visual storytelling.\n2000's *Reinventing Comics* in particular had a lot of resonance for me, as someone who's sequential art (charts) is both made and consumed through screens and computers.\n\nAnd just this week, Scott McCloud released another Comic About Comics: *The Cartoonists Club* with Raina Telgemeier.\nAimed at younger readers, it embeds the most important ideas from *Understanding...* and *Making...*\nand into a narrative about middler schoolers finding their voice and their people.\n*Understanding Comics* never brought me to tears, but I needed a kleenex after finishing *The Cartoonists Club*.\n\nWhile I hadn't considered the relationship between charts and comics until 2018,\nMany others had made the connection and I just wasn't paying attention.\nMcCloud had spoken at the data viz conference Tapestry in 2013,\nand Moritz Stefaner (data viz maker and discusser extroidinaire) interviewed McCloud in 2017 for the [Data Stories podcast](https://datastori.es/102-comics-and-visual-storytelling-with-scott-mccloud/).\nAlso in 2017 in academia, Benjamin Bach worked with Nathalie Henry Riche, Sheelagh Carpendale, and Hanspeter Pfister to publish\n[The Emerging Genre of Data Comics](http://sheelaghcarpendale.ca/innovis/uploads/Publications/Publications/carpendale2017emerging.pdf)\n(which itself is a Comic About Comics!).\nAnd in 2016, comics professor Nick Sousanis gave a [Keynote at Tapestry](https://www.youtube.com/watch?v=7veGaFlu9Xk&t=2698s).\n\n### *Unflattening* by Nick Sousanis\n\nIt is reductive to call *Unflattening* a Comic About Comics: it's definitely a comic,\nbut it's about something a little bigger and a lot more cerebral than McCloud's work (it's a PhD dissertation).\nIt's hard to pin down exactly what to call that (the shapeliness of ideas?).\nThat written words are insufficient to describe the complexity of the topic is another thing the book is kind of about.\n\n*Unflattening* is also a compositional feast: pages flow in all sorts of directions.\nEvery spread maps complex and abstract things to the two-dimensional page in ways that befit the nonlinearity and high dimensionality of those abstract spaces.\nMuch of the hard work of data viz is making invisible abstract things tractable in two dimensions, and *Unflattening* contains lesson after lesson in it.\n\nRJ Andrews deserves a shout-out. RJ recommended Unflattening to me at the Tapestry conference in 2018\n(I gave [my own brief talk](https://www.youtube.com/watch?v=PpAfmTgcGPY) at that Tapestry, invigorated by discovering *Understanding Comics* at the beginning of the year).\nIf you don't have a data viz bookshelf yet,\nI can safely say Andrews's newly remastered [*Info We Trust*](https://visionarypress.com/products/info-we-trust) is the perfect place to start (way better than *that one*).\nRJ's book is of what it's about in the same way all these wonderful Comics About Comics are.\nRJ also has a wonderful write-up that covers this very topic: [\"Books without data for the data professional\"](https://infowetrust.com/project/information-arts)\nthat includes both *Unflattening* and *Understanding Comics*.\n\n### *What It Is* and *Making Comics* by Lynda Barry\n\n*What It Is*, like McCloud's classic, is also about understanding comics, but it's form and content differ dramatically.\nWhile McCloud explicates the conventions of comics with a focus on the prototypical grid of rectangular panels,\nBarry is more interested in asking than answering, and her work is -- gloriously -- too untidy to fit into little boxes.\nEven compared to heady academic work of *Unflattening*, *What It Is* was maybe the most challenging read for me of any of these comics.\nIt's not formless, but it's far from the rectilinearity of most comics I read.\nAll these books are great for leaving on your coffee table, and leafing through random pages, but *What It Is* works particularly well for this.\n\nBarry's *Making Comics* had a magical impact on me: It actually got me drawing!\nI didn't work my way through the whole book, but I tried a several of the exercises.\nAnd for about two months in 2020, I drew a self-portrait on a index card every day (they're hideous and I'm so proud of them).\nBut even if you can't find to courage to draw, *Making Comics* is worth it for how she grounds the craft in modes we all learned as children.\n\nSo read some books, bust out that pen and paper, make some charts, make some comics, make something else.\n\n![IMG_0623.jpg](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/4a0844b9-a977-47c6-a086-fc949432bf00/public \"From Barry's Making Comics: you don't have to have any artistic skill to do this. you just need to be brave and sincere.\")",[],[293,375],"e3132c06-0467-11f1-b45c-42dde27851f2","2025-03-31-old-tumblrs.md","019c39e7-00d0-73db-9796-16bf18cacc97",["D",1770497966290],"## Some of my better Tumblr posts\n\nAlthough the URL somehow got reshuffled and I have long forgotten the login password, my old Tumblr blog Alex Whines\nis still on the internet. When the tumblr was still active, I kept a list of greatest hits.\nI reproduced the list for the last iteration of my blog, so it was easy enough to bring it over here.\n\nIn addition to all the the fun posts below that I am 98% not ashamed of, my old blog did contain some missteps.\nSorry for the bad opinions and shoddy work!\n\n**Games:**\n- A multi-part analysis of Jeopardy! questions and answers, featuring some fun visualization ([1](http://alexwhines-blog.tumblr.com/post/613905785/helpful-hint-for-when-you-are-a-contestant-on-jeopardy),[2](http://alexwhines-blog.tumblr.com/post/670084704/weve-already-covered-that-whenever-you-dont-know),[3](http://alexwhines-blog.tumblr.com/post/790684867/so-youre-back-on-jeopardy-trebek-is-reading),[4](http://alexwhines-blog.tumblr.com/post/801075069/another-possible-jeopardy-scenario-you-might-as))\n- [Swear words](http://alexwhines-blog.tumblr.com/post/3868278233/scrabble-facts-pt-4) in Scrabble\n- I play a lot of [Boggle](http://alexwhines-blog.tumblr.com/tagged/boggle)\n- Arbitrage [at the boardwalk arcade](http://alexwhines-blog.tumblr.com/post/913999996/hot-investment-tip-boardwalk-arcade-edition)\n\n**Music:**\n\n- [Pitchfork versus Metacritic,](http://alexwhines-blog.tumblr.com/post/809415856/yesterday-something-called-flavorwire-had-a-post) a quantitative analysis, and some more on the [Metacritic data](http://alexwhines-blog.tumblr.com/tagged/metacritic).\n- [A dialogue in song titles](http://alexwhines-blog.tumblr.com/post/1587830624/a-dialogue-in-song-titles-speaker-1-is-in-light)\n- What's the [Scenario](http://alexwhines-blog.tumblr.com/post/2680112431/know-your-scenarios-a-tribe-called-quest)?\n- I also used to maintain a tumblr about [Songs from Treme](https://songsfromtreme-blog.tumblr.com/)\n\n**Nesting and recursion in fun places:**\n\n- One step of the Hokey Pokey is '[do the Hokey Pokey](http://alexwhines-blog.tumblr.com/post/733602356/recursion-in-fun-places-depending-on-how-you)'\n- [Fish fish fish.](http://alexwhines-blog.tumblr.com/post/4619309811/according-to-wikipedia-northern-pike-feed-on)\n- [My idea for a TV show](http://alexwhines-blog.tumblr.com/post/855597954/if-anyone-knows-anyone-at-nbc-ive-got-an-awesome) about 30 Rock and Studio 60\n- If someone was reading The Lion, The Witch, and The Wardrobe in the [fictional universe](http://alexwhines-blog.tumblr.com/post/3094931180/a-thought-continued) of the movie Groundhog Day\n\n**Food:**\n\n- The hole in the [Candy Bar Venn Diagram](http://alexwhines-blog.tumblr.com/post/407296011/hot-investment-tip-candy-bar-edition-hopefully)\n- Diagrams of [Scotch eggs](http://alexwhines-blog.tumblr.com/post/715341118/were-you-aware-of-the-existence-of-scotch-eggs-i) and [Snickers ice cream cones](http://alexwhines-blog.tumblr.com/post/3613407044/the-snickers-ice-cream-cone-lucky-charms)\n- [A guide](http://alexwhines-blog.tumblr.com/post/587595945/the-chinese-spot-across-the-street-from-me-is-only) for price-conscious people who want to buy chicken wings at the intersection of 7th St. and Q St. NW\n- Tale of the Tape: [E.L. Fudge and Double Stuffed E.L. Fudge](http://alexwhines-blog.tumblr.com/post/3374412499/i-made-a-pretty-big-discovery-at-the-supermarket)\n\n**More words:**\n\n- [Moonfish](http://alexwhines-blog.tumblr.com/post/5863557451/selfish-shellfish-sell-fish-shellfish) moon fish.\n- Why *[improbably](http://alexwhines-blog.tumblr.com/post/7824736366/the-word-im-currently-finding-interesting)* is interesting.\n- [Example sentences](http://alexwhines-blog.tumblr.com/post/5655919664/example-sentences) I have produced in school\n- Buffalo people [buffalo people](http://alexwhines-blog.tumblr.com/post/4580679647/buffalo-people-buffalo-people).\n- Hotspots/Potshots, Sleepover/Oversleep, [etc.](http://alexwhines-blog.tumblr.com/post/210515042/this-all-started-when-i-found-headwater-and-missed)\n\n- Just a photograph of [me eating cheese puffs](http://alexwhines-blog.tumblr.com/post/9640074973/a-hypothesis-has-been-floated-that-my-blog-would)",[],[293,382],"e313157c-0467-11f1-b45c-42dde27851f2","2025-03-29-posts-only-a-mother-could-like.md","019c39e7-00d0-73db-9796-1323f186f110",["D",1770497966290],"## Posts Only a Mother Could Like\n\nIt's not surprising my Bluesky posts don't get many likes. I don't have many followers and honestly I'm not a great poster.\nI even call myself boring in my bio. With so few likes, every like is meaningful to me.\nEspecially when there's only a single ❤️ on the post.\nI know it's just someone pushing a button, but that little one-to-one connection across cyberspace,\nto say \"I see you, even if nobody else does\", it means something.\n\nBut it means something a little different when that person is your mother.\n\nBelow are the ten posts of mine liked by my mother and nobody else.\n\n| Timestamp | Text |\n|-----------|------|\n| [3/25/2025, 2:16:42 PM](https://bsky.app/profile/alexwein.bsky.social/post/3ll7hjfjewk24) | ranking daily games against funness and the complicity of the publishers is its own knotty puzzle |\n| [3/15/2025, 3:08:07 PM](https://bsky.app/profile/alexwein.bsky.social/post/3lkgfq4tm3k2z) | It seems like all the cool kids are going to this. But also me. |\n| [3/1/2025, 11:55:58 PM](https://bsky.app/profile/alexwein.bsky.social/post/3lje4p4eovk2f) | I forked my last word game and added wikipedia's list of birds alexwein-loopylettersbirds.web.val.run |\n| [2/18/2025, 2:21:10 AM](https://bsky.app/profile/alexwein.bsky.social/post/3lig77ozynk2x) | Weekend word game. Not fun, per se, but more fun than the last time I tried to make this particular game. alexwein-loopyletters.web.val.run |\n| [1/8/2025, 3:13:51 PM](https://bsky.app/profile/alexwein.bsky.social/post/3lfahbmnbnk26) | I got a shout-out for today's Order Up (I submitted something worse and Adam ran with this instead). You're all doing Order Up every day, right? orderup.games |\n| [1/2/2025, 4:19:17 PM](https://bsky.app/profile/alexwein.bsky.social/post/3leri53kqsk2z) | welp...I now have two half-written blog posts. Here's the list though. All definitely word games for sure. |\n| [12/13/2024, 12:57:47 AM](https://bsky.app/profile/alexwein.bsky.social/post/3ld5lcvqyk22w) | I've never had it to drink (so didn't include it) but have always liked the Lil Wayne song \"D'usse\" www.youtube.com/watch?v=TS-h... |\n| [12/12/2024, 9:41:03 PM](https://bsky.app/profile/alexwein.bsky.social/post/3ld5ad4wt3s2e) | My sister's book club needed to know the longest sentence in Henry James's The Golden Bowl. Probably too naive a methodology, but the results seem plausible observablehq.com/@a-lexwein/l... |\n| [12/7/2024, 3:07:33 PM](https://bsky.app/profile/alexwein.bsky.social/post/3lcpxyvnd4k2m) | i'm having a very strong showing so far in december's monthly boggle tournament |\n| [11/8/2024, 4:39:12 PM](https://bsky.app/profile/alexwein.bsky.social/post/3lah7m34lem27) | toying with the idea of accomplishing more than zero tasks today |\n\n[Here's the val](https://www.val.town/v/alexwein/bskySoloLikes) where I pull the data. And [here's a full list](https://www.val.town/v/alexwein/soloLikesDisplay) my posts that have been liked by exactly one person.\n\nI love you too, mom! ❤️",[],[293,389],"e3130f28-0467-11f1-b45c-42dde27851f2","2025-03-14-pie-charts-why-not.md","019c39e7-00d0-73db-9796-0d3c3bef3164",["D",1770497966290],"## A good reason not to use pie charts\n\nHere is a compelling reason not use pie charts when visualizing data:\n\nOne of your stakeholders has an MBA and has read exactly one book on data visualization (you know which one).\nHe thinks pie charts are oh so terrible, and if your reports and dashboards contain pie charts,\ninstead of focusing on the data being communicated, he will complain about the pie charts.\nBecause your goal as somebody making charts is to faciliate understanding, avoiding pie charts altogether\ncan actually be a smart strategy.\nFor all their merits, you never strictly \"need\" pies (or any one chart type).\nIf a chart's form would be a distraction from the data,\nit is maybe not the the right chart.\n\n## A good reason to use pie charts\n\nFuck that guy.",[],[293,396],"e312f952-0467-11f1-b45c-42dde27851f2","2025-03-09-songbot.md","019c39e7-00d0-73db-9796-0a627802f769",["D",1770497966290],"## I made a Bluesky bot\n\n[mynewfavoritesong.bluesky.social](https://bsky.app/profile/mynewfavoritesong.bsky.social)\n\nWhen I signed up for Val Town, I had a first project in mind.\nWhile Spotify's algorithms do a serviceable job notifying me of new music by artists I like, it's not really possible to \"follow\" a songwriter.\nHelpfully, Spotify maintains *Written By...* playlists for many songwriters.\nHere's one for [Jonnali Mikaela \"Noonie Bao\" Parmenius](https://open.spotify.com/playlist/37i9dQZF1EFMc5WcffBKFm?si=5d6294f36acf48f8),\nwho has co-writing credits on two of my absolute favorite pop songs of the last 15 years.\n\nBut these first-party playlists aren't in chronological order,\nand I don't know of a good way being notified when songs get added.\nSo it's quite hard to make sure I don't miss out on the latest credit from Sabrina Carpenter's go-to [Amy Allen](https://open.spotify.com/playlist/37i9dQZF1EFAW2Wx2Q7Fjt?si=19a4c0d77645412f).\n\nSo the plan was to build a cron job val that used the Spotify API to poll a playlist on a regular basis, and check whether anything had changed since the last time,\nand then create some sort of alert upon detection of a change.\nIt seemed buildable, even with my modest dev skills.\nI was able to use [some tools](https://www.val.town/v/stevekrouse/spotifyTracks) that [Steve](https://www.val.town/u/stevekrouse) from Val Town built.\nI was ready to request a playlist for the first time, at which point I learned that Spotify somewhat recently enshittified their web API\nsuch that first-party playlists are no longer available.\n\nSo, I'm still looking for a good way to keep up with songwriters.\n\nBut I was able to take the same basic idea and turn in into My New Favorite Song Bot\n(here's [the val with the code](https://www.val.town/v/alexwein/newFavoriteSongBot)).\nIt's the same thing really: a cron val looking for new songs added to a playlist. When it catches something new, it posts to Bluesky.\nI think it's going to break when I add too many songs.\nI also haven't really thought about what happens if I try to add multiple songs at the same time.\n\nBecause another Val Town user named Jonas Merlin had already made a [Bluesky bot template](https://www.val.town/v/jonasmerlin/bluesky_bot_template),\nthe whole process was quite tractable. It's been working so far! Every time I've added a song, the Bluesky post has dutifully showed up.\n\nI'm a little ambivalent about how having a Favorite Songs bot might impact my relationship to music.\nAnd I haven't really decided how good a song needs to be for me to add it to the playlist. Or what consitutes \"new\".\nThere are seven songs so far; I seem to be on a pace of about one song a week.\nAlso Spotify is maybe evil, and even if it isn't, it is still probably bad for the world and I shouldn't use it and you shouldn't either.\nBut I do, and you can listen to the full playlist [here](https://open.spotify.com/playlist/0P2hUZ6RymtSZcUhCii77t?si=c6c20c26fa434f50).",[],[293,403],"e312ea34-0467-11f1-b45c-42dde27851f2","2025-03-09-sandwich-rules.md","019c39e7-00d0-73db-9796-049f0b9b6295",["D",1770497966290],"## How to Play \"Is It A Sandwich?\":\n\n- **Number of Players:** 2+\n- **Play time:** 1 minute - ?\n- **Ages**: 2+\n\n### The Object of the game\n\nThe object of **\"Is It A Sandwich?\"** is to just sort of have a conversation.\n\n### Beginning the game\n\nDecide who goes first or just start talking.\n\n### A typical round\n\nA player proposes a candidate.\nEvery player begins discussing whether or not that candidate is a sandwich.\nAfter some debate, players make a judgment that **Yes** the candidate is a sandwich\nor **No**, it is not a sandwich. Players are allowed to change their mind as debate unfolds.\nThe round ends when a player proposes a new candidate to debate.\n\n(Note: although the round ends when someone proposes a new candidate, players may revisit the candidates from previous rounds at any point to reopen debate or change their judgment.)\n\n### Scoring\n\n1. Each player starts with zero points.\n2. If every player reaches consensus that the candidate is a sandwich, everybody adds **+0 points** to their score.\n3. If one player successfully convinced another to change their mind, the convincer adds **+0 points** to their score and the convincee loses **-0** points.\n4. If one player points out the logical inconsistency of the judgments of another player, both players add **+0 points**.\n\n### Ending the game\n\nThe game ends when the food arrives. There is no winner. There are no losers.",[],[293,410],"e312dfd0-0467-11f1-b45c-42dde27851f2","2025-03-09-future-abandoned-blog.md","019c39e7-00d0-73db-9796-03725b79feaa",["D",1770497966290],"## My future abandoned blog\n\n\"I should blog more\" is a thought I have pretty regularly.\nHaving ideas worth sharing and crafting in them into something that others might find interesting has\nalways been a very rewarding experience.\n\nBut the thing is: Writing is really hard.\n\nAnd I'm not feeling too optimistic that it's about to get any easier for me. Or even that I have ideas worth sharing.\nWhich means posts here will be a combination of infrequent and of poor quality.\nBut I'm trying again. Here is my space for blogging.\n\n- I work in business intelligence, but it is unclear if I'm any good at my job. I probably will write about charts and analytics occasionally.\n- I also enjoy playing word games and have dabbled in making a few (they are also of poor quality). I might write about word games.\n- In previous incarnations of my blog, there's been plenty of \"here's a song I like\" or \"here's a show I watched\". That might happen, too.\n\nYou should probably blog more, too! Writing time is time well spent.\n\n(This site was built in Val Town. Thanks to [Steve](https://www.val.town/x/stevekrouse/markdownBlogStarter) from Val Town for getting me started.)",[],[293,417],["D",1770497966290],[320,321,322,323,324,325,326,327,328],[293],"e312c32e-0467-11f1-b45c-42dde27851f2","dvs-spin.md","019c39e7-00d0-73db-9795-fa5880d39f03",["D",1770497966290],"# 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/).",[],[298,427],"e312894a-0467-11f1-b45c-42dde27851f2","dbt-cheatsheet.md","019c39e7-00d0-73db-9795-f52af5a4b8ea",["D",1770497966290],"## 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🟩🟩🟩🟩🟩",[],[298,434],["D",1770497966290],[317,318],[298],[],[167,159],[315],[167],["D",1741530120955],["D",1789513278143],{"_11":12,"_215":211},{"_11":12,"_208":209,"_210":211,"_179":180,"_212":213,"_214":51},{"_41":58,"_13":16,"_32":59,"_39":40,"_43":33,"_45":60,"_61":53,"_62":40,"_63":56,"_57":14,"_54":12},"ctx",{"_203":-5,"_236":485,"_486":487,"_488":489,"_490":51,"_491":51,"_492":51,"_493":26,"_494":-5,"_495":-7,"_496":-7,"_497":135,"_498":51,"_499":51,"_500":-5,"_501":51,"_502":51,"_503":51,"_504":-5},"ENV",{"_456":457,"_458":459,"_460":38,"_461":462,"_463":464,"_465":466,"_467":468,"_469":470,"_471":472,"_473":474,"_475":476,"_477":478,"_479":480,"_481":482,"_483":484},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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"]

Compare

Mergeog-imagesintomain

Layout.tsx+37-3

Hindex.tsx+36-3

components

components/OGImage.tsx+67-0

prompt.md+149-0

utils

utils/extractTitle.ts+10-0