Jxnblk Blog

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_394":395,"_396":397},"routes/_app.x.$handle.$name",{"_101":100,"_32":45,"_110":91,"_27":111,"_13":14,"_112":-5,"_11":113,"_114":115,"_116":117,"_118":119,"_120":121,"_20":-5,"_122":-5,"_123":-5,"_124":25,"_125":126,"_127":128,"_129":-5,"_130":-5,"_131":132},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":55,"_18":56,"_57":58,"_59":25,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":64,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":25},"version",121,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","up.cron.tsx","latestPath","fileId","2e9f43be-1a10-11f0-b6ec-569c3dd06744","name","fileType","interval","content","// uptime healthcheck\nimport { email } from \"https://esm.town/v/std/email?v=11\";\n\nconst url = \"https://jxnblk.com\";\n\nexport default async function(interval: Interval) {\n const res = await fetch(url);\n\n if (res.status !== 200) {\n console.error(`${url} ${res.status}`);\n email({\n subject: `${url} is !UP`,\n text: body,\n });\n return;\n }\n console.log(`${res.status} ${url} ${new Date().toISOString()}`);\n}\n\nconst body = `\nhttps://jxnblk.com\n\nhttps://val.town/x/jxnblk/dotcom\n\n`;\n// https://val.town/x/jxnblk/dotcom/logs","// uptime healthcheck\nimport { email } from \"https://esm.town/v/std/email?v=11\";\n\nconst url = \"https://jxnblk.com\";\n\nexport default async function(interval: Interval) {\n const res = await fetch(url);\n\n if (res.status !== 200) {\n console.error(`${url} ${res.status}`);\n email({\n subject: `${url} is !UP`,\n text: body,\n });\n return;\n }\n console.log(`${res.status} ${url} ${new Date().toISOString()}`);\n}\n\nconst body = `\nhttps://jxnblk.com\n\nhttps://val.town/x/jxnblk/dotcom\n\n`;\n\n// https://val.town/x/jxnblk/dotcom/logs","createdAt",["D",1744731799311],"branchVersion","branchId","0e614a5c-00de-11f0-ba84-569c3dd06744","id","0e60dc16-00de-11f0-ba84-569c3dd06744","dotcom",["D",1741961417243],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","jxnblk.com website","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/122f9003-bf0b-4e12-e13e-addf895f9400/square512?exp=1789588799&sig=5ec21a798258b1f80e6b601d97ef1b9f00d6e67aee4d031b66246ad07570b973","5e11e267-23cd-4ee4-86f4-3bf2a5ed69d7","pinnedFileId","72c77980-00de-11f0-8a56-569c3dd06744","pinPreview","pinMigrated","screenshotVersion",118,"likeCount",0,"orgId","62a75f8d-be32-4eaa-989a-23f3433a7d42","tursoName","0e60dc1600de11f0ba84569c3dd06744","tursoHostname","0e60dc1600de11f0ba84569c3dd06744-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789516910456],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_101":100,"_109":105},"org",{"_101":100,"_102":103,"_104":105,"_18":56,"_106":107,"_108":25},"branch",{"_13":90,"_32":91,"_43":42,"_92":44,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":45,"_99":100},"isOwned",128,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","jxnblk","handle","displayName","Brent Jackson","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/fca87e60-4ad1-453c-af10-2782c6823400/square512?exp=1789588799&sig=f310120a808910a99a3db104d698a41ed953dd912ed7174c8373a978c6dd3167","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":389,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":55,"_18":56,"_57":58,"_59":25,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":70,"_71":390,"_73":64,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":391,"_85":392,"_87":393,"_89":25},"tree",[303,305,306,307,308,309,310,311,312,313,314,315,316,317,318,319,320,321,322],"files",[303,304,305,306,307,308,309,310,311,312,313,314,315,316,317,318,319,320,321,322],"counts",{"_293":64,"_294":184,"_295":64,"_296":297,"_298":299},"contents",[135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{"_133":134},"9b4a0264-0102-11f0-81db-569c3dd06744","next.jxnblk.io",{"_43":286,"_32":287,"_30":288,"_157":-5,"_41":42,"_40":289,"_159":128,"_38":290,"_13":64,"_33":291,"_35":-5,"_24":25,"_163":-5,"_27":292},{"_43":280,"_32":281,"_30":58,"_157":-5,"_41":42,"_40":282,"_159":128,"_38":283,"_13":184,"_33":20,"_35":284,"_24":25,"_163":-5,"_27":285},{"_43":273,"_32":274,"_30":275,"_157":-5,"_41":42,"_40":276,"_159":128,"_38":277,"_13":168,"_33":176,"_35":278,"_24":25,"_163":-5,"_27":279},{"_43":265,"_32":266,"_30":267,"_157":-5,"_41":42,"_40":268,"_159":25,"_38":269,"_13":270,"_33":176,"_35":271,"_24":25,"_163":-5,"_27":272},{"_43":258,"_32":259,"_30":260,"_157":-5,"_41":42,"_40":261,"_159":128,"_38":262,"_13":64,"_33":176,"_35":263,"_24":25,"_163":-5,"_27":264},{"_43":251,"_32":252,"_30":253,"_157":-5,"_41":42,"_40":254,"_159":128,"_38":255,"_13":64,"_33":176,"_35":256,"_24":25,"_163":-5,"_27":257},{"_43":244,"_32":245,"_30":246,"_157":-5,"_41":42,"_40":247,"_159":128,"_38":248,"_13":168,"_33":176,"_35":249,"_24":25,"_163":-5,"_27":250},{"_43":237,"_32":238,"_30":239,"_157":-5,"_41":42,"_40":240,"_159":128,"_38":241,"_13":64,"_33":176,"_35":242,"_24":25,"_163":-5,"_27":243},{"_43":231,"_32":232,"_30":133,"_157":-5,"_41":42,"_40":233,"_159":25,"_38":234,"_13":168,"_33":161,"_35":235,"_24":25,"_163":100,"_27":236},{"_43":224,"_32":225,"_30":226,"_157":-5,"_41":42,"_40":227,"_159":128,"_38":228,"_13":64,"_33":176,"_35":229,"_24":25,"_163":-5,"_27":230},{"_43":217,"_32":218,"_30":219,"_157":-5,"_41":42,"_40":220,"_159":25,"_38":221,"_13":64,"_33":161,"_35":222,"_24":25,"_163":-5,"_27":223},{"_43":211,"_32":212,"_30":213,"_157":-5,"_41":42,"_40":62,"_159":128,"_38":214,"_13":175,"_33":161,"_35":215,"_24":25,"_163":-5,"_27":216},{"_43":203,"_32":204,"_30":205,"_157":-5,"_41":42,"_40":206,"_159":128,"_38":207,"_13":208,"_33":161,"_35":209,"_24":25,"_163":-5,"_27":210},{"_43":195,"_32":196,"_30":197,"_157":-5,"_41":42,"_40":198,"_159":128,"_38":199,"_13":200,"_33":176,"_35":201,"_24":25,"_163":-5,"_27":202},{"_43":187,"_32":188,"_30":189,"_157":-5,"_41":42,"_40":190,"_159":128,"_38":191,"_13":192,"_33":176,"_35":193,"_24":25,"_163":-5,"_27":194},{"_43":179,"_32":180,"_30":181,"_157":-5,"_41":42,"_40":182,"_159":128,"_38":183,"_13":184,"_33":176,"_35":185,"_24":25,"_163":-5,"_27":186},{"_43":170,"_32":171,"_30":172,"_157":-5,"_41":42,"_40":173,"_159":128,"_38":174,"_13":175,"_33":176,"_35":177,"_24":25,"_163":-5,"_27":178},{"_43":166,"_32":28,"_30":31,"_157":-5,"_41":42,"_40":14,"_159":128,"_38":167,"_13":168,"_33":34,"_35":37,"_24":25,"_163":-5,"_27":169},{"_43":154,"_32":155,"_30":156,"_157":-5,"_41":42,"_40":158,"_159":128,"_38":160,"_13":64,"_33":161,"_35":162,"_24":25,"_163":164,"_27":165},"2c00c6ac-00eb-11f0-b126-569c3dd06744","vantom.http.tsx","2c00c738-00eb-11f0-b126-569c3dd06744","parentId",62,"latest",["D",1741967050401],"http","/** @jsxImportSource https://esm.sh/react@18.3.1 */\nimport { renderToStaticMarkup } from \"https://esm.sh/react-dom@18.3.1/server\";\n\nexport const Vantom = ({\n size = 32,\n}: { size?: number }) => (\n \n \n \n);\n\nexport default async function(req: Request): Promise {\n const svg = renderToStaticMarkup();\n return new Response(svg, {\n headers: {\n \"content-type\": \"image/svg+xml\",\n },\n });\n}\n","label","vantom",[155],"5ac603f6-1a10-11f0-9b83-569c3dd06744",["D",1744731799311],2,[28],"9481c86e-00ed-11f0-976a-569c3dd06744","rss.tsx","d77d2c0e-00e7-11f0-b49e-569c3dd06744",65,["D",1741968084717],1,"script","// RSS middleware for jxnblk.com\n\n// import data from \"https://blog.jxnblk.com/api/all.json\" with { type: \"json\" };\nimport type { Middleware } from \"https://esm.town/v/jxnblk/reactstream/index.tsx\";\n\nfunction generateRSSFeed(posts) {\n return `\n \n \n Jxnblk Blog\n https://jxnblk.com\n Brent Jackson - design engineer and aspiring indie game dev\n ${\n posts.map(post => `\n \n ${escapeXml(post.title)}\n https://jxnblk.com/blog/${post.slug}\n ${escapeXml(post.excerpt)}\n ${new Date(post.date).toUTCString()}\n https://jxnblk.com/blog/${post.slug}\n \n `).join(\"\")\n }\n \n \n `;\n}\n\nfunction escapeXml(unsafe) {\n return unsafe.replace(/[<>&'\"]/g, c => {\n switch (c) {\n case \"<\":\n return \"<\";\n case \">\":\n return \">\";\n case \"&\":\n return \"&\";\n case \"'\":\n return \"'\";\n case \"\\\"\":\n return \""\";\n }\n });\n}\n\nexport const rss = (data: any): Middleware => async (req, res, next) => {\n if (req.data.pathname !== \"/rss.xml\") return next();\n const rss = generateRSSFeed(data.posts);\n return new Response(rss, {\n headers: {\n \"Content-Type\": \"application/rss+xml; charset=utf-8\",\n },\n });\n};\n",[171],"9641659e-0c17-11f0-81b5-569c3dd06744","redirects.tsx","a3093dfa-00e7-11f0-ae44-569c3dd06744",107,["D",1743195589303],3,"import { match, parse, pathToRegexp } from \"https://esm.sh/path-to-regexp@7.2.0\";\nimport { DataRequest } from \"https://esm.town/v/jxnblk/reactstream/index.tsx\";\n\nconst redirects = new Map();\n// redirects.set(\"/hello-color\", \"https://jxnblk.io/hello-color\");\nredirects.set(\"/react-icons\", \"https://jxnblk.io/react-icons/\");\n\nredirects.set(\"/colorable\", \"https://colorable.jxnblk.com\");\nredirects.set(\"/colorable/*\", \"https://colorable.jxnblk.com\");\n// rebass\nredirects.set(\"/rebass\", \"https://github.com/rebassjs/rebass\");\nredirects.set(\"/rebass/*\", \"https://github.com/rebassjs/rebass\");\n\nredirects.set(\"/paths\", \"https://jxnblk.io/paths\");\nredirects.set(\"/loading\", \"https://jxnblk.io/loading\");\nredirects.set(\"/loading/*\", \"https://jxnblk.io/loading\");\n\nredirects.set(\"/loading/loading-bubbles.svg\", \"https://jxnblk.io/loading-bubbles.svg\");\nredirects.set(\"/loading/loading-spin.svg\", \"https://jxnblk.io/loading-spin.svg\");\nredirects.set(\"/loading/loading-spinning-bubbles.svg\", \"https://jxnblk.io/loading-spinning-bubbles.svg\");\nredirects.set(\"/loading/loading-spokes.svg\", \"https://jxnblk.io/loading-spokes.svg\");\nredirects.set(\"/loading/loading-bars.svg\", \"https://jxnblk.io/loading-bars.svg\");\nredirects.set(\"/loading/loading-cylon-red.svg\", \"https://jxnblk.io/loading-cylon-red.svg\");\n\nredirects.set(\"/avatar\", \"https://jxnblk-avatar.web.val.run/\");\nredirects.set(\"/images/avatar.png\", \"https://jxnblk-avatar.web.val.run/\");\nredirects.set(\"/avatar.png\", \"https://jxnblk-avatar.web.val.run/\");\n\nredirects.set(\"/apple-touch-icon.png\", \"https://jxnblk-avatar.web.val.run/\");\nredirects.set(\"/favicon.ico\", \"https://jxnblk-avatar.web.val.run?size=32&color=white&reverse=true&scale=1.375\");\n\nredirects.set(\"/skullcat\", \"https://jxnblk.io/skullcat\");\nredirects.set(\"/skullcat/*\", \"https://jxnblk.io/skullcat\");\n\nredirects.set(\"/shade\", \"https://jxnblk.io/shade\");\nredirects.set(\"/shade/*\", \"https://jxnblk.io/shade\");\nredirects.set(\"/papercraft\", \"https://jxnblk.io/papercraft\");\nredirects.set(\"/papercraft/*\", \"https://jxnblk.io/papercraft\");\n\nredirects.set(\"/blog/rss.xml\", \"/rss.xml\");\n\nconst paths = [];\n\nredirects.forEach((val, key) => {\n paths.push({\n match: (p) => match(key)(p),\n regexp: pathToRegexp(key),\n url: val,\n });\n});\n\nconst blogRedirects = [\n {\n regexp: pathToRegexp(\"/blog/posts/:slug\"),\n base: \"/blog/\",\n },\n {\n regexp: pathToRegexp(\"/writing/:slug\"),\n base: \"/blog/\",\n },\n {\n regexp: pathToRegexp(\"/writing/posts/:slug\"),\n base: \"/blog/\",\n },\n];\n\nexport default async function redirectMiddleware(req: DataRequest, res: Response, next): Promise {\n const match = paths.find(p => p.match(req.data.pathname));\n // const match = paths.find(p => p.regex.match(req.data.pathname));\n if (match) {\n return new Response(null, {\n status: 302,\n headers: {\n Location: match.url,\n },\n });\n }\n const blogMatch = blogRedirects.find(b => b.regexp.test(req.data.pathname));\n if (blogMatch) {\n const data = blogMatch.regexp.exec(req.data.pathname);\n const slug = data[1];\n console.log(\"BLOG Redirect\", req.data.pathname, slug);\n const url = blogMatch.base + slug;\n return new Response(null, {\n status: 302,\n headers: {\n Location: url,\n },\n });\n }\n\n return next();\n}\n\n\n/*\n // tests\n const path = \"/writing/beep\";\n const m = blogRedirects.find(b => b.regexp.test(path));\n console.log(m);\n if (m) {\n const d = m.regexp.exec(path);\n const slug = d[1];\n // const keys = m.regexp.keys(path);\n console.log(d, slug);\n }\n*/",[180],"944fdff6-00e9-11f0-abd0-569c3dd06744","react-svg-to-png.tsx","0721d5a8-00e9-11f0-abcd-569c3dd06744",53,["D",1741966366404],5,"/** @jsxImportSource npm:react@18.3.1 */\nimport { render as renderPNG } from \"https://deno.land/x/resvg_wasm@0.2.0/mod.ts\";\nimport { renderToStaticMarkup } from \"npm:react-dom@18.3.1/server\";\n\ntype SVGComponentProps = {\n request: Request;\n url: URL;\n};\n\nconst cache = new Map();\n\nexport function render(Component: React.ComponentType, headers: any = {}) {\n return async function(req: Request): Promise {\n const url = new URL(req.url);\n const svg = renderToStaticMarkup();\n console.log(svg);\n const png = await renderPNG(svg);\n\n return new Response(png, {\n headers: {\n \"Content-Type\": \"image/png\",\n ...headers,\n },\n });\n };\n}\n\nexport default render;\n",[188],"9a3e1ef8-0c17-11f0-9560-569c3dd06744","proxies.tsx","5f58d8c4-0103-11f0-895c-569c3dd06744",108,["D",1743195595991],21,"import { match, parse, pathToRegexp } from \"https://esm.sh/path-to-regexp@7.2.0\";\nimport { DataRequest } from \"https://esm.town/v/jxnblk/reactstream/index.tsx\";\n\nconst proxies = new Map();\n\nproxies.set(\"/hello-color\", \"https://jxnblk--5cf00fa000fc11f09c7e569c3dd06744.web.val.run\");\nproxies.set(\"/gifolio\", \"https://jxnblk--fda93ece004a11f0a8d4569c3dd06744.web.val.run\");\n\nconst paths = [...proxies].map(([key, val]) => ({\n match: p => match(key)(p),\n regexp: pathToRegexp(key),\n url: val,\n}));\n\n\nexport default async function proxyMiddleware(req: DataRequest, res: Response, next) {\n const match = paths.find(p => p.match(req.data.pathname));\n if (match) {\n // console.log(`PROXY ${req.data.pathname} >> ${match.url}`);\n const url = new URL(match.url);\n const prox = new Request(url, {\n method: req.method,\n headers: req.headers,\n body: req.body,\n // redirect: \"follow\",\n });\n return fetch(prox);\n }\n\n return next();\n}",[196],"05948190-00e9-11f0-b9d3-569c3dd06744","og-image.http.tsx","92670e22-00e8-11f0-a151-569c3dd06744",42,["D",1741966126941],9,"/** @jsxImportSource npm:react@18.3.1 */\nimport wrap from \"npm:word-wrap\";\n// make this a library\nimport { render } from \"./react-svg-to-png.tsx\";\nimport { Avatar } from \"./avatar.tsx\";\nimport { Diagz, Tiled } from \"./greebles.tsx\";\n\nconst MARGIN = 64;\nconst FONT_SIZE = 32;\nconst LINE_HEIGHT = 64;\n\nconst COLOR = \"white\";\nconst BACKGROUND = \"black\";\nconst DESC = \"Brent Jackson. Design engineer and aspiring indie game developer. Based in Brooklyn, NY\";\n\nfunction Component({ request, url }) {\n const text = url.searchParams.get(\"text\") || DESC;\n const title = url.searchParams.get(\"title\") || \"Jxnblk\";\n const color = url.searchParams.get(\"color\") || COLOR;\n const bg = url.searchParams.get(\"bg\") || BACKGROUND;\n const fontSize = FONT_SIZE;\n const fontWeight = \"bold\";\n const wrapped = wrap(text, { width: 48 });\n const lines = wrapped.split(/\\n/g);\n\n return (\n \n \n \n \n \n \n \n \n {title.toUpperCase()}\n \n {lines.map((line, i) => (\n \n {line}\n \n ))}\n \n \n );\n}\n\nexport default render(Component, {\n // \"Cache-Control\": \"max-age=86400\", // 1 day\n});\n",[204],"77162bb0-13e6-11f0-bc5f-569c3dd06744","main.http.tsx","6ddf56b6-13e6-11f0-adcf-569c3dd06744",["D",1744054100974],"// static / vanilla js version of jxnblkio\n/** @jsxImportSource https://esm.sh/react@18.3.1 */\nimport { match } from \"https://esm.sh/path-to-regexp@8.2.0\";\nimport React from \"https://esm.sh/react@18.3.1\";\nimport { useMemo, useState } from \"https://esm.sh/react@18.3.1\";\n\n// port this to a new project\nimport { DataRequest, render, robots } from \"https://esm.town/v/jxnblk/reactstream/index.tsx\";\n\n\nimport { App, Route } from \"./app.tsx\";\nimport { Avatar } from \"./avatar.tsx\";\nimport redirects from \"./redirects.tsx\";\nimport { rss } from \"./rss.tsx\";\nimport { analytics } from \"./analytics.tsx\";\nimport proxies from \"./proxies.tsx\";\n\nimport data from \"https://blog.jxnblk.com/api/all.json?d4\" with { type: \"json\" };\n\ninterface Params {\n slug?: string;\n}\n\ntype AppCookies = {\n color?: number;\n};\n\n// TODO: try stream hydration with CDN setup\nexport default render(App, false, [\n analytics,\n robots(\"User-agent: *\\nAllow: /\"),\n redirects,\n proxies,\n rss(data),\n getInitialProps,\n // cacheHeaders, // TODO: enable/CDN ??\n]);\n\nconst matches = {\n home: match(\"/\"),\n blog: match(\"/blog\"),\n post: match(\"/blog/:slug\"),\n};\n\nasync function getInitialProps(req: DataRequest, res: Response, next): Promise {\n let params: Params = {};\n let route: Route = Route.Home;\n if (matches.post(req.data.pathname)) {\n params.slug = matches.post(req.data.pathname).params.slug;\n data.post = data.posts?.find(p => p.slug === params.slug);\n route = Route.Post;\n } else if (matches.blog(req.data.url.pathname)) {\n route = Route.Blog;\n } else if (!matches.home(req.data.pathname)) {\n route = Route.Unknown;\n }\n const { about, posts, post } = data;\n const size = JSON.stringify(posts).length;\n req.data.data = {\n posts: posts.filter(p => !p.draft),\n post,\n about,\n params,\n route,\n size,\n vanilla: true,\n };\n\n if (route === Route.Unknown) {\n res = new Response(null, {\n status: 404,\n headers: res.headers,\n });\n console.log(\"404\", res);\n return next(res);\n }\n\n return next();\n}\n\nasync function cacheHeaders(req: DataRequest, res: Response, next): Promise {\n res.headers.set(\"Cache-Control\", \"max-age=31536000\");\n return next();\n}\n\n////////////////",[212],"1cf4531e-13e6-11f0-9d14-569c3dd06744","jxnblk.http.tsx","1cf453c8-13e6-11f0-9d14-569c3dd06744",116,["D",1744053949760],"export default async function (req: Request): Promise {\n return Response.json({ ok: true })\n}",[218],"03dc2f2c-00eb-11f0-b062-569c3dd06744","ia-writer.css.tsx","03dc2ff4-00eb-11f0-b062-569c3dd06744",58,["D",1741966983052],"export const iaCSS = `\n/* ia-writer-mono-latin-400-normal */\n@font-face {\n font-family: 'iA Writer Mono';\n font-style: normal;\n font-display: swap;\n font-weight: 400;\n src: url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-400-normal.woff2) format('woff2'), url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-400-normal.woff) format('woff');\n}\n/* ia-writer-mono-latin-700-normal */\n@font-face {\n font-family: 'iA Writer Mono';\n font-style: normal;\n font-display: swap;\n font-weight: 700;\n src: url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-700-normal.woff2) format('woff2'), url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-700-normal.woff) format('woff');\n}\n`;\n\nexport default iaCSS;\n",[225],"c4fb1a52-0103-11f0-a64f-569c3dd06744","http.tsx",83,["D",1741977614971],"// static / vanilla js version of jxnblkio\n/** @jsxImportSource https://esm.sh/react@18.3.1 */\nimport { match } from \"https://esm.sh/path-to-regexp@8.2.0\";\nimport React from \"https://esm.sh/react@18.3.1\";\nimport { useMemo, useState } from \"https://esm.sh/react@18.3.1\";\n\n// port this to a new project\nimport { DataRequest, render, robots } from \"https://esm.town/v/jxnblk/reactstream/index.tsx\";\n\n\nimport { App, Route } from \"./app.tsx\";\nimport { Avatar } from \"./avatar.tsx\";\nimport redirects from \"./redirects.tsx\";\nimport { rss } from \"./rss.tsx\";\nimport { analytics } from \"./analytics.tsx\";\nimport proxies from \"./proxies.tsx\";\n\nimport data from \"https://blog.jxnblk.com/api/all.json?d4\" with { type: \"json\" };\n\ninterface Params {\n slug?: string;\n}\n\ntype AppCookies = {\n color?: number;\n};\n\n// TODO: try stream hydration with CDN setup\nexport default render(App, false, [\n analytics,\n robots(\"User-agent: *\\nAllow: /\"),\n redirects,\n proxies,\n rss(data),\n getInitialProps,\n // cacheHeaders, // TODO: enable/CDN ??\n]);\n\nconst matches = {\n home: match(\"/\"),\n blog: match(\"/blog\"),\n post: match(\"/blog/:slug\"),\n};\n\nasync function getInitialProps(req: DataRequest, res: Response, next): Promise {\n let params: Params = {};\n let route: Route = Route.Home;\n if (matches.post(req.data.pathname)) {\n params.slug = matches.post(req.data.pathname).params.slug;\n data.post = data.posts?.find(p => p.slug === params.slug);\n route = Route.Post;\n } else if (matches.blog(req.data.url.pathname)) {\n route = Route.Blog;\n } else if (!matches.home(req.data.pathname)) {\n route = Route.Unknown;\n }\n const { about, posts, post } = data;\n const size = JSON.stringify(posts).length;\n req.data.data = {\n posts: posts.filter(p => !p.draft),\n post,\n about,\n params,\n route,\n size,\n vanilla: true,\n };\n\n if (route === Route.Unknown) {\n res = new Response(null, {\n status: 404,\n headers: res.headers,\n });\n console.log(\"404\", res);\n return next(res);\n }\n\n return next();\n}\n\nasync function cacheHeaders(req: DataRequest, res: Response, next): Promise {\n res.headers.set(\"Cache-Control\", \"max-age=31536000\");\n return next();\n}\n\n////////////////\n",[232],"a8b9f522-00e8-11f0-8f6b-569c3dd06744","greebles.tsx","a8b9f5d6-00e8-11f0-8f6b-569c3dd06744",34,["D",1741965971160],"/** @jsxImportSource https://esm.sh/react@18.3.1 */\nimport { type ReactNode, SVGProps } from \"https://esm.sh/react@18.3.1\";\n\ntype IconProps = SVGProps & {\n size?: number;\n};\n\nexport const Diagz = ({ size = 32, ...props }: IconProps) => (\n \n \n \n);\n\nexport const Diag2 = ({ size = 32, ...props }: IconProps) => (\n \n \n \n);\n\ntype TiledProps = IconProps & {\n children: ReactNode;\n offset?: number | string;\n};\n\nexport const Tiled = ({\n size = 32,\n children,\n className = \"\",\n height = \"100%\",\n offset = 0,\n ...props\n}: TiledProps) => (\n \n \n \n {children}\n \n \n \n \n);\n",[238],"0f46b80a-00eb-11f0-bacf-569c3dd06744","css.tsx","e52393f4-00ea-11f0-b3e0-569c3dd06744",60,["D",1741967002201],"// tuna-based generative css lib\nimport iAWriterMono from \"./ia-writer.css.tsx\";\n\nexport const colors = [\n \"light\",\n \"foliage\",\n \"paper\",\n \"amber\",\n \"tomato\",\n \"brown reverse\",\n \"dark reverse\",\n \"black reverse\",\n];\n\n// gaps 7*32 = 224\n// padding 64\n// columns 8*96 = 768\n// columns @ 80 = 640\nconst vars = `\n:root {\n --text: #000;\n --background: #fff;\n --primary: #4c4cb1;\n --greeble: #bbb;\n}\n/* color modes */\n.light { --text: #000; --background: #fff; --greeble: #bbb; }\n/** TODO */\n .bright { --text: #000; --background: #fff; --greeble: #fda900; }\n.foliage { --text: #3a6c0b; --background: #f0f4ec; --greeble: #a2c185; --primary: #5f8e33; }\n.paper { --text: #4d4019; --background: #faefd0; --greeble: #ccc09d; --primary: #8e5200; }\n.amber { --text: #422c00; --background: #e5b656; --greeble: #c3a058; --primary: #541c00; }\n.tomato { --text: #32221b; --background: #ee976a; --greeble: #f05200; --primary: #003c5b; }\n.brown { --text: #dab9a8; --background: #422d23; --greeble: #634f44; --primary: #0cf }\n.dark { --text: #eee; --background: #222; --greeble: #666; --primary: #0cf }\n.black { --text: #fff; --background: #000; --greeble: #333; --primary: #0cf }\nbody {\n --primary-3: color-mix(in srgb, var(--primary) 50%, var(--background));\n --primary-2: color-mix(in srgb, var(--primary) 25%, var(--background));\n --primary-1: color-mix(in srgb, var(--primary) 12%, var(--background));\n --primary-0: color-mix(in srgb, var(--primary) 6%, var(--background));\n --primary-dark: color-mix(in srgb, var(--primary) 50%, var(--text));\n\n --highlight: #b1e5e5;\n --highlight-5: color-mix(in srgb, var(--highlight) 50%, var(--background));\n --highlight-2: color-mix(in srgb, var(--highlight) 25%, var(--background));\n --highlight-1: color-mix(in srgb, var(--highlight) 12%, var(--background));\n --highlight-0: color-mix(in srgb, var(--highlight) 6%, var(--background));\n --highlight-dark: color-mix(in srgb, var(--highlight) 50%, var(--text));\n\n --greeble: var(--highlight);\n}\n`;\n\nconst typography = `/** css */\n* { box-sizing: border-box }\nbody {\n margin: 0;\n font-family: 'iA Writer Mono', Menlo, ui-monospace, monospace;\n font-size: 16px;\n line-height: 32px;\n color: var(--text);\n background-color: var(--background);\n transition: background-color 0.2s ease-in-out;\n}\n\nimg {\n max-width: 100%;\n height: auto;\n}\n\nh1, h2, h3, h4, h5 {\n font-size: 16px; margin: 0;\n}\nh6, .h6 { font-size: 12px; margin: 0; }\nh3, h4, h5, .h3, .h4, .h5 { margin-top: 32px; margin-bottom: 32px; }\n\np, ul, ol, blockquote {\n margin-top: 0;\n margin-bottom: 32px;\n}\n\n.bold { font-weight: bold }\n.normal { font-weight: normal; }\n.caps {\n text-transform: uppercase;\n letter-spacing: 0.125em;\n}\n\na {\n color: var(--primary);\n text-decoration-color: var(--primary-2);\n transition-property: color, background-color, opacity;\n transition-duration: 0.3s;\n transition-timing-function: ease-in-out;\n}\na:hover {\n color: var(--primary);\n background-color: var(--primary-0);\n text-decoration-style: solid;\n text-decoration-color: var(--primary);\n}\n\nbutton {\n appearance: none;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n border: none;\n border-radius: none;\n background: none;\n color: inherit;\n cursor: pointer;\n outline: none;\n}\n\ncode {\n font-size: 14px;\n color: var(--primary);\n background-color: var(--primary-0);\n padding: 2px 4px;\n border-radius: 3px;\n}\n\n/** todo */\npre {\n color: var(--primary);\n background-color: var(--primary-0);\n padding: 16px;\n font-size: 12px;\n border-radius: 4px;\n overflow: auto;\n}\npre code {\n color: inherit;\n background-color: inherit;\n padding: 0;\n border-radius: 0;\n}\nul {\n padding: 0;\n}\nol {}\n\ntable {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0;\n margin-bottom: 32px;\n}\ntr {\n margin-top: -1px;\n}\nth {\n text-align: left;\n padding: 8px 0;\n border-bottom-style: solid;\n}\ntd {\n text-align: left;\n padding: 8px 0;\n border-bottom: 1px solid;\n border-color: var(--primary-1);\n}\n\n/** home hero */\n.display {\n /* font-family: \"Archivo Black\", sans-serif; */\n font-family: system-ui, sans-serif;\n font-weight: 900;\n}\n.hero-container {\n container-type: inline-size;\n}\n.h0 {\n /* font-size: clamp(16px, 10vi, 128px); */\n font-size: clamp(16px, 14cqw, 128px);\n max-width: 100%;\n}\n`;\n\nconst site = `\n/* 8 80px cols with 32px gaps */\n.container {\n max-width: 928px;\n margin-left: auto;\n margin-right: auto;\n padding: 32px;\n}\n\n.space-children {\n display: flex;\n flex-direction: column;\n gap: 64px;\n}\n\n.nav {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n column-gap: 16px;\n padding-top: 16px;\n padding-bottom: 16px;\n}\n.navLink {\n text-decoration: none;\n color: inherit;\n}\n.button {\n display: inline-flex;\n align-items: center;\n padding: 4px;\n border-radius: 4px;\n}\n.button:hover {\n color: var(--primary);\n background-color: var(--primary-0);\n}\n.posts {\n list-style: none;\n padding: 0;\n}\n.posts li {\n margin-top: 96px;\n margin-bottom: 96px;\n}\n.post-title {\n color: inherit;\n font-weight: bold;\n text-decoration: none;\n}\n.post-title:hover {\n color: inherit;\n text-decoration: underline;\n text-decoration-color: var(--primary);\n background-color: var(--primary-1);\n}\n\n.bold-links a {\n font-weight: bold;\n}\n .byline {\n display: flex;\n flex-wrap: wrap;\n gap: 16px;\n align-items: center;\n }\n.right {\n text-align: right;\n}\n\n.promo {\n position: relative;\n container-type: inline-size;\n}\n.promo-inner {\n --base: 56.25cqw;\n height: var(--base);\n height: calc(var(--base) + 32px - mod(var(--base), 32px));\n}\n.promo-short {\n --base: 40cqw;\n}\n.promo img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.promo a {\n display: block;\n padding: 4px 16px;\n font-size: 12px;\n color: var(--text);\n background-color: var(--background);\n text-decoration: none;\n}\n.anchor {\n position: absolute;\n right: 0;\n bottom: 0;\n margin: 8px;\n}\n.promo a:hover {\n background-color: var(--primary);\n}\n`;\n\nconst grid = `\n.grid {\n display: grid;\n gridTemplateColumns: repeated(8, 96px);\n gridGap: 32px;\n gridAutoFlow: row dense;\n gridAutoRows: minmax(32px max-content);\n}\n/** todo grid system */\n@media screen and (min-width: 1056px) {\n}\n`;\n\nconst debug = `\n.guides {\n background-size: 32px 32px;\n background-image:\n linear-gradient(to right, var(--highlight-2) 1px, transparent 1px),\n linear-gradient(to bottom, var(--highlight-2) 1px, transparent 1px);\n}\n.baseline {\n background-size: 32px 32px;\n background-position: 0 22px;\n /*\n background-image: linear-gradient(to bottom, rgba(255, 0, 127, 0.1) 1px, transparent 1px);\n */\n background-image: linear-gradient(to bottom, var(--primary-0) 1px, transparent 1px);\n}\n.dotgrid {\n background-size: 32px 32px;\n background-position: calc(50% - 15px) -15px;\n background-image: radial-gradient(var(--primary-2) 1px, transparent 0);\n}\n`;\n\nconst angles = `\n/* angled boxes */\n.angr,\n.angl {\n position: relative;\n height: 32px;\n background-color: var(--greeble);\n padding-left: 16px;\n padding-right: 16px;\n}\n.angr::after,\n.angl::after {\n position: absolute;\n top: 0;\n bottom: 0;\n content: '';\n display: block;\n height: 32px;\n width: 32px;\n}\n\n.angr::after {\n right: -32px;\n background-image: linear-gradient(45deg, var(--greeble) 50%, transparent 50%);\n}\n.angl::after {\n left: -32px;\n background-image: linear-gradient(225deg, var(--greeble) 50%, transparent 50%);\n}\n.angr-up::after {\n /* angle up */\n background-image: linear-gradient(135deg, var(--greeble) 50%, transparent 50%);\n}\n.angl-up::after {\n background-image: linear-gradient(-45deg, var(--greeble) 50%, transparent 50%);\n}\n`;\n\nconst util = `\n.ma { margin: auto }\n.m0 { margin: 0 }\n.mt { margin-top: 32px }\n.mb { margin-bottom: 32px }\n\n.mt2 { margin-top: 64px }\n.mb2 { margin-bottom: 64px }\n\n.pad { padding: 16px }\n.pad2 { padding: 32px }\n\n.flex { display: flex; align-items: center; column-gap: 32px }\n.wrap { flex-wrap: wrap }\n.gap0 { gap: 0 }\n.gap2 { gap: 64px }\n.grow { flex-grow: 1 }\n.noshrink { flex-shrink: 0 }\n.min { min-width: 0 }\n.fullwidth { width: 100% }\n\n@media screen and (min-width: 40em) {\n .md-hide {\n display: none;\n }\n}\n\n.greeble { color: var(--greeble) }\n.invert {\n color: var(--background);\n background-color: var(--text);\n}\n`;\n\nexport const css = [\n iAWriterMono,\n vars,\n typography,\n site,\n grid,\n debug,\n angles,\n util,\n].join(\"\").replace(/\\n/g, \" \");\n",[245],"a9128d28-0105-11f0-9254-569c3dd06744","client.ts","a9128dd2-0105-11f0-9254-569c3dd06744",99,["D",1741978427148],"// vanilla js client script for jxnblk.com\nconst API = \"https://jxnblk-jxnblkio.web.val.run/\";\n\nlet color = localStorage.getItem(\"color\") || \"light\";\ndocument.body.className = color;\n\nconst colors = [\n \"light\",\n \"foliage\",\n \"paper\",\n \"amber\",\n \"tomato\",\n \"brown reverse\",\n \"dark reverse\",\n \"black reverse\",\n];\n\nlet button = document.getElementById(\"color-button\");\nlet grid = document.getElementById(\"grid-button\");\nlet dotgrid = document.getElementById(\"dotgrid\");\nconst cycleColor = () => {\n let index = colors.indexOf(color);\n if (index < 0) index = 0;\n index = (index + 1) % colors.length;\n color = colors[index];\n localStorage.setItem(\"color\", color);\n document.body.className = color;\n};\n\nconst toggleGrid = () => {\n dotgrid.classList.toggle(\"dotgrid\");\n};\n\nbutton.addEventListener(\"click\", cycleColor);\ngrid.addEventListener(\"click\", toggleGrid);\n",[252],"18a394c0-00e8-11f0-961c-569c3dd06744","avatar.tsx","18a39588-00e8-11f0-961c-569c3dd06744",29,["D",1741965729422],"// jxnblk avatar.\n/** @jsxImportSource https://esm.sh/react@18.3.1 */\nimport { renderToStaticMarkup } from \"https://esm.sh/react-dom@18.3.1/server\";\nimport { SVGProps } from \"https://esm.sh/react@18.3.1\";\n\ntype AvatarProps = SVGProps & {\n /** hides eyes for reverse color treatment */\n reverse?: boolean;\n /** width and height */\n size?: number;\n /** sets fill */\n color?: string;\n scale?: number;\n background?: string;\n};\n\nexport function Avatar({\n size = 512,\n reverse,\n color = \"currentColor\",\n scale = 1,\n background,\n ...props\n}: AvatarProps) {\n const p = reverse ? black : path;\n return (\n \n {style}\n {background && }\n \n {!reverse && (\n \n )}\n \n );\n}\n\nexport const path = `\n M64 0 L64 4 L76 4 L74 6 L94 14 L92 16 L104 20 L100 22 L106 28 L102 28 L106 56 Q110 62 110 70 T105 84 L96 108 C92 116 76 128 64 128 C52 128 36 116 32 108 L23 84 Q18 78 18 70 T22 56 L22 22 L26 24 L34 12 L36 16z\n M72 40 Q56 30 40 30 Q32 34 30 48 L30 48 L28 74 C28 81 37 102 38 104 C46 118 62 121 64 121 C66 121 82 118 90 104 C91 102 100 81 100 74 L99 52 L94 40 L92 42 L84 38 L84 42 L74 36\n\n M57 88 H71 A2 2 0 0 1 71 92 H57 A2 2 0 0 1 57 88\n M53 104 H75 A2 2 0 0 1 75 108 H53 A2 2 0 0 1 53 104\n\n M44 62 A5.5 5.5 0 0 0 44 73 A5.5 5.5 0 0 0 44 62\n M84 62 A5.5 5.5 0 0 0 84 73 A5.5 5.5 0 0 0 84 62\n M33.3 60.4 C34.6 57.8 37 55.9 39.7 55.2 C43 54.4 46.8 55.3 50.4 58 C51.3 58.6 52.5 58.4 53.2 57.5 C53.8 56.6 53.6 55.4 52.7 54.7 C46.8 50.5 41.8 50.5 38.7 51.3 C34.8 52.3 31.5 54.9 29.7 58.6 C29.2 59.6 29.6 60.8 30.6 61.3 C30.9 61.4 31.2 61.5 31.5 61.5 C32.2 61.5 32.9 61.1 33.3 60.4 z\n M97.7 61.9 C98.5 61.2 98.6 59.9 97.9 59.1 C94.3 55 90.1 52.9 85.4 53 C82 53 78.3 54.2 74.3 56.6 C73.3 57.2 73 58.4 73.6 59.3 C74.2 60.3 75.4 60.6 76.3 60 C79.7 58 82.7 57 85.5 57 C89 57 92.1 58.5 95 61.7 C95.4 62.2 95.9 62.4 96.5 62.4 C96.8 62.4 97.3 62.2 97.7 61.9 z\n `;\n\nconst shape = `\n M64 0 L64 4 L76 4 L74 6 L94 14 L92 16 L104 20 L100 22 L106 28 L102 28 L106 56 Q110 62 110 70 T105 84 L96 108 C92 116 76 128 64 128 C52 128 36 116 32 108 L23 84 Q18 78 18 70 T22 56 L22 22 L26 24 L34 12 L36 16z\n M72 40 Q56 30 40 30 Q32 34 30 48 L30 48 L28 74 C28 81 37 102 38 104 C46 118 62 121 64 121 C66 121 82 118 90 104 C91 102 100 81 100 74 L99 52 L94 40 L92 42 L84 38 L84 42 L74 36\n M57 88 H71 A2 2 0 0 1 71 92 H57 A2 2 0 0 1 57 88\n M53 104 H75 A2 2 0 0 1 75 108 H53 A2 2 0 0 1 53 104\n`;\nconst eyes = `\n M44 62 A5.5 5.5 0 0 0 44 73 A5.5 5.5 0 0 0 44 62\n M84 62 A5.5 5.5 0 0 0 84 73 A5.5 5.5 0 0 0 84 62\n M33.3 60.4 C34.6 57.8 37 55.9 39.7 55.2 C43 54.4 46.8 55.3 50.4 58 C51.3 58.6 52.5 58.4 53.2 57.5 C53.8 56.6 53.6 55.4 52.7 54.7 C46.8 50.5 41.8 50.5 38.7 51.3 C34.8 52.3 31.5 54.9 29.7 58.6 C29.2 59.6 29.6 60.8 30.6 61.3 C30.9 61.4 31.2 61.5 31.5 61.5 C32.2 61.5 32.9 61.1 33.3 60.4 z\n M97.7 61.9 C98.5 61.2 98.6 59.9 97.9 59.1 C94.3 55 90.1 52.9 85.4 53 C82 53 78.3 54.2 74.3 56.6 C73.3 57.2 73 58.4 73.6 59.3 C74.2 60.3 75.4 60.6 76.3 60 C79.7 58 82.7 57 85.5 57 C89 57 92.1 58.5 95 61.7 C95.4 62.2 95.9 62.4 96.5 62.4 C96.8 62.4 97.3 62.2 97.7 61.9 z\n`;\n\n/**\n * path:\n * outer\n *\n * inner\n * nose\n * mouth\n *\n * eye\n * eye\n * eyebrow\n * eyebrow\n */\n\nexport const black = `\n M64 0 L64 4 L76 4 L74 6 L94 14 L92 16 L104 20 L100 22 L106 28 L102 28 L106 56 Q110 62 110 70 T105 84 L96 108 C92 116 76 128 64 128 C52 128 36 116 32 108 L23 84 Q18 78 18 70 T22 56 L22 22 L26 24 L34 12 L36 16z\n M72 40 Q56 30 40 30 Q32 34 30 48 L30 48 L28 74 C28 81 37 102 38 104 C46 118 62 121 64 121 C66 121 82 118 90 104 C91 102 100 81 100 74 L99 52 L94 40 L92 42 L84 38 L84 42 L74 36\n M57 88 H71 A2 2 0 0 1 71 92 H57 A2 2 0 0 1 57 88\n M53 104 H75 A2 2 0 0 1 75 108 H53 A2 2 0 0 1 53 104\n`;\n\nexport const svg =\n ``;\n\nexport default async function preview(req: Request): Promise {\n const url = new URL(req.url);\n let size: number;\n const _size = url.searchParams.get(\"size\");\n if (_size) size = Number(_size);\n const color = url.searchParams.get(\"color\");\n const background = url.searchParams.get(\"background\");\n const _scale = url.searchParams.get(\"scale\");\n let scale: number;\n if (_scale) scale = Number(_scale);\n\n const reverse = Boolean(url.searchParams.get(\"reverse\"));\n\n const svg = renderToStaticMarkup(\n ,\n );\n\n if (url.pathname === \"/.png\") {\n const { render: renderPNG } = await import(\"https://deno.land/x/resvg_wasm@0.2.0/mod.ts\");\n const png = await renderPNG(svg);\n return new Response(png, {\n headers: {\n \"Content-Type\": \"image/png\",\n },\n });\n }\n\n return new Response(svg, {\n headers: {\n \"Content-Type\": \"image/svg+xml\",\n },\n });\n}\n\n// set reverse style via classname\nconst css = `\n.reverse .reverse-hide {\n display: none;\n}\n`;\nconst style =

Diff · v121