feat(devtools): enhance SERP and Social Previews with new styles and 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.

Author: abedshaaban

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

@@ -231,6 +231,42 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       padding: 0 10px 8px 10px;
       font-size: 0.875rem;
     `,
+    serpSnippet: css`
+      border: 1px solid ${t(colors.gray[200], colors.gray[800])};
+      border-radius: 8px;
+      padding: 1rem 1.25rem;
+      background: ${t(colors.white, colors.darkGray[900])};
+      max-width: 600px;
+      font-family: ${fontFamily.sans};
+    `,
+    serpSnippetUrlRow: css`
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin-bottom: 4px;
+      font-size: 0.875rem;
+      color: ${t(colors.gray[600], colors.gray[400])};
+    `,
+    serpSnippetFavicon: css`
+      width: 16px;
+      height: 16px;
+      border-radius: 2px;
+      flex-shrink: 0;
+      object-fit: contain;
+    `,
+    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;
+    `,
     devtoolsPanelContainer: (
       panelLocation: TanStackDevtoolsConfig['panelLocation'],
       isDetached: boolean,

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

@@ -7,7 +7,8 @@ import { SerpPreviewSection } from './serp-preview'
 type SeoSubView = 'social-previews' | 'serp-preview'
 
 export const SeoTab = () => {
-  const [activeView, setActiveView] = createSignal<SeoSubView>('social-previews')
+  const [activeView, setActiveView] =
+    createSignal<SeoSubView>('social-previews')
   const styles = useStyles()
 
   return (
@@ -28,11 +29,12 @@ export const SeoTab = () => {
           SERP Preview
         </button>
       </nav>
+
       <Show when={activeView() === 'social-previews'}>
-        <SocialPreviewsSection noTitle />
+        <SocialPreviewsSection />
       </Show>
       <Show when={activeView() === 'serp-preview'}>
-        <SerpPreviewSection noTitle />
+        <SerpPreviewSection />
       </Show>
     </MainPanel>
   )

packages/devtools/src/tabs/seo-tab/serp-preview.tsx

@@ -1,37 +1,86 @@
-import {
-  Section,
-  SectionDescription,
-  SectionIcon,
-  SectionTitle,
-} from '@tanstack/devtools-ui'
-import { PageSearch } from '@tanstack/devtools-ui/icons'
-
-const DUMMY_SERP = {
-  title: 'Example Page Title - Your Site Name',
-  description:
-    'This is a short meta description that shows how your page might appear in Google search results. Keep it under 160 characters.',
-  url: 'https://example.com/page-path',
+import { createSignal } from 'solid-js'
+import { useStyles } from '../../styles/use-styles'
+import { useHeadChanges } from '../../hooks/use-head-changes'
+import { Section, SectionDescription } from '@tanstack/devtools-ui'
+
+type SerpData = {
+  title: string
+  description: string
+  siteName: string
+  favicon: string | null
+  url: string
 }
 
-export function SerpPreviewSection(props: { noTitle?: boolean } = {}) {
+function getSerpFromHead(): SerpData {
+  const title = document.title || ''
+  const url = typeof window !== 'undefined' ? window.location.href : ''
+
+  const metaTags = Array.from(document.head.querySelectorAll('meta'))
+  const descriptionMeta = metaTags.find(
+    (m) => m.getAttribute('name')?.toLowerCase() === 'description',
+  )
+  const description =
+    descriptionMeta?.getAttribute('content')?.trim() || ''
+
+  const siteNameMeta = metaTags.find(
+    (m) => m.getAttribute('property') === 'og:site_name',
+  )
+  const siteName =
+    siteNameMeta?.getAttribute('content')?.trim() ||
+    (typeof window !== 'undefined'
+      ? window.location.hostname.replace(/^www\./, '')
+      : '')
+
+  const linkTags = Array.from(document.head.querySelectorAll('link'))
+  const iconLink = linkTags.find(
+    (l) =>
+      l.getAttribute('rel')?.toLowerCase().split(/\s+/).includes('icon'),
+  )
+  let favicon: string | null = iconLink?.getAttribute('href') || null
+  if (favicon && typeof window !== 'undefined') {
+    try {
+      favicon = new URL(favicon, url).href
+    } catch {
+      favicon = null
+    }
+  }
+
+  return { title, description, siteName, favicon, url }
+}
+
+export function SerpPreviewSection() {
+  const [serp, setSerp] = createSignal<SerpData>(getSerpFromHead())
+  const styles = useStyles()
+
+  useHeadChanges(() => {
+    setSerp(getSerpFromHead())
+  })
+
+  const data = serp()
+
   return (
     <Section>
-      {!props.noTitle && (
-        <SectionTitle>
-          <SectionIcon>
-            <PageSearch />
-          </SectionIcon>
-          SERP Preview
-        </SectionTitle>
-      )}
       <SectionDescription>
-        See how your title tag and meta description to see your website's SERP
-        snippet preview in Google search results.
+        See how your title tag and meta description may look in Google search
+        results. Data is read from the current page.
       </SectionDescription>
-      <div>
-        <p>{DUMMY_SERP.title}</p>
-        <p>{DUMMY_SERP.description}</p>
-        <p>{DUMMY_SERP.url}</p>
+      <div class={styles().serpSnippet}>
+        <div class={styles().serpSnippetUrlRow}>
+          {data.favicon ? (
+            <img
+              src={data.favicon}
+              alt=""
+              class={styles().serpSnippetFavicon}
+            />
+          ) : null}
+          <span>{data.siteName || data.url}</span>
+        </div>
+        <div class={styles().serpSnippetTitle}>
+          {data.title || 'No title'}
+        </div>
+        <div class={styles().serpSnippetDesc}>
+          {data.description || 'No meta description.'}
+        </div>
       </div>
     </Section>
   )

packages/devtools/src/tabs/seo-tab/social-previews.tsx

@@ -1,13 +1,7 @@
 import { createSignal, For } from 'solid-js'
 import { useStyles } from '../../styles/use-styles'
 import { useHeadChanges } from '../../hooks/use-head-changes'
-import {
-  Section,
-  SectionDescription,
-  SectionIcon,
-  SectionTitle,
-} from '@tanstack/devtools-ui'
-import { SocialBubble } from '@tanstack/devtools-ui/icons'
+import { Section, SectionDescription } from '@tanstack/devtools-ui'
 
 const SOCIALS = [
   {
@@ -146,7 +140,7 @@ function SocialPreview(props: {
   )
 }
 
-export function SocialPreviewsSection(props: { noTitle?: boolean } = {}) {
+export function SocialPreviewsSection() {
   const [reports, setReports] = createSignal<Array<SocialReport>>(analyzeHead())
   const styles = useStyles()
 
@@ -184,14 +178,6 @@ export function SocialPreviewsSection(props: { noTitle?: boolean } = {}) {
 
   return (
     <Section>
-      {!props.noTitle && (
-        <SectionTitle>
-          <SectionIcon>
-            <SocialBubble />
-          </SectionIcon>
-          Social previews
-        </SectionTitle>
-      )}
       <SectionDescription>
         See how your current page will look when shared on popular social
         networks. The tool checks for essential meta tags and highlights any