feat(devtools): add meta description and default favicon styles

This commit enhances the SEO capabilities of the basic example by adding a meta description tag for improved search engine visibility. Additionally, it introduces new styles for a default favicon, ensuring a consistent visual representation when no favicon is provided. This improves user feedback in the SERP preview section.

Author: abedshaaban

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

@@ -251,6 +251,22 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       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;

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

@@ -77,6 +77,9 @@ function getSerpReports(data: SerpData, overflow: SerpOverflow): string[] {
   if (!data.description?.trim()) {
     issues.push('No meta description set on the page.')
   }
+  if (!data.favicon) {
+    issues.push('No favicon or icon set on the page.')
+  }
   if (overflow.titleOverflow) {
     issues.push(
       'The title is wider than 600px and it may not be displayed in full length.',
@@ -157,7 +160,9 @@ export function SerpPreviewSection() {
               alt=""
               class={styles().serpSnippetFavicon}
             />
-          ) : null}
+          ) : (
+            <div class={styles().serpSnippetDefaultFavicon} />
+          )}
           <div class={styles().serpSnippetSiteColumn}>
             <span class={styles().serpSnippetSiteName}>
               {data.siteName || data.url}