Skip to content

feat(docs): list and grid toggle on the /docs index, grouped by topic #205

Description

@AnayDhawan

The /docs index is a single vertical list today. Add a list/grid switch, with entries grouped by topic in both views.

The StudentSuite website is getting the same docs system and the same toggle. Building it here too keeps the two in step rather than letting them drift on day one.

Files

Topics already exist, do not invent a second taxonomy

src/lib/docs-nav.ts:21 defines them:

export type DocsGroup = "Guides" | "Awesome Lists" | "Contributing" | "Developers";

Group headings come from that union and the order comes from one place.

Fix the duplication while you are here. src/components/docs/docs-sidebar.tsx:13 hardcodes:

const GROUPS: DocsGroup[] = ["Guides","Awesome Lists","Contributing","Developers"];

That is the group order stated a second time, duplicated from docs-nav.ts. Export a single DOCS_GROUPS constant from docs-nav.ts and have both the sidebar and the index read it. Two lists that must agree and are maintained separately will eventually disagree.

The grid is a restoration, not an invention

docs-index-list.tsx:8-12 says in its own comment that the vertical list replaced "the old icon-card grid". docsNav still carries icon and iconClassName on every entry (:23-32), so the grid variant has everything it needs. Check git log for the original before writing a new one.

Behaviour

  • Default is list. It is the current behaviour and the denser read.
  • Both views group under topic headings, in DOCS_GROUPS order.
  • Persist in localStorage, read in an effect, wrapped in try/catch.
  • Toggle is a client island; doc content stays server-rendered.
  • List rows keep the group badge, date and read time from getDocMeta (src/lib/docs-meta.ts). Grid cards keep the icon.

Acceptance criteria

  • Toggle switches layout, choice survives a reload
  • Both views group by DocsGroup with visible headings
  • DOCS_GROUPS exported once and consumed by both the sidebar and the index
  • No hydration warning on /docs
  • localStorage unavailable: defaults to list, no error
  • Keyboard operable with aria-pressed
  • Grid cards in a row are equal height
  • Read time and date still render in list view

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    designVisual and UX designowner-yashOwned by Yash

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions