Feat seo serp preview

.changeset/vast-apes-attend.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools': patch
+---
+
+Implemented a new SERP (Search Engine Results Page) section in the SEO tab. This update introduces desktop and mobile preview of search results. It displays the current site's favicon, title and description while displaying errors and issues when they are not found or they exceed the character limit.

examples/react/basic/index.html

@@ -28,6 +28,11 @@
     <meta name="twitter:url" content="https://example.com/basic" />
     <script src="https://unpkg.com/react-scan/dist/auto.global.js"></script>
     <title>Basic Example - TanStack Devtools</title>
+    <meta
+      name="description"
+      content="A basic example of using TanStack Devtools with React."
+    />
+
     <description
       >A basic example of using TanStack Devtools with React.</description
     >

packages/devtools/src/styles/use-styles.ts

@@ -119,6 +119,32 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       margin-bottom: 2rem;
       border-radius: 0.75rem;
     `,
+    seoSubNav: css`
+      display: flex;
+      flex-direction: row;
+      gap: 0;
+      margin-bottom: 1rem;
+      border-bottom: 1px solid ${t(colors.gray[200], colors.gray[800])};
+    `,
+    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])};
+      }
+    `,
+    seoSubNavLabelActive: css`
+      color: ${t(colors.gray[900], colors.gray[100])};
+      border-bottom-color: ${t(colors.gray[900], colors.gray[100])};
+    `,
     seoPreviewSection: css`
       display: flex;
       flex-direction: row;
@@ -205,6 +231,139 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       padding: 0 10px 8px 10px;
       font-size: 0.875rem;
     `,
+    serpPreviewBlock: css`
+      margin-bottom: 1.5rem;
+      border: 1px solid ${t(colors.gray[200], colors.gray[700])};
+      border-radius: 10px;
+      padding: 1rem;
+    `,
+    serpPreviewLabel: css`
+      font-size: 0.875rem;
+      font-weight: 600;
+      margin-bottom: 0.5rem;
+      color: ${t(colors.gray[700], colors.gray[300])};
+    `,
+    serpSnippet: css`
+      border: 1px solid ${t(colors.gray[100], colors.gray[800])};
+      border-radius: 8px;
+      padding: 1rem 1.25rem;
+      background: ${t(colors.white, colors.darkGray[900])};
+      max-width: 600px;
+      font-family: ${fontFamily.sans};
+      box-shadow: 0 1px 2px ${t('rgba(0,0,0,0.04)', 'rgba(0,0,0,0.08)')};
+    `,
+    serpSnippetMobile: css`
+      border: 1px solid ${t(colors.gray[100], colors.gray[800])};
+      border-radius: 8px;
+      padding: 1rem 1.25rem;
+      background: ${t(colors.white, colors.darkGray[900])};
+      max-width: 380px;
+      font-family: ${fontFamily.sans};
+      box-shadow: 0 1px 2px ${t('rgba(0,0,0,0.04)', 'rgba(0,0,0,0.08)')};
+    `,
+    serpSnippetDescMobile: css`
+      font-size: 0.875rem;
+      color: ${t(colors.gray[700], colors.gray[300])};
+      margin: 0;
+      line-height: 1.5;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 3;
+      overflow: hidden;
+    `,
+    serpSnippetTopRow: css`
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 8px;
+    `,
+    serpSnippetFavicon: css`
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      flex-shrink: 0;
+      object-fit: contain;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    `,
+    serpSnippetDefaultFavicon: css`
+      width: 28px;
+      height: 28px;
+      background-color: ${t(colors.gray[200], colors.gray[800])};
+      border-radius: 50%;
+      flex-shrink: 0;
+      object-fit: contain;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    `,
+    serpSnippetSiteColumn: css`
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+      min-width: 0;
+    `,
+    serpSnippetSiteName: css`
+      font-size: 0.875rem;
+      color: ${t(colors.gray[900], colors.gray[100])};
+      line-height: 1.4;
+      margin: 0;
+    `,
+    serpSnippetSiteUrl: css`
+      font-size: 0.75rem;
+      color: ${t(colors.gray[500], colors.gray[500])};
+      line-height: 1.4;
+      margin: 0;
+    `,
+    serpSnippetTitle: css`
+      font-size: 1.25rem;
+      font-weight: 400;
+      color: ${t('#1a0dab', '#8ab4f8')};
+      margin: 0 0 4px 0;
+      line-height: 1.3;
+    `,
+    serpSnippetDesc: css`
+      font-size: 0.875rem;
+      color: ${t(colors.gray[700], colors.gray[300])};
+      margin: 0;
+      line-height: 1.5;
+    `,
+    serpMeasureHidden: css`
+      position: absolute;
+      left: -9999px;
+      top: 0;
+      visibility: hidden;
+      pointer-events: none;
+      box-sizing: border-box;
+    `,
+    serpMeasureHiddenMobile: css`
+      position: absolute;
+      left: -9999px;
+      top: 0;
+      width: 340px;
+      visibility: hidden;
+      pointer-events: none;
+      font-size: 0.875rem;
+      line-height: 1.5;
+    `,
+    serpReportSection: css`
+      margin-top: 1rem;
+      font-size: 0.875rem;
+      color: ${t(colors.gray[700], colors.gray[300])};
+    `,
+    serpErrorList: css`
+      margin: 4px 0 0 0;
+      padding-left: 1.25rem;
+      list-style-type: disc;
+    `,
+    serpReportItem: css`
+      margin-top: 0.25rem;
+      color: ${t(colors.red[700], colors.red[400])};
+      font-size: 0.875rem;
+    `,
     devtoolsPanelContainer: (
       panelLocation: TanStackDevtoolsConfig['panelLocation'],
       isDetached: boolean,

packages/devtools/src/tabs/seo-tab/index.tsx

@@ -0,0 +1,41 @@
+import { Show, createSignal } from 'solid-js'
+import { MainPanel } from '@tanstack/devtools-ui'
+import { useStyles } from '../../styles/use-styles'
+import { SocialPreviewsSection } from './social-previews'
+import { SerpPreviewSection } from './serp-preview'
+
+type SeoSubView = 'social-previews' | 'serp-preview'
+
+export const SeoTab = () => {
+  const [activeView, setActiveView] =
+    createSignal<SeoSubView>('social-previews')
+  const styles = useStyles()
+
+  return (
+    <MainPanel withPadding>
+      <nav class={styles().seoSubNav} aria-label="SEO sections">
+        <button
+          type="button"
+          class={`${styles().seoSubNavLabel} ${activeView() === 'social-previews' ? styles().seoSubNavLabelActive : ''}`}
+          onClick={() => setActiveView('social-previews')}
+        >
+          Social previews
+        </button>
+        <button
+          type="button"
+          class={`${styles().seoSubNavLabel} ${activeView() === 'serp-preview' ? styles().seoSubNavLabelActive : ''}`}
+          onClick={() => setActiveView('serp-preview')}
+        >
+          SERP Preview
+        </button>
+      </nav>
+
+      <Show when={activeView() === 'social-previews'}>
+        <SocialPreviewsSection />
+      </Show>
+      <Show when={activeView() === 'serp-preview'}>
+        <SerpPreviewSection />
+      </Show>
+    </MainPanel>
+  )
+}