update frontend docs - #515
Conversation
martin-mfg
commented
Aug 25, 2026
martin-mfg
commented
- add documentation for the new GitHub light and dark themes, for the support light & dark mode in one card PR and for the new "Total Contributions" stat
- use dynamic light/dark cards in the docs at /frontend/docs
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
| <a href="/api/top-langs?username=anuraghazra&layout=donut"> | ||
| <img class="card-preview-light" src="/api/top-langs?username=anuraghazra&layout=donut&theme=light_github" alt="Top Langs" /> | ||
| <img class="card-preview-dark" src="/api/top-langs?username=anuraghazra&layout=donut&theme=dark_github" alt="Top Langs" /> | ||
| </a> |
There was a problem hiding this comment.
The demo images above don’t have a link, while this one and the ones that follow do.
Should the link point to the specific card alongside the theme?
Also I'm wondering if the link to the image is useful in this context.
There was a problem hiding this comment.
I think linking the images is somewhat helpful: It allows users to open the images and then inspect in the browser's address bar how it is configured. Without this, users have to: a) assume that we embed live images instead of fixed prerendered images and b) know how to view the url of an embedded image in their browser. And yes, I guess it makes sense to include the card's theme in the linked url.
In some cases the docs demonstrate that e.g. repo cards are intended to be linked to the repo they represent. Then linking to the image itself is not possible anymore, but imo linking to the repo is more important in these cases.
I see your new PR aims to make the linking consistent. So I won't make any changes to the linking here. And we can continue the discussion in #522.
…hem (#522) > [!NOTE] > Just a POC, marking as draft until #515 and #516 are merged. - Adds `apps/frontend/src/plugins/rehypeCardImages.ts`: a `/api` image that names no theme is emitted twice, once per site theme — `light_github` / `dark_github` or the `*_repocard` pair. One that names a theme is left untouched. - Every `/api` image also gets `loading="lazy" decoding="async"`, so the theme is not using costs no request. - Drops the inline `<img>`/`<a>` HTML from `docs/index.md` and `customization/theming.md`; previews on the other docs pages became theme-aware without being edited. Once the other docs PRs are merged I'll rebase and apply the same change everywhere. --------- Co-authored-by: martin-mfg <2026226+martin-mfg@users.noreply.github.com>
2 participants
