{title}

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_413":414,"_415":416},"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",126,"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","app.tsx","latestPath","fileId","525bcce2-00e7-11f0-87c0-569c3dd06744","name","fileType","script","content","// core react component for jxnblkio\n/** @jsxImportSource https://esm.sh/react@18.3.1 */\n// import { MdContrast } from \"https://esm.sh/react-icons/md\";\nimport React from \"https://esm.sh/react@18.3.1\";\nimport { useMemo, useState } from \"https://esm.sh/react@18.3.1\";\nimport { Avatar } from \"./avatar.tsx\";\nimport { Diagz, Tiled } from \"./greebles.tsx\";\nimport { colors, css } from \"./css.tsx\";\nimport { Vantom } from \"./vantom.http.tsx\";\n\nconst OGIMAGE = \"https://jxnblk--92670e2200e811f0a151569c3dd06744.web.val.run/\";\nconst URL = \"https://jxnblk.com\";\nconst DESCRIPTION = \"Design engineer and aspiring indie game dev based in Brooklyn, NY\";\n\ntype PostData = {\n path: string;\n slug: string;\n title: string;\n date: Date | string;\n excerpt?: string;\n html: string;\n tags?: string[];\n};\n\nconst cx = (...cn) => cn.filter(Boolean).join(\" \");\n\nexport function App(props) {\n const cookies: AppCookies = parseCookies(props.cookie || null);\n const initColorIndex = cookies.color || 0;\n const [colorIndex, setColorIndex] = useState(initColorIndex);\n // TODO: add to vanilla\n const [baseline, setBaseline] = useState(false);\n const cycleColor = () => {\n const next = (colorIndex + 1) % colors.length;\n setColorIndex(next);\n setCookie(\"color\", next);\n };\n const color = useMemo(() => colors[colorIndex], [colorIndex]);\n\n const RouteComponent = props.data?.route ? routes[props.data.route] : routes[Route.Home];\n const reverse = colorIndex > 4;\n\n return (\n \n \n \n {props.data?.vanilla && noflash}\n

\n {RouteComponent && }\n setBaseline(b => !b)}\n />\n {props.data?.vanilla && vanilla}\n

\n \n \n );\n}\n// TODO: 404\n\nfunction Head(props) {\n const { post } = props.data;\n let params = \"\";\n let description = DESCRIPTION;\n let title = \"Jxnblk | Brent Jackson\";\n let image = OGIMAGE;\n if (post) {\n params = `?text=${post.title}`;\n title = post.title + \" | Jxnblk\";\n image = post.image || (OGIMAGE + params);\n }\n\n return (\n \n {title}\n \n

Diff · v126