feat(stories): add map stories feature#162
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
| notFound(); | ||
| } | ||
| } catch { | ||
| notFound(); |
There was a problem hiding this comment.
If for some reason we don't find a story we should have a notFound page that renders on the sidebar instead a full 404 page?
| <div className="overflow-hidden"> | ||
| <div className={cn("flex flex-col gap-2.5 px-8 pb-5 pt-8", variant)}> | ||
| {categoryTitle && ( | ||
| <p className="text-[10px] font-medium uppercase leading-5">{categoryTitle}</p> |
There was a problem hiding this comment.
A title should use a html tag accordingly
|
|
||
| return ( | ||
| <> | ||
| {visibleStories.map((item) => { |
There was a problem hiding this comment.
I always prefer to have a component that render the marker list and another to render the marker. By doing this you can decouple a lot of functionality and keep separate concerns.
| @@ -0,0 +1,3 @@ | |||
| import { env } from "@/env.mjs"; | |||
|
|
|||
| export const CMS_MEDIA_BASE = env.NEXT_PUBLIC_API_URL.replace(/\/api\/?$/, ""); | |||
There was a problem hiding this comment.
We don't want to change the env vars in all environments and remove the /api so we can use it for media uploads or api because is tedius, right?
| const imageAttrs = storyAttrs?.image?.data?.attributes; | ||
|
|
||
| return ( | ||
| <Link href={`/map/story/${storySlug}${searchParams}`} className="group block"> |
There was a problem hiding this comment.
I don't think this is a good idea from the accessibility perspective.
- Screen readers announce the whole thing as one link. The image alt text, the heading, the body copy, the date, the "read more" — all of it gets concatenated into one enormous link name. Instead of hearing "Article title, link," the user hears a paragraph-long blob. It also breaks heading navigation, which is one of the primary ways screen reader users scan a page.
- You can't nest interactive elements. An inside an (or a button inside it) is invalid HTML. So the moment your card needs a second link, a tag, or a bookmark button, the pattern falls apart.
- Text becomes unselectable. Dragging across card text initiates link-drag behavior rather than selection, which annoys everyone and particularly affects people who rely on selecting/copying text
There was a problem hiding this comment.
Try to split nested components into different files. Everything related to stories list or stories detail in its respective folder. I feel like there is a lot functionality in one component
2 participants
Summary
/map/storieswith category filter chips, color-variant cards per category, and per-category bordered markers on the map/map/story/<slug>that flies the map to the story location keeping current zoom, hides other markers, and pulses the active marker with a category-colored glow — preserves the user's layer and dataset selection across navigationpage.tsxfiles (Datasets,Stories,StoryDetail); the shared shell (Header,Sidebar,Map) lives inapp/[locale]/map/layout.tsxso the Mapbox instance stays mounted across navigationcaptionon both card and detail images?bbox=...URL parameter — never read back into the map and added noise to shared URLsnext/imageto fetch local-IP upstream in dev only viadangerouslyAllowLocalIP— prod keeps SSRF protection onTest plan
/en/maploads with Datasets panel and no story markers/en/map/storiesshows category filter (4 chips) + story list grouped by category, markers visible on map with per-category borders/en/map/story/<slug>, sidebar swaps to story detail, map flies to the story location keeping current zoom, only that story's marker remains with a category-colored glowcaption