Repository navigation
Restyle product/tile grids across operate, develop, integrate, and commands pages - #4144
Conversation
…mmands pages Replace icon-based image-cards and plain tables with a consistent bordered, color-coded tile-card style on operate/, develop/, develop/tools/insight/, integrate/redisinsight/, and the top command-version tiles on /commands/. Reorders operate/ tiles to match the sidebar, fixes link resolution to use relref inside raw HTML tiles, adds missing category badges, and expands the integrate/ filter dropdown for newly-used group values. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
🧠 Redis MemoryFound 10 related items from repository history (1 new this commit):
Memory updated at bd20859 |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
A few suggestions but basically looks OK, so I'll approve. However, one thing I wonder is if the colouring of some of the new bubbles clashes with the existing colouring for the product bubbles and badges (eg, on the develop landing page, some of the bubbles seem to have the same colours we use for Redis Cloud, K8s, etc). Would that imply to a user that things with the same colour are connected?
- operate/: stack product tiles full width in three introduced groups (core Redis deployment options, AI and data services, fleet management and developer tools), show each tile's links as left-to-right steps, shorten step labels, and make the feature tables scroll on mobile. - develop/: replace the client tile dots with small language icons from the home page (new lang-icon shortcode), and add Get started links for Rust and Ruby. - Fix tile click-through on develop/ and operate/: the content wrapper covered the card overlay, so clicking a title or blank area did nothing. The wrapper now passes clicks through; inner links stay clickable. - commands/: color the version tiles by major version (8, 7, 6). - integrate/: sort frameworks first, then AI services, then everything else, without changing weights (so the sidebar order is unchanged). - develop/tools/insight/: shorten the download tile title. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
- develop/: turn the Redis Insight and Redis for VS Code cells into full-width step tiles (Download/Install then Use) with the tool icon as a title badge, turn the Quick start, Data types, and Redis Search cards into tiles with their links inside, and drop the underline from the links in the top CLI box. - operate/: rewrite the AI and data services intro, and change the Redis Cloud steps to Create account & connect, Enable Iris, Enable Data Integration, and Monitor with Radar. - develop/setup/: order the deployment tabs Open Source, Cloud, Software and match the surrounding prose; remove the dependency list, the "select the tab" instructions, the redis-cli lead-in, and the sample data step, renumbering the remaining steps and step references. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 9323bbf. Configure here.
dwdougherty
left a comment
dwdougherty
left a comment
There was a problem hiding this comment.
Just one comment about the colored dots on the command pages. Otherwise, LGTM.
| <h1 class="font-mono {{ if lt $index 9 }}font-normal{{ else }}font-medium{{ end }} text-lg mb-1.5 px-6{{ if lt $index 9 }} pb-2 border-b border-redis-pen-800{{ end }}"> | ||
| <div class="command-title-deprecated"> | ||
| <span class="truncate">{{ .Title }}</span> | ||
| {{ if lt $index 9 }} | ||
| {{ $majorColors := dict "8" "bg-purple-bubble" "7" "bg-violet-700" "6" "bg-fuchsia-400" }} | ||
| {{ $major := replaceRE `^Redis (\d+)\..*$` "$1" .Title }} | ||
| <span class="h-3 w-3 rounded-full {{ index $majorColors $major | default "bg-redis-pen-300" }} border border-redis-pen-600 inline-block mr-2 flex-shrink-0"></span> | ||
| {{ end }} | ||
| <span class="{{ if lt $index 9 }}whitespace-normal uppercase{{ else }}truncate{{ end }}">{{ if lt $index 9 }}{{ replace (replace .Title " Reference" "") " Commands" "" }}{{ else }}{{ .Title }}{{ end }}</span> |
There was a problem hiding this comment.
IMHO, this doesn't really add much value to the command pages; I don't know what the color coding means. Then there's the issue bugbot raised above.
There was a problem hiding this comment.
Thank you! It has a different color purple for each major version. I don't think the bugbot issue is a real problem today. But, this just connects to the purple we use for OSS in other areas of the site and cleans up the titles that were too long to fit.
- Remove the minimum height and the prose margins inside the language tiles so they are shorter, and remove the table margins and trim the cell padding in the "Try Redis commands" box. - Recolor the language icons with each language's brand colors (the home page badges stay grey), and enlarge Go, PHP, and Java, which were shrinking to fit a square box. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Restyles the develop, operate, integrate, and commands landing-page tile grids from upstream. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
3 participants
Refresh the look/feel of top-level landing pages. I kept almost all of the links the same, except the get started links for clients because of the new workbench, I think the top page of the guide is a better start than connect. But, let me know what you think.
Replace icon-based image-cards and plain tables with a consistent bordered, color-coded tile-card style on operate/, develop/, develop/tools/insight/, integrate/redisinsight/, and the top command-version tiles on /commands/. Reorders operate/ tiles to match the sidebar, fixes link resolution to use relref inside raw HTML tiles, adds missing category badges, and expands the integrate/ filter dropdown for newly-used group values.
Note
Low Risk
Documentation and Hugo layout/presentation changes only; no application runtime or security logic.
Overview
Replaces markdown tables and
image-cardpromos with a shared bordered tile grid pattern (Tailwind +relrefoverlays) on Develop, Operate, Integrate, and Redis Insight install pages. Adds a newlang-iconshortcode for client language tiles ondevelop/_index.md.On Develop, client Get started links now target each client’s main guide (not
connect.md); Rust gains a document-search link. The setup guide defaults to Redis Open Source (first tab) and drops the separate sample-data step.Operate landing content is regrouped into sections (core deployments, AI/data services, fleet/tools) with workflow-style link chains; Redis Cloud tiles add Iris/RDI/Radar paths. Feature comparison tables get horizontal scroll wrappers.
Integrate list layout adds filter types (AI, tool, platform, service, cloud), badge colors, and custom sort (AI frameworks first). Commands index restyles the first nine version tiles with color dots and shortened titles.
tile-cardcolor dots gain a border; RDI gets an operate category badge.Reviewed by Cursor Bugbot for commit bd20859. Bugbot is set up for automated code reviews on this repo. Configure here.