Blocks / Application

Not found

A 404 page: the result as the page's h1, two ways back, the usual destinations and a drawing of a bare shelf.

Width

Phone 390Tablet 768Desktop

This shelf is empty

Whatever lived at this address has been used up, moved, or was never delivered. The rest of the kitchen is where you left it.

Install

Writes the block to components/blocks/not-found.tsx and its .css, and every part it uses to components/equip/, with the parts those are built from.

npx https://equip.studio311.app/equip.tgz add block:not-found

Built from 6 parts

Notes

Result takes headingLevel 1 here because the 404 is the whole page; keep it the only h1.
The useful links are a nav named by its heading, with each row a single link covering the row.
The shelf drawing is decorative and hidden from assistive tech; it uses currentColor and ink tokens, so it follows light and dark.
Set your server's status to 404 when you render this; the block only draws the page.

Source

components/blocks/not-found.tsx98 lines

import { Button } from "@/components/equip/button";
import { Heading } from "@/components/equip/heading";
import { Icon } from "@/components/equip/icon";
import { List, ListItem } from "@/components/equip/list";
import { Result, ResultActions } from "@/components/equip/result";
import { Text } from "@/components/equip/text";
import "./not-found.css";

/*
 * A missing page, said plainly: a bare shelf with its label still hanging, the 404 as
 * the page's one heading, two ways back and the places people usually meant.
 */
export default function NotFound() {
  return (
    <div className="blk-not-found">
      <div className="blk-not-found-inner">
        <div className="blk-not-found-stage">
          {/* A shelf with the outlines of what used to be on it, and its shelf-edge label left behind. */}
          <svg
            className="blk-not-found-shelf"
            viewBox="0 0 240 92"
            fill="none"
            stroke="currentColor"
            strokeWidth="1.5"
            strokeLinecap="round"
            strokeLinejoin="round"
            aria-hidden="true"
          >
            <g className="blk-not-found-ghosts" strokeDasharray="3 4">
              <path d="M40 58V34a4 4 0 0 1 4-4h16a4 4 0 0 1 4 4v24" />
              <path d="M44 30v-6h16v6" />
              <path d="M84 58V22h30v36" />
              <path d="M140 58V40a9 9 0 0 1 18 0v18" />
              <path d="M176 58V30h22v28" />
            </g>
            <path d="M14 58h212" />
            <path d="M14 63h212" />
            <path d="M28 63v14M212 63v14" />
            <path d="M28 70h8M212 70h-8" />
            <path className="blk-not-found-label" d="M104 63v10h32V63" />
            <path className="blk-not-found-label" d="M110 68h12" />
            <path d="M22 50l4-2M216 46l3 2M168 52l3-1" className="blk-not-found-dust" />
          </svg>

          <Result status="404" size="l" headingLevel={1} title="This shelf is empty" className="blk-not-found-result">
            <Text tone="quiet">
              Whatever lived at this address has been used up, moved, or was never delivered. The rest of the kitchen is
              where you left it.
            </Text>
            <ResultActions>
              <Button variant="accent" lead={<Icon name="home" />}>
                Back to the kitchen
              </Button>
              <Button variant="outline" lead={<Icon name="search" />}>
                Search stock
              </Button>
            </ResultActions>
          </Result>
        </div>

        <nav className="blk-not-found-links" aria-labelledby="not-found-links-title">
          <Heading level={2} size="s" id="not-found-links-title">
            Places people usually mean
          </Heading>
          <List dividers>
            <ListItem
              href="#stock"
              lead={<Icon name="package" />}
              title="Stock on hand"
              description="Every item, how much is left and when it runs out."
            />
            <ListItem
              href="#orders"
              lead={<Icon name="truck" />}
              title="Orders and deliveries"
              description="Drafts, sent orders and what is due in tomorrow."
            />
            <ListItem
              href="#waste"
              lead={<Icon name="trash" />}
              title="Waste log"
              description="What went in the bin this week, and why."
            />
            <ListItem
              href="#help"
              lead={<Icon name="life-buoy" />}
              title="Help centre"
              description="Guides written by people who have run a pass."
            />
          </List>
          <Text size="s" tone="faint">
            Followed a link from an old supplier email? Order links stop working once the order is checked in.
          </Text>
        </nav>
      </div>
    </div>
  );
}

components/blocks/not-found.css67 lines

@layer blocks {
  .blk-not-found {
    container: blk-not-found / inline-size;
    background: var(--eq-bg);
    color: var(--eq-ink);
  }

  .blk-not-found-inner {
    display: grid;
    gap: calc(var(--eq-space-6) * 1.25);
    max-width: 44rem;
    margin-inline: auto;
    padding: calc(var(--eq-space-6) * 1.25) var(--eq-space-4) calc(var(--eq-space-6) * 1.5);
  }

  /* The stage: the bare shelf on the dotted grid, the result standing on it. */
  .blk-not-found-stage {
    display: grid;
    justify-items: center;
    padding-top: calc(var(--eq-space-6) * 1.25);
    border: 1px solid var(--eq-line);
    border-radius: var(--eq-radius-l);
    background:
      radial-gradient(circle at 1px 1px, var(--eq-line-strong) 1px, transparent 0) 0 0 / 18px 18px,
      color-mix(in oklab, var(--eq-surface) 70%, var(--eq-bg));
  }

  .blk-not-found-shelf {
    width: min(100% - var(--eq-space-6), 22rem);
    height: auto;
    color: var(--eq-ink-2);
  }

  .blk-not-found-ghosts {
    color: var(--eq-ink-3);
    stroke: var(--eq-ink-3);
  }

  .blk-not-found-label {
    stroke: var(--eq-ink);
  }

  .blk-not-found-dust {
    stroke: var(--eq-ink-3);
  }

  .blk-not-found-result {
    padding-top: var(--eq-space-5);
  }

  .blk-not-found-links {
    display: grid;
    gap: var(--eq-space-3);
    min-width: 0;
  }

  .blk-not-found-links > h2,
  .blk-not-found-links > p {
    margin: 0;
  }

  @container blk-not-found (width >= 40rem) {
    .blk-not-found-inner {
      padding-inline: var(--eq-space-6);
    }
  }
}