Marimo landing page: dashboard tiles instead of resources section #53

New Issue

kert · 2026-03-21T18:19:56Z

kert commented

2026-03-21 18:19:56 +00:00

Problem

Marimo's default home page shows a "resources" section with links to marimo docs, Discord, etc. For a deployed platform, the landing page should show our notebooks as dashboard tiles.

Current state

Custom home-page-DUMF8ZY4.js is already mounted into marimo's static assets (compiled React component)
CSS for tiles exists in styles/marimo.css (lines 667-728)
Marimo has no built-in landing page config — only CSS customization and the JS override

Plan

Hide the resources/external-links section via CSS (display: none on the resources container)
Style the file browser as dashboard tiles — grid layout with card-style notebook entries
Add OpenGraph metadata to each notebook for rich tile previews (title, description, optional image)
Pin important notebooks to top of tile grid via CSS :first-child or data attribute selectors
Remove marimo branding/footer if visible, replace with project identity

Tile layout spec:

3-column responsive grid (2-col on tablet, 1-col on mobile)
Each tile: notebook title (h3), description (1-2 lines), last-modified timestamp
Hover: subtle blue border highlight
Active notebooks group at top, tutorials below

Files:

styles/marimo.css — add dashboard tile CSS
notebooks/*.py — add @app.config OpenGraph metadata where missing
compose.yml — verify home-page JS mount is current

## Problem Marimo's default home page shows a "resources" section with links to marimo docs, Discord, etc. For a deployed platform, the landing page should show our notebooks as dashboard tiles. ## Current state - Custom `home-page-DUMF8ZY4.js` is already mounted into marimo's static assets (compiled React component) - CSS for tiles exists in `styles/marimo.css` (lines 667-728) - Marimo has no built-in landing page config — only CSS customization and the JS override ## Plan 1. **Hide the resources/external-links section** via CSS (`display: none` on the resources container) 2. **Style the file browser as dashboard tiles** — grid layout with card-style notebook entries 3. **Add OpenGraph metadata** to each notebook for rich tile previews (title, description, optional image) 4. **Pin important notebooks** to top of tile grid via CSS `:first-child` or data attribute selectors 5. **Remove marimo branding/footer** if visible, replace with project identity ### Tile layout spec: - 3-column responsive grid (2-col on tablet, 1-col on mobile) - Each tile: notebook title (h3), description (1-2 lines), last-modified timestamp - Hover: subtle blue border highlight - Active notebooks group at top, tutorials below ### Files: - `styles/marimo.css` — add dashboard tile CSS - `notebooks/*.py` — add `@app.config` OpenGraph metadata where missing - `compose.yml` — verify home-page JS mount is current

kert added this to the P11: Design System — WCAG, branding, marimo dashboard milestone 2026-03-21 18:19:56 +00:00

kert added the styles label 2026-03-21 18:19:56 +00:00

kert referenced this issue from a commit

2026-03-21 18:36:38 +00:00

WCAG 2.2 AA compliance + marimo dashboard tiles

kert referenced a pull request that will close this issue

2026-03-21 18:36:52 +00:00

P11: WCAG 2.2 AA compliance + marimo dashboard tiles #57

kert closed this issue

2026-03-21 18:37:58 +00:00

kert referenced this issue from a commit

2026-03-21 18:47:22 +00:00