feat(devtools): enhance SERP preview with truncation logic and overflow 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.

Author: abedshaaban

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

@@ -283,6 +283,23 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       margin: 0;
       line-height: 1.5;
     `,
+    serpMeasureHidden: css`
+      position: absolute;
+      left: -9999px;
+      top: 0;
+      white-space: nowrap;
+      visibility: hidden;
+      pointer-events: none;
+    `,
+    serpReportSection: css`
+      margin-top: 1rem;
+      font-size: 0.875rem;
+      color: ${t(colors.gray[700], colors.gray[300])};
+    `,
+    serpReportItem: css`
+      margin-top: 0.5rem;
+      color: ${t(colors.yellow[700], colors.yellow[400])};
+    `,
     devtoolsPanelContainer: (
       panelLocation: TanStackDevtoolsConfig['panelLocation'],
       isDetached: boolean,

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

@@ -1,8 +1,26 @@
-import { createSignal } from 'solid-js'
+import { createEffect, createSignal } from 'solid-js'
 import { useStyles } from '../../styles/use-styles'
 import { useHeadChanges } from '../../hooks/use-head-changes'
 import { Section, SectionDescription } from '@tanstack/devtools-ui'
 
+const TITLE_MAX_WIDTH_PX = 600
+const DESCRIPTION_MAX_WIDTH_PX = 960
+const ELLIPSIS = '...'
+
+function truncateToWidth(
+  el: HTMLDivElement,
+  text: string,
+  maxPx: number,
+): string {
+  el.textContent = text
+  if (el.offsetWidth <= maxPx) return text
+  for (let i = text.length - 1; i >= 0; i--) {
+    el.textContent = text.slice(0, i) + ELLIPSIS
+    if (el.offsetWidth <= maxPx) return text.slice(0, i) + ELLIPSIS
+  }
+  return ELLIPSIS
+}
+
 type SerpData = {
   title: string
   description: string
@@ -50,12 +68,48 @@ function getSerpFromHead(): SerpData {
 
 export function SerpPreviewSection() {
   const [serp, setSerp] = createSignal<SerpData>(getSerpFromHead())
+  const [titleOverflow, setTitleOverflow] = createSignal(false)
+  const [descriptionOverflow, setDescriptionOverflow] = createSignal(false)
+  const [displayTitle, setDisplayTitle] = createSignal('')
+  const [displayDescription, setDisplayDescription] = createSignal('')
+  const [titleMeasureEl, setTitleMeasureEl] = createSignal<
+    HTMLDivElement | undefined
+  >(undefined)
+  const [descMeasureEl, setDescMeasureEl] = createSignal<
+    HTMLDivElement | undefined
+  >(undefined)
   const styles = useStyles()
 
   useHeadChanges(() => {
     setSerp(getSerpFromHead())
   })
 
+  createEffect(() => {
+    const titleEl = titleMeasureEl()
+    const descEl = descMeasureEl()
+    const data = serp()
+    if (!titleEl || !descEl) return
+
+    const titleText = data.title || 'No title'
+    const descText = data.description || 'No meta description.'
+
+    const truncatedTitle = truncateToWidth(
+      titleEl,
+      titleText,
+      TITLE_MAX_WIDTH_PX,
+    )
+    setDisplayTitle(truncatedTitle)
+    setTitleOverflow(truncatedTitle !== titleText)
+
+    const truncatedDesc = truncateToWidth(
+      descEl,
+      descText,
+      DESCRIPTION_MAX_WIDTH_PX,
+    )
+    setDisplayDescription(truncatedDesc)
+    setDescriptionOverflow(truncatedDesc !== descText)
+  })
+
   const data = serp()
 
   return (
@@ -81,12 +135,38 @@ export function SerpPreviewSection() {
           </div>
         </div>
         <div class={styles().serpSnippetTitle}>
-          {data.title || 'No title'}
+          {displayTitle() || data.title || 'No title'}
         </div>
+        <div
+          ref={setTitleMeasureEl}
+          class={`${styles().serpSnippetTitle} ${styles().serpMeasureHidden}`}
+          aria-hidden="true"
+        />
         <div class={styles().serpSnippetDesc}>
-          {data.description || 'No meta description.'}
+          {displayDescription() || data.description || 'No meta description.'}
         </div>
+        <div
+          ref={setDescMeasureEl}
+          class={`${styles().serpSnippetDesc} ${styles().serpMeasureHidden}`}
+          aria-hidden="true"
+        />
       </div>
+      {(titleOverflow() || descriptionOverflow()) && (
+        <div class={styles().serpReportSection}>
+          {titleOverflow() && (
+            <div class={styles().serpReportItem}>
+              The title is wider than 600px and it may not be displayed in full
+              length.
+            </div>
+          )}
+          {descriptionOverflow() && (
+            <div class={styles().serpReportItem}>
+              The meta description may get trimmed at ~960 pixels on desktop
+              and at ~680px on mobile. Keep it below ~158 characters.
+            </div>
+          )}
+        </div>
+      )}
     </Section>
   )
 }