Fix/replace list

docs/design/specs/2026-05-20-index-page-redesign.md

@@ -0,0 +1,116 @@
+# Index Page Redesign
+
+**Date:** 2026-05-20
+**Status:** Approved
+
+## Goals
+
+1. Make the index page hero background truly full-viewport-width.
+2. Align hero text and list content to the same horizontal position.
+3. Match the list content max-width to idea-post pages (1200px via `contentWrapper`).
+4. Replace the deprecated `antd/List` component with native HTML.
+5. Redesign list items in an editorial style — bold typographic, no avatars, no placeholder counts.
+6. Introduce a shared CSS token so hero text and list content are guaranteed to stay aligned.
+
+## Layout Structure
+
+The index page will set `fullWidthPage: true` via `useSetLayoutConfig()`. This removes the `max-width: 1200px` cap and side borders from `contentWrapper`, allowing the hero background to bleed edge-to-edge.
+
+Within the now-unconstrained page, both the hero text and the IdeaRoll use the same inner wrapper:
+
+```
+max-width: 1200px
+margin: 0 auto
+padding: 32px var(--content-padding-x)
+```
+
+This guarantees horizontal alignment regardless of viewport width.
+
+### Shared token
+
+Add to `src/style/colors.css`:
+
+```css
+/* Layout */
+--content-padding-x: 48px;
+--content-padding-x-sm: 24px;
+```
+
+Used in `index-page.module.css` for both `.heroInner` and `.listWrapper`. `--content-padding-x-sm` replaces `--content-padding-x` at `@media (max-width: 768px)`.
+
+### Hero restructure
+
+The `<section className={hero}>` gets a full-width background only. Text moves into a new `<div className={heroInner}>` that provides the constrained, centered inner wrapper.
+
+Before:
+```
+<section className={hero}>          ← background + max-width + padding
+  <p>breadcrumb</p>
+  <h1>Idea Board</h1>
+  <p>subtitle</p>
+</section>
+```
+
+After:
+```
+<section className={hero}>          ← background only, full-width
+  <div className={heroInner}>       ← max-width: 1200px, centered, padded
+    <p>breadcrumb</p>
+    <h1>Idea Board</h1>
+    <p>subtitle</p>
+  </div>
+</section>
+```
+
+## IdeaRoll: Editorial Item Design
+
+Replace `antd/List` + `List.Item` + `List.Item.Meta` with a native `<ul>/<li>`.
+
+Each item contains three rows:
+
+1. **Tag eyebrow** — `TagPopover` components inline, restyled as small-caps blue text. Dot separators (`·`) rendered in JSX between tags (never interactive).
+2. **Title** — `<a href={slug}>`, large bold dark text, no underline by default.
+3. **Byline** — `by [Author · Author] — [Dataset name]` (or `— No public dataset`). Small muted text.
+
+Items separated by a bottom border. No avatars. No star/message counts (removed entirely).
+
+### Tag rendering pattern
+
+```tsx
+{item.tags.map((tag, i) => (
+  <React.Fragment key={tag}>
+    {i > 0 && <span className={tagSeparator}> · </span>}
+    <TagPopover tag={tag} currentSlug={item.slug} className={eyebrowTag} />
+  </React.Fragment>
+))}
+```
+
+`TagPopover` receives an `eyebrowTag` className that overrides antd `Tag` default styles. The separator `·` is a plain `<span>` between tags.
+
+### Typography spec
+
+| Element     | Size  | Weight | Color                         | Other                               |
+|-------------|-------|--------|-------------------------------|-------------------------------------|
+| Tag eyebrow | 10px  | 700    | `var(--primary-color)`        | uppercase, `letter-spacing: 0.15em` |
+| Separator · | 10px  | 400    | `var(--border-color)`         | `margin: 0 5px`                     |
+| Title       | 19px  | 800    | `var(--text-primary-color)`   | `letter-spacing: -0.02em`, `line-height: 1.25` |
+| Byline      | 11px  | 400    | `var(--text-secondary-color)` | —                                   |
+| Item border | —     | —      | `var(--border-color)`         | bottom only, `1px solid`            |
+| Item padding | —    | —      | —                             | `22px 0` top/bottom                 |
+
+## Files Changed
+
+| File | Change |
+|------|--------|
+| `src/style/colors.css` | `--content-padding-x` and `--content-padding-x-sm` tokens already exist (no code changes required in this PR) |
+| `src/templates/index-page.tsx` | Add `useSetLayoutConfig` + `fullWidthPage: true`; restructure hero with `heroInner` wrapper |
+| `src/style/index-page.module.css` | Rewrite `.hero` (bg only), add `.heroInner` (constrained wrapper), update `.listWrapper` to use token |
+| `src/components/IdeaRoll.tsx` | Replace `antd/List` with native `<ul>/<li>`; editorial item layout; remove `Avatar`, `StarOutlined`, `MessageOutlined` imports |
+| `src/style/idea-roll.module.css` | Replace `.container` antd overrides with editorial styles; add `.listItem`, `.tagEyebrow`, `.eyebrowTag`, `.tagSeparator`, `.title`, `.byline` |
+
+## Out of Scope
+
+- `TagPopover.tsx` — no changes to component logic or popover behavior
+- `idea-post.tsx` / `idea-post.module.css` — untouched
+- Adding new data fields (date, type, program) to the IdeaRoll query
+- Any other pages

src/components/IdeaRoll.tsx

@@ -2,14 +2,17 @@ import React from "react";
 
 import { Link, graphql, useStaticQuery } from "gatsby";
 
-import { MessageOutlined, StarOutlined } from "@ant-design/icons";
-import { Avatar, List } from "antd";
-
-import { PRIMARY_COLOR } from "../style/theme";
-import { IconText } from "./IconText";
 import { TagPopover } from "./TagPopover";
 
-const { container } = require("../style/idea-roll.module.css");
+const {
+    byline,
+    container,
+    eyebrowTag,
+    listItem,
+    tagEyebrow,
+    tagSeparator,
+    title,
+} = require("../style/idea-roll.module.css");
 
 type IdeaNode = Queries.IdeaRollQuery["allIdeaPost"]["nodes"][number];
 
@@ -42,78 +45,59 @@ const IdeaRoll = ({ count }: IdeaRollProps) => {
         }
     `);
 
-    const filteredNodes = queryData.allIdeaPost.nodes.slice(0, count);
-    const ideasForIdeaRoll: IdeaListItem[] = filteredNodes.map(
-        (post: IdeaNode) => ({
-            ...post,
-            dataset:
-                post.resources.find((r) => r?.type === "dataset")?.name ?? null,
-        }),
-    );
+    const nodes: IdeaNode[] = queryData.allIdeaPost.nodes.slice(0, count);
+    const ideas: IdeaListItem[] = nodes.map((post) => ({
+        ...post,
+        dataset:
+            post.resources.find((r) => r?.type === "dataset")?.name ?? null,
+    }));
 
     return (
-        <List
-            className={container}
-            itemLayout="vertical"
-            dataSource={ideasForIdeaRoll}
-            footer={
-                count ? (
-                    <div>
-                        <Link className="btn" to="/">
-                            See more
-                        </Link>
-                    </div>
-                ) : (
-                    ""
-                )
-            }
-            renderItem={(item) => (
-                <List.Item
-                    key={item.id}
-                    actions={[
-                        <IconText
-                            icon={StarOutlined}
-                            text="2"
-                            key="list-vertical-star-o"
-                        />,
-                        <IconText
-                            icon={MessageOutlined}
-                            text="2"
-                            key="list-vertical-message"
-                        />,
-                        ...item.tags.map((tag) => (
-                            <TagPopover
-                                key={tag}
-                                tag={tag}
-                                currentSlug={item.slug}
-                            />
-                        )),
-                    ]}
-                >
-                    <List.Item.Meta
-                        title={<a href={item.slug}>{item.title}</a>}
-                        avatar={
-                            <Avatar.Group>
-                                {item.authors.map((author) => (
-                                    <Avatar
-                                        key={author.name}
-                                        style={{
-                                            backgroundColor: PRIMARY_COLOR,
-                                            color: "#fff",
-                                        }}
-                                    >
-                                        {author.name[0].toUpperCase()}
-                                    </Avatar>
+        <>
+            <ul className={container}>
+                {ideas.map((item) => (
+                    <li key={item.id} className={listItem}>
+                        {item.tags.length > 0 && (
+                            <div className={tagEyebrow}>
+                                {item.tags.map((tag, i) => (
+                                    <React.Fragment key={tag}>
+                                        {i > 0 && (
+                                            <span
+                                                className={tagSeparator}
+                                                aria-hidden="true"
+                                            >
+                                                ·
+                                            </span>
+                                        )}
+                                        <TagPopover
+                                            tag={tag}
+                                            currentSlug={item.slug}
+                                            className={eyebrowTag}
+                                        />
+                                    </React.Fragment>
                                 ))}
-                            </Avatar.Group>
-                        }
-                        description={
-                            <span>{item.dataset ?? "No public dataset"}</span>
-                        }
-                    />
-                </List.Item>
+                            </div>
+                        )}
+                        <Link to={item.slug} className={title}>
+                            {item.title}
+                        </Link>
+                        <div className={byline}>
+                            by {item.authors.map((a) => a.name).join(" · ")}
+                            {item.dataset
+                                ? ` — ${item.dataset}`
+                                : " — No public dataset"}
+                        </div>
+                    </li>
+                ))}
+            </ul>
+            {count !== undefined && (
+                <div>
+                    <Link className="btn" to="/">
+                        See more
+                    </Link>
+                </div>
             )}
-        />
+        </>
     );
 };
 

src/style/idea-roll.module.css

@@ -1,18 +1,66 @@
 .container {
-    margin: auto;
+    list-style: none;
+    padding: 0;
+    margin: 0;
     background-color: var(--bg-base-color);
+}
+
+.listItem {
+    padding: 22px 0;
+    border-bottom: 1px solid var(--border-color);
+}
 
-    :global(.ant-list-item) {
-        border-left: 3px solid var(--primary-color);
-        padding-left: 20px;
-    }
+.listItem:last-child {
+    border-bottom: none;
+}
 
-    :global(.ant-list-item-meta-title a) {
-        color: var(--primary-color) !important;
-        font-weight: 600;
-    }
+.tagEyebrow {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-bottom: 6px;
+}
+
+/* Overrides antd Tag's scoped styles, which win without !important */
+.eyebrowTag {
+    font-size: 10px !important;
+    font-weight: 700 !important;
+    letter-spacing: 0.15em !important;
+    text-transform: uppercase !important;
+    color: var(--primary-color) !important;
+    background: transparent !important;
+    border: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    line-height: inherit !important;
+    cursor: pointer;
+}
+
+.tagSeparator {
+    font-size: 10px;
+    font-weight: 400;
+    color: var(--border-color);
+    margin: 0 5px;
+    user-select: none;
+}
+
+.title {
+    display: block;
+    font-size: 19px;
+    font-weight: 800;
+    color: var(--primary-color);
+    text-decoration: none;
+    letter-spacing: -0.02em;
+    line-height: 1.25;
+    margin-bottom: 6px;
+}
+
+.title:hover {
+    text-decoration: underline;
+}
 
-    :global(.ant-list-item-meta-title a:hover) {
-        color: var(--primary-color);
-    }
+.byline {
+    font-size: 11px;
+    font-weight: 400;
+    color: var(--text-secondary-color);
 }