Function SerpPreviewSection

packages/devtools/src/tabs/seo-tab/serp-preview.tsx:200–256

()

}

export function SerpPreviewSection() {
  const [serp, setSerp] = createSignal<SerpData>(getSerpFromHead())

  createHeadChanges(() => {
    setSerp(getSerpFromHead())
  })

  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)

    return {
      displayTitle,
      displayDescription,
      overflow: {
        titleOverflow: titleText.length > TITLE_MAX_CHARS,
        descriptionOverflow: descText.length > DESCRIPTION_MAX_CHARS,
        descriptionOverflowMobile:
          descText.length > DESCRIPTION_MOBILE_MAX_CHARS,
      },
    }
  })

  return (
    <Section>
      <SectionDescription>
        See how your title tag and meta description may look in Google search
        results. Data is read from the current page.
      </SectionDescription>
      <For each={SERP_PREVIEWS}>
        {(preview) => {
          const issues = createMemo(() =>
            getSerpIssues(serp(), serpPreviewState().overflow, [
              ...COMMON_CHECKS,
              ...preview.extraChecks,
            ]),
          )

          return (
            <SerpSnippetPreview
              data={serp()}
              displayTitle={serpPreviewState().displayTitle}
              displayDescription={serpPreviewState().displayDescription}
              isMobile={preview.isMobile}
              label={preview.label}
              issues={issues()}
            />
          )
        }}
      </For>
    </Section>
  )
}