@tanstack/devtools 0.5.1 → 0.6.1

package/src/tabs/seo-tab.tsx

@@ -0,0 +1,245 @@
+import { For, createSignal } from 'solid-js'
+import {
+  MainPanel,
+  Section,
+  SectionDescription,
+  SectionIcon,
+  SectionTitle,
+} from '@tanstack/devtools-ui'
+import { useStyles } from '../styles/use-styles'
+import { useHeadChanges } from '../hooks/use-head-changes'
+
+type SocialMeta = {
+  title?: string
+  description?: string
+  image?: string
+  url?: string
+}
+
+type SocialReport = {
+  network: string
+  found: Partial<SocialMeta>
+  missing: Array<string>
+}
+
+const SOCIALS = [
+  {
+    network: 'Facebook',
+    tags: [
+      { key: 'og:title', prop: 'title' },
+      { key: 'og:description', prop: 'description' },
+      { key: 'og:image', prop: 'image' },
+      { key: 'og:url', prop: 'url' },
+    ],
+    color: '#4267B2',
+  },
+  {
+    network: 'X/Twitter',
+    tags: [
+      { key: 'twitter:title', prop: 'title' },
+      { key: 'twitter:description', prop: 'description' },
+      { key: 'twitter:image', prop: 'image' },
+      { key: 'twitter:url', prop: 'url' },
+    ],
+    color: '#1DA1F2',
+  },
+  {
+    network: 'LinkedIn',
+    tags: [
+      { key: 'og:title', prop: 'title' },
+      { key: 'og:description', prop: 'description' },
+      { key: 'og:image', prop: 'image' },
+      { key: 'og:url', prop: 'url' },
+    ],
+    color: '#0077B5',
+  },
+  {
+    network: 'Discord',
+    tags: [
+      { key: 'og:title', prop: 'title' },
+      { key: 'og:description', prop: 'description' },
+      { key: 'og:image', prop: 'image' },
+      { key: 'og:url', prop: 'url' },
+    ],
+    color: '#5865F2',
+  },
+  {
+    network: 'Slack',
+    tags: [
+      { key: 'og:title', prop: 'title' },
+      { key: 'og:description', prop: 'description' },
+      { key: 'og:image', prop: 'image' },
+      { key: 'og:url', prop: 'url' },
+    ],
+    color: '#4A154B',
+  },
+  {
+    network: 'Mastodon',
+    tags: [
+      { key: 'og:title', prop: 'title' },
+      { key: 'og:description', prop: 'description' },
+      { key: 'og:image', prop: 'image' },
+      { key: 'og:url', prop: 'url' },
+    ],
+    color: '#6364FF',
+  },
+  {
+    network: 'Bluesky',
+    tags: [
+      { key: 'og:title', prop: 'title' },
+      { key: 'og:description', prop: 'description' },
+      { key: 'og:image', prop: 'image' },
+      { key: 'og:url', prop: 'url' },
+    ],
+    color: '#1185FE',
+  },
+  // Add more networks as needed
+]
+function SocialPreview(props: {
+  meta: SocialMeta
+  color: string
+  network: string
+}) {
+  const styles = useStyles()
+
+  return (
+    <div
+      class={styles().seoPreviewCard}
+      style={{ 'border-color': props.color }}
+    >
+      <div class={styles().seoPreviewHeader} style={{ color: props.color }}>
+        {props.network} Preview
+      </div>
+      {props.meta.image ? (
+        <img
+          src={props.meta.image}
+          alt="Preview"
+          class={styles().seoPreviewImage}
+        />
+      ) : (
+        <div
+          class={styles().seoPreviewImage}
+          style={{
+            background: '#222',
+            color: '#888',
+            display: 'flex',
+            'align-items': 'center',
+            'justify-content': 'center',
+            'min-height': '80px',
+            width: '100%',
+          }}
+        >
+          No Image
+        </div>
+      )}
+      <div class={styles().seoPreviewTitle}>
+        {props.meta.title || 'No Title'}
+      </div>
+      <div class={styles().seoPreviewDesc}>
+        {props.meta.description || 'No Description'}
+      </div>
+      <div class={styles().seoPreviewUrl}>
+        {props.meta.url || window.location.href}
+      </div>
+    </div>
+  )
+}
+export const SeoTab = () => {
+  const [reports, setReports] = createSignal<Array<SocialReport>>(analyzeHead())
+  const styles = useStyles()
+
+  function analyzeHead(): Array<SocialReport> {
+    const metaTags = Array.from(document.head.querySelectorAll('meta'))
+    const reports: Array<SocialReport> = []
+
+    for (const social of SOCIALS) {
+      const found: Partial<SocialMeta> = {}
+      const missing: Array<string> = []
+      for (const tag of social.tags) {
+        const meta = metaTags.find(
+          (m) =>
+            (tag.key.includes('twitter:')
+              ? false
+              : m.getAttribute('property') === tag.key) ||
+            m.getAttribute('name') === tag.key,
+        )
+
+        if (meta && meta.getAttribute('content')) {
+          found[tag.prop as keyof SocialMeta] =
+            meta.getAttribute('content') || undefined
+        } else {
+          missing.push(tag.key)
+        }
+      }
+      reports.push({ network: social.network, found, missing })
+    }
+    return reports
+  }
+
+  useHeadChanges(() => {
+    setReports(analyzeHead())
+  })
+
+  return (
+    <MainPanel withPadding>
+      <Section>
+        <SectionTitle>
+          <SectionIcon>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="m10 9-3 3 3 3" />
+              <path d="m14 15 3-3-3-3" />
+              <path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719" />
+            </svg>
+          </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
+          that are missing.
+        </SectionDescription>
+        <div class={styles().seoPreviewSection}>
+          <For each={reports()}>
+            {(report, i) => {
+              const social = SOCIALS[i()]
+              return (
+                <div>
+                  <SocialPreview
+                    meta={report.found}
+                    color={social!.color}
+                    network={social!.network}
+                  />
+                  {report.missing.length > 0 ? (
+                    <>
+                      <div class={styles().seoMissingTagsSection}>
+                        <strong>Missing tags for {social?.network}:</strong>
+
+                        <ul class={styles().seoMissingTagsList}>
+                          <For each={report.missing}>
+                            {(tag) => (
+                              <li class={styles().seoMissingTag}>{tag}</li>
+                            )}
+                          </For>
+                        </ul>
+                      </div>
+                    </>
+                  ) : null}
+                </div>
+              )
+            }}
+          </For>
+        </div>
+      </Section>
+    </MainPanel>
+  )
+}

package/src/tabs/settings-tab.tsx

@@ -1,5 +1,15 @@
 import { Show, createMemo } from 'solid-js'
-import { Button, Checkbox, Input, Select } from '@tanstack/devtools-ui'
+import {
+  Button,
+  Checkbox,
+  Input,
+  MainPanel,
+  Section,
+  SectionDescription,
+  SectionIcon,
+  SectionTitle,
+  Select,
+} from '@tanstack/devtools-ui'
 import { useDevtoolsSettings } from '../context/use-devtools-context'
 import { uppercaseFirstLetter } from '../utils/sanitize'
 import { useStyles } from '../styles/use-styles'
@@ -27,30 +37,31 @@ export const SettingsTab = () => {
     })
   }
   return (
-    <div class={styles().settingsContainer}>
+    <MainPanel withPadding>
       {/* General Settings */}
-      <div class={styles().settingsSection}>
-        <h3 class={styles().sectionTitle}>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="20"
-            height="20"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class={styles().sectionIcon}
-          >
-            <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" />
-            <circle cx="12" cy="12" r="3" />
-          </svg>
+      <Section>
+        <SectionTitle>
+          <SectionIcon>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" />
+              <circle cx="12" cy="12" r="3" />
+            </svg>
+          </SectionIcon>
           General
-        </h3>
-        <p class={styles().sectionDescription}>
+        </SectionTitle>
+        <SectionDescription>
           Configure general behavior of the devtools panel.
-        </p>
+        </SectionDescription>
         <div class={styles().settingsGroup}>
           <Checkbox
             label="Default open"
@@ -69,32 +80,33 @@ export const SettingsTab = () => {
             checked={settings().hideUntilHover}
           />
         </div>
-      </div>
+      </Section>
 
       {/* URL Flag Settings */}
-      <div class={styles().settingsSection}>
-        <h3 class={styles().sectionTitle}>
-          <svg
-            class={styles().sectionIcon}
-            xmlns="http://www.w3.org/2000/svg"
-            width="20"
-            height="20"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path d="M9 17H7A5 5 0 0 1 7 7h2" />
-            <path d="M15 7h2a5 5 0 1 1 0 10h-2" />
-            <line x1="8" x2="16" y1="12" y2="12" />
-          </svg>
+      <Section>
+        <SectionTitle>
+          <SectionIcon>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M9 17H7A5 5 0 0 1 7 7h2" />
+              <path d="M15 7h2a5 5 0 1 1 0 10h-2" />
+              <line x1="8" x2="16" y1="12" y2="12" />
+            </svg>
+          </SectionIcon>
           URL Configuration
-        </h3>
-        <p class={styles().sectionDescription}>
+        </SectionTitle>
+        <SectionDescription>
           Control when devtools are available based on URL parameters.
-        </p>
+        </SectionDescription>
         <div class={styles().settingsGroup}>
           <Checkbox
             label="Require URL Flag"
@@ -122,38 +134,39 @@ export const SettingsTab = () => {
             </div>
           </Show>
         </div>
-      </div>
+      </Section>
 
       {/* Keyboard Settings */}
-      <div class={styles().settingsSection}>
-        <h3 class={styles().sectionTitle}>
-          <svg
-            class={styles().sectionIcon}
-            xmlns="http://www.w3.org/2000/svg"
-            width="20"
-            height="20"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path d="M10 8h.01" />
-            <path d="M12 12h.01" />
-            <path d="M14 8h.01" />
-            <path d="M16 12h.01" />
-            <path d="M18 8h.01" />
-            <path d="M6 8h.01" />
-            <path d="M7 16h10" />
-            <path d="M8 12h.01" />
-            <rect width="20" height="16" x="2" y="4" rx="2" />
-          </svg>
+      <Section>
+        <SectionTitle>
+          <SectionIcon>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M10 8h.01" />
+              <path d="M12 12h.01" />
+              <path d="M14 8h.01" />
+              <path d="M16 12h.01" />
+              <path d="M18 8h.01" />
+              <path d="M6 8h.01" />
+              <path d="M7 16h10" />
+              <path d="M8 12h.01" />
+              <rect width="20" height="16" x="2" y="4" rx="2" />
+            </svg>
+          </SectionIcon>
           Keyboard
-        </h3>
-        <p class={styles().sectionDescription}>
+        </SectionTitle>
+        <SectionDescription>
           Customize keyboard shortcuts for quick access.
-        </p>
+        </SectionDescription>
         <div class={styles().settingsGroup}>
           <div class={styles().settingsModifiers}>
             <Show keyed when={hotkey()}>
@@ -220,31 +233,32 @@ export const SettingsTab = () => {
           />
           Final shortcut is: {hotkey().join(' + ')}
         </div>
-      </div>
+      </Section>
 
       {/* Position Settings */}
-      <div class={styles().settingsSection}>
-        <h3 class={styles().sectionTitle}>
-          <svg
-            class={styles().sectionIcon}
-            xmlns="http://www.w3.org/2000/svg"
-            width="20"
-            height="20"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" />
-            <circle cx="12" cy="10" r="3" />
-          </svg>
+      <Section>
+        <SectionTitle>
+          <SectionIcon>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" />
+              <circle cx="12" cy="10" r="3" />
+            </svg>
+          </SectionIcon>
           Position
-        </h3>
-        <p class={styles().sectionDescription}>
+        </SectionTitle>
+        <SectionDescription>
           Adjust the position of the trigger button and devtools panel.
-        </p>
+        </SectionDescription>
         <div class={styles().settingsGroup}>
           <div class={styles().settingRow}>
             <Select
@@ -279,7 +293,7 @@ export const SettingsTab = () => {
             />
           </div>
         </div>
-      </div>
-    </div>
+      </Section>
+    </MainPanel>
   )
 }