MotirBuilding in public
MOTIR · moooon
onMotir
You’re viewing a public project. Anyone can view it — no account needed. Sign in to submit, upvote, or comment on requests.View-only — you can’t edit work items
MOTIR-427

6.13.6 The project-square UI — the fully-public, SEO/GEO-optimised marketing-site page (hero + cards + search/filter/sort), each card linking to the 6.12.4 public view

Done
Description

Estimate: 75m · Depends on: 6.13.1, 6.13.3, 6.13.4

Build the project-square surface per the 6.13.1 design, over the 6.13.3 search/filter + the 6.13.4 ranking. A fully public (no sign-in), server-rendered, SEO + GEO-optimised web page at /explore, reached from the Motir marketing site — NOT an app-shell route, NO left-nav entry. It renders for logged-out visitors and crawlers with no getSession() gate.

  • The gallery + cards: render the grid of project cards (name, org, description, the three 6.12.6 stats) from the 6.13.2 card projection; each card is a whole-card LINK to that project’s 6.12.4 public read-only view (the discovery → view handoff — no second view path here). Paginated / lazy (the at-scale rule — the "load more" / next-page affordance over the 6.13.2 cursor; never load-all).
  • The sort / rank tabs: the Trending / Popular / Recent tabs (+ the recency-window selector if designed) driving the 6.13.4 rank; the rank is carried in a URL param (shareable / reloadable, composing with the search + tag params, Suspense-keyed like the shipped list params).
  • The search bar + category / tag filter: the search input + the category/tag filter driving 6.13.3; both carried in URL params that COMPOSE with the rank tab + the cursor; the categories-browse view (topics by count) from the 6.13.5 facet read; the active-filter + clear states.
  • The page chrome (marketing-site, NOT app shell): the public top bar (logo + minimal nav + sign-in/CTA) and footer (an SEO link surface with the per-topic landing links). There is NO app sidebar / NO left-nav entry — the page is reached from the marketing site. The SEO hero leads with a real <h1> + descriptive lede + the search.
  • SEO + GEO (the build contract): server-render the page (no client-only gate) so it is fully crawlable. Emit head metadata (title, description, canonical, OpenGraph + a generated /explore/opengraph-image, Twitter), JSON-LD structured data (CollectionPage › ItemList of SoftwareApplication + a BreadcrumbList on topic pages), semantic HTML (one <h1>, <h2> sections, each card an <article>/<h3>, topic browse in a <nav>), and an XML sitemap of the real indexable URLs (/explore, each rank / ?q= / ?tag= / ?page=, and the /explore/topic/<slug> landing pages). Cards are real <a href> (crawlable without JS). Add a concise citable lead + an FAQ block for GEO (answer-engine framing).
  • States: the empty square, the paginated loading skeleton, the fetch-error, and the no-results / no-projects-in-category states per the 6.13.1 design.

Use ONLY shipped components/ui/* + --el-* / [data-display-style] tokens (palette tones for the stats / tabs / tag chips, not grey-only); strings via next-intl. Cards carry NO "Public" pill. Stay 4-layer: the page/route reads through the 6.13.2/6.13.3/6.13.4 services (no view-specific query code, no raw Prisma in the route).

Acceptance criteria

  • The square renders the card gallery (name / org / description / the three stats) per the 6.13.1 design; each card links to the project’s 6.12.4 public view; the gallery is paginated / lazy over the 6.13.2 cursor (not load-all).
  • The Trending / Popular / Recent tabs drive the 6.13.4 rank; the search bar + category/tag filter drive 6.13.3; rank + search + tag are carried in composable URL params (reload/share restores state).
  • The page renders as a fully-public, server-rendered marketing-site page (top bar + footer, SEO hero) for a LOGGED-OUT visitor — NOT an app-shell route, no left-nav entry; it emits the head metadata + JSON-LD + semantic HTML + sitemap/topic landing pages (SEO/GEO); cards carry NO "Public" pill; the empty / loading / error / no-results states render.
  • Only --el-* + [data-display-style] tokens + shipped components/ui/*; matches the 6.13.1 design; next-intl; 4-layer respected (reads through the services, no raw Prisma in the route).

Context refs

  • 6.13.1 (the design asset — required), 6.13.3 (search + category/tag filter), 6.13.4 (the rank tabs).
  • scripts/plan-seed/data/story-6.12.ts § 6.12.4 — the public read-only view each card links INTO.
  • motir-core/components/ui/* + app/globals.css token layers; the URL-driven list-param conventions (?view/?sort/?page) the rank/search/tag params compose with; Next.js Metadata API + opengraph-image + sitemap.ts (the SEO/GEO surface).
  • motir-core/CLAUDE.md § 4-layer + § colour/shape tokens; the i18n threading pattern.