refactor(devtools): unify SEO severity handling across components

This commit refactors the SEO tab components to standardize the handling of severity levels for issues. The `Severity` type has been replaced with `SeoSeverity`, and the `severityColor` function has been removed in favor of a centralized `seoSeverityColor` function. This change improves code consistency and maintainability across the `canonical-url-preview`, `heading-structure-preview`, `json-ld-preview`, and `links-preview` components, ensuring a unified approach to displaying issue severity in the SEO analysis features.

Author: abedshaaban

packages/devtools/src/tabs/seo-tab/canonical-url-preview.tsx

@@ -1,11 +1,10 @@
 import { For } from 'solid-js'
 import { Section, SectionDescription } from '@tanstack/devtools-ui'
 import { useStyles } from '../../styles/use-styles'
-
-type Severity = 'error' | 'warning' | 'info'
+import { seoSeverityColor, type SeoSeverity } from './seo-severity'
 
 type Issue = {
-  severity: Severity
+  severity: SeoSeverity
   message: string
 }
 
@@ -19,12 +18,6 @@ type CanonicalData = {
   issues: Array<Issue>
 }
 
-function severityColor(severity: Severity): string {
-  if (severity === 'error') return '#dc2626'
-  if (severity === 'warning') return '#d97706'
-  return '#2563eb'
-}
-
 function getCanonicalData(): CanonicalData {
   const currentUrl = window.location.href
   const current = new URL(currentUrl)
@@ -173,7 +166,7 @@ export function CanonicalUrlPreviewSection() {
         <ul class={styles().serpErrorList}>
           <For each={data.issues}>
             {(issue) => (
-              <li style={{ color: severityColor(issue.severity), 'margin-top': '4px' }}>
+              <li style={{ color: seoSeverityColor(issue.severity), 'margin-top': '4px' }}>
                 [{issue.severity}] {issue.message}
               </li>
             )}

packages/devtools/src/tabs/seo-tab/heading-structure-preview.tsx

@@ -1,8 +1,7 @@
 import { For, Show } from 'solid-js'
 import { Section, SectionDescription } from '@tanstack/devtools-ui'
 import { useStyles } from '../../styles/use-styles'
-
-type Severity = 'error' | 'warning' | 'info'
+import { seoSeverityColor, type SeoSeverity } from './seo-severity'
 
 type HeadingItem = {
   id: string
@@ -12,16 +11,10 @@ type HeadingItem = {
 }
 
 type HeadingIssue = {
-  severity: Severity
+  severity: SeoSeverity
   message: string
 }
 
-function severityColor(severity: Severity): string {
-  if (severity === 'error') return '#dc2626'
-  if (severity === 'warning') return '#d97706'
-  return '#2563eb'
-}
-
 function extractHeadings(): Array<HeadingItem> {
   const nodes = Array.from(
     document.body.querySelectorAll<HTMLHeadingElement>('h1,h2,h3,h4,h5,h6'),
@@ -141,7 +134,7 @@ export function HeadingStructurePreviewSection() {
         <ul class={styles().serpErrorList}>
           <For each={issues}>
             {(issue) => (
-              <li style={{ color: severityColor(issue.severity), 'margin-top': '4px' }}>
+              <li style={{ color: seoSeverityColor(issue.severity), 'margin-top': '4px' }}>
                 [{issue.severity}] {issue.message}
               </li>
             )}

packages/devtools/src/tabs/seo-tab/json-ld-preview.tsx

@@ -1,21 +1,19 @@
 import { For, Show } from 'solid-js'
 import { Section, SectionDescription } from '@tanstack/devtools-ui'
 import { useStyles } from '../../styles/use-styles'
+import { seoSeverityColor, type SeoSeverity } from './seo-severity'
 
 type JsonLdValue = Record<string, unknown>
 
-type IssueSeverity = 'error' | 'warning' | 'info'
-
 type ValidationIssue = {
-  severity: IssueSeverity
+  severity: SeoSeverity
   message: string
 }
 
 type SchemaRule = {
   required: Array<string>
   recommended: Array<string>
   optional: Array<string>
-  allowed: Array<string>
 }
 
 type JsonLdEntry = {
@@ -31,85 +29,41 @@ const SUPPORTED_RULES: Record<string, SchemaRule> = {
     required: ['@context', '@type', 'name', 'url'],
     recommended: ['potentialAction'],
     optional: ['description', 'inLanguage'],
-    allowed: ['name', 'url', 'description', 'inLanguage', 'potentialAction'],
   },
   Organization: {
     required: ['@context', '@type', 'name', 'url'],
     recommended: ['logo', 'sameAs'],
     optional: ['description', 'email', 'telephone'],
-    allowed: [
-      'name',
-      'url',
-      'logo',
-      'sameAs',
-      'description',
-      'email',
-      'telephone',
-    ],
   },
   Person: {
     required: ['@context', '@type', 'name'],
     recommended: ['url', 'sameAs'],
-    optional: ['image', 'jobTitle'],
-    allowed: ['name', 'url', 'sameAs', 'image', 'jobTitle', 'description'],
+    optional: ['image', 'jobTitle', 'description'],
   },
   Article: {
     required: ['@context', '@type', 'headline', 'datePublished', 'author'],
     recommended: ['dateModified', 'image', 'mainEntityOfPage'],
     optional: ['description', 'publisher'],
-    allowed: [
-      'headline',
-      'datePublished',
-      'author',
-      'dateModified',
-      'image',
-      'mainEntityOfPage',
-      'description',
-      'publisher',
-    ],
   },
   Product: {
     required: ['@context', '@type', 'name'],
     recommended: ['image', 'description', 'offers'],
     optional: ['brand', 'sku', 'aggregateRating', 'review'],
-    allowed: [
-      'name',
-      'image',
-      'description',
-      'offers',
-      'brand',
-      'sku',
-      'aggregateRating',
-      'review',
-    ],
   },
   BreadcrumbList: {
     required: ['@context', '@type', 'itemListElement'],
     recommended: [],
     optional: ['name'],
-    allowed: ['itemListElement', 'name'],
   },
   FAQPage: {
     required: ['@context', '@type', 'mainEntity'],
     recommended: [],
     optional: [],
-    allowed: ['mainEntity'],
   },
   LocalBusiness: {
     required: ['@context', '@type', 'name', 'address'],
     recommended: ['telephone', 'openingHours'],
-    optional: ['geo', 'priceRange', 'url', 'sameAs'],
-    allowed: [
-      'name',
-      'address',
-      'telephone',
-      'openingHours',
-      'geo',
-      'priceRange',
-      'url',
-      'sameAs',
-      'image',
-    ],
+    optional: ['geo', 'priceRange', 'url', 'sameAs', 'image'],
   },
 }
 
@@ -222,7 +176,12 @@ function validateEntityByType(entity: JsonLdValue, typeName: string): Array<Vali
     })
   }
 
-  const allowedSet = new Set([...rules.allowed, ...Array.from(RESERVED_KEYS)])
+  const allowedSet = new Set([
+    ...rules.required,
+    ...rules.recommended,
+    ...rules.optional,
+    ...RESERVED_KEYS,
+  ])
   const unknownKeys = Object.keys(entity).filter((key) => !allowedSet.has(key))
   if (unknownKeys.length > 0) {
     issues.push({
@@ -317,12 +276,6 @@ function analyzeJsonLdScripts(): Array<JsonLdEntry> {
   })
 }
 
-function severityColor(severity: IssueSeverity): string {
-  if (severity === 'error') return '#dc2626'
-  if (severity === 'warning') return '#d97706'
-  return '#2563eb'
-}
-
 function getJsonLdScore(entries: Array<JsonLdEntry>): number {
   let errors = 0
   let warnings = 0
@@ -409,7 +362,7 @@ function JsonLdBlock(props: { entry: JsonLdEntry; index: number }) {
           <ul class={styles().serpErrorList}>
             <For each={props.entry.issues}>
               {(issue) => (
-                <li style={{ color: severityColor(issue.severity), 'margin-top': '4px' }}>
+                <li style={{ color: seoSeverityColor(issue.severity), 'margin-top': '4px' }}>
                   [{issue.severity}] {issue.message}
                 </li>
               )}

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

@@ -1,12 +1,12 @@
 import { For, Show } from 'solid-js'
 import { Section, SectionDescription } from '@tanstack/devtools-ui'
 import { useStyles } from '../../styles/use-styles'
+import { seoSeverityColor, type SeoSeverity } from './seo-severity'
 
-type Severity = 'error' | 'warning' | 'info'
 type LinkKind = 'internal' | 'external' | 'non-web' | 'invalid'
 
 type LinkIssue = {
-  severity: Severity
+  severity: SeoSeverity
   message: string
 }
 
@@ -18,12 +18,6 @@ type LinkRow = {
   issues: Array<LinkIssue>
 }
 
-function severityColor(severity: Severity): string {
-  if (severity === 'error') return '#dc2626'
-  if (severity === 'warning') return '#d97706'
-  return '#2563eb'
-}
-
 function classifyLink(anchor: HTMLAnchorElement): LinkRow {
   const href = anchor.getAttribute('href')?.trim() || ''
   const text =
@@ -162,7 +156,7 @@ export function LinksPreviewSection() {
                     <ul class={styles().serpErrorList}>
                       <For each={row.issues}>
                         {(issue) => (
-                          <li style={{ color: severityColor(issue.severity) }}>
+                          <li style={{ color: seoSeverityColor(issue.severity) }}>
                             [{issue.severity}] {issue.message}
                           </li>
                         )}

packages/devtools/src/tabs/seo-tab/seo-severity.ts

@@ -0,0 +1,9 @@
+export type SeoSeverity = 'error' | 'warning' | 'info'
+
+export function seoSeverityColor(severity: SeoSeverity): string {
+  return severity === 'error'
+    ? '#dc2626'
+    : severity === 'warning'
+      ? '#d97706'
+      : '#2563eb'
+}