Merged
Conversation
This commit deletes the SeoTab component from the devtools package, which included social media preview functionality and meta tag analysis. The removal streamlines the codebase by eliminating unused features.
This commit updates the naming of the SocialPreviewSection component to SocialPreviewsSection for consistency and clarity in the SEO tab of the devtools package. The change improves code readability and aligns with the pluralization of the component's purpose.
… update import path This commit renames the social-preview.tsx file to social-previews.tsx for consistency with the component naming convention. The import path in the SeoTab component is also updated accordingly, enhancing code clarity and maintainability.
This commit introduces a navigation bar in the SeoTab component, allowing users to switch between 'Social Previews' and 'SERP Preview' sections. It also updates the SocialPreviewsSection to conditionally render its title based on a new prop, improving flexibility in display options. New styles for the navigation elements are added to enhance the user interface.
…data handling This commit introduces new styles for the SERP snippet and updates the SERP and Social Previews sections to dynamically display data from the current page's metadata. The SocialPreviewsSection and SerpPreviewSection components are refactored to improve clarity and functionality, removing unnecessary props and enhancing the user interface with better styling.
This commit refactors the SERP snippet styles by renaming the `serpSnippetUrlRow` to `serpSnippetTopRow` and introduces new styles for site name and URL. The structure of the SERP preview is enhanced to better organize the display of site information, improving the overall layout and visual consistency.
…ow reporting This commit adds functionality to the SERP preview section, implementing text truncation for the title and description based on specified width limits. It introduces new state management for overflow detection and displays warnings when the title or description exceeds the defined character limits. Additionally, new styles are added to support the hidden measurement elements for accurate text sizing.
This commit enhances the SERP preview section by introducing a new overflow reporting mechanism for the title and description. It adds a list of issues when the title or description exceeds specified limits, improving user feedback. Additionally, new styles are implemented for better visual presentation of error messages in the SERP preview.
This commit enhances the SEO capabilities of the basic example by adding a meta description tag for improved search engine visibility. Additionally, it introduces new styles for a default favicon, ensuring a consistent visual representation when no favicon is provided. This improves user feedback in the SERP preview section.
This commit introduces new styles for the SERP preview section, including a dedicated block for the preview and a label for better organization. The layout improvements enhance the visual presentation of the desktop preview, ensuring a clearer display of the site name, URL, title, and description.
…verflow reporting This commit introduces new styles for the mobile SERP preview, including a dedicated snippet layout and improved overflow reporting for the title and description. It adds functionality to handle mobile-specific text truncation and displays warnings for descriptions exceeding a three-line limit, enhancing user feedback and visual consistency across devices.
…nce component structure This commit introduces a robust mechanism for reporting SERP issues, including checks for favicon, title, and description validity. It refactors the SERP preview component to utilize a more structured approach for handling overflow conditions and displaying relevant warnings. Additionally, it enhances the layout for both desktop and mobile previews, ensuring a consistent and informative user experience across devices.
…character limits This commit refines the SERP preview component by replacing pixel-based truncation with character-based limits for titles and descriptions. It introduces constants for maximum character counts, enhancing the clarity of the truncation logic. Additionally, it simplifies the component structure by removing unnecessary measurement elements, improving overall readability and maintainability.
…racter limit handling This commit refines the SERP preview component by enhancing the character limit handling for titles and descriptions. It simplifies the component structure, removing redundant elements, and improves the overall readability and maintainability of the code. Additionally, it ensures consistent behavior across different display scenarios.
🦋 Changeset detectedLatest commit: d11c81e The changes in this PR will be included in the next version bump. This PR includes changesets to release 5 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
View your CI Pipeline Execution ↗ for commit 6be382a
☁️ Nx Cloud last updated this comment at |
More templates
@tanstack/devtools
@tanstack/devtools-a11y
@tanstack/devtools-client
@tanstack/devtools-ui
@tanstack/devtools-utils
@tanstack/devtools-vite
@tanstack/devtools-event-bus
@tanstack/devtools-event-client
@tanstack/preact-devtools
@tanstack/react-devtools
@tanstack/solid-devtools
@tanstack/vue-devtools
commit: |
Collaborator
|
@abedshaaban this looks awesome, can you fix the failing tests? |
Contributor
Author
|
Sure |
Contributor
Author
|
@AlemTuzlak all done and ready to check |
📝 WalkthroughWalkthroughThe SEO tab functionality has been expanded with a new SERP preview feature. A secondary navigation state was introduced to switch between social previews and SERP preview views. New styles support the sub-navigation and SERP snippet layout. The SERP preview component renders desktop and mobile search result previews with metadata validation and error reporting. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (3)
packages/devtools/src/tabs/seo-tab/index.tsx (1)
16-38: Expose tab semantics for assistive tech on the SEO sub-navigation.The toggle works visually, but adding
tablist/tab/tabpanelroles andaria-selectedwould make state and structure explicit to screen readers.Suggested diff
- <nav class={styles().seoSubNav} aria-label="SEO sections"> + <nav class={styles().seoSubNav} aria-label="SEO sections" role="tablist"> <button type="button" + role="tab" + id="seo-social-previews-tab" + aria-controls="seo-social-previews-panel" + aria-selected={activeView() === 'social-previews'} class={`${styles().seoSubNavLabel} ${activeView() === 'social-previews' ? styles().seoSubNavLabelActive : ''}`} onClick={() => setActiveView('social-previews')} > Social previews </button> <button type="button" + role="tab" + id="seo-serp-preview-tab" + aria-controls="seo-serp-preview-panel" + aria-selected={activeView() === 'serp-preview'} class={`${styles().seoSubNavLabel} ${activeView() === 'serp-preview' ? styles().seoSubNavLabelActive : ''}`} onClick={() => setActiveView('serp-preview')} > SERP Preview </button> </nav> <Show when={activeView() === 'social-previews'}> - <SocialPreviewsSection /> + <div role="tabpanel" id="seo-social-previews-panel" aria-labelledby="seo-social-previews-tab"> + <SocialPreviewsSection /> + </div> </Show> <Show when={activeView() === 'serp-preview'}> - <SerpPreviewSection /> + <div role="tabpanel" id="seo-serp-preview-panel" aria-labelledby="seo-serp-preview-tab"> + <SerpPreviewSection /> + </div> </Show>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/devtools/src/tabs/seo-tab/index.tsx` around lines 16 - 38, The SEO sub-nav currently toggles views visually but lacks ARIA tab semantics; update the nav and view elements so assistive tech recognizes them as tabs: give the nav the role="tablist", change each toggle button (the ones using styles().seoSubNavLabel and onClick that call setActiveView with 'social-previews'/'serp-preview') to role="tab" and include aria-selected={activeView() === '...'} plus aria-controls that reference the corresponding tabpanel id; wrap SocialPreviewsSection and SerpPreviewSection outputs in containers with role="tabpanel", matching id attributes referenced by aria-controls, and set aria-hidden appropriately (or toggle rendering) based on activeView() so screen readers see the active panel.packages/devtools/src/styles/use-styles.ts (1)
129-143: Add explicit keyboard focus styling for sub-nav buttons.
seoSubNavLabelhas hover styling but no explicit:focus-visiblerule. Adding one makes keyboard navigation feedback consistent.Suggested diff
seoSubNavLabel: css` padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; color: ${t(colors.gray[600], colors.gray[400])}; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; font-family: inherit; &:hover { color: ${t(colors.gray[800], colors.gray[200])}; } + &:focus-visible { + outline: 2px solid ${t(colors.gray[900], colors.gray[100])}; + outline-offset: 2px; + } `,🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/devtools/src/styles/use-styles.ts` around lines 129 - 143, The seoSubNavLabel style lacks keyboard focus styling; add a :focus-visible rule to seoSubNavLabel so keyboard users get the same visible feedback as hover (e.g., set color to the hover color, and/or change border-bottom color or add an outline) and ensure font-family/cursor remain; update the css block for seoSubNavLabel to include &:focus-visible { color: ${t(colors.gray[800], colors.gray[200])}; /* and set border-bottom or outline for visible focus */ } so keyboard navigation is consistent and accessible.packages/devtools/src/tabs/seo-tab/serp-preview.tsx (1)
212-247: Align mobile snippet text with the mobile overflow threshold.Right now both previews consume the desktop-truncated description. Passing a mobile-specific truncation value will keep preview text and mobile warnings in sync.
Suggested diff
const serpPreviewState = createMemo(() => { const data = serp() const titleText = data.title || 'No title' const descText = data.description || 'No meta description.' const displayTitle = truncateToChars(titleText, TITLE_MAX_CHARS) const displayDescription = truncateToChars(descText, DESCRIPTION_MAX_CHARS) + const displayDescriptionMobile = truncateToChars( + descText, + DESCRIPTION_MOBILE_MAX_CHARS, + ) return { displayTitle, displayDescription, + displayDescriptionMobile, overflow: { titleOverflow: titleText.length > TITLE_MAX_CHARS, descriptionOverflow: descText.length > DESCRIPTION_MAX_CHARS, descriptionOverflowMobile: descText.length > DESCRIPTION_MOBILE_MAX_CHARS, @@ <SerpSnippetPreview data={serp()} displayTitle={serpPreviewState().displayTitle} - displayDescription={serpPreviewState().displayDescription} + displayDescription={ + preview.isMobile + ? serpPreviewState().displayDescriptionMobile + : serpPreviewState().displayDescription + } isMobile={preview.isMobile} label={preview.label} issues={issues()} />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/devtools/src/tabs/seo-tab/serp-preview.tsx` around lines 212 - 247, The mobile preview is using the desktop-truncated description, causing mismatched text and mobile overflow warnings; update the render so SerpSnippetPreview receives a mobile-specific truncated description when preview.isMobile by using truncateToChars with DESCRIPTION_MOBILE_MAX_CHARS (or add a mobileDisplayDescription to serpPreviewState) and ensure getSerpIssues/overflow checks use the same mobile threshold so preview text and overflow flags (SERP_PREVIEWS, serpPreviewState, truncateToChars, DESCRIPTION_MOBILE_MAX_CHARS, SerpSnippetPreview) stay in sync.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@packages/devtools/src/styles/use-styles.ts`:
- Around line 129-143: The seoSubNavLabel style lacks keyboard focus styling;
add a :focus-visible rule to seoSubNavLabel so keyboard users get the same
visible feedback as hover (e.g., set color to the hover color, and/or change
border-bottom color or add an outline) and ensure font-family/cursor remain;
update the css block for seoSubNavLabel to include &:focus-visible { color:
${t(colors.gray[800], colors.gray[200])}; /* and set border-bottom or outline
for visible focus */ } so keyboard navigation is consistent and accessible.
In `@packages/devtools/src/tabs/seo-tab/index.tsx`:
- Around line 16-38: The SEO sub-nav currently toggles views visually but lacks
ARIA tab semantics; update the nav and view elements so assistive tech
recognizes them as tabs: give the nav the role="tablist", change each toggle
button (the ones using styles().seoSubNavLabel and onClick that call
setActiveView with 'social-previews'/'serp-preview') to role="tab" and include
aria-selected={activeView() === '...'} plus aria-controls that reference the
corresponding tabpanel id; wrap SocialPreviewsSection and SerpPreviewSection
outputs in containers with role="tabpanel", matching id attributes referenced by
aria-controls, and set aria-hidden appropriately (or toggle rendering) based on
activeView() so screen readers see the active panel.
In `@packages/devtools/src/tabs/seo-tab/serp-preview.tsx`:
- Around line 212-247: The mobile preview is using the desktop-truncated
description, causing mismatched text and mobile overflow warnings; update the
render so SerpSnippetPreview receives a mobile-specific truncated description
when preview.isMobile by using truncateToChars with DESCRIPTION_MOBILE_MAX_CHARS
(or add a mobileDisplayDescription to serpPreviewState) and ensure
getSerpIssues/overflow checks use the same mobile threshold so preview text and
overflow flags (SERP_PREVIEWS, serpPreviewState, truncateToChars,
DESCRIPTION_MOBILE_MAX_CHARS, SerpSnippetPreview) stay in sync.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: aebef872-197a-4a04-a45e-3ae626adcb5e
📒 Files selected for processing (6)
.changeset/vast-apes-attend.mdexamples/react/basic/index.htmlpackages/devtools/src/styles/use-styles.tspackages/devtools/src/tabs/seo-tab/index.tsxpackages/devtools/src/tabs/seo-tab/serp-preview.tsxpackages/devtools/src/tabs/seo-tab/social-previews.tsx
Merged
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.
🎯 Changes
Implemented an SERP (Search Engine Results Page) section inside the SEO tab beside Social previews section. This enables users to view meta tags and check how they will be shown.
Examples:
Normal
No Favicon or Description
Tag Exceeds Length
✅ Checklist
pnpm test:pr.🚀 Release Impact
Summary by CodeRabbit