@tanstack/devtools 0.5.0 → 0.6.0

package/src/styles/use-styles.ts

@@ -4,12 +4,133 @@ import { tokens } from './tokens'
 import type { TanStackDevtoolsConfig } from '../context/devtools-context'
 import type { Accessor } from 'solid-js'
 
+const mSecondsToCssSeconds = (mSeconds: number) =>
+  `${(mSeconds / 1000).toFixed(2)}s`
+
 const stylesFactory = () => {
   const { colors, font, size, alpha, border } = tokens
   const { fontFamily, size: fontSize } = font
   const css = goober.css
 
   return {
+    seoTabContainer: css`
+      padding: 0;
+      margin: 0 auto;
+      background: ${colors.darkGray[700]};
+      border-radius: 12px;
+      box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
+      overflow-y: auto;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+      width: 100%;
+      overflow-y: auto;
+    `,
+    seoTabTitle: css`
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: ${colors.purple[400]};
+      margin: 0;
+      padding: 1rem 1.5rem 0.5rem 1.5rem;
+      text-align: left;
+      border-bottom: 1px solid ${colors.gray[700]};
+    `,
+    seoTabSection: css`
+      padding: 1.5rem;
+      background: ${colors.darkGray[800]};
+      border: 1px solid ${colors.gray[700]};
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      margin: 1.5rem;
+      margin-bottom: 2rem;
+      border-radius: 0.75rem;
+    `,
+    seoPreviewSection: css`
+      display: flex;
+      flex-direction: row;
+      gap: 16px;
+      margin-bottom: 0;
+      justify-content: flex-start;
+      align-items: flex-start;
+      overflow-x: auto;
+      flex-wrap: wrap;
+      padding-bottom: 0.5rem;
+    `,
+    seoPreviewCard: css`
+      border: 1px solid ${colors.gray[700]};
+      border-radius: 8px;
+      padding: 12px 10px;
+      background: ${colors.darkGray[900]};
+      margin-bottom: 0;
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      min-width: 200px;
+      max-width: 240px;
+      font-size: 0.95rem;
+      gap: 4px;
+    `,
+    seoPreviewHeader: css`
+      font-size: 1rem;
+      font-weight: 500;
+      margin-bottom: 6px;
+      color: ${colors.purple[400]};
+    `,
+    seoPreviewImage: css`
+      max-width: 100%;
+      border-radius: 6px;
+      margin-bottom: 6px;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+      height: 160px;
+    `,
+    seoPreviewTitle: css`
+      font-size: 1rem;
+      font-weight: 600;
+      margin-bottom: 2px;
+      color: ${colors.gray[100]};
+    `,
+    seoPreviewDesc: css`
+      color: ${colors.gray[300]};
+      margin-bottom: 2px;
+      font-size: 0.95rem;
+    `,
+    seoPreviewUrl: css`
+      color: ${colors.gray[500]};
+      font-size: 0.9rem;
+      margin-bottom: 2px;
+      word-break: break-all;
+    `,
+    seoMissingTagsSection: css`
+      margin-top: 4px;
+      font-size: 0.95rem;
+      color: ${colors.red[400]};
+    `,
+    seoMissingTagsList: css`
+      margin: 4px 0 0 0;
+      padding: 0;
+      list-style: none;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      max-width: 240px;
+    `,
+    seoMissingTag: css`
+      background: ${colors.red[500]}22;
+      color: ${colors.red[500]};
+      border-radius: 4px;
+      padding: 1px 6px;
+      font-size: 0.9rem;
+      font-weight: 500;
+    `,
+    seoAllTagsFound: css`
+      color: ${colors.green[500]};
+      font-weight: 500;
+      margin-left: 6px;
+      font-size: 0.95rem;
+    `,
     devtoolsPanelContainer: (
       panelLocation: TanStackDevtoolsConfig['panelLocation'],
       isDetached: boolean,
@@ -231,13 +352,37 @@ const stylesFactory = () => {
       height: 100%;
       overflow: hidden;
     `,
-    pluginsTabSidebar: css`
-      width: ${size[48]};
+
+    pluginsTabDraw: css`
+      width: 0px;
+      height: 100%;
       background-color: ${colors.darkGray[800]};
-      border-right: 1px solid ${colors.gray[700]};
       box-shadow: 0 1px 0 ${colors.gray[700]};
+    `,
+    pluginsTabDrawExpanded: css`
+      width: ${size[48]};
+      border-right: 1px solid ${colors.gray[700]};
+    `,
+    pluginsTabDrawTransition: (mSeconds: number) => {
+      return css`
+        transition: width ${mSecondsToCssSeconds(mSeconds)} ease;
+      `
+    },
+
+    pluginsTabSidebar: css`
+      width: ${size[48]};
       overflow-y: auto;
+      transform: translateX(-100%);
+    `,
+    pluginsTabSidebarExpanded: css`
+      transform: translateX(0);
     `,
+    pluginsTabSidebarTransition: (mSeconds: number) => {
+      return css`
+        transition: transform ${mSecondsToCssSeconds(mSeconds)} ease;
+      `
+    },
+
     pluginName: css`
       font-size: ${fontSize.xs};
       font-family: ${fontFamily.sans};

package/src/tabs/index.tsx

@@ -1,5 +1,6 @@
 import { SettingsTab } from './settings-tab'
 import { PluginsTab } from './plugins-tab'
+import { SeoTab } from './seo-tab'
 
 export const tabs = [
   {
@@ -24,6 +25,30 @@ export const tabs = [
       </svg>
     ),
   },
+  {
+    name: 'SEO',
+    id: 'seo',
+    component: () => <SeoTab />,
+    icon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="lucide lucide-file-search2-icon lucide-file-search-2"
+      >
+        <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
+        <path d="M14 2v4a2 2 0 0 0 2 2h4" />
+        <circle cx="11.5" cy="14.5" r="2.5" />
+        <path d="M13.3 16.3 15 18" />
+      </svg>
+    ),
+  },
   {
     name: 'Settings',
     id: 'settings',

package/src/tabs/plugins-tab.tsx

@@ -1,11 +1,13 @@
 import { For, createEffect } from 'solid-js'
 import clsx from 'clsx'
+import { useDrawContext } from '../context/draw-context'
 import { usePlugins } from '../context/use-devtools-context'
 import { useStyles } from '../styles/use-styles'
 import { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from '../constants'
 
 export const PluginsTab = () => {
   const { plugins, activePlugin, setActivePlugin } = usePlugins()
+  const { expanded, hoverUtils, animationMs } = useDrawContext()
   let activePluginRef: HTMLDivElement | undefined
 
   createEffect(() => {
@@ -17,32 +19,58 @@ export const PluginsTab = () => {
     }
   })
   const styles = useStyles()
+
   return (
     <div class={styles().pluginsTabPanel}>
-      <div class={styles().pluginsTabSidebar}>
-        <For each={plugins()}>
-          {(plugin) => {
-            let pluginHeading: HTMLHeadingElement | undefined
-            createEffect(() => {
-              if (pluginHeading) {
-                typeof plugin.name === 'string'
-                  ? (pluginHeading.textContent = plugin.name)
-                  : plugin.name(pluginHeading)
-              }
-            })
-            return (
-              <div
-                onClick={() => setActivePlugin(plugin.id!)}
-                class={clsx(styles().pluginName, {
-                  active: activePlugin() === plugin.id,
-                })}
-              >
-                <h3 id={PLUGIN_TITLE_CONTAINER_ID} ref={pluginHeading} />
-              </div>
-            )
-          }}
-        </For>
+      <div
+        class={clsx(
+          styles().pluginsTabDraw,
+          {
+            [styles().pluginsTabDrawExpanded]: expanded(),
+          },
+          styles().pluginsTabDrawTransition(animationMs),
+        )}
+        onMouseEnter={() => {
+          hoverUtils.enter()
+        }}
+        onMouseLeave={() => {
+          hoverUtils.leave()
+        }}
+      >
+        <div
+          class={clsx(
+            styles().pluginsTabSidebar,
+            {
+              [styles().pluginsTabSidebarExpanded]: expanded(),
+            },
+            styles().pluginsTabSidebarTransition(animationMs),
+          )}
+        >
+          <For each={plugins()}>
+            {(plugin) => {
+              let pluginHeading: HTMLHeadingElement | undefined
+              createEffect(() => {
+                if (pluginHeading) {
+                  typeof plugin.name === 'string'
+                    ? (pluginHeading.textContent = plugin.name)
+                    : plugin.name(pluginHeading)
+                }
+              })
+              return (
+                <div
+                  onClick={() => setActivePlugin(plugin.id!)}
+                  class={clsx(styles().pluginName, {
+                    active: activePlugin() === plugin.id,
+                  })}
+                >
+                  <h3 id={PLUGIN_TITLE_CONTAINER_ID} ref={pluginHeading} />
+                </div>
+              )
+            }}
+          </For>
+        </div>
       </div>
+
       <div
         id={PLUGIN_CONTAINER_ID}
         ref={activePluginRef}

package/src/tabs/seo-tab.tsx

@@ -0,0 +1,238 @@
+import { For, createSignal } from 'solid-js'
+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 (
+    <div class={styles().seoTabContainer}>
+      <section class={styles().seoTabSection}>
+        <h3 class={styles().sectionTitle}>
+          <svg
+            class={styles().sectionIcon}
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            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>
+          Social previews
+        </h3>
+        <p class={styles().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.
+        </p>
+        <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>
+      {/* Future sections can be added here as <section class={styles().seoTabSection}>...</section> */}
+    </div>
+  )
+}