{title}

// core react component for jxnblkio /** @jsxImportSource https://esm.sh/react */ import { MdContrast } from "https://esm.sh/react-icons/md"; import React from "https://esm.sh/react@18.3.1"; import { useMemo, useState } from "https://esm.sh/react@18.3.1"; import { Avatar } from "https://esm.town/v/jxnblk/avatar"; import { Diagz, Tiled } from "https://esm.town/v/jxnblk/greebles"; import { colors, css } from "https://esm.town/v/jxnblk/JxnblkCSS"; import { GoogleFonts } from "https://esm.town/v/jxnblk/reactGoogleFonts"; import { Vantom } from "https://esm.town/v/jxnblk/vantom"; const OGIMAGE = "https://jxnblk-blogogimage.web.val.run/"; const URL = "https://jxnblk.com"; const DESCRIPTION = "Design engineer and aspiring indie game dev based in Brooklyn, NY"; type PostData = { path: string; slug: string; title: string; date: Date | string; excerpt?: string; html: string; tags?: string[]; }; const cx = (...cn) => cn.filter(Boolean).join(" "); export function App(props) { const cookies: AppCookies = parseCookies(props.cookie || null); const initColorIndex = cookies.color || 0; const [colorIndex, setColorIndex] = useState(initColorIndex); // TODO: add to vanilla const [baseline, setBaseline] = useState(false); const cycleColor = () => { const next = (colorIndex + 1) % colors.length; setColorIndex(next); setCookie("color", next); }; const color = useMemo(() => colors[colorIndex], [colorIndex]); // console.log(props.data.route); const RouteComponent = props.data?.route ? routes[props.data.route] : routes[Route.Home]; const reverse = colorIndex > 4; return ( {props.data?.vanilla && noflash}

{RouteComponent && }

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

JxnblkApp