feat: add filterable integrations grid component#4676
Draft
lennessyy wants to merge 12 commits into
Draft
Conversation
Replace markdown tables on integration index pages with an interactive card grid that supports search and filtering by SDK and category tag. The same component is reused across the main integrations page and each SDK-specific page (with the SDK pre-selected). Sidebar children under integration categories are hidden unless the reader is on that page. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
📖 Docs PR preview links
|
Switch accent colors to the homepage purple gradient for active pills, search focus, and card hover glow. Use inset box-shadow instead of border on pills, cards, and search input to prevent right-edge clipping. Move Plugin system text above the grid on Python and Java pages. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Shorten variable names to --ig-* prefix, deduplicate shared theme values, scope variables to .container, consolidate focus colors into one variable. Extract FILTER_GROUPS config to remove duplicate filter JSX. Remove unused barrel export. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
lennessyy
changed the title
Contributor
|
I find it a little odd that I can go to the Java integration and then view python ones... should the "SDK specific" view not have the language filter? https://temporal-documentation-9czotgo4q.preview.thundergun.io/develop/java/integrations/ |
Replace PNG icons with the design team's colored block SVG components (SdkSvg). Split Braintrust into separate Python and TypeScript entries with SDK-specific guide links. Remove SDK text badges from cards. Disable hover effect on SDK icons within cards. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Hide Copy for LLM and View as Markdown buttons on pages that render the interactive grid component. Point LLMs to the integrations-data.ts source file for machine-readable integration metadata. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Contributor
Author
Hmm, I am inclined to say that preselecting a language filter for them is sufficient here. Some languages have much fewer integrations than others. If a user never saw the main integrations page, not seeing the filter option could lead them to conclude that we have far fewer integrations than we actually do? On the other hand I don't really see a downside for users to be able to explore integrations in other languages if they wish, even if they are on a specific language page, but I'm open to changes here. I am also going to show this to the PMs and our product marketing contact before final reviews, so there could be other changes in the meantime. |
Move integrations page from /develop/integrations to /integrations with redirect. Add to sidebar after Encyclopedia. Add Cloud metrics integrations (ClickStack, Datadog, Grafana Cloud, New Relic, Prometheus + Grafana) with no SDK association. Simplify data model from sdks: SDK[] to sdk?: SDK. Link metrics integrations to partner docs where available. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Darken active pill gradient end for AA text contrast (5.2:1+). Increase border opacity on cards, pills, and search input in both themes for 3:1 UI component contrast. Brighten pill and badge text in dark mode from #94a3b8 to #cbd5e1. Increase external link icon opacity from 0.45 to 0.6. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Use border-image with the homepage purple gradient on card hover, combined with the existing purple glow box-shadow. Switch cards from inset box-shadow borders to regular borders for border-image compat. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Switch category from single string to tags array to support multi-tag integrations. Cloud metrics integrations now carry both Observability and Temporal Cloud tags. Add Language agnostic option in the SDK filter row to surface integrations without a specific SDK.
Resolve merge conflicts keeping the grid component on Python integrations page. Add OpenBox as a Python integration with Governance and Observability tags.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
IntegrationsGridReact component with search bar, SDK filter pills, and category tag filters/develop/integrationspage with the interactive gridtarget="_blank"for links outside the docs sitedefaultSdksprop:has()selector)Test plan
/develop/integrationsshows all 13 integrations with working search and filters/develop/python/integrations, etc.) pre-filter to the correct SDK🤖 Generated with Claude Code
┆Attachments: EDU-6494 Add filterable integrations grid component