Batched updates (#27)

* Copy changes and new web-component experiment

* nav position updates; pretty text

Author: MattyBalaam

app/components/cube/cube.css.ts

@@ -74,7 +74,7 @@ export const cubeWrapper = style({
 });
 
 export const cube = style({
-  background: vars.colorSubtleOffWhite,
+  background: vars.palette.subtleOffWhite,
   minHeight: "100lvh",
   padding: vars.bodyMargin,
   "@container": {

app/components/icons/icon.css.ts

@@ -6,7 +6,7 @@ export const icon = style({
   display: "inline-flex",
   width: "1em",
   height: "1em",
-  color: vars.colorIce,
+  color: vars.palette.ice,
   alignItems: "baseline",
 });
 

app/components/site-nav/site-nav.css.ts

@@ -0,0 +1,70 @@
+import { globalStyle, style } from "@vanilla-extract/css";
+
+import { dimensions, vars } from "~/css/theme.css";
+
+export const nav = style({
+  display: "flex",
+  inset: "0 0 auto 0",
+  background: vars.palette.stone,
+  zIndex: 5,
+  "@media": {
+    [dimensions.breakHorizontalMin]: {
+      position: "fixed",
+    },
+    print: {
+      display: "none",
+    },
+  },
+});
+
+export const list = style({
+  display: "flex",
+  gap: "1rem",
+});
+
+export const popover = style({});
+
+export const item = style({
+  height: "2em",
+  display: "grid",
+  padding: "0 1em",
+  alignItems: "center",
+  color: "white",
+  textDecoration: "none",
+  verticalAlign: "text-top",
+  selectors: {
+    "&[popoverTarget]": {
+      anchorName: "var(--anchorName)",
+      font: "inherit",
+      background: "none",
+      border: "none",
+      appearance: "none",
+      margin: "0",
+      // outline: "none",
+    },
+    "&:hover": {
+      background: "rgb(100 100 100 / 0.8)",
+    },
+    "&:visited": {
+      color: "white",
+    },
+  },
+});
+
+export const sublist = style({
+  background: vars.palette.stone,
+  border: "none",
+  top: "anchor(bottom)",
+  left: "anchor(left)",
+  positionAnchor: "var(--anchorName)",
+});
+
+globalStyle(`${sublist}:popover-open`, {
+  "@supports": {
+    "not (top: anchor(bottom))": {
+      display: "block",
+      position: "fixed",
+      whiteSpace: "nowrap",
+    },
+  },
+});

app/components/site-nav/site-nav.tsx

@@ -0,0 +1,122 @@
+import { NavLink, useLocation } from "react-router";
+
+import * as styles from "./site-nav.css";
+
+export const routeTypes = {
+  link: "link",
+  group: "group",
+} as const;
+
+interface Link {
+  type: typeof routeTypes.link;
+  to: string;
+  label: string;
+}
+
+interface Group {
+  type: typeof routeTypes.group;
+  label: string;
+  links: Array<Link>;
+}
+
+export interface Routes {
+  routes: Array<Link | Group>;
+}
+
+const createPopoverId = (label: string) => `popover_${label}`;
+
+/**
+ * Simple workaround for browsers that don't support anchor positioning
+ * Relies on some fallback css styles
+ */
+const createAnchorPositionFallbackRef =
+  (popoverTarget: string) => (anchor: HTMLButtonElement) => {
+    if (anchor && window && !("anchorName" in document.documentElement.style)) {
+      const setPosition = () => {
+        const rect = anchor.getBoundingClientRect();
+        const popover = document.getElementById(popoverTarget);
+
+        if (!popover) {
+          throw new Error(`Popover with id ${popoverTarget} not found`);
+        }
+
+        popover.style.setProperty("top", `${rect.height}px`);
+        popover.style.setProperty("left", `${rect.left}px`);
+      };
+
+      const controller = new AbortController();
+
+      const signal = controller.signal;
+
+      window.addEventListener("resize", setPosition, {
+        signal,
+      });
+
+      setPosition();
+
+      return function removeListener() {
+        controller.abort();
+      };
+    }
+  };
+
+function Items({ routes }: Routes) {
+  const pathname = useLocation().pathname;
+
+  return routes.map((route) =>
+    route.type === "link" ? (
+      <li key={route.label}>
+        <NavLink
+          className={styles.item}
+          to={route.to}
+          // disable view transitions on same-page navigation
+          viewTransition={pathname !== route.to}
+        >
+          {route.label}
+        </NavLink>
+      </li>
+    ) : (
+      <li key={route.label} className={styles.popover}>
+        <style>
+          {
+            /* Technically I don’t think we don‘t need this popover
+         anchorName because they are next to each other in the dom,
+         but I will leave it here until I have a full understanding
+         of best practice */
+            `
+         .${styles.popover} {
+           --anchorName: ${route.label};
+         }
+       `
+          }
+        </style>
+        <button
+          type="button"
+          className={styles.item}
+          popoverTarget={createPopoverId(route.label)}
+          ref={createAnchorPositionFallbackRef(createPopoverId(route.label))}
+        >
+          {route.label}
+        </button>
+        <ul
+          className={styles.sublist}
+          id={createPopoverId(route.label)}
+          popover="auto"
+          role="menu"
+        >
+          <Items routes={route.links} />
+        </ul>
+      </li>
+    ),
+  );
+}
+
+export function SiteNav({ routes }: Routes) {
+  return (
+    <nav className={styles.nav}>
+      <ul className={styles.list}>
+        <Items routes={routes} />
+      </ul>
+    </nav>
+  );
+}

app/components/typography/typography.css.ts

@@ -5,6 +5,7 @@ import { vars } from "~/css/theme.css";
 export const paragraph = style({
   fontFamily: "Calluna, serif",
   fontSize: "105%",
+  textWrap: "pretty",
 });
 
 export const variants = styleVariants({
@@ -26,9 +27,9 @@ export const variants = styleVariants({
 
 export const item = style({
   listStyle: "outside",
-  color: vars.colorFire,
+  color: vars.palette.fire,
 });
 
 export const itemText = style({
-  color: vars.colorBody,
+  color: vars.palette.body,
 });

app/components/web-components/mb-button.css.ts

@@ -0,0 +1,13 @@
+import { style } from "@vanilla-extract/css";
+
+import { vars } from "~/css/theme.css";
+
+export const button = style({
+  appearance: "none",
+  border: "none",
+  padding: "0.5em 1em",
+  backgroundColor: vars.palette.ice,
+  color: "var(--mb-button-color, white)",
+  fontSize: "1rem",
+  borderRadius: "4px",
+});

app/components/web-components/mb-button.ts

@@ -0,0 +1,34 @@
+import { vars } from "~/css/theme.css";
+
+const template = document.createElement("template");
+template.innerHTML = `
+<button class="button">
+ <style>.button {
+  background-color: ${vars.palette.ice};
+  appearance: none;
+  color: var(--button-fg, white)
+}</style>
+  <slot></slot>
+</button>`;
+
+customElements.define(
+  "mb-button",
+  class MyButton extends HTMLElement {
+    constructor() {
+      super();
+      this.attachShadow({ mode: "open" });
+
+      this.shadowRoot?.appendChild(template.content.cloneNode(true));
+
+      this.shadowRoot
+        ?.querySelector("button")
+        ?.addEventListener("click", () => {
+          this.dispatchEvent(new Event("button-clicksss"));
+        });
+
+      this.shadowRoot?.addEventListener("slotchange", (event) =>
+        console.log(event),
+      );
+    }
+  },
+);

app/css/theme.css.ts

@@ -1,15 +1,16 @@
 import { createTheme } from "@vanilla-extract/css";
 
 const palette = {
-  colorBody: "rgba(0, 0, 0, 0.9)",
-  colorSubtleOffWhite: "#fafcfa",
-  colorIce: "#007f98",
-  colorFire: "#c25600",
-  colorPrince: "#c53fa6",
+  body: "rgba(0, 0, 0, 0.9)",
+  subtleOffWhite: "#fafcfa",
+  ice: "#007f98",
+  fire: "#c25600",
+  prince: "#c53fa6",
+  stone: "rgb(55 55 55 / 0.8)",
 } as const;
 
 export const [themeClass, vars] = createTheme({
-  ...palette,
+  palette,
   bodyMargin: "2em",
   headerSize: "1.6rem",
   headerMarginTop: "0.15rem",
@@ -18,7 +19,7 @@ export const [themeClass, vars] = createTheme({
   columnGap: "3em",
   fontInfo: '"Theinhardt", sans-serif',
   fontHeader: '"Theinhardt", sans-serif',
-  sectionDecoration: `0.075rem solid ${palette.colorIce}`,
+  sectionDecoration: `0.075rem solid ${palette.ice}`,
   rhythmVertical: "1.35rem",
   rhythmVerticalHalf: "0.675rem",
   rhythmVertical2: "2.7rem",

app/entry.client.tsx

@@ -0,0 +1,14 @@
+import { startTransition, StrictMode } from "react";
+import { hydrateRoot } from "react-dom/client";
+import { HydratedRouter } from "react-router/dom";
+
+import "~/components/web-components/mb-button";
+
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <HydratedRouter />
+    </StrictMode>,
+  );
+});

app/json/cv.json

@@ -33,8 +33,9 @@
     {
       "name": "Shieldpay",
       "position": "Lead UI Engineer",
-      "url": "www.shieldpay.com",
-      "startDate": "2021-02-20",
+      "url": "https://www.shieldpay.com",
+      "startDate": "2021-01-25",
+      "endDate": "2025-12-15",
       "summary": "Hands-on code-focused lead for the UI stack managing and mentoring in a “chapter” of 4 inside larger cross-functional team. Set of React Router 7 (Remix) SSR apps using accessible (WCAG 2.1 AAA) component library deployed to AWS infrastructure with Github actions and comprehensive automated testing.",
       "highlights": [
         "Architected and built React Router 7 SSR apps using shared “Optimus” platform hosted on AWS Lambda NodeJS calling microservices via REST API.",
@@ -51,9 +52,9 @@
     {
       "name": "Pure360",
       "position": "Software developer",
-      "url": "pure360.com",
+      "url": "https://pure360.com",
       "startDate": "2018-11-12",
-      "endDate": "2021-02-15",
+      "endDate": "2021-01-22",
       "summary": "React/Typescript SPA with REST for handling customer creation and scheduling of multi-channel marketing campaigns. Redux for data fetching and state management, charts for data visualisation. Agile/Scrum environment.",
       "highlights": [
         "Building a graph-style decision tree with a clear simple graphic interface for multiple journeys of customer engagement",
@@ -64,7 +65,7 @@
     {
       "name": "Simpplr",
       "position": "JavaScript engineer",
-      "url": "simpplr.com",
+      "url": "https://simpplr.com",
       "startDate": "2018-05-01",
       "endDate": "2018-11-10",
       "summary": "Building features on two React SPAs in the corporate intranet sector. An established product using React and Redux and a greenfield product using React with Apollo/GraphQL.",
@@ -76,7 +77,7 @@
     {
       "name": "Filmstro",
       "position": "Software developer",
-      "url": "filmstro.com",
+      "url": "https://filmstro.com",
       "startDate": "2017-07-21",
       "endDate": "2018-03-23",
       "summary": "Building cross-platform adaptive-music desktop app Filmstro Pro: A React/Redux app inside Electron using a lower-level audio binary.",
@@ -88,7 +89,7 @@
     {
       "name": "New Era Education Ltd.",
       "position": "Front-end developer",
-      "url": "neweraed.co.uk",
+      "url": "https://www.neweratech.com/uk/education",
       "startDate": "2013-07-07",
       "endDate": "2017-07-20",
       "summary": "Developed websites and e-learning courses for the education sector.",
@@ -100,7 +101,7 @@
     {
       "name": "Freelance",
       "position": "Developer and designer",
-      "url": "matthewbalaam.co.uk",
+      "url": "https://matthewbalaam.co.uk",
       "startDate": "2009-10-10",
       "endDate": "2013-07-07",
       "summary": "Providing web design and development services to a variety of clients.",