From b8026517ae3a64df9bc59640301cdd09585aaee0 Mon Sep 17 00:00:00 2001
From: arashsheyda <sheidaeearash1999@gmail.com>
Date: Tue, 2 May 2023 10:53:57 +0300
Subject: [PATCH 01/14] feat: experimental seo page

---
 .../client/components/SeoSocialCards.vue      | 139 ++++++++++++++
 .../devtools/client/components/docs/seo.md    |   8 +
 .../devtools/client/composables/client.ts     |   5 +
 .../devtools/client/pages/modules/seo.vue     | 176 ++++++++++++++++++
 4 files changed, 328 insertions(+)
 create mode 100644 packages/devtools/client/components/SeoSocialCards.vue
 create mode 100644 packages/devtools/client/components/docs/seo.md
 create mode 100644 packages/devtools/client/pages/modules/seo.vue

diff --git a/packages/devtools/client/components/SeoSocialCards.vue b/packages/devtools/client/components/SeoSocialCards.vue
new file mode 100644
index 000000000..1c953aa21
--- /dev/null
+++ b/packages/devtools/client/components/SeoSocialCards.vue
@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import type { HeadTag } from '@vueuse/head'
+
+const props = defineProps({
+  tags: {
+    type: Array as PropType<HeadTag[]>,
+    required: true,
+  },
+})
+
+const groups = [
+  {
+    name: 'facebook',
+    tag: 'og',
+    color: 'text-[#3b5998]',
+    icon: 'carbon-logo-facebook',
+  },
+  {
+    name: 'twitter',
+    tag: 'twitter',
+    color: 'text-[#00acee]',
+    icon: 'carbon-logo-twitter',
+  },
+  {
+    name: 'linkedin',
+    tag: 'og',
+    color: 'text-[#0072b1]',
+    icon: 'carbon-logo-linkedin',
+  },
+  {
+    name: 'google',
+    tag: null,
+    color: 'text-[#4285f4]',
+    icon: 'carbon-logo-google',
+  },
+]
+
+const selectedGroup = ref(groups[0])
+
+const url = window.location.host
+const urlOrigin = window.location.origin
+
+const metaProps = computed(() => {
+  const result = props.tags?.reduce((accumulator: any, currentTag) => {
+    const tag = currentTag.tag
+
+    if (!selectedGroup.value.tag) {
+      if (tag === 'meta' && !currentTag.props.name?.includes(':'))
+        accumulator[currentTag.props.name] = currentTag.props.content
+
+      else if (tag === 'title')
+        accumulator.title = currentTag.textContent
+
+      else if (tag === 'link' && currentTag.props.rel === 'icon')
+        accumulator.icon = currentTag.props.href
+    }
+
+    else if (currentTag.props.name?.startsWith(`${selectedGroup.value.tag}:`)) {
+      accumulator[currentTag.props.name.replace(`${selectedGroup.value.tag}:`, '')] = currentTag.props.content
+    }
+
+    return accumulator
+  }, {})
+
+  return result ?? {}
+})
+</script>
+
+<template>
+  <div border="b base" pb4>
+    <div mb2 flex justify-between>
+      <NButton
+        v-for="group of groups"
+        :key="group.name"
+        @click="selectedGroup = group"
+      >
+        <NIcon
+          :icon="group.icon"
+          h-5 w-5
+          :class="group.name === selectedGroup.name ? selectedGroup.color : ''"
+        />
+      </NButton>
+    </div>
+    <div v-if="Object.keys(metaProps).length" border="~ base">
+      <div v-if="selectedGroup.name === 'google'" p4>
+        <div mb1 flex items-center>
+          <img v-if="metaProps?.icon" width="35" mr2 rounded-full bg-white p2 :src="metaProps?.icon">
+          <div flex="~ col">
+            <div>{{ url }}</div>
+            <small>{{ urlOrigin }}</small>
+          </div>
+        </div>
+        <p text-lg>
+          {{ metaProps?.title }}
+        </p>
+        <div text-secondary>
+          {{ metaProps?.description }}
+        </div>
+      </div>
+      <template v-else>
+        <img :src="metaProps?.image" :alt="metaProps?.image">
+        <div v-if="selectedGroup.name === 'facebook'" p2>
+          <small>
+            {{ url }}
+          </small>
+          <p text-lg font-bold>
+            {{ metaProps?.title }}
+          </p>
+          <div text-sm text-secondary>
+            {{ metaProps?.description }}
+          </div>
+        </div>
+        <div v-else-if="selectedGroup.name === 'twitter'" p2>
+          <p text-lg font-bold>
+            {{ metaProps?.title }}
+          </p>
+          <div text-sm>
+            {{ metaProps?.description }}
+          </div>
+          <small>
+            {{ url }}
+          </small>
+        </div>
+        <div v-else-if="selectedGroup.name === 'linkedin'" p2>
+          <div text-lg font-bold>
+            {{ metaProps?.title }}
+          </div>
+          <small>
+            {{ url }}
+          </small>
+        </div>
+      </template>
+    </div>
+    <div v-else text-center text-gray-500>
+      <div mb2 min-h-30 w-full bg-active />
+      No "{{ selectedGroup.name }}" meta tags found
+    </div>
+  </div>
+</template>
diff --git a/packages/devtools/client/components/docs/seo.md b/packages/devtools/client/components/docs/seo.md
new file mode 100644
index 000000000..44cb69f2b
--- /dev/null
+++ b/packages/devtools/client/components/docs/seo.md
@@ -0,0 +1,8 @@
+# SEO
+
+Nuxt provides several different ways to manage your meta tags using `@vueuse/head`. Improve your Nuxt app's SEO with powerful head config, composables and components.
+
+[Learn more on the documentation](https://nuxt.com/docs/getting-started/seo-meta)
+
+
+<!-- and maybe also add reference to SEO modules(https://nuxt.com/modules?category=SEO) ? -->
diff --git a/packages/devtools/client/composables/client.ts b/packages/devtools/client/composables/client.ts
index 8043cef6f..1940d6747 100644
--- a/packages/devtools/client/composables/client.ts
+++ b/packages/devtools/client/composables/client.ts
@@ -18,6 +18,11 @@ export function useClientRouter() {
   return computed(() => client.value?.nuxt.vueApp.config.globalProperties?.$router)
 }
 
+export function useClientHead() {
+  const client = useClient()
+  return computed(() => client.value?.nuxt.vueApp.config.globalProperties?.$head)
+}
+
 export function useComponentInspectorData() {
   return useState<VueInspectorData>('devtools-component-inspector-data')
 }
diff --git a/packages/devtools/client/pages/modules/seo.vue b/packages/devtools/client/pages/modules/seo.vue
new file mode 100644
index 000000000..1a870885e
--- /dev/null
+++ b/packages/devtools/client/pages/modules/seo.vue
@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import Fuse from 'fuse.js'
+import type { HeadTag } from '@vueuse/head'
+
+definePageMeta({
+  icon: 'carbon-cloud-monitoring',
+  title: 'SEO',
+  layout: 'full',
+  category: 'analyze',
+  experimental: true,
+  show: () => !!useClient().value,
+})
+
+// TODO:
+const tagList = [
+  {
+    name: 'main',
+    icon: 'carbon-tag-group',
+    tags: [
+      'lang',
+      'title',
+      'description',
+      'keywords',
+      'favicon',
+      'viewport',
+      'robots',
+    ],
+  },
+  {
+    name: 'og',
+    icon: 'carbon-logo-facebook',
+    tags: [
+      'og:title',
+      'og:description',
+      'og:image',
+      'og:url',
+      'og:site_name',
+      'og:type',
+      'og:locale',
+    ],
+  },
+  {
+    name: 'twitter',
+    icon: 'carbon-logo-twitter',
+    tags: [
+      'twitter:card',
+      'twitter:site',
+      'twitter:creator',
+      'twitter:title',
+      'twitter:description',
+      'twitter:image',
+      'twitter:image:alt',
+    ],
+  },
+  {
+    name: 'other',
+    icon: 'carbon-tag-export',
+    tags: [
+      'apple-touch-icon',
+      'theme-color',
+      'copyright',
+      'author',
+    ],
+  },
+]
+
+const head = useClientHead()
+
+const headTags = computedAsync<HeadTag[]>(async () => {
+  return await head.value.resolveTags()
+})
+
+const search = ref('')
+const fuse = computed(() => new Fuse(headTags.value || [], {
+  keys: [
+    'tag',
+    'props.name',
+    'props.content',
+  ],
+}))
+const filtered = computed(() => {
+  const result = search.value
+    ? fuse.value.search(search.value).map(i => i.item)
+    : (headTags.value || [])
+  return result
+})
+
+function getTags(tags: string[]) {
+  return tags.filter(tag => !headTags.value?.some((item) => {
+    if (item.tag === 'meta')
+      return item.props.name?.includes(tag)
+    if (item.tag === 'title')
+      return tag === 'title'
+    if (item.tag === 'htmlAttrs') {
+      if (tag === 'lang')
+        return item.props.lang
+    }
+    if (item.tag === 'link') {
+      if (item.props.rel === 'icon')
+        return tag === 'favicon'
+    }
+    return false
+  }))
+}
+
+const missingTags = computed(() => {
+  return tagList.map(group => ({
+    name: group.name,
+    icon: group.icon,
+    tags: getTags(group.tags),
+  })).filter(group => group.tags.length)
+})
+
+const missingTagsCount = computed(() => missingTags.value.reduce((acc, cur) => acc + cur.tags.length, 0))
+
+async function refresh() {
+  headTags.value = await head.value.resolveTags()
+}
+</script>
+
+<template>
+  <PanelLeftRight storage-key="tab-seo">
+    <template #left>
+      <div border="r base" px4 py3>
+        <SeoSocialCards v-if="headTags" :tags="headTags" />
+        <NSectionBlock v-if="missingTagsCount" :text="`Missing Tags (${missingTagsCount})`" icon="carbon:warning-filled" :padding="false">
+          <NSectionBlock v-for="group in missingTags" :key="group.name" :text="`${group.name} (${group.tags.length})`" :icon="group.icon" :open="false">
+            <NCard v-for="tag of group.tags" :key="tag" mb4 flex items-center justify-between p4>
+              <div flex items-center>
+                <NIcon icon="carbon:warning-filled" mr2 bg-red />
+                {{ tag }}
+              </div>
+              <span class="text-gray-400">
+                Missing
+              </span>
+            </NCard>
+          </NSectionBlock>
+        </NSectionBlock>
+      </div>
+    </template>
+    <template #right>
+      <div bg-active>
+        <Navbar v-model:search="search" no-padding px4 pb2 pt4>
+          <template #actions>
+            <div flex-none flex="~ gap4">
+              <NButton n="green" title="Refresh Data" @click="refresh">
+                <NIcon icon="carbon:reset" />
+              </NButton>
+            </div>
+          </template>
+          <div op50>
+            <span v-if="search">{{ filtered.length }} matched · </span>
+            <span>{{ headTags?.length }} tags in total</span>
+          </div>
+        </Navbar>
+        <NSectionBlock text="Tags" icon="carbon:checkmark-filled">
+          <NCard v-for="item, index of filtered" :key="index" mb4 flex items-center justify-between p4>
+            <div flex items-center>
+              <NIcon icon="carbon:checkmark-filled" mr2 bg-green />
+              {{ item.props?.name ?? Object.keys(item.props)[0] ?? item.tag }}
+            </div>
+            <div text-end class="max-w-4/5">
+              {{ item.props?.content ?? item.textContent ?? JSON.stringify(item.props) }}
+            </div>
+          </NCard>
+          <div v-if="!filtered.length" py4 text-center text-gray-400>
+            No tags found
+          </div>
+        </NSectionBlock>
+      </div>
+    </template>
+  </PanelLeftRight>
+  <HelpFab>
+    <DocsSeo />
+  </HelpFab>
+</template>

From 9dac8ad06da1d54481e99e42d398778f22088b3d Mon Sep 17 00:00:00 2001
From: arashsheyda <sheidaeearash1999@gmail.com>
Date: Tue, 2 May 2023 11:05:06 +0300
Subject: [PATCH 02/14] chore

---
 packages/devtools/client/components/SeoSocialCards.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/devtools/client/components/SeoSocialCards.vue b/packages/devtools/client/components/SeoSocialCards.vue
index 1c953aa21..186dcccd0 100644
--- a/packages/devtools/client/components/SeoSocialCards.vue
+++ b/packages/devtools/client/components/SeoSocialCards.vue
@@ -84,7 +84,7 @@ const metaProps = computed(() => {
     <div v-if="Object.keys(metaProps).length" border="~ base">
       <div v-if="selectedGroup.name === 'google'" p4>
         <div mb1 flex items-center>
-          <img v-if="metaProps?.icon" width="35" mr2 rounded-full bg-white p2 :src="metaProps?.icon">
+          <img v-if="metaProps.icon" width="35" mr2 rounded-full bg-white p2 :src="metaProps.icon">
           <div flex="~ col">
             <div>{{ url }}</div>
             <small>{{ urlOrigin }}</small>
@@ -98,7 +98,7 @@ const metaProps = computed(() => {
         </div>
       </div>
       <template v-else>
-        <img :src="metaProps?.image" :alt="metaProps?.image">
+        <img :src="metaProps.image" :alt="metaProps.image">
         <div v-if="selectedGroup.name === 'facebook'" p2>
           <small>
             {{ url }}

From 17ca91004f48f85c7c35b741750812ac54bad6d3 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 2 May 2023 16:09:45 +0200
Subject: [PATCH 03/14] feat: refactor cards preview

---
 .../client/components/SeoSocialCards.vue      | 158 ++----
 .../components/social/SocialFacebook.vue      |  30 +
 .../components/social/SocialLinkedin.vue      |  24 +
 .../components/social/SocialTwitter.vue       |  30 +
 .../devtools/client/composables/client.ts     |   3 +-
 .../devtools/client/pages/modules/assets.vue  |   1 +
 .../client/pages/modules/components.vue       |   1 +
 .../devtools/client/pages/modules/seo.vue     | 104 ++--
 packages/devtools/src/types/ui-state.ts       |   9 +
 playgrounds/tab-seo/.npmrc                    |   2 +
 playgrounds/tab-seo/app.vue                   |  34 ++
 playgrounds/tab-seo/components/GlobalNav.vue  |  19 +
 playgrounds/tab-seo/nuxt.config.ts            |   6 +
 playgrounds/tab-seo/package.json              |  15 +
 playgrounds/tab-seo/pages/bar.vue             |  11 +
 playgrounds/tab-seo/pages/dynamic-[name].vue  |  11 +
 playgrounds/tab-seo/pages/foo.vue             |  11 +
 playgrounds/tab-seo/pages/index.vue           |  25 +
 playgrounds/tab-seo/tsconfig.json             |   4 +
 pnpm-lock.yaml                                | 517 ++----------------
 pnpm-workspace.yaml                           |   1 +
 21 files changed, 375 insertions(+), 641 deletions(-)
 create mode 100644 packages/devtools/client/components/social/SocialFacebook.vue
 create mode 100644 packages/devtools/client/components/social/SocialLinkedin.vue
 create mode 100644 packages/devtools/client/components/social/SocialTwitter.vue
 create mode 100644 playgrounds/tab-seo/.npmrc
 create mode 100644 playgrounds/tab-seo/app.vue
 create mode 100644 playgrounds/tab-seo/components/GlobalNav.vue
 create mode 100644 playgrounds/tab-seo/nuxt.config.ts
 create mode 100644 playgrounds/tab-seo/package.json
 create mode 100644 playgrounds/tab-seo/pages/bar.vue
 create mode 100644 playgrounds/tab-seo/pages/dynamic-[name].vue
 create mode 100644 playgrounds/tab-seo/pages/foo.vue
 create mode 100644 playgrounds/tab-seo/pages/index.vue
 create mode 100644 playgrounds/tab-seo/tsconfig.json

diff --git a/packages/devtools/client/components/SeoSocialCards.vue b/packages/devtools/client/components/SeoSocialCards.vue
index 186dcccd0..626419598 100644
--- a/packages/devtools/client/components/SeoSocialCards.vue
+++ b/packages/devtools/client/components/SeoSocialCards.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import type { HeadTag } from '@vueuse/head'
+import type { HeadTag } from '@unhead/vue'
+import type { SocialPreviewResolved } from '../../src/types'
 
 const props = defineProps({
   tags: {
@@ -8,132 +9,53 @@ const props = defineProps({
   },
 })
 
-const groups = [
-  {
-    name: 'facebook',
-    tag: 'og',
-    color: 'text-[#3b5998]',
-    icon: 'carbon-logo-facebook',
-  },
-  {
-    name: 'twitter',
-    tag: 'twitter',
-    color: 'text-[#00acee]',
-    icon: 'carbon-logo-twitter',
-  },
-  {
-    name: 'linkedin',
-    tag: 'og',
-    color: 'text-[#0072b1]',
-    icon: 'carbon-logo-linkedin',
-  },
-  {
-    name: 'google',
-    tag: null,
-    color: 'text-[#4285f4]',
-    icon: 'carbon-logo-google',
-  },
+const types = [
+  'twitter',
+  'facebook',
+  'linkedin',
 ]
 
-const selectedGroup = ref(groups[0])
-
-const url = window.location.host
-const urlOrigin = window.location.origin
-
-const metaProps = computed(() => {
-  const result = props.tags?.reduce((accumulator: any, currentTag) => {
-    const tag = currentTag.tag
-
-    if (!selectedGroup.value.tag) {
-      if (tag === 'meta' && !currentTag.props.name?.includes(':'))
-        accumulator[currentTag.props.name] = currentTag.props.content
-
-      else if (tag === 'title')
-        accumulator.title = currentTag.textContent
-
-      else if (tag === 'link' && currentTag.props.rel === 'icon')
-        accumulator.icon = currentTag.props.href
-    }
-
-    else if (currentTag.props.name?.startsWith(`${selectedGroup.value.tag}:`)) {
-      accumulator[currentTag.props.name.replace(`${selectedGroup.value.tag}:`, '')] = currentTag.props.content
-    }
-
-    return accumulator
-  }, {})
-
-  return result ?? {}
+const selected = ref(types[0])
+
+const card = computed((): SocialPreviewResolved => {
+  return {
+    url: window.location.host,
+    title: props.tags.find(tag => tag.tag === 'title')?.textContent,
+    image: props.tags.find(tag => tag.tag === 'meta' && tag.props.property === 'og:image')?.props.content,
+    imageAlt: props.tags.find(tag => tag.tag === 'meta' && tag.props.property === 'og:image:alt')?.props.content,
+    description: props.tags.find(tag => tag.tag === 'meta' && tag.props.property === 'og:description')?.props.content,
+    favicon: props.tags.find(tag => tag.tag === 'link' && tag.props.rel === 'icon')?.props.href,
+  }
 })
 </script>
 
 <template>
-  <div border="b base" pb4>
-    <div mb2 flex justify-between>
-      <NButton
-        v-for="group of groups"
-        :key="group.name"
-        @click="selectedGroup = group"
-      >
-        <NIcon
-          :icon="group.icon"
-          h-5 w-5
-          :class="group.name === selectedGroup.name ? selectedGroup.color : ''"
-        />
-      </NButton>
-    </div>
-    <div v-if="Object.keys(metaProps).length" border="~ base">
-      <div v-if="selectedGroup.name === 'google'" p4>
-        <div mb1 flex items-center>
-          <img v-if="metaProps.icon" width="35" mr2 rounded-full bg-white p2 :src="metaProps.icon">
-          <div flex="~ col">
-            <div>{{ url }}</div>
-            <small>{{ urlOrigin }}</small>
-          </div>
-        </div>
-        <p text-lg>
-          {{ metaProps?.title }}
-        </p>
-        <div text-secondary>
-          {{ metaProps?.description }}
-        </div>
-      </div>
-      <template v-else>
-        <img :src="metaProps.image" :alt="metaProps.image">
-        <div v-if="selectedGroup.name === 'facebook'" p2>
-          <small>
-            {{ url }}
-          </small>
-          <p text-lg font-bold>
-            {{ metaProps?.title }}
-          </p>
-          <div text-sm text-secondary>
-            {{ metaProps?.description }}
+  <div h-full w-525px flex="~ col">
+    <div flex="~ wrap" w-full flex-none>
+      <template v-for="name, idx of types" :key="idx">
+        <button
+          px4 py2 border="r base"
+          hover="bg-active"
+          :class="name === selected ? '' : 'border-b'"
+          @click="selected = name"
+        >
+          <div :class="name === selected ? '' : 'op30' " capitalize>
+            {{ name }}
           </div>
-        </div>
-        <div v-else-if="selectedGroup.name === 'twitter'" p2>
-          <p text-lg font-bold>
-            {{ metaProps?.title }}
-          </p>
-          <div text-sm>
-            {{ metaProps?.description }}
-          </div>
-          <small>
-            {{ url }}
-          </small>
-        </div>
-        <div v-else-if="selectedGroup.name === 'linkedin'" p2>
-          <div text-lg font-bold>
-            {{ metaProps?.title }}
-          </div>
-          <small>
-            {{ url }}
-          </small>
-        </div>
+        </button>
       </template>
+      <div border="b base" flex-auto />
     </div>
-    <div v-else text-center text-gray-500>
-      <div mb2 min-h-30 w-full bg-active />
-      No "{{ selectedGroup.name }}" meta tags found
+    <div flex="~ items-center justify-center" flex-auto>
+      <div v-if="selected === 'facebook'">
+        <SocialFacebook :card="card" />
+      </div>
+      <div v-else-if="selected === 'twitter'">
+        <SocialTwitter :card="card" />
+      </div>
+      <div v-else-if="selected === 'linkedin'">
+        <SocialLinkedin :card="card" />
+      </div>
     </div>
   </div>
 </template>
diff --git a/packages/devtools/client/components/social/SocialFacebook.vue b/packages/devtools/client/components/social/SocialFacebook.vue
new file mode 100644
index 000000000..2dced1bcb
--- /dev/null
+++ b/packages/devtools/client/components/social/SocialFacebook.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { SocialPreviewResolved } from '~/../src/types'
+
+defineProps<{
+  card: SocialPreviewResolved
+}>()
+</script>
+
+<template>
+  <div class="max-w-[524px] min-w-[524px] cursor-pointer">
+    <div
+      class="h-[274px] border border-b-0 border-base bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: `url(${JSON.stringify(card.image)})` }"
+    />
+    <div class="break-words border border-base px-[12px] py-[10px] antialiased">
+      <div class="overflow-hidden truncate whitespace-nowrap text-[12px] leading-[11px] uppercase op50">
+        {{ card.url }}
+      </div><div class="block h-[46px] max-h-[46px] border-separate select-none overflow-hidden break-words text-left" style="border-spacing: 0px;">
+        <div class="mt-[3px] truncate pt-[2px] text-[16px] font-semibold leading-[20px]">
+          {{ card.title }}
+        </div><div
+          class="mt-[3px] block h-[18px] max-h-[80px] border-separate select-none overflow-hidden truncate whitespace-nowrap break-words text-left text-[14px] leading-[20px] op50"
+          style="-webkit-line-clamp: 1; border-spacing: 0px; -webkit-box-orient: vertical;"
+        >
+          {{ card.description }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/devtools/client/components/social/SocialLinkedin.vue b/packages/devtools/client/components/social/SocialLinkedin.vue
new file mode 100644
index 000000000..d783bf7d4
--- /dev/null
+++ b/packages/devtools/client/components/social/SocialLinkedin.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { SocialPreviewResolved } from '~/../src/types'
+
+defineProps<{
+  card: SocialPreviewResolved
+}>()
+</script>
+
+<template>
+  <div class="max-w-[520px] min-w-[520px] cursor-pointer overflow-hidden border border-base rounded-[2px] shadow-md">
+    <div
+      class="h-[270px] border-[1px] bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: `url(${JSON.stringify(card.image)})` }"
+    /><div class="break-words p-[10px] antialiased">
+      <div class="block h-auto max-h-[50px] border-separate select-none break-words text-left" style="border-spacing: 0px;">
+        <div class="pb-[2px] text-[16px] font-semibold leading-[24px]">
+          {{ card.title }}
+        </div><div class="overflow-hidden truncate whitespace-nowrap text-xs font-normal uppercase op85">
+          {{ card.url }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/devtools/client/components/social/SocialTwitter.vue b/packages/devtools/client/components/social/SocialTwitter.vue
new file mode 100644
index 000000000..1faab88f6
--- /dev/null
+++ b/packages/devtools/client/components/social/SocialTwitter.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { SocialPreviewResolved } from '~/../src/types'
+
+defineProps<{
+  card: SocialPreviewResolved
+}>()
+</script>
+
+<template>
+  <!-- TODO: support small thumbnail and no image, etc. -->
+  <div class="max-w-[438px] min-w-[438px] cursor-pointer overflow-hidden border border-base rounded-[0.85714em] leading-[1.3em] -outline-offset-1">
+    <div
+      class="h-[220px] border-b border-base bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: `url(${JSON.stringify(card.image)})` }"
+    /><div class="break-words border-base p-[0.75em] antialiased">
+      <div class="block border-separate select-none overflow-hidden break-words text-left" style="border-spacing: 0px;">
+        <div class="m-0 mb-[0.15em] truncate text-[14px] font-semibold leading-[18px]">
+          {{ card.title }}
+        </div><div
+          class="mt-[.32333em] block max-h-[2.6em] border-separate select-none overflow-hidden truncate whitespace-nowrap break-words text-left text-[14px] leading-[18px]"
+          style="-webkit-line-clamp: 1; border-spacing: 0px; -webkit-box-orient: vertical;"
+        >
+          {{ card.description }}
+        </div>
+      </div><div class="mt-[0.32333em] overflow-hidden truncate whitespace-nowrap text-[14px] leading-[18px] lowercase op50">
+        {{ card.url }}
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/devtools/client/composables/client.ts b/packages/devtools/client/composables/client.ts
index 1940d6747..665eab711 100644
--- a/packages/devtools/client/composables/client.ts
+++ b/packages/devtools/client/composables/client.ts
@@ -1,5 +1,6 @@
 import type { Lang } from 'shiki-es'
 import type { NuxtDevtoolsClient, NuxtDevtoolsHostClient, NuxtDevtoolsIframeClient, VueInspectorData } from '@nuxt/devtools-kit/types'
+import type { Unhead } from '@unhead/schema'
 import { renderMarkdown } from './client-services/markdown'
 import { renderCodeHighlight } from './client-services/shiki'
 import { extendedRpcMap, rpc } from './rpc'
@@ -20,7 +21,7 @@ export function useClientRouter() {
 
 export function useClientHead() {
   const client = useClient()
-  return computed(() => client.value?.nuxt.vueApp.config.globalProperties?.$head)
+  return computed(() => client.value?.nuxt.vueApp.config.globalProperties?.$head as Unhead)
 }
 
 export function useComponentInspectorData() {
diff --git a/packages/devtools/client/pages/modules/assets.vue b/packages/devtools/client/pages/modules/assets.vue
index e5acc2b76..32a2ab429 100644
--- a/packages/devtools/client/pages/modules/assets.vue
+++ b/packages/devtools/client/pages/modules/assets.vue
@@ -57,6 +57,7 @@ function refreshAssets() {}
   <div h-full of-auto>
     <Navbar ref="navbar" v-model:search="search" pb2>
       <template #actions>
+        <!-- TODO: Use NIconButton -->
         <div flex-none flex="~ gap4">
           <button
             title="Toggle view"
diff --git a/packages/devtools/client/pages/modules/components.vue b/packages/devtools/client/pages/modules/components.vue
index 5f78c746a..a253cfc85 100644
--- a/packages/devtools/client/pages/modules/components.vue
+++ b/packages/devtools/client/pages/modules/components.vue
@@ -36,6 +36,7 @@ function toggleView() {
       :components="components"
     >
       <div flex-none flex="~ gap4">
+        <!-- TODO: Use NIconButton -->
         <button
           title="Toggle view"
           @click="toggleView"
diff --git a/packages/devtools/client/pages/modules/seo.vue b/packages/devtools/client/pages/modules/seo.vue
index 1a870885e..820999b8a 100644
--- a/packages/devtools/client/pages/modules/seo.vue
+++ b/packages/devtools/client/pages/modules/seo.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import Fuse from 'fuse.js'
-import type { HeadTag } from '@vueuse/head'
 
 definePageMeta({
   icon: 'carbon-cloud-monitoring',
@@ -66,8 +65,8 @@ const tagList = [
 
 const head = useClientHead()
 
-const headTags = computedAsync<HeadTag[]>(async () => {
-  return await head.value.resolveTags()
+const headTags = computedAsync(async () => {
+  return await head.value?.resolveTags()
 })
 
 const search = ref('')
@@ -75,6 +74,7 @@ const fuse = computed(() => new Fuse(headTags.value || [], {
   keys: [
     'tag',
     'props.name',
+    'props.property',
     'props.content',
   ],
 }))
@@ -103,6 +103,8 @@ function getTags(tags: string[]) {
   }))
 }
 
+const showPreview = ref(true)
+
 const missingTags = computed(() => {
   return tagList.map(group => ({
     name: group.name,
@@ -119,57 +121,63 @@ async function refresh() {
 </script>
 
 <template>
-  <PanelLeftRight storage-key="tab-seo">
-    <template #left>
-      <div border="r base" px4 py3>
-        <SeoSocialCards v-if="headTags" :tags="headTags" />
-        <NSectionBlock v-if="missingTagsCount" :text="`Missing Tags (${missingTagsCount})`" icon="carbon:warning-filled" :padding="false">
-          <NSectionBlock v-for="group in missingTags" :key="group.name" :text="`${group.name} (${group.tags.length})`" :icon="group.icon" :open="false">
-            <NCard v-for="tag of group.tags" :key="tag" mb4 flex items-center justify-between p4>
-              <div flex items-center>
-                <NIcon icon="carbon:warning-filled" mr2 bg-red />
-                {{ tag }}
-              </div>
-              <span class="text-gray-400">
-                Missing
-              </span>
-            </NCard>
-          </NSectionBlock>
-        </NSectionBlock>
-      </div>
-    </template>
-    <template #right>
-      <div bg-active>
-        <Navbar v-model:search="search" no-padding px4 pb2 pt4>
-          <template #actions>
-            <div flex-none flex="~ gap4">
-              <NButton n="green" title="Refresh Data" @click="refresh">
-                <NIcon icon="carbon:reset" />
-              </NButton>
+  <div flex="~" h-full w-full of-hidden>
+    <div flex-auto of-auto bg-active>
+      <Navbar v-model:search="search">
+        <template #actions>
+          <div flex-none flex="~ gap4">
+            <button
+              title="Refresh Data"
+              @click="refresh"
+            >
+              <NIcon icon="carbon:reset" />
+            </button>
+            <button
+              title="Toggle Preview"
+              @click="showPreview = !showPreview"
+            >
+              <NIcon :icon="showPreview ? 'carbon:side-panel-open' : 'carbon:open-panel-right'" />
+            </button>
+          </div>
+        </template>
+        <div op50>
+          <span v-if="search">{{ filtered.length }} matched · </span>
+          <span>{{ headTags?.length }} tags in total</span>
+        </div>
+      </Navbar>
+      <NSectionBlock text="Tags" icon="carbon:checkmark-filled">
+        <NCard mb4 grid="~ cols-[max-content_1fr]" items-center justify-between of-hidden>
+          <template v-for="item, index of filtered" :key="index">
+            <div v-if="index" x-divider />
+            <div v-if="index" x-divider />
+            <div mr2 px4 py2 op50>
+              {{ item.props?.name ?? item.props?.property ?? Object.keys(item.props)[0] ?? item.tag }}
+            </div>
+            <div w-full p2 font-mono>
+              {{ item.props?.content ?? item.props?.href ?? item.textContent ?? JSON.stringify(item.props) }}
             </div>
           </template>
-          <div op50>
-            <span v-if="search">{{ filtered.length }} matched · </span>
-            <span>{{ headTags?.length }} tags in total</span>
-          </div>
-        </Navbar>
-        <NSectionBlock text="Tags" icon="carbon:checkmark-filled">
-          <NCard v-for="item, index of filtered" :key="index" mb4 flex items-center justify-between p4>
+        </NCard>
+        <div v-if="!filtered.length" py4 text-center text-gray-400>
+          No tags found
+        </div>
+      </NSectionBlock>
+      <NSectionBlock v-if="missingTagsCount" :text="`Missing Tags (${missingTagsCount})`" icon="carbon:warning-filled" :padding="false">
+        <NSectionBlock v-for="group in missingTags" :key="group.name" :text="`${group.name} (${group.tags.length})`" :icon="group.icon" :open="false">
+          <NCard v-for="tag of group.tags" :key="tag" mb4 flex items-center justify-between p4>
             <div flex items-center>
-              <NIcon icon="carbon:checkmark-filled" mr2 bg-green />
-              {{ item.props?.name ?? Object.keys(item.props)[0] ?? item.tag }}
-            </div>
-            <div text-end class="max-w-4/5">
-              {{ item.props?.content ?? item.textContent ?? JSON.stringify(item.props) }}
+              <NIcon icon="carbon:warning-filled" mr2 bg-red />
+              {{ tag }}
             </div>
+            <span class="text-gray-400">
+              Missing
+            </span>
           </NCard>
-          <div v-if="!filtered.length" py4 text-center text-gray-400>
-            No tags found
-          </div>
         </NSectionBlock>
-      </div>
-    </template>
-  </PanelLeftRight>
+      </NSectionBlock>
+    </div>
+    <SeoSocialCards v-if="showPreview && headTags?.length" :tags="headTags" border="l base" w-540px flex-none />
+  </div>
   <HelpFab>
     <DocsSeo />
   </HelpFab>
diff --git a/packages/devtools/src/types/ui-state.ts b/packages/devtools/src/types/ui-state.ts
index 576aad6ff..f9d8d1b50 100644
--- a/packages/devtools/src/types/ui-state.ts
+++ b/packages/devtools/src/types/ui-state.ts
@@ -21,3 +21,12 @@ export interface DevToolsUISettings {
   hiddenTabs: string[]
   hiddenTabCategories: string[]
 }
+
+export interface SocialPreviewResolved {
+  url?: string
+  title?: string
+  description?: string
+  favicon?: string
+  image?: string
+  imageAlt?: string
+}
diff --git a/playgrounds/tab-seo/.npmrc b/playgrounds/tab-seo/.npmrc
new file mode 100644
index 000000000..cf0404245
--- /dev/null
+++ b/playgrounds/tab-seo/.npmrc
@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false
diff --git a/playgrounds/tab-seo/app.vue b/playgrounds/tab-seo/app.vue
new file mode 100644
index 000000000..2137b7915
--- /dev/null
+++ b/playgrounds/tab-seo/app.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+useHead({
+  title: 'SEO example',
+  link: [
+    {
+      rel: 'icon',
+      href: 'https://nuxt.com/icon.png',
+    },
+  ],
+  meta: [
+    {
+      property: 'og:title',
+      content: 'SEO example',
+    },
+    {
+      property: 'og:description',
+      content: 'This is an SEO example',
+    },
+    {
+      property: 'og:image',
+      content: 'https://nuxt.com/assets/blog/nuxt-static-improvements.png',
+    },
+    {
+      property: 'twitter:card',
+      content: 'summary_large_image',
+    },
+  ],
+})
+</script>
+
+<template>
+  <GlobalNav />
+  <NuxtPage />
+</template>
diff --git a/playgrounds/tab-seo/components/GlobalNav.vue b/playgrounds/tab-seo/components/GlobalNav.vue
new file mode 100644
index 000000000..4e1e0dee5
--- /dev/null
+++ b/playgrounds/tab-seo/components/GlobalNav.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <NuxtLink to="/">
+      Home
+    </NuxtLink> |
+    <NuxtLink to="/foo">
+      Foo
+    </NuxtLink> |
+    <NuxtLink to="/bar">
+      Bar
+    </NuxtLink> |
+    <NuxtLink to="/dynamic-baz">
+      Dynamic Baz
+    </NuxtLink> |
+    <NuxtLink to="/dynamic-qux">
+      Dynamic Qux
+    </NuxtLink>
+  </div>
+</template>
diff --git a/playgrounds/tab-seo/nuxt.config.ts b/playgrounds/tab-seo/nuxt.config.ts
new file mode 100644
index 000000000..222f0ff5c
--- /dev/null
+++ b/playgrounds/tab-seo/nuxt.config.ts
@@ -0,0 +1,6 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  modules: [
+    '../../local',
+  ],
+})
diff --git a/playgrounds/tab-seo/package.json b/playgrounds/tab-seo/package.json
new file mode 100644
index 000000000..8c2c91c58
--- /dev/null
+++ b/playgrounds/tab-seo/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "devDependencies": {
+    "@types/node": "^18",
+    "nuxt": "^3.4.3"
+  }
+}
diff --git a/playgrounds/tab-seo/pages/bar.vue b/playgrounds/tab-seo/pages/bar.vue
new file mode 100644
index 000000000..14ab63a7d
--- /dev/null
+++ b/playgrounds/tab-seo/pages/bar.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const props = defineProps<{
+  modelValue?: boolean
+}>()
+</script>
+
+<template>
+  <div>
+    Bar!
+  </div>
+</template>
diff --git a/playgrounds/tab-seo/pages/dynamic-[name].vue b/playgrounds/tab-seo/pages/dynamic-[name].vue
new file mode 100644
index 000000000..5e109e38b
--- /dev/null
+++ b/playgrounds/tab-seo/pages/dynamic-[name].vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const route = useRoute()
+
+const name = computed(() => route.params.name as string)
+</script>
+
+<template>
+  <div>
+    Dynamic, {{ name }}!
+  </div>
+</template>
diff --git a/playgrounds/tab-seo/pages/foo.vue b/playgrounds/tab-seo/pages/foo.vue
new file mode 100644
index 000000000..2630c2def
--- /dev/null
+++ b/playgrounds/tab-seo/pages/foo.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const props = defineProps<{
+  modelValue?: boolean
+}>()
+</script>
+
+<template>
+  <div>
+    Foo!
+  </div>
+</template>
diff --git a/playgrounds/tab-seo/pages/index.vue b/playgrounds/tab-seo/pages/index.vue
new file mode 100644
index 000000000..cabd480b0
--- /dev/null
+++ b/playgrounds/tab-seo/pages/index.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+useHead({
+  title: 'Home page',
+  meta: [
+    {
+      property: 'og:title',
+      content: 'Home page',
+    },
+    {
+      property: 'og:description',
+      content: 'This is the home page',
+    },
+    {
+      property: 'og:image',
+      content: 'https://nuxt.com/assets/blog/nuxt-devtools-0-3.png',
+    },
+  ],
+})
+</script>
+
+<template>
+  <div>
+    Home
+  </div>
+</template>
diff --git a/playgrounds/tab-seo/tsconfig.json b/playgrounds/tab-seo/tsconfig.json
new file mode 100644
index 000000000..a746f2a70
--- /dev/null
+++ b/playgrounds/tab-seo/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9bb50e3b8..4cfdc9d51 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -84,13 +84,13 @@ importers:
     devDependencies:
       '@nuxt-themes/docus':
         specifier: ^1.10.1
-        version: 1.10.1(nuxt@3.4.2)(postcss@8.4.23)(rollup@3.21.2)(vue@3.2.47)
+        version: 1.10.1(nuxt@3.4.2)(postcss@8.4.23)(rollup@3.20.6)(vue@3.2.47)
       '@nuxtjs/plausible':
         specifier: ^0.2.0
-        version: 0.2.0(rollup@3.21.2)
+        version: 0.2.0(rollup@3.20.6)
       nuxt:
         specifier: ^3.4.2
-        version: 3.4.2(@types/node@18.16.3)(eslint@8.39.0)(rollup@3.21.2)(typescript@5.0.4)(vue-tsc@1.6.1)
+        version: 3.4.2(@types/node@18.16.3)(eslint@8.39.0)(rollup@3.20.6)(typescript@5.0.4)(vue-tsc@1.6.1)
 
   packages/devtools:
     dependencies:
@@ -456,6 +456,15 @@ importers:
         specifier: ^1.2.1
         version: 1.2.1
 
+  playgrounds/tab-seo:
+    devDependencies:
+      '@types/node':
+        specifier: ^18
+        version: 18.16.3
+      nuxt:
+        specifier: ^3.4.3
+        version: 3.4.3(@types/node@18.16.3)(eslint@8.39.0)(rollup@3.20.6)(typescript@5.0.4)(vue-tsc@1.6.1)
+
 packages:
 
   /@ampproject/remapping@2.2.1:
@@ -1805,15 +1814,15 @@ packages:
       - supports-color
     dev: false
 
-  /@nuxt-themes/docus@1.10.1(nuxt@3.4.2)(postcss@8.4.23)(rollup@3.21.2)(vue@3.2.47):
+  /@nuxt-themes/docus@1.10.1(nuxt@3.4.2)(postcss@8.4.23)(rollup@3.20.6)(vue@3.2.47):
     resolution: {integrity: sha512-VW+KFjeSPKfxOvBo2IItTap8niFyqmSxrCJqwVqZVYWS5xZVW8MlK97mOGJsDJMd2OrjmDKhciDfTr8ZmxpPAw==}
     dependencies:
-      '@nuxt-themes/elements': 0.9.3(postcss@8.4.23)(rollup@3.21.2)(vue@3.2.47)
-      '@nuxt-themes/tokens': 1.9.1(postcss@8.4.23)(rollup@3.21.2)(vue@3.2.47)
-      '@nuxt-themes/typography': 0.11.0(postcss@8.4.23)(rollup@3.21.2)(vue@3.2.47)
-      '@nuxt/content': 2.6.0(rollup@3.21.2)
-      '@nuxthq/studio': 0.9.5(rollup@3.21.2)
-      '@vueuse/nuxt': 9.13.0(nuxt@3.4.2)(rollup@3.21.2)(vue@3.2.47)
+      '@nuxt-themes/elements': 0.9.3(postcss@8.4.23)(rollup@3.20.6)(vue@3.2.47)
+      '@nuxt-themes/tokens': 1.9.1(postcss@8.4.23)(rollup@3.20.6)(vue@3.2.47)
+      '@nuxt-themes/typography': 0.11.0(postcss@8.4.23)(rollup@3.20.6)(vue@3.2.47)
+      '@nuxt/content': 2.6.0(rollup@3.20.6)
+      '@nuxthq/studio': 0.9.5(rollup@3.20.6)
+      '@vueuse/nuxt': 9.13.0(nuxt@3.4.2)(rollup@3.20.6)(vue@3.2.47)
     transitivePeerDependencies:
       - '@azure/app-configuration'
       - '@azure/cosmos'
@@ -1833,10 +1842,10 @@ packages:
       - vue
     dev: true
 
-  /@nuxt-themes/elements@0.9.3(postcss@8.4.23)(rollup@3.21.2)(vue@3.2.47):
+  /@nuxt-themes/elements@0.9.3(postcss@8.4.23)(rollup@3.20.6)(vue@3.2.47):
     resolution: {integrity: sha512-zm8rGQUnvGk6Rrr0Ng/WWSkYyeuWYK0qXnIlshHEuIhHXXXHxo4XSAwN6jmmZa1ZYmaO1KNe4WS4qWeJ1AyK4A==}
     dependencies:
-      '@nuxt-themes/tokens': 1.9.1(postcss@8.4.23)(rollup@3.21.2)(vue@3.2.47)
+      '@nuxt-themes/tokens': 1.9.1(postcss@8.4.23)(rollup@3.20.6)(vue@3.2.47)
       '@vueuse/core': 9.13.0(vue@3.2.47)
     transitivePeerDependencies:
       - '@vue/composition-api'
@@ -1847,10 +1856,10 @@ packages:
       - vue
     dev: true
 
-  /@nuxt-themes/tokens@1.9.1(postcss@8.4.23)(rollup@3.21.2)(vue@3.2.47):
+  /@nuxt-themes/tokens@1.9.1(postcss@8.4.23)(rollup@3.20.6)(vue@3.2.47):
     resolution: {integrity: sha512-5C28kfRvKnTX8Tux+xwyaf+2pxKgQ53dC9l6C33sZwRRyfUJulGDZCFjKbuNq4iqVwdGvkFSQBYBYjFAv6t75g==}
     dependencies:
-      '@nuxtjs/color-mode': 3.2.0(rollup@3.21.2)
+      '@nuxtjs/color-mode': 3.2.0(rollup@3.20.6)
       '@vueuse/core': 9.13.0(vue@3.2.47)
       pinceau: 0.18.8(postcss@8.4.23)
     transitivePeerDependencies:
@@ -1862,12 +1871,12 @@ packages:
       - vue
     dev: true
 
-  /@nuxt-themes/typography@0.11.0(postcss@8.4.23)(rollup@3.21.2)(vue@3.2.47):
+  /@nuxt-themes/typography@0.11.0(postcss@8.4.23)(rollup@3.20.6)(vue@3.2.47):
     resolution: {integrity: sha512-TqyvD7sDWnqGmL00VtuI7JdmNTPL5/g957HCAWNzcNp+S20uJjW/FXSdkM76d4JSVDHvBqw7Wer3RsqVhqvA4w==}
     dependencies:
-      '@nuxtjs/color-mode': 3.2.0(rollup@3.21.2)
-      nuxt-config-schema: 0.4.5(rollup@3.21.2)
-      nuxt-icon: 0.3.3(rollup@3.21.2)(vue@3.2.47)
+      '@nuxtjs/color-mode': 3.2.0(rollup@3.20.6)
+      nuxt-config-schema: 0.4.5(rollup@3.20.6)
+      nuxt-icon: 0.3.3(rollup@3.20.6)(vue@3.2.47)
       pinceau: 0.18.8(postcss@8.4.23)
       ufo: 1.1.1
     transitivePeerDependencies:
@@ -1930,58 +1939,6 @@ packages:
       - utf-8-validate
     dev: true
 
-  /@nuxt/content@2.6.0(rollup@3.21.2):
-    resolution: {integrity: sha512-iwZ5NY6m2MNBAFaRp5OSjRdd+vk/XFbBqN0wtmpFtcoYHyzpUxy2fU38KWnXXmgP7Vi4mFOJ8SExZnL0cdlEtQ==}
-    dependencies:
-      '@nuxt/kit': 3.4.1(rollup@3.21.2)
-      consola: 3.1.0
-      defu: 6.1.2
-      destr: 1.2.2
-      detab: 3.0.2
-      json5: 2.2.3
-      knitwork: 1.0.0
-      listhen: 1.0.4
-      mdast-util-to-hast: 12.3.0
-      mdurl: 1.0.1
-      ohash: 1.1.2
-      pathe: 1.1.0
-      property-information: 6.2.0
-      rehype-external-links: 2.0.1
-      rehype-raw: 6.1.1
-      rehype-slug: 5.1.0
-      rehype-sort-attribute-values: 4.0.0
-      rehype-sort-attributes: 4.0.0
-      remark-emoji: 3.1.1
-      remark-gfm: 3.0.1
-      remark-mdc: 1.1.3
-      remark-parse: 10.0.1
-      remark-rehype: 10.1.0
-      remark-squeeze-paragraphs: 5.0.1
-      scule: 1.0.0
-      shiki-es: 0.2.0
-      slugify: 1.6.6
-      socket.io-client: 4.6.1
-      ufo: 1.1.1
-      unified: 10.1.2
-      unist-builder: 3.0.1
-      unist-util-position: 4.0.4
-      unist-util-visit: 4.1.2
-      unstorage: 1.5.0
-      ws: 8.13.0
-    transitivePeerDependencies:
-      - '@azure/app-configuration'
-      - '@azure/cosmos'
-      - '@azure/data-tables'
-      - '@azure/identity'
-      - '@azure/keyvault-secrets'
-      - '@azure/storage-blob'
-      - '@planetscale/database'
-      - bufferutil
-      - rollup
-      - supports-color
-      - utf-8-validate
-    dev: true
-
   /@nuxt/devalue@2.0.0:
     resolution: {integrity: sha512-YBI/6o2EBz02tdEJRBK8xkt3zvOFOWlLBf7WKYGBsSYSRtjjgrqPe2skp6VLLmKx5WbHHDNcW+6oACaurxGzeA==}
 
@@ -2012,33 +1969,6 @@ packages:
       - supports-color
     dev: true
 
-  /@nuxt/kit@3.4.1(rollup@3.21.2):
-    resolution: {integrity: sha512-VeH26umZW6Rf4F1QX9nTIuTBp6HeL/MgmKY3+FgQiLD07afgFTLUJZohVE5xU7hb66zCnYvwKxa3JpjXFJZrhQ==}
-    engines: {node: ^14.18.0 || ^16.10.0 || ^17.0.0 || ^18.0.0 || ^19.0.0}
-    dependencies:
-      '@nuxt/schema': 3.4.1(rollup@3.21.2)
-      c12: 1.4.1
-      consola: 3.1.0
-      defu: 6.1.2
-      globby: 13.1.4
-      hash-sum: 2.0.0
-      ignore: 5.2.4
-      jiti: 1.18.2
-      knitwork: 1.0.0
-      lodash.template: 4.5.0
-      mlly: 1.2.0
-      pathe: 1.1.0
-      pkg-types: 1.0.2
-      scule: 1.0.0
-      semver: 7.5.0
-      unctx: 2.3.0
-      unimport: 3.0.6(rollup@3.21.2)
-      untyped: 1.3.2
-    transitivePeerDependencies:
-      - rollup
-      - supports-color
-    dev: true
-
   /@nuxt/kit@3.4.2(rollup@3.20.6):
     resolution: {integrity: sha512-bFUpkyG2ZF6RYqiW+tXnWssccHQQqMF4kZJJLP/0eKXf+Fkt/Is0R7IY768jy8ylnyqeMBbmpg4Zv5gSZjfZQw==}
     engines: {node: ^14.18.0 || ^16.10.0 || ^17.0.0 || ^18.0.0 || ^19.0.0}
@@ -2065,33 +1995,6 @@ packages:
       - rollup
       - supports-color
 
-  /@nuxt/kit@3.4.2(rollup@3.21.2):
-    resolution: {integrity: sha512-bFUpkyG2ZF6RYqiW+tXnWssccHQQqMF4kZJJLP/0eKXf+Fkt/Is0R7IY768jy8ylnyqeMBbmpg4Zv5gSZjfZQw==}
-    engines: {node: ^14.18.0 || ^16.10.0 || ^17.0.0 || ^18.0.0 || ^19.0.0}
-    dependencies:
-      '@nuxt/schema': 3.4.2(rollup@3.21.2)
-      c12: 1.4.1
-      consola: 3.1.0
-      defu: 6.1.2
-      globby: 13.1.4
-      hash-sum: 2.0.0
-      ignore: 5.2.4
-      jiti: 1.18.2
-      knitwork: 1.0.0
-      lodash.template: 4.5.0
-      mlly: 1.2.0
-      pathe: 1.1.0
-      pkg-types: 1.0.2
-      scule: 1.0.0
-      semver: 7.5.0
-      unctx: 2.3.0
-      unimport: 3.0.6(rollup@3.21.2)
-      untyped: 1.3.2
-    transitivePeerDependencies:
-      - rollup
-      - supports-color
-    dev: true
-
   /@nuxt/kit@3.4.3(rollup@3.20.6):
     resolution: {integrity: sha512-aQyzplYFCL292UsVZzlOZOC51ZKYFL0PBihbcPzxTzXQvAfMF8/DQ539kqzqXzxTCcmnUB9ROhIaNUrAeUkFYA==}
     engines: {node: ^14.18.0 || >=16.10.0}
@@ -2119,33 +2022,6 @@ packages:
       - supports-color
     dev: true
 
-  /@nuxt/kit@3.4.3(rollup@3.21.2):
-    resolution: {integrity: sha512-aQyzplYFCL292UsVZzlOZOC51ZKYFL0PBihbcPzxTzXQvAfMF8/DQ539kqzqXzxTCcmnUB9ROhIaNUrAeUkFYA==}
-    engines: {node: ^14.18.0 || >=16.10.0}
-    dependencies:
-      '@nuxt/schema': 3.4.3(rollup@3.21.2)
-      c12: 1.4.1
-      consola: 3.1.0
-      defu: 6.1.2
-      globby: 13.1.4
-      hash-sum: 2.0.0
-      ignore: 5.2.4
-      jiti: 1.18.2
-      knitwork: 1.0.0
-      lodash.template: 4.5.0
-      mlly: 1.2.0
-      pathe: 1.1.0
-      pkg-types: 1.0.2
-      scule: 1.0.0
-      semver: 7.5.0
-      unctx: 2.3.0
-      unimport: 3.0.6(rollup@3.21.2)
-      untyped: 1.3.2
-    transitivePeerDependencies:
-      - rollup
-      - supports-color
-    dev: true
-
   /@nuxt/module-builder@0.3.0:
     resolution: {integrity: sha512-ocXA3pY5T3YKBLNE/Epgnh5cIIrad6vGP31gT7RorpFa7mtIqMxIPX/Z7RSQ7xnTvZW9sA1AxadjfhwHMEBhKg==}
     hasBin: true
@@ -2182,28 +2058,6 @@ packages:
       - supports-color
     dev: true
 
-  /@nuxt/schema@3.4.1(rollup@3.21.2):
-    resolution: {integrity: sha512-xhPh9JfVKXRQVfdUT6BKieDTCljBjbIGgGCQnxplVi4FUTWRKUXR7MFwsobr5D9AJpeE0mg5/kRRh5gUX37vAQ==}
-    engines: {node: ^14.18.0 || ^16.10.0 || ^17.0.0 || ^18.0.0 || ^19.0.0}
-    dependencies:
-      c12: 1.4.1
-      create-require: 1.1.1
-      defu: 6.1.2
-      hookable: 5.5.3
-      jiti: 1.18.2
-      pathe: 1.1.0
-      pkg-types: 1.0.2
-      postcss-import-resolver: 2.0.0
-      scule: 1.0.0
-      std-env: 3.3.2
-      ufo: 1.1.1
-      unimport: 3.0.6(rollup@3.21.2)
-      untyped: 1.3.2
-    transitivePeerDependencies:
-      - rollup
-      - supports-color
-    dev: true
-
   /@nuxt/schema@3.4.2(rollup@3.20.6):
     resolution: {integrity: sha512-DXB/fyjrAssFt9KGXyS+ZSfm1A0NYKhEoc01wyz1lGo//oETzUh3MmwE6X3x65NPqDlYZ6Mnj+IdftRRophv5Q==}
     engines: {node: ^14.18.0 || ^16.10.0 || ^17.0.0 || ^18.0.0 || ^19.0.0}
@@ -2221,24 +2075,6 @@ packages:
       - rollup
       - supports-color
 
-  /@nuxt/schema@3.4.2(rollup@3.21.2):
-    resolution: {integrity: sha512-DXB/fyjrAssFt9KGXyS+ZSfm1A0NYKhEoc01wyz1lGo//oETzUh3MmwE6X3x65NPqDlYZ6Mnj+IdftRRophv5Q==}
-    engines: {node: ^14.18.0 || ^16.10.0 || ^17.0.0 || ^18.0.0 || ^19.0.0}
-    dependencies:
-      defu: 6.1.2
-      hookable: 5.5.3
-      pathe: 1.1.0
-      pkg-types: 1.0.2
-      postcss-import-resolver: 2.0.0
-      std-env: 3.3.2
-      ufo: 1.1.1
-      unimport: 3.0.6(rollup@3.21.2)
-      untyped: 1.3.2
-    transitivePeerDependencies:
-      - rollup
-      - supports-color
-    dev: true
-
   /@nuxt/schema@3.4.3(rollup@3.20.6):
     resolution: {integrity: sha512-8bv0/mRDw6THQguSz+cKG5FzDZc2XBkjcc5VZ7yET84r4aWzW9/R274cjlEagFKrw9BDaPEQhnkwpg+kZnpOUA==}
     engines: {node: ^14.18.0 || >=16.10.0}
@@ -2257,24 +2093,6 @@ packages:
       - supports-color
     dev: true
 
-  /@nuxt/schema@3.4.3(rollup@3.21.2):
-    resolution: {integrity: sha512-8bv0/mRDw6THQguSz+cKG5FzDZc2XBkjcc5VZ7yET84r4aWzW9/R274cjlEagFKrw9BDaPEQhnkwpg+kZnpOUA==}
-    engines: {node: ^14.18.0 || >=16.10.0}
-    dependencies:
-      defu: 6.1.2
-      hookable: 5.5.3
-      pathe: 1.1.0
-      pkg-types: 1.0.2
-      postcss-import-resolver: 2.0.0
-      std-env: 3.3.2
-      ufo: 1.1.1
-      unimport: 3.0.6(rollup@3.21.2)
-      untyped: 1.3.2
-    transitivePeerDependencies:
-      - rollup
-      - supports-color
-    dev: true
-
   /@nuxt/telemetry@2.2.0(rollup@3.20.6):
     resolution: {integrity: sha512-Z2UmPkBy5WjxvHKuUcl1X6vKWnIyWSP+9UGde1F+MzzZxYgAQybFud1uL2B3KCowxZdoqT1hd2WklV7EtyCwrQ==}
     hasBin: true
@@ -2303,35 +2121,6 @@ packages:
       - rollup
       - supports-color
 
-  /@nuxt/telemetry@2.2.0(rollup@3.21.2):
-    resolution: {integrity: sha512-Z2UmPkBy5WjxvHKuUcl1X6vKWnIyWSP+9UGde1F+MzzZxYgAQybFud1uL2B3KCowxZdoqT1hd2WklV7EtyCwrQ==}
-    hasBin: true
-    dependencies:
-      '@nuxt/kit': 3.4.3(rollup@3.21.2)
-      chalk: 5.2.0
-      ci-info: 3.8.0
-      consola: 3.1.0
-      create-require: 1.1.1
-      defu: 6.1.2
-      destr: 1.2.2
-      dotenv: 16.0.3
-      fs-extra: 10.1.0
-      git-url-parse: 13.1.0
-      inquirer: 9.1.5
-      is-docker: 3.0.0
-      jiti: 1.18.2
-      mri: 1.2.0
-      nanoid: 4.0.2
-      node-fetch: 3.3.1
-      ofetch: 1.0.1
-      parse-git-config: 3.0.0
-      rc9: 2.1.0
-      std-env: 3.3.2
-    transitivePeerDependencies:
-      - rollup
-      - supports-color
-    dev: true
-
   /@nuxt/ui-templates@1.1.1:
     resolution: {integrity: sha512-PjVETP7+iZXAs5Q8O4ivl4t6qjWZMZqwiTVogUXHoHGZZcw7GZW3u3tzfYfE1HbzyYJfr236IXqQ02MeR8Fz2w==}
 
@@ -2453,66 +2242,6 @@ packages:
       - vti
       - vue-tsc
 
-  /@nuxt/vite-builder@3.4.2(@types/node@18.16.3)(eslint@8.39.0)(rollup@3.21.2)(typescript@5.0.4)(vue-tsc@1.6.1)(vue@3.2.47):
-    resolution: {integrity: sha512-uLyy0sklOvGqj+yHAxSBE+wxyHvHZmYEfFjx03UEdMbYwpJlhPcqrt0pnWFJAkPWf8ZgpKymr8LNngsyYtNtAA==}
-    engines: {node: ^14.18.0 || ^16.10.0 || ^17.0.0 || ^18.0.0 || ^19.0.0}
-    peerDependencies:
-      vue: ^3.2.47
-    dependencies:
-      '@nuxt/kit': 3.4.2(rollup@3.21.2)
-      '@rollup/plugin-replace': 5.0.2(rollup@3.21.2)
-      '@vitejs/plugin-vue': 4.1.0(vite@4.3.1)(vue@3.2.47)
-      '@vitejs/plugin-vue-jsx': 3.0.1(vite@4.3.1)(vue@3.2.47)
-      autoprefixer: 10.4.14(postcss@8.4.23)
-      clear: 0.1.0
-      cssnano: 6.0.0(postcss@8.4.23)
-      defu: 6.1.2
-      esbuild: 0.17.17
-      escape-string-regexp: 5.0.0
-      estree-walker: 3.0.3
-      externality: 1.0.0
-      fs-extra: 11.1.1
-      get-port-please: 3.0.1
-      h3: 1.6.4
-      knitwork: 1.0.0
-      magic-string: 0.30.0
-      mlly: 1.2.0
-      ohash: 1.1.2
-      pathe: 1.1.0
-      perfect-debounce: 0.1.3
-      pkg-types: 1.0.2
-      postcss: 8.4.23
-      postcss-import: 15.1.0(postcss@8.4.23)
-      postcss-url: 10.1.3(postcss@8.4.23)
-      rollup-plugin-visualizer: 5.9.0(rollup@3.21.2)
-      std-env: 3.3.2
-      strip-literal: 1.0.1
-      ufo: 1.1.1
-      unplugin: 1.3.1
-      vite: 4.3.1(@types/node@18.16.3)
-      vite-node: 0.30.1(@types/node@18.16.3)
-      vite-plugin-checker: 0.5.6(eslint@8.39.0)(typescript@5.0.4)(vite@4.3.1)(vue-tsc@1.6.1)
-      vue: 3.2.47
-      vue-bundle-renderer: 1.0.3
-    transitivePeerDependencies:
-      - '@types/node'
-      - eslint
-      - less
-      - meow
-      - optionator
-      - rollup
-      - sass
-      - stylelint
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-      - typescript
-      - vls
-      - vti
-      - vue-tsc
-    dev: true
-
   /@nuxt/vite-builder@3.4.3(@types/node@18.16.3)(eslint@8.39.0)(rollup@3.20.6)(typescript@5.0.4)(vue-tsc@1.6.1)(vue@3.2.47):
     resolution: {integrity: sha512-60bXtjEILon0vJ8bC1cpZyV7GiCMlLiji/g/Q55mfsTYHH/1cgTG4UCodbGAZfDouZyyG8D4IrZ3lcizp3Zp9Q==}
     engines: {node: ^14.18.0 || >=16.10.0}
@@ -2573,13 +2302,13 @@ packages:
       - vue-tsc
     dev: true
 
-  /@nuxthq/studio@0.9.5(rollup@3.21.2):
+  /@nuxthq/studio@0.9.5(rollup@3.20.6):
     resolution: {integrity: sha512-EgAvLregOANyaohTObt1RBnUZV6lFlO2fBgaO/nWCI8c1EDeS6DsrMIePEgKgAGiEsVt/cTPn0lvhgafw7woGQ==}
     dependencies:
-      '@nuxt/kit': 3.4.2(rollup@3.21.2)
+      '@nuxt/kit': 3.4.2(rollup@3.20.6)
       defu: 6.1.2
-      nuxt-component-meta: 0.5.1(rollup@3.21.2)
-      nuxt-config-schema: 0.4.5(rollup@3.21.2)
+      nuxt-component-meta: 0.5.1(rollup@3.20.6)
+      nuxt-config-schema: 0.4.5(rollup@3.20.6)
       socket.io-client: 4.6.1
       ufo: 1.1.1
     transitivePeerDependencies:
@@ -2599,21 +2328,10 @@ packages:
       - rollup
       - supports-color
 
-  /@nuxtjs/color-mode@3.2.0(rollup@3.21.2):
-    resolution: {integrity: sha512-isDR01yfadopiHQ/VEVUpyNSPrk5PCjUHS4t1qYRZwuRGefU4s9Iaxf6H9nmr1QFzoMgTm+3T0r/54jLwtpZbA==}
-    dependencies:
-      '@nuxt/kit': 3.4.3(rollup@3.21.2)
-      lodash.template: 4.5.0
-      pathe: 1.1.0
-    transitivePeerDependencies:
-      - rollup
-      - supports-color
-    dev: true
-
-  /@nuxtjs/plausible@0.2.0(rollup@3.21.2):
+  /@nuxtjs/plausible@0.2.0(rollup@3.20.6):
     resolution: {integrity: sha512-mke+eW94PCca7zK0kNpNA9ULat5JCrBP2JUCmas6ZKpskU3+IaBv2OzWYzWJb/SsungfV9a/dukKbjAJeBTzhQ==}
     dependencies:
-      '@nuxt/kit': 3.4.2(rollup@3.21.2)
+      '@nuxt/kit': 3.4.2(rollup@3.20.6)
       defu: 6.1.2
       pathe: 1.1.0
       plausible-tracker: 0.3.8
@@ -2722,20 +2440,6 @@ packages:
       magic-string: 0.27.0
       rollup: 3.20.6
 
-  /@rollup/plugin-replace@5.0.2(rollup@3.21.2):
-    resolution: {integrity: sha512-M9YXNekv/C/iHHK+cvORzfRYfPbq0RDD8r0G+bMiTXjNGKulPnCT9O3Ss46WfhI6ZOCgApOP7xAdmCQJ+U2LAA==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-    dependencies:
-      '@rollup/pluginutils': 5.0.2(rollup@3.21.2)
-      magic-string: 0.27.0
-      rollup: 3.21.2
-    dev: true
-
   /@rollup/plugin-terser@0.4.1(rollup@3.20.6):
     resolution: {integrity: sha512-aKS32sw5a7hy+fEXVy+5T95aDIwjpGHCTv833HXVtyKMDoVS7pBr5K3L9hEQoNqbJFjfANPrNpIXlTQ7is00eA==}
     engines: {node: '>=14.0.0'}
@@ -2782,21 +2486,6 @@ packages:
       picomatch: 2.3.1
       rollup: 3.20.6
 
-  /@rollup/pluginutils@5.0.2(rollup@3.21.2):
-    resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-    dependencies:
-      '@types/estree': 1.0.1
-      estree-walker: 2.0.2
-      picomatch: 2.3.1
-      rollup: 3.21.2
-    dev: true
-
   /@sideway/address@4.1.4:
     resolution: {integrity: sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==}
     dependencies:
@@ -3927,16 +3616,16 @@ packages:
       - supports-color
       - vue
 
-  /@vueuse/nuxt@9.13.0(nuxt@3.4.2)(rollup@3.21.2)(vue@3.2.47):
+  /@vueuse/nuxt@9.13.0(nuxt@3.4.2)(rollup@3.20.6)(vue@3.2.47):
     resolution: {integrity: sha512-JunH/w6nFIwCyaZ0s+pfrYFMfBzGfhkwmFPz7ogHFmb71Ty/5HINrYOAOZCXpN44X6QH6FiJq/wuLLdvYzqFUw==}
     peerDependencies:
       nuxt: ^3.0.0
     dependencies:
-      '@nuxt/kit': 3.4.2(rollup@3.21.2)
+      '@nuxt/kit': 3.4.2(rollup@3.20.6)
       '@vueuse/core': 9.13.0(vue@3.2.47)
       '@vueuse/metadata': 9.13.0
       local-pkg: 0.4.3
-      nuxt: 3.4.2(@types/node@18.16.3)(eslint@8.39.0)(rollup@3.21.2)(typescript@5.0.4)(vue-tsc@1.6.1)
+      nuxt: 3.4.2(@types/node@18.16.3)(eslint@8.39.0)(rollup@3.20.6)(typescript@5.0.4)(vue-tsc@1.6.1)
       vue-demi: 0.14.0(vue@3.2.47)
     transitivePeerDependencies:
       - '@vue/composition-api'
@@ -9181,10 +8870,10 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /nuxt-component-meta@0.5.1(rollup@3.21.2):
+  /nuxt-component-meta@0.5.1(rollup@3.20.6):
     resolution: {integrity: sha512-vwx5wySyVX+QbFrNb3wLYNMPlADho8E66MO45d5i5fTlEkmhopVpQ9YXwlAvM3pLCPjupxG3R3D5rKpLDeitkw==}
     dependencies:
-      '@nuxt/kit': 3.4.3(rollup@3.21.2)
+      '@nuxt/kit': 3.4.3(rollup@3.20.6)
       scule: 1.0.0
       typescript: 5.0.4
       vue-component-meta: 1.2.0(typescript@5.0.4)
@@ -9193,10 +8882,10 @@ packages:
       - supports-color
     dev: true
 
-  /nuxt-config-schema@0.4.5(rollup@3.21.2):
+  /nuxt-config-schema@0.4.5(rollup@3.20.6):
     resolution: {integrity: sha512-Y5anu5puDfMJfDP7IYjXsn6Dvj262HtjZqa73jCBbFRCc5jnjrs+BEpJJmtPG32ZsqzO2+RL4oTNb3H6IfKZLQ==}
     dependencies:
-      '@nuxt/kit': 3.4.3(rollup@3.21.2)
+      '@nuxt/kit': 3.4.3(rollup@3.20.6)
       changelogen: 0.4.1
       defu: 6.1.2
       jiti: 1.18.2
@@ -9207,12 +8896,12 @@ packages:
       - supports-color
     dev: true
 
-  /nuxt-icon@0.3.3(rollup@3.21.2)(vue@3.2.47):
+  /nuxt-icon@0.3.3(rollup@3.20.6)(vue@3.2.47):
     resolution: {integrity: sha512-KdhJAigBGTP8/YIFZ3orwetk40AgLq6VQ5HRYuDLmv5hiDptor9Ro+WIdZggHw7nciRxZvDdQkEwi9B5G/jrkQ==}
     dependencies:
       '@iconify/vue': 4.1.0(vue@3.2.47)
-      '@nuxt/kit': 3.4.3(rollup@3.21.2)
-      nuxt-config-schema: 0.4.5(rollup@3.21.2)
+      '@nuxt/kit': 3.4.3(rollup@3.20.6)
+      nuxt-config-schema: 0.4.5(rollup@3.20.6)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -9422,91 +9111,6 @@ packages:
       - vti
       - vue-tsc
 
-  /nuxt@3.4.2(@types/node@18.16.3)(eslint@8.39.0)(rollup@3.21.2)(typescript@5.0.4)(vue-tsc@1.6.1):
-    resolution: {integrity: sha512-4v+oeBL4ZI8nHzF0Dm1p5kF9VCNlzrpvOt7wu3BnmzlueXsu4A/LfmFvpfZLxws+r5U74eM5Ut/LMD8B8LrZIw==}
-    engines: {node: ^14.18.0 || ^16.10.0 || ^17.0.0 || ^18.0.0 || ^19.0.0}
-    hasBin: true
-    peerDependencies:
-      '@parcel/watcher': ^2.1.0
-      '@types/node': ^14.18.0 || ^16.10.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-    peerDependenciesMeta:
-      '@parcel/watcher':
-        optional: true
-    dependencies:
-      '@nuxt/devalue': 2.0.0
-      '@nuxt/kit': 3.4.2(rollup@3.21.2)
-      '@nuxt/schema': 3.4.2(rollup@3.21.2)
-      '@nuxt/telemetry': 2.2.0(rollup@3.21.2)
-      '@nuxt/ui-templates': 1.1.1
-      '@nuxt/vite-builder': 3.4.2(@types/node@18.16.3)(eslint@8.39.0)(rollup@3.21.2)(typescript@5.0.4)(vue-tsc@1.6.1)(vue@3.2.47)
-      '@types/node': 18.16.3
-      '@unhead/ssr': 1.1.26
-      '@unhead/vue': 1.1.26(vue@3.2.47)
-      '@vue/shared': 3.2.47
-      chokidar: 3.5.3
-      cookie-es: 0.5.0
-      defu: 6.1.2
-      destr: 1.2.2
-      devalue: 4.3.0
-      escape-string-regexp: 5.0.0
-      estree-walker: 3.0.3
-      fs-extra: 11.1.1
-      globby: 13.1.4
-      h3: 1.6.4
-      hookable: 5.5.3
-      jiti: 1.18.2
-      klona: 2.0.6
-      knitwork: 1.0.0
-      local-pkg: 0.4.3
-      magic-string: 0.30.0
-      mlly: 1.2.0
-      nitropack: 2.3.3
-      nuxi: 3.4.2
-      nypm: 0.2.0
-      ofetch: 1.0.1
-      ohash: 1.1.2
-      pathe: 1.1.0
-      perfect-debounce: 0.1.3
-      prompts: 2.4.2
-      scule: 1.0.0
-      strip-literal: 1.0.1
-      ufo: 1.1.1
-      unctx: 2.3.0
-      unenv: 1.4.1
-      unimport: 3.0.6(rollup@3.21.2)
-      unplugin: 1.3.1
-      untyped: 1.3.2
-      vue: 3.2.47
-      vue-bundle-renderer: 1.0.3
-      vue-devtools-stub: 0.1.0
-      vue-router: 4.1.6(vue@3.2.47)
-    transitivePeerDependencies:
-      - '@azure/app-configuration'
-      - '@azure/cosmos'
-      - '@azure/data-tables'
-      - '@azure/identity'
-      - '@azure/keyvault-secrets'
-      - '@azure/storage-blob'
-      - '@planetscale/database'
-      - debug
-      - encoding
-      - eslint
-      - less
-      - meow
-      - optionator
-      - rollup
-      - sass
-      - stylelint
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-      - typescript
-      - vls
-      - vti
-      - vue-tsc
-    dev: true
-
   /nuxt@3.4.3(@types/node@18.16.3)(eslint@8.39.0)(rollup@3.20.6)(typescript@5.0.4)(vue-tsc@1.6.1):
     resolution: {integrity: sha512-rOEdhHRH33m3L7aJDO7N8C+NC2vSa2mC/0hH/ePmg2S03qkzS0bVg1pIWW9ESDV5UVPFtfhOGoDTEkLJqvE18A==}
     engines: {node: ^14.18.0 || >=16.10.0}
@@ -10798,23 +10402,6 @@ packages:
       source-map: 0.7.4
       yargs: 17.6.2
 
-  /rollup-plugin-visualizer@5.9.0(rollup@3.21.2):
-    resolution: {integrity: sha512-bbDOv47+Bw4C/cgs0czZqfm8L82xOZssk4ayZjG40y9zbXclNk7YikrZTDao6p7+HDiGxrN0b65SgZiVm9k1Cg==}
-    engines: {node: '>=14'}
-    hasBin: true
-    peerDependencies:
-      rollup: 2.x || 3.x
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-    dependencies:
-      open: 8.4.2
-      picomatch: 2.3.1
-      rollup: 3.21.2
-      source-map: 0.7.4
-      yargs: 17.6.2
-    dev: true
-
   /rollup@3.20.6:
     resolution: {integrity: sha512-2yEB3nQXp/tBQDN0hJScJQheXdvU2wFhh6ld7K/aiZ1vYcak6N/BKjY1QrU6BvO2JWYS8bEs14FRaxXosxy2zw==}
     engines: {node: '>=14.18.0', npm: '>=8.0.0'}
@@ -11831,24 +11418,6 @@ packages:
     transitivePeerDependencies:
       - rollup
 
-  /unimport@3.0.6(rollup@3.21.2):
-    resolution: {integrity: sha512-GYxGJ1Bri1oqx8VFDjdgooGzeK7jBk3bvhXmamTIpu3nONOcUMGwZbX7X0L5RA7OWMXpR4vzpSQP7pXUzJg1/Q==}
-    dependencies:
-      '@rollup/pluginutils': 5.0.2(rollup@3.21.2)
-      escape-string-regexp: 5.0.0
-      fast-glob: 3.2.12
-      local-pkg: 0.4.3
-      magic-string: 0.30.0
-      mlly: 1.2.0
-      pathe: 1.1.0
-      pkg-types: 1.0.2
-      scule: 1.0.0
-      strip-literal: 1.0.1
-      unplugin: 1.3.1
-    transitivePeerDependencies:
-      - rollup
-    dev: true
-
   /unique-filename@2.0.1:
     resolution: {integrity: sha512-ODWHtkkdx3IAR+veKxFV+VBkUMcN+FaqzUUd7IZzt+0zhDZFPFxhlqwPF3YQvMHx1TD0tdgYl+kuPnJ8E6ql7A==}
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index a5a394310..fec31167a 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,3 +1,4 @@
 packages:
   - docs/**
   - packages/**
+  - playgrounds/**

From 77e720a2ee2df66422bf8684251947e5de10f0e7 Mon Sep 17 00:00:00 2001
From: arashsheyda <sheidaeearash1999@gmail.com>
Date: Tue, 2 May 2023 19:44:19 +0300
Subject: [PATCH 04/14] seo tab playground

---
 playgrounds/tab-seo/app.vue                  | 28 +----------
 playgrounds/tab-seo/components/GlobalNav.vue |  8 +--
 playgrounds/tab-seo/pages/bar.vue            | 52 ++++++++++++++++++--
 playgrounds/tab-seo/pages/dynamic-[name].vue |  7 +++
 playgrounds/tab-seo/pages/foo.vue            |  6 +--
 5 files changed, 62 insertions(+), 39 deletions(-)

diff --git a/playgrounds/tab-seo/app.vue b/playgrounds/tab-seo/app.vue
index 2137b7915..760a95fbd 100644
--- a/playgrounds/tab-seo/app.vue
+++ b/playgrounds/tab-seo/app.vue
@@ -1,31 +1,5 @@
 <script setup lang="ts">
-useHead({
-  title: 'SEO example',
-  link: [
-    {
-      rel: 'icon',
-      href: 'https://nuxt.com/icon.png',
-    },
-  ],
-  meta: [
-    {
-      property: 'og:title',
-      content: 'SEO example',
-    },
-    {
-      property: 'og:description',
-      content: 'This is an SEO example',
-    },
-    {
-      property: 'og:image',
-      content: 'https://nuxt.com/assets/blog/nuxt-static-improvements.png',
-    },
-    {
-      property: 'twitter:card',
-      content: 'summary_large_image',
-    },
-  ],
-})
+
 </script>
 
 <template>
diff --git a/playgrounds/tab-seo/components/GlobalNav.vue b/playgrounds/tab-seo/components/GlobalNav.vue
index 4e1e0dee5..560566e79 100644
--- a/playgrounds/tab-seo/components/GlobalNav.vue
+++ b/playgrounds/tab-seo/components/GlobalNav.vue
@@ -9,11 +9,11 @@
     <NuxtLink to="/bar">
       Bar
     </NuxtLink> |
-    <NuxtLink to="/dynamic-baz">
-      Dynamic Baz
+    <NuxtLink to="/dynamic-life">
+      Dynamic Life
     </NuxtLink> |
-    <NuxtLink to="/dynamic-qux">
-      Dynamic Qux
+    <NuxtLink to="/dynamic-power">
+      Dynamic Power
     </NuxtLink>
   </div>
 </template>
diff --git a/playgrounds/tab-seo/pages/bar.vue b/playgrounds/tab-seo/pages/bar.vue
index 14ab63a7d..3110d47ea 100644
--- a/playgrounds/tab-seo/pages/bar.vue
+++ b/playgrounds/tab-seo/pages/bar.vue
@@ -1,11 +1,55 @@
 <script setup lang="ts">
-const props = defineProps<{
-  modelValue?: boolean
-}>()
+const route = useRoute()
+
+useHead({
+  title: 'Bar page',
+  htmlAttrs: {
+    lang: 'en',
+  },
+  meta: [
+    { name: 'description', content: 'Discover our list of modules to supercharge your Nuxt project. Created by the Nuxt team and community.' },
+    { name: 'keywords', content: 'modules, nuxt, nuxt-devtools' },
+    { name: 'theme-color', content: '#06b66e' },
+    { name: 'author', content: 'Nuxt' },
+    { name: 'copyright', content: 'Nuxt' },
+    { name: 'robots', content: 'no-index' },
+
+    // OG
+    { name: 'og:url', content: route.fullPath },
+    { name: 'og:type', content: 'website' },
+    { name: 'og:locale', content: 'en' },
+    { name: 'og:site_name', content: 'Nuxt' },
+    { name: 'og:title', content: 'Bar page' },
+    { name: 'og:description', content: 'Discover our list of modules to supercharge your Nuxt project. Created by the Nuxt team and community.' },
+    { name: 'og:image', content: 'https://nuxt.com/socials/modules.jpg' },
+    { name: 'og:image:alt', content: 'Bar page' },
+
+    // Twitter
+    { name: 'twitter:card', content: 'summary_large_image' },
+    { name: 'twitter:title', content: 'Bar page' },
+    { name: 'twitter:image:alt', content: 'Bar page' },
+    { name: 'twitter:description', content: 'Discover our list of modules to supercharge your Nuxt project. Created by the Nuxt team and community.' },
+    { name: 'twitter:image', content: 'https://nuxt.com/socials/modules.jpg' },
+    { name: 'twitter:image:alt', content: 'Bar page' },
+    { name: 'twitter:site', content: 'nuxt_js' },
+    { name: 'twitter:creator', content: 'nuxt_js' },
+  ],
+  link: [
+    {
+      rel: 'icon',
+      type: 'image/x-icon',
+      href: '/favicon.ico',
+    },
+    {
+      rel: 'apple-touch-icon',
+      href: '/apple-touch-icon.png',
+    },
+  ],
+})
 </script>
 
 <template>
   <div>
-    Bar!
+    Bar, is full!
   </div>
 </template>
diff --git a/playgrounds/tab-seo/pages/dynamic-[name].vue b/playgrounds/tab-seo/pages/dynamic-[name].vue
index 5e109e38b..8393126b2 100644
--- a/playgrounds/tab-seo/pages/dynamic-[name].vue
+++ b/playgrounds/tab-seo/pages/dynamic-[name].vue
@@ -2,6 +2,13 @@
 const route = useRoute()
 
 const name = computed(() => route.params.name as string)
+
+useHead({
+  title: `Nuxt is ${name.value}!`,
+  meta: [
+    { property: 'og:image', content: `https://cataas.com/cat/says/Nuxt%20is%20${name.value}!?width=480&height=300` },
+  ],
+})
 </script>
 
 <template>
diff --git a/playgrounds/tab-seo/pages/foo.vue b/playgrounds/tab-seo/pages/foo.vue
index 2630c2def..e0bc53636 100644
--- a/playgrounds/tab-seo/pages/foo.vue
+++ b/playgrounds/tab-seo/pages/foo.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
-const props = defineProps<{
-  modelValue?: boolean
-}>()
+
 </script>
 
 <template>
   <div>
-    Foo!
+    Foo, is empty!
   </div>
 </template>

From 1ce7b79257e982be2744138df3f9bce2aed2e806 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Wed, 3 May 2023 21:17:38 +0200
Subject: [PATCH 05/14] chore: update

---
 .../client/components/SeoSocialCards.vue      |  15 +-
 .../devtools/client/pages/modules/seo.vue     | 188 ++++++++----------
 packages/devtools/src/types/ui-state.ts       |   6 +
 playgrounds/tab-seo/app.vue                   |  14 +-
 playgrounds/tab-seo/components/GlobalNav.vue  |  27 +--
 playgrounds/tab-seo/nuxt.config.ts            |   1 +
 .../tab-seo/pages/{foo.vue => empty.vue}      |   2 +-
 .../tab-seo/pages/{bar.vue => full.vue}       |   0
 8 files changed, 130 insertions(+), 123 deletions(-)
 rename playgrounds/tab-seo/pages/{foo.vue => empty.vue} (80%)
 rename playgrounds/tab-seo/pages/{bar.vue => full.vue} (100%)

diff --git a/packages/devtools/client/components/SeoSocialCards.vue b/packages/devtools/client/components/SeoSocialCards.vue
index 626419598..3f7731dbc 100644
--- a/packages/devtools/client/components/SeoSocialCards.vue
+++ b/packages/devtools/client/components/SeoSocialCards.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import type { HeadTag } from '@unhead/vue'
-import type { SocialPreviewResolved } from '../../src/types'
+import type { NormalizedHeadTag, SocialPreviewResolved } from '../../src/types'
 
 const props = defineProps({
   tags: {
-    type: Array as PropType<HeadTag[]>,
+    type: Array as PropType<NormalizedHeadTag[]>,
     required: true,
   },
 })
@@ -20,11 +19,11 @@ const selected = ref(types[0])
 const card = computed((): SocialPreviewResolved => {
   return {
     url: window.location.host,
-    title: props.tags.find(tag => tag.tag === 'title')?.textContent,
-    image: props.tags.find(tag => tag.tag === 'meta' && tag.props.property === 'og:image')?.props.content,
-    imageAlt: props.tags.find(tag => tag.tag === 'meta' && tag.props.property === 'og:image:alt')?.props.content,
-    description: props.tags.find(tag => tag.tag === 'meta' && tag.props.property === 'og:description')?.props.content,
-    favicon: props.tags.find(tag => tag.tag === 'link' && tag.props.rel === 'icon')?.props.href,
+    title: props.tags.find(tag => tag.tag === 'title')?.value,
+    image: props.tags.find(tag => tag.tag === 'meta' && tag.name === 'og:image')?.value,
+    imageAlt: props.tags.find(tag => tag.tag === 'meta' && tag.name === 'og:image:alt')?.value,
+    description: props.tags.find(tag => tag.tag === 'meta' && tag.name === 'og:description')?.value,
+    favicon: props.tags.find(tag => tag.tag === 'link' && tag.name === 'icon')?.value,
   }
 })
 </script>
diff --git a/packages/devtools/client/pages/modules/seo.vue b/packages/devtools/client/pages/modules/seo.vue
index 820999b8a..9e700d2b8 100644
--- a/packages/devtools/client/pages/modules/seo.vue
+++ b/packages/devtools/client/pages/modules/seo.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import Fuse from 'fuse.js'
+import type { NormalizedHeadTag } from '~/../src/types/ui-state'
 
 definePageMeta({
-  icon: 'carbon-cloud-monitoring',
+  icon: 'icon-park-outline:seo',
   title: 'SEO',
   layout: 'full',
   category: 'analyze',
@@ -10,74 +11,65 @@ definePageMeta({
   show: () => !!useClient().value,
 })
 
-// TODO:
-const tagList = [
-  {
-    name: 'main',
-    icon: 'carbon-tag-group',
-    tags: [
-      'lang',
-      'title',
-      'description',
-      'keywords',
-      'favicon',
-      'viewport',
-      'robots',
-    ],
-  },
-  {
-    name: 'og',
-    icon: 'carbon-logo-facebook',
-    tags: [
-      'og:title',
-      'og:description',
-      'og:image',
-      'og:url',
-      'og:site_name',
-      'og:type',
-      'og:locale',
-    ],
-  },
-  {
-    name: 'twitter',
-    icon: 'carbon-logo-twitter',
-    tags: [
-      'twitter:card',
-      'twitter:site',
-      'twitter:creator',
-      'twitter:title',
-      'twitter:description',
-      'twitter:image',
-      'twitter:image:alt',
-    ],
-  },
-  {
-    name: 'other',
-    icon: 'carbon-tag-export',
-    tags: [
-      'apple-touch-icon',
-      'theme-color',
-      'copyright',
-      'author',
-    ],
-  },
-]
+const seoTags = [
+  // TODO: docs, links, default, types
+  ['title', { suggestion: 'required' }],
+  ['description', { suggestion: 'required' }],
+  ['og:url', { suggestion: 'recommended' }],
+  ['og:title', { suggestion: 'required' }],
+  ['og:description', { suggestion: 'required' }],
+  ['og:image', { suggestion: 'required' }],
+  ['og:image:alt', { suggestion: 'required' }],
+  ['og:type', { suggestion: 'optional' }],
+  ['og:site_name', { suggestion: 'recommended' }],
+  ['twitter:card', { suggestion: 'required' }],
+  ['twitter:site', { suggestion: 'recommended' }],
+  ['twitter:creator', { suggestion: 'recommended' }],
+  ['twitter:title', { suggestion: 'recommended' }],
+  ['twitter:description', { suggestion: 'recommended' }],
+  ['twitter:image', { suggestion: 'required' }],
+  ['twitter:image:alt', { suggestion: 'recommended' }],
+] as const
 
+const counter = ref(0)
 const head = useClientHead()
-
 const headTags = computedAsync(async () => {
-  return await head.value?.resolveTags()
+  // eslint-disable-next-line no-unused-expressions
+  counter.value // for force refresh
+  const tags = await head.value?.resolveTags()
+  return tags.map((tag): NormalizedHeadTag => {
+    const props = tag.props || {}
+    if (tag.tag === 'htmlAttrs' && props.lang) {
+      return {
+        tag: 'html',
+        name: 'lang',
+        value: props.lang,
+      }
+    }
+    if (props.charset) {
+      return {
+        tag: 'meta',
+        name: 'charset',
+        value: props.charset,
+      }
+    }
+    return {
+      tag: tag.tag,
+      name: props.property ?? props.name ?? props.rel ?? tag.tag,
+      value: props.content ?? props.href ?? tag.textContent ?? JSON.stringify(props),
+    }
+  })
 })
 
 const search = ref('')
 const fuse = computed(() => new Fuse(headTags.value || [], {
   keys: [
     'tag',
-    'props.name',
-    'props.property',
-    'props.content',
+    'name',
+    'value',
   ],
 }))
+
 const filtered = computed(() => {
   const result = search.value
     ? fuse.value.search(search.value).map(i => i.item)
@@ -85,44 +77,27 @@ const filtered = computed(() => {
   return result
 })
 
-function getTags(tags: string[]) {
-  return tags.filter(tag => !headTags.value?.some((item) => {
-    if (item.tag === 'meta')
-      return item.props.name?.includes(tag)
-    if (item.tag === 'title')
-      return tag === 'title'
-    if (item.tag === 'htmlAttrs') {
-      if (tag === 'lang')
-        return item.props.lang
-    }
-    if (item.tag === 'link') {
-      if (item.props.rel === 'icon')
-        return tag === 'favicon'
-    }
-    return false
-  }))
-}
-
-const showPreview = ref(true)
-
 const missingTags = computed(() => {
-  return tagList.map(group => ({
-    name: group.name,
-    icon: group.icon,
-    tags: getTags(group.tags),
-  })).filter(group => group.tags.length)
+  return seoTags.filter(([name]) => !headTags.value?.some(tag => tag.name === name))
 })
 
-const missingTagsCount = computed(() => missingTags.value.reduce((acc, cur) => acc + cur.tags.length, 0))
+const missingRequiredTags = computed(() => {
+  return missingTags.value.filter(i => i[1].suggestion === 'required')
+})
+const missingRecommendedTags = computed(() => {
+  return missingTags.value.filter(i => i[1].suggestion === 'recommended')
+})
+
+const showPreview = ref(true)
 
 async function refresh() {
-  headTags.value = await head.value.resolveTags()
+  counter.value += 1
 }
 </script>
 
 <template>
   <div flex="~" h-full w-full of-hidden>
-    <div flex-auto of-auto bg-active>
+    <div flex-auto of-auto>
       <Navbar v-model:search="search">
         <template #actions>
           <div flex-none flex="~ gap4">
@@ -145,16 +120,20 @@ async function refresh() {
           <span>{{ headTags?.length }} tags in total</span>
         </div>
       </Navbar>
-      <NSectionBlock text="Tags" icon="carbon:checkmark-filled">
+      <NSectionBlock
+        text="SEO Tags"
+        icon="carbon:tag"
+        :description="`${headTags?.length} tags`"
+      >
         <NCard mb4 grid="~ cols-[max-content_1fr]" items-center justify-between of-hidden>
           <template v-for="item, index of filtered" :key="index">
             <div v-if="index" x-divider />
             <div v-if="index" x-divider />
             <div mr2 px4 py2 op50>
-              {{ item.props?.name ?? item.props?.property ?? Object.keys(item.props)[0] ?? item.tag }}
+              {{ item.name }}
             </div>
             <div w-full p2 font-mono>
-              {{ item.props?.content ?? item.props?.href ?? item.textContent ?? JSON.stringify(item.props) }}
+              {{ item.value }}
             </div>
           </template>
         </NCard>
@@ -162,18 +141,27 @@ async function refresh() {
           No tags found
         </div>
       </NSectionBlock>
-      <NSectionBlock v-if="missingTagsCount" :text="`Missing Tags (${missingTagsCount})`" icon="carbon:warning-filled" :padding="false">
-        <NSectionBlock v-for="group in missingTags" :key="group.name" :text="`${group.name} (${group.tags.length})`" :icon="group.icon" :open="false">
-          <NCard v-for="tag of group.tags" :key="tag" mb4 flex items-center justify-between p4>
-            <div flex items-center>
-              <NIcon icon="carbon:warning-filled" mr2 bg-red />
-              {{ tag }}
+      <NSectionBlock
+        v-if="missingTags.length"
+        text="Missing Tags"
+        icon="carbon:warning"
+        :open="false"
+        :description="`${missingRequiredTags.length} required, ${missingRecommendedTags.length} recommended`"
+      >
+        <NCard mb4 grid="~ cols-[max-content_1fr]" items-center justify-between of-hidden>
+          <template v-for="item, index of missingTags" :key="index">
+            <div v-if="index" x-divider />
+            <div v-if="index" x-divider />
+            <div mr2 px4 py2 op50>
+              {{ item[0] }}
+            </div>
+            <!-- TODO: use icons instead, show link to documentation -->
+            <div w-full p2 text-end font-mono :class="item[1].suggestion === 'required' ? 'text-red' : 'text-orange' ">
+              {{ item[1].suggestion }}
             </div>
-            <span class="text-gray-400">
-              Missing
-            </span>
-          </NCard>
-        </NSectionBlock>
+            <!-- TODO: generate snippet for copy -->
+          </template>
+        </NCard>
       </NSectionBlock>
     </div>
     <SeoSocialCards v-if="showPreview && headTags?.length" :tags="headTags" border="l base" w-540px flex-none />
diff --git a/packages/devtools/src/types/ui-state.ts b/packages/devtools/src/types/ui-state.ts
index f9d8d1b50..f2ca249f1 100644
--- a/packages/devtools/src/types/ui-state.ts
+++ b/packages/devtools/src/types/ui-state.ts
@@ -30,3 +30,9 @@ export interface SocialPreviewResolved {
   image?: string
   imageAlt?: string
 }
+
+export interface NormalizedHeadTag {
+  tag: string
+  name: string
+  value: string
+}
diff --git a/playgrounds/tab-seo/app.vue b/playgrounds/tab-seo/app.vue
index 760a95fbd..d772acfd0 100644
--- a/playgrounds/tab-seo/app.vue
+++ b/playgrounds/tab-seo/app.vue
@@ -1,8 +1,18 @@
 <script setup lang="ts">
-
+useHead({
+  title: 'Default Page',
+  meta: [
+    {
+      property: 'og:title',
+      content: 'Default Page',
+    },
+  ],
+})
 </script>
 
 <template>
   <GlobalNav />
-  <NuxtPage />
+  <div px10 text-6xl>
+    <NuxtPage />
+  </div>
 </template>
diff --git a/playgrounds/tab-seo/components/GlobalNav.vue b/playgrounds/tab-seo/components/GlobalNav.vue
index 560566e79..b1e1db302 100644
--- a/playgrounds/tab-seo/components/GlobalNav.vue
+++ b/playgrounds/tab-seo/components/GlobalNav.vue
@@ -1,18 +1,21 @@
 <template>
-  <div>
-    <NuxtLink to="/">
+  <div px10 pt10 op50>
+    Click to navigate and see the SEO tab
+  </div>
+  <div px10 py5 flex="~ gap-4">
+    <NuxtLink to="/" active-class="text-green">
       Home
-    </NuxtLink> |
-    <NuxtLink to="/foo">
-      Foo
-    </NuxtLink> |
-    <NuxtLink to="/bar">
-      Bar
-    </NuxtLink> |
-    <NuxtLink to="/dynamic-life">
+    </NuxtLink>
+    <NuxtLink to="/empty" active-class="text-green">
+      Empty
+    </NuxtLink>
+    <NuxtLink to="/full" active-class="text-green">
+      Full
+    </NuxtLink>
+    <NuxtLink to="/dynamic-life" active-class="text-green">
       Dynamic Life
-    </NuxtLink> |
-    <NuxtLink to="/dynamic-power">
+    </NuxtLink>
+    <NuxtLink to="/dynamic-power" active-class="text-green">
       Dynamic Power
     </NuxtLink>
   </div>
diff --git a/playgrounds/tab-seo/nuxt.config.ts b/playgrounds/tab-seo/nuxt.config.ts
index 222f0ff5c..d733b5bff 100644
--- a/playgrounds/tab-seo/nuxt.config.ts
+++ b/playgrounds/tab-seo/nuxt.config.ts
@@ -1,6 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   modules: [
+    '../../packages/devtools-ui-kit',
     '../../local',
   ],
 })
diff --git a/playgrounds/tab-seo/pages/foo.vue b/playgrounds/tab-seo/pages/empty.vue
similarity index 80%
rename from playgrounds/tab-seo/pages/foo.vue
rename to playgrounds/tab-seo/pages/empty.vue
index e0bc53636..04e2cc2de 100644
--- a/playgrounds/tab-seo/pages/foo.vue
+++ b/playgrounds/tab-seo/pages/empty.vue
@@ -4,6 +4,6 @@
 
 <template>
   <div>
-    Foo, is empty!
+    Empty!
   </div>
 </template>
diff --git a/playgrounds/tab-seo/pages/bar.vue b/playgrounds/tab-seo/pages/full.vue
similarity index 100%
rename from playgrounds/tab-seo/pages/bar.vue
rename to playgrounds/tab-seo/pages/full.vue

From 7c038de047dc4453b189d2fa8a3dfdc8d9844a4b Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Sun, 7 May 2023 04:00:05 +0200
Subject: [PATCH 06/14] feat: progress

---
 .../client/components/CodeSnippet.vue         |  34 ++++
 .../client/components/CodeSnippets.vue        |  24 +--
 .../SocialPreviewGroup.vue}                   |  11 +-
 packages/devtools/client/data/seo.ts          | 168 ++++++++++++++++++
 .../devtools/client/pages/modules/seo.vue     | 167 +++++++----------
 5 files changed, 274 insertions(+), 130 deletions(-)
 create mode 100644 packages/devtools/client/components/CodeSnippet.vue
 rename packages/devtools/client/components/{SeoSocialCards.vue => social/SocialPreviewGroup.vue} (92%)
 create mode 100644 packages/devtools/client/data/seo.ts

diff --git a/packages/devtools/client/components/CodeSnippet.vue b/packages/devtools/client/components/CodeSnippet.vue
new file mode 100644
index 000000000..dcc8cf3a3
--- /dev/null
+++ b/packages/devtools/client/components/CodeSnippet.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { CodeSnippet } from '~~/../src/types'
+
+defineProps<{
+  snippet: CodeSnippet
+}>()
+
+const copy = useCopy()
+</script>
+
+<template>
+  <div>
+    <NCodeBlock
+      :code="snippet.code"
+      :lang="snippet.lang"
+      :lines="false"
+      w-full of-auto p3
+    />
+    <div flex="~ gap-2" px3 pb3 n="sm primary">
+      <NButton
+        icon="carbon-copy"
+        @click="copy(snippet!.code)"
+      >
+        Copy
+      </NButton>
+      <NButton
+        v-if="snippet?.docs" :to="snippet.docs" target="_blank"
+        icon="carbon-catalog"
+      >
+        Docs
+      </NButton>
+    </div>
+  </div>
+</template>
diff --git a/packages/devtools/client/components/CodeSnippets.vue b/packages/devtools/client/components/CodeSnippets.vue
index 7806bf617..57acca822 100644
--- a/packages/devtools/client/components/CodeSnippets.vue
+++ b/packages/devtools/client/components/CodeSnippets.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import type { CodeSnippet } from '~~/../src/types'
+import { CodeSnippet } from '~~/../src/types'
 
 const props = defineProps<{
   codeSnippets: CodeSnippet[]
 }>()
 
 const selected = shallowRef<CodeSnippet | undefined>(props.codeSnippets[0])
-const copy = useCopy()
 
 watchEffect(() => {
   if (!props.codeSnippets.includes(selected.value!))
@@ -33,26 +32,7 @@ watchEffect(() => {
     </div>
 
     <template v-if="selected">
-      <NCodeBlock
-        :code="selected.code"
-        :lang="selected.lang"
-        :lines="false"
-        w-full of-auto p3
-      />
-      <div flex="~ gap-2" px3 pb3 n="sm primary">
-        <NButton
-          icon="carbon-copy"
-          @click="copy(selected!.code)"
-        >
-          Copy
-        </NButton>
-        <NButton
-          v-if="selected?.docs" :to="selected.docs" target="_blank"
-          icon="carbon-catalog"
-        >
-          Docs
-        </NButton>
-      </div>
+      <CodeSnippet :snippet="selected" />
     </template>
   </div>
 </template>
diff --git a/packages/devtools/client/components/SeoSocialCards.vue b/packages/devtools/client/components/social/SocialPreviewGroup.vue
similarity index 92%
rename from packages/devtools/client/components/SeoSocialCards.vue
rename to packages/devtools/client/components/social/SocialPreviewGroup.vue
index 3f7731dbc..ef3c736ab 100644
--- a/packages/devtools/client/components/SeoSocialCards.vue
+++ b/packages/devtools/client/components/social/SocialPreviewGroup.vue
@@ -1,12 +1,9 @@
 <script setup lang="ts">
-import type { NormalizedHeadTag, SocialPreviewResolved } from '../../src/types'
+import type { NormalizedHeadTag, SocialPreviewResolved } from '../../../src/types'
 
-const props = defineProps({
-  tags: {
-    type: Array as PropType<NormalizedHeadTag[]>,
-    required: true,
-  },
-})
+const props = defineProps<{
+  tags: NormalizedHeadTag[]
+}>()
 
 const types = [
   'twitter',
diff --git a/packages/devtools/client/data/seo.ts b/packages/devtools/client/data/seo.ts
new file mode 100644
index 000000000..e15370f9d
--- /dev/null
+++ b/packages/devtools/client/data/seo.ts
@@ -0,0 +1,168 @@
+import type { ReactiveHead } from '@unhead/vue'
+
+export interface SeoTagDefine {
+  name: string
+  suggestion: 'required' | 'recommended' | 'optional'
+  default: Partial<ReactiveHead>
+  docs?: string
+  description?: string
+}
+export const seoTags: SeoTagDefine[] = [
+  {
+    name: 'title',
+    suggestion: 'required',
+    default: {
+      title: '[title]',
+    },
+    docs: 'https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title',
+    description: 'A concise and descriptive title for the browser that accurately summarizes the content of the page.',
+  },
+  {
+    name: 'description',
+    suggestion: 'required',
+    default: {
+      meta: [
+        {
+          name: 'description',
+          content: '[description]',
+        },
+      ],
+    },
+    description: 'A one to two sentence summary for search engines that includes relevant keywords to improve visibility in search results.',
+  },
+  {
+    name: 'icon',
+    suggestion: 'recommended',
+    default: {
+      link: [
+        {
+          rel: 'icon',
+          type: 'image/png',
+          href: '/favicon.png',
+        },
+      ],
+    },
+    description: 'A small image that appears in the browser tab and bookmark menu to help users easily identify the page.',
+  },
+  {
+    name: 'lang',
+    suggestion: 'recommended',
+    default: {
+      htmlAttrs: {
+        lang: 'en',
+      },
+    },
+    description: 'The primary language of the page to help search engines and browsers understand the content.',
+  },
+  {
+    name: 'og:title',
+    suggestion: 'recommended',
+    default: {
+      meta: [
+        {
+          property: 'og:title',
+          content: '[og:title]',
+        },
+      ],
+    },
+    docs: 'https://ogp.me/#metadata',
+    description: 'A title for the link preview used by social media platforms.',
+  },
+  {
+    name: 'og:description',
+    suggestion: 'recommended',
+    default: {
+      meta: [
+        {
+          property: 'og:description',
+          content: '[og:description]',
+        },
+      ],
+    },
+    docs: 'https://ogp.me/#metadata',
+    description: 'A description for the link preview used by social media platforms.',
+  },
+  {
+    name: 'og:image',
+    suggestion: 'recommended',
+    default: {
+      meta: [
+        {
+          property: 'og:image',
+          content: '[og:image]',
+        },
+      ],
+    },
+    docs: 'https://ogp.me/#metadata',
+    description: 'An image for the link preview used by social media platforms.',
+  },
+  {
+    name: 'og:url',
+    suggestion: 'recommended',
+    default: {
+      meta: [
+        {
+          property: 'og:url',
+          content: '[og:url]',
+        },
+      ],
+    },
+    docs: 'https://ogp.me/#metadata',
+    description: 'A canonical URL for the link preview used to specify the preferred URL to display in search engine results and social media previews when multiple URLs may point to the same page.',
+  },
+  {
+    name: 'twitter:title',
+    suggestion: 'recommended',
+    default: {
+      meta: [
+        {
+          name: 'twitter:title',
+          content: '[twitter:title]',
+        },
+      ],
+    },
+    docs: 'https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards',
+    description: 'A title for the Twitter card used to provide a preview of the content shared on the page.',
+  },
+  {
+    name: 'twitter:description',
+    suggestion: 'recommended',
+    default: {
+      meta: [{
+        name: 'twitter:description',
+        content: '[twitter:description]',
+      },
+      ],
+    },
+    docs: 'https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards',
+    description: 'A description for the Twitter card used to provide a preview of the content shared on the page.',
+  },
+  {
+    name: 'twitter:image',
+    suggestion: 'recommended',
+    default: {
+      meta: [
+        {
+          name: 'twitter:image',
+          content: '[twitter:image]',
+        },
+      ],
+    },
+    docs: 'https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards',
+    description: 'An image for the Twitter card used to provide a preview of the content shared on the page.',
+  },
+  {
+    name: 'twitter:card',
+    suggestion: 'recommended',
+    default: {
+      meta: [
+        {
+          name: 'twitter:card',
+          content: 'summary',
+        },
+      ],
+    },
+    docs: 'https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards',
+    description: 'The type of Twitter card to use, which determines the type of card to display in link previews on Twitter.',
+  },
+]
diff --git a/packages/devtools/client/pages/modules/seo.vue b/packages/devtools/client/pages/modules/seo.vue
index 9e700d2b8..4893435e2 100644
--- a/packages/devtools/client/pages/modules/seo.vue
+++ b/packages/devtools/client/pages/modules/seo.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import Fuse from 'fuse.js'
+import { defu } from 'defu'
+import type { ReactiveHead } from '@unhead/vue'
 import type { NormalizedHeadTag } from '~/../src/types/ui-state'
+import { seoTags } from '~/data/seo'
 
 definePageMeta({
   icon: 'icon-park-outline:seo',
@@ -11,28 +13,9 @@ definePageMeta({
   show: () => !!useClient().value,
 })
 
-const seoTags = [
-  // TODO: docs, links, default, types
-  ['title', { suggestion: 'required' }],
-  ['description', { suggestion: 'required' }],
-  ['og:url', { suggestion: 'recommended' }],
-  ['og:title', { suggestion: 'required' }],
-  ['og:description', { suggestion: 'required' }],
-  ['og:image', { suggestion: 'required' }],
-  ['og:image:alt', { suggestion: 'required' }],
-  ['og:type', { suggestion: 'optional' }],
-  ['og:site_name', { suggestion: 'recommended' }],
-  ['twitter:card', { suggestion: 'required' }],
-  ['twitter:site', { suggestion: 'recommended' }],
-  ['twitter:creator', { suggestion: 'recommended' }],
-  ['twitter:title', { suggestion: 'recommended' }],
-  ['twitter:description', { suggestion: 'recommended' }],
-  ['twitter:image', { suggestion: 'required' }],
-  ['twitter:image:alt', { suggestion: 'recommended' }],
-] as const
-
 const counter = ref(0)
 const head = useClientHead()
+
 const headTags = computedAsync(async () => {
   // eslint-disable-next-line no-unused-expressions
   counter.value // for force refresh
@@ -59,74 +42,49 @@ const headTags = computedAsync(async () => {
       value: props.content ?? props.href ?? tag.textContent ?? JSON.stringify(props),
     }
   })
-})
-
-const search = ref('')
-const fuse = computed(() => new Fuse(headTags.value || [], {
-  keys: [
-    'tag',
-    'name',
-    'value',
-  ],
-}))
-
-const filtered = computed(() => {
-  const result = search.value
-    ? fuse.value.search(search.value).map(i => i.item)
-    : (headTags.value || [])
-  return result
-})
+}, [])
 
 const missingTags = computed(() => {
-  return seoTags.filter(([name]) => !headTags.value?.some(tag => tag.name === name))
+  return seoTags.filter(define => !headTags.value?.some(tag => tag.name === define.name))
 })
 
 const missingRequiredTags = computed(() => {
-  return missingTags.value.filter(i => i[1].suggestion === 'required')
+  return missingTags.value.filter(i => i.suggestion === 'required')
 })
 const missingRecommendedTags = computed(() => {
-  return missingTags.value.filter(i => i[1].suggestion === 'recommended')
+  return missingTags.value.filter(i => i.suggestion === 'recommended')
 })
 
 const showPreview = ref(true)
 
-async function refresh() {
-  counter.value += 1
-}
+const mergedMissingTags = computed(() => {
+  let data: Partial<ReactiveHead> = {}
+  missingTags.value
+    .forEach((tag) => {
+      data = defu(data, tag.default)
+    })
+  return data
+})
+
+const codeSnippet = computed(() => {
+  const body = JSON.stringify(mergedMissingTags.value, null, 2)
+    .replace(/"([^"]+)":/g, '$1:')
+    .replace(/"/g, '\'')
+  return {
+    code: `useHead(${body})`,
+    lang: 'ts',
+    name: 'useHead',
+  }
+})
 </script>
 
 <template>
   <div flex="~" h-full w-full of-hidden>
-    <div flex-auto of-auto>
-      <Navbar v-model:search="search">
-        <template #actions>
-          <div flex-none flex="~ gap4">
-            <button
-              title="Refresh Data"
-              @click="refresh"
-            >
-              <NIcon icon="carbon:reset" />
-            </button>
-            <button
-              title="Toggle Preview"
-              @click="showPreview = !showPreview"
-            >
-              <NIcon :icon="showPreview ? 'carbon:side-panel-open' : 'carbon:open-panel-right'" />
-            </button>
-          </div>
-        </template>
-        <div op50>
-          <span v-if="search">{{ filtered.length }} matched · </span>
-          <span>{{ headTags?.length }} tags in total</span>
-        </div>
-      </Navbar>
-      <NSectionBlock
-        text="SEO Tags"
-        icon="carbon:tag"
-        :description="`${headTags?.length} tags`"
-      >
-        <NCard mb4 grid="~ cols-[max-content_1fr]" items-center justify-between of-hidden>
-          <template v-for="item, index of filtered" :key="index">
+    <div h-full flex-auto of-auto p4>
+      <div flex="~ col gap-4">
+        <!-- TODO: show current route -->
+        <NCard grid="~ cols-[max-content_1fr]" items-center justify-between of-hidden>
+          <template v-for="item, index of headTags" :key="index">
             <div v-if="index" x-divider />
             <div v-if="index" x-divider />
             <div mr2 px4 py2 op50>
@@ -134,38 +92,45 @@ async function refresh() {
             </div>
             <div w-full p2 font-mono>
               {{ item.value }}
+              <!-- TODO: make link clickable -->
             </div>
           </template>
         </NCard>
-        <div v-if="!filtered.length" py4 text-center text-gray-400>
-          No tags found
-        </div>
-      </NSectionBlock>
-      <NSectionBlock
-        v-if="missingTags.length"
-        text="Missing Tags"
-        icon="carbon:warning"
-        :open="false"
-        :description="`${missingRequiredTags.length} required, ${missingRecommendedTags.length} recommended`"
-      >
-        <NCard mb4 grid="~ cols-[max-content_1fr]" items-center justify-between of-hidden>
-          <template v-for="item, index of missingTags" :key="index">
-            <div v-if="index" x-divider />
-            <div v-if="index" x-divider />
-            <div mr2 px4 py2 op50>
-              {{ item[0] }}
-            </div>
-            <!-- TODO: use icons instead, show link to documentation -->
-            <div w-full p2 text-end font-mono :class="item[1].suggestion === 'required' ? 'text-red' : 'text-orange' ">
-              {{ item[1].suggestion }}
-            </div>
-            <!-- TODO: generate snippet for copy -->
-          </template>
-        </NCard>
-      </NSectionBlock>
+
+        <template v-if="missingTags.length">
+          <div>{{ missingRequiredTags.length }} required, {{ missingRecommendedTags.length }} recommended</div>
+          <NCard grid="~ cols-[max-content_1fr]" items-center justify-between of-hidden>
+            <template v-for="item, index of missingTags" :key="index">
+              <div v-if="index" x-divider />
+              <div v-if="index" x-divider />
+              <div mr2 px4 py2 text-orange op75>
+                <div i-carbon-warning />
+                {{ item.name }}
+              </div>
+              <!-- TODO: use icons instead, show link to documentation -->
+              <div w-full p2>
+                {{ item.description }}
+                <NLink
+                  v-if="item.docs"
+                  :to="item.docs"
+                  n="primary" cursor-pointer
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Docs
+                </NLink>
+              </div>
+            </template>
+          </NCard>
+          <NCard n-code-block>
+            <CodeSnippet :snippet="codeSnippet" />
+          </NCard>
+        </template>
+      </div>
     </div>
-    <SeoSocialCards v-if="showPreview && headTags?.length" :tags="headTags" border="l base" w-540px flex-none />
+    <SocialPreviewGroup v-if="showPreview && headTags?.length" :tags="headTags" border="l base" w-540px flex-none />
   </div>
+
   <HelpFab>
     <DocsSeo />
   </HelpFab>

From 331847262e6d67de0a78cb16a6c747ce71406c48 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Sun, 7 May 2023 21:45:36 +0200
Subject: [PATCH 07/14] feat: improve preview

---
 .../components/social/SocialLinkedin.vue      |  2 +-
 .../components/social/SocialPreviewGroup.vue  |  6 +-
 .../components/social/SocialTwitter.vue       | 56 +++++++++++-----
 .../devtools/client/pages/modules/seo.vue     | 64 ++++++++++++++++++-
 4 files changed, 106 insertions(+), 22 deletions(-)

diff --git a/packages/devtools/client/components/social/SocialLinkedin.vue b/packages/devtools/client/components/social/SocialLinkedin.vue
index d783bf7d4..6a4dac6d2 100644
--- a/packages/devtools/client/components/social/SocialLinkedin.vue
+++ b/packages/devtools/client/components/social/SocialLinkedin.vue
@@ -9,7 +9,7 @@ defineProps<{
 <template>
   <div class="max-w-[520px] min-w-[520px] cursor-pointer overflow-hidden border border-base rounded-[2px] shadow-md">
     <div
-      class="h-[270px] border-[1px] bg-cover bg-center bg-no-repeat"
+      class="h-[270px] border-b border-base bg-cover bg-center bg-no-repeat"
       :style="{ backgroundImage: `url(${JSON.stringify(card.image)})` }"
     /><div class="break-words p-[10px] antialiased">
       <div class="block h-auto max-h-[50px] border-separate select-none break-words text-left" style="border-spacing: 0px;">
diff --git a/packages/devtools/client/components/social/SocialPreviewGroup.vue b/packages/devtools/client/components/social/SocialPreviewGroup.vue
index ef3c736ab..c7d344054 100644
--- a/packages/devtools/client/components/social/SocialPreviewGroup.vue
+++ b/packages/devtools/client/components/social/SocialPreviewGroup.vue
@@ -26,7 +26,7 @@ const card = computed((): SocialPreviewResolved => {
 </script>
 
 <template>
-  <div h-full w-525px flex="~ col">
+  <div h-full w-max flex="~ col">
     <div flex="~ wrap" w-full flex-none>
       <template v-for="name, idx of types" :key="idx">
         <button
@@ -42,12 +42,12 @@ const card = computed((): SocialPreviewResolved => {
       </template>
       <div border="b base" flex-auto />
     </div>
-    <div flex="~ items-center justify-center" flex-auto>
+    <div flex="~ items-center justify-center" flex-auto p4>
       <div v-if="selected === 'facebook'">
         <SocialFacebook :card="card" />
       </div>
       <div v-else-if="selected === 'twitter'">
-        <SocialTwitter :card="card" />
+        <SocialTwitter :tags="tags" />
       </div>
       <div v-else-if="selected === 'linkedin'">
         <SocialLinkedin :card="card" />
diff --git a/packages/devtools/client/components/social/SocialTwitter.vue b/packages/devtools/client/components/social/SocialTwitter.vue
index 1faab88f6..4dc51913f 100644
--- a/packages/devtools/client/components/social/SocialTwitter.vue
+++ b/packages/devtools/client/components/social/SocialTwitter.vue
@@ -1,30 +1,54 @@
 <script setup lang="ts">
-import type { SocialPreviewResolved } from '~/../src/types'
+import type { NormalizedHeadTag, SocialPreviewResolved } from '~/../src/types'
 
-defineProps<{
-  card: SocialPreviewResolved
+const props = defineProps<{
+  tags: NormalizedHeadTag[]
 }>()
+
+const card = computed((): SocialPreviewResolved => {
+  return {
+    url: window.location.host,
+    title: props.tags.find(tag => tag.tag === 'meta' && tag.name === 'twitter:title')?.value || props.tags.find(tag => tag.tag === 'title')?.value,
+    image: props.tags.find(tag => tag.tag === 'meta' && tag.name === 'twitter:image')?.value,
+    imageAlt: props.tags.find(tag => tag.tag === 'meta' && tag.name === 'twitter:image:alt')?.value,
+    description: props.tags.find(tag => tag.tag === 'meta' && tag.name === 'twitter:description')?.value || props.tags.find(tag => tag.tag === 'meta' && tag.name === 'description')?.value,
+    favicon: props.tags.find(tag => tag.tag === 'link' && tag.name === 'icon')?.value,
+  }
+})
+
+const type = computed(() => {
+  if (!card.value.image)
+    return 'summary'
+  return props.tags.find(tag => tag.tag === 'meta' && tag.name === 'twitter:card')?.value || 'summary_large_image'
+})
 </script>
 
 <template>
-  <!-- TODO: support small thumbnail and no image, etc. -->
-  <div class="max-w-[438px] min-w-[438px] cursor-pointer overflow-hidden border border-base rounded-[0.85714em] leading-[1.3em] -outline-offset-1">
+  <div
+    class="max-w-[438px] min-w-[438px] cursor-pointer overflow-hidden border border-base rounded-[0.85714em] leading-[1.3em] -outline-offset-1"
+    :class="type === 'summary_large_image' ? '' : 'flex'"
+    hover="bg-[#88888805]"
+  >
     <div
+      v-if="type === 'summary_large_image'"
       class="h-[220px] border-b border-base bg-cover bg-center bg-no-repeat"
       :style="{ backgroundImage: `url(${JSON.stringify(card.image)})` }"
-    /><div class="break-words border-base p-[0.75em] antialiased">
-      <div class="block border-separate select-none overflow-hidden break-words text-left" style="border-spacing: 0px;">
-        <div class="m-0 mb-[0.15em] truncate text-[14px] font-semibold leading-[18px]">
-          {{ card.title }}
-        </div><div
-          class="mt-[.32333em] block max-h-[2.6em] border-separate select-none overflow-hidden truncate whitespace-nowrap break-words text-left text-[14px] leading-[18px]"
-          style="-webkit-line-clamp: 1; border-spacing: 0px; -webkit-box-orient: vertical;"
-        >
-          {{ card.description }}
-        </div>
-      </div><div class="mt-[0.32333em] overflow-hidden truncate whitespace-nowrap text-[14px] leading-[18px] lowercase op50">
+    />
+    <div
+      v-else
+      class="h-[122px] w-[122px] border-r border-base bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: `url(${JSON.stringify(card.image)})` }"
+    />
+    <div class="break-words border-base p-[0.75em] antialiased" flex="~ col justify-center gap-1">
+      <div class="mt-[0.32333em] overflow-hidden truncate whitespace-nowrap text-[14px] leading-[18px] lowercase op50">
         {{ card.url }}
       </div>
+      <div class="m-0 truncate text-[14px] font-semibold leading-[19px]">
+        {{ card.title }}
+      </div>
+      <div class="line-clamp-2 block select-none overflow-hidden break-words text-left text-[14px] leading-[18px] op50">
+        {{ card.description }}
+      </div>
     </div>
   </div>
 </template>
diff --git a/packages/devtools/client/pages/modules/seo.vue b/packages/devtools/client/pages/modules/seo.vue
index 4893435e2..d350deaf7 100644
--- a/packages/devtools/client/pages/modules/seo.vue
+++ b/packages/devtools/client/pages/modules/seo.vue
@@ -76,12 +76,72 @@ const codeSnippet = computed(() => {
     name: 'useHead',
   }
 })
+
+function refresh() {
+  counter.value += 1
+}
+
+const router = useClientRouter()
+const route = useClientRoute()
+const routeInput = ref('')
+
+async function navigate() {
+  if (routeInput.value !== route.value.path)
+    router.value.push(routeInput.value || '/')
+}
+
+const routeInputMatched = computed(() => {
+  if (routeInput.value === route.value.path)
+    return []
+  return router.value.resolve(routeInput.value || '/').matched
+})
+
+until(route).toBeTruthy().then((v) => {
+  routeInput.value = v.path
+})
+
+until(router).toBeTruthy().then((v) => {
+  v.afterEach(() => {
+    nextTick(() => {
+      routeInput.value = route.value.path
+    })
+  })
+})
 </script>
 
 <template>
   <div flex="~" h-full w-full of-hidden>
-    <div h-full flex-auto of-auto p4>
-      <div flex="~ col gap-4">
+    <div h-full flex-auto of-auto>
+      <Navbar>
+        <template #search>
+          <NTextInput
+            v-model="routeInput"
+            placeholder="Route"
+            icon="carbon-direction-right-01 scale-y--100"
+            n="primary" flex-auto font-mono
+            class="px-5 py-2"
+            :class="route.path === routeInput ? '' : routeInputMatched.length ? 'text-green' : 'text-orange' "
+            @keydown.enter="navigate"
+          />
+        </template>
+        <template #actions>
+          <div flex-none flex="~ gap4">
+            <button
+              title="Refresh Data"
+              @click="refresh"
+            >
+              <NIcon icon="carbon:reset" />
+            </button>
+            <button
+              title="Toggle Preview"
+              @click="showPreview = !showPreview"
+            >
+              <NIcon :icon="showPreview ? 'carbon:side-panel-open' : 'carbon:open-panel-right'" />
+            </button>
+          </div>
+        </template>
+      </Navbar>
+      <div flex="~ col gap-4" p4>
         <!-- TODO: show current route -->
         <NCard grid="~ cols-[max-content_1fr]" items-center justify-between of-hidden>
           <template v-for="item, index of headTags" :key="index">

From 0a7abb3db39fc0e0e7d52b3e38b19b70b610630b Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Mon, 8 May 2023 13:46:30 +0200
Subject: [PATCH 08/14] feat: relayout

---
 .../devtools-ui-kit/src/assets/styles.css     |   4 +
 .../src/components/NSectionBlock.vue          |   3 +-
 .../client/components/SeoMissingTabs.vue      | 145 ++++++++++++++++++
 packages/devtools/client/composables/state.ts |  16 ++
 packages/devtools/client/data/seo.ts          |   1 +
 .../devtools/client/pages/modules/pages.vue   |  14 +-
 .../devtools/client/pages/modules/seo.vue     |  84 ++--------
 7 files changed, 182 insertions(+), 85 deletions(-)
 create mode 100644 packages/devtools/client/components/SeoMissingTabs.vue

diff --git a/packages/devtools-ui-kit/src/assets/styles.css b/packages/devtools-ui-kit/src/assets/styles.css
index 4c3fd66b6..8eb8885f5 100644
--- a/packages/devtools-ui-kit/src/assets/styles.css
+++ b/packages/devtools-ui-kit/src/assets/styles.css
@@ -11,3 +11,7 @@ html.dark {
   background-color: #151515;
   color: white;
 }
+
+::selection {
+  background: #8884;
+}
diff --git a/packages/devtools-ui-kit/src/components/NSectionBlock.vue b/packages/devtools-ui-kit/src/components/NSectionBlock.vue
index dd0b2c3d6..7d21f7034 100644
--- a/packages/devtools-ui-kit/src/components/NSectionBlock.vue
+++ b/packages/devtools-ui-kit/src/components/NSectionBlock.vue
@@ -7,6 +7,7 @@ const props = withDefaults(
     text: string
     description?: string
     containerClass?: string
+    headerClass?: string
     collapse?: boolean
     open?: boolean
     padding?: boolean | string
@@ -27,7 +28,7 @@ function onToggle(e: any) {
 <template>
   <details :open="open" @toggle="onToggle">
     <summary class="cursor-pointer select-none hover:bg-active p4" :class="collapse ? '' : 'pointer-events-none'">
-      <NIconTitle :icon="icon" :text="text" text-xl transition :class="open ? 'op100' : 'op60'">
+      <NIconTitle :icon="icon" :text="text" text-xl transition :class="[open ? 'op100' : 'op60', headerClass]">
         <div>
           <div text-base>
             <slot name="text">
diff --git a/packages/devtools/client/components/SeoMissingTabs.vue b/packages/devtools/client/components/SeoMissingTabs.vue
new file mode 100644
index 000000000..b93560c57
--- /dev/null
+++ b/packages/devtools/client/components/SeoMissingTabs.vue
@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { defu } from 'defu'
+import type { ReactiveHead } from '@unhead/vue'
+import type { NormalizedHeadTag } from '../../src/types'
+import { seoTags } from '../data/seo'
+
+const props = defineProps<{
+  tags: NormalizedHeadTag[]
+}>()
+
+const missingTags = computed(() => {
+  return seoTags.filter(define => !props.tags?.some(tag => tag.name === define.name))
+})
+
+const missingRequiredTags = computed(() => {
+  return missingTags.value.filter(i => i.suggestion === 'required')
+})
+const missingRecommendedTags = computed(() => {
+  return missingTags.value.filter(i => i.suggestion === 'recommended')
+})
+
+const mergedMissingTags = computed(() => {
+  let data: Partial<ReactiveHead> = {}
+  missingTags.value
+    .forEach((tag) => {
+      data = defu(data, tag.default)
+    })
+  return data
+})
+
+const codeSnippet = computed(() => {
+  const body = JSON.stringify(mergedMissingTags.value, null, 2)
+    .replace(/"([^"]+)":/g, '$1:')
+    .replace(/"/g, '\'')
+  return `useHead(${body})`
+})
+
+const copy = useCopy()
+const openInEditor = useOpenInEditor()
+
+const tabs = [
+  'Missing Tags',
+  'Code Snippet',
+]
+const selectedTab = ref(tabs[0])
+
+const route = useClientRoute()
+const routes = useMergedRouteList()
+const routeMatchedFilePath = computed(() => {
+  const matched = routes.value.find(i => i.path === route.value?.matched?.[0]?.path)
+  return matched?.file || matched?.meta?.file as string
+})
+</script>
+
+<template>
+  <template v-if="missingTags.length">
+    <NSectionBlock
+      text="Missing Tags"
+      :description="`${missingTags.length} missing tags (${missingRequiredTags.length} required, ${missingRecommendedTags.length} recommended)`"
+      icon="carbon:warning-other"
+      header-class="text-orange op100! [[open]_&]:text-inherit"
+      :padding="false"
+    >
+      <div flex="~ wrap" w-full flex-none>
+        <template v-for="name, idx of tabs" :key="idx">
+          <button
+            px4 py2 border="r t base"
+            hover="bg-active"
+            :class="name === selectedTab ? '' : 'border-b'"
+            @click="selectedTab = name"
+          >
+            <div :class="name === selectedTab ? '' : 'op30' " capitalize>
+              {{ name }}
+            </div>
+          </button>
+        </template>
+        <div border="b base" flex-auto />
+      </div>
+
+      <NCard v-if="selectedTab === tabs[0]" grid="~ cols-[max-content_1fr]" m4 items-center justify-between of-hidden>
+        <template v-for="item, index of missingTags" :key="index">
+          <div v-if="index" x-divider />
+          <div v-if="index" x-divider />
+          <div mr2 px4 py2 text-orange op75>
+            <div i-carbon-warning />
+            {{ item.name }}
+          </div>
+          <!-- TODO: use icons instead, show link to documentation -->
+          <div w-full p2>
+            {{ item.description }}
+            <NLink
+              v-if="item.docs"
+              :href="item.docs"
+              n="primary" cursor-pointer
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Docs
+            </NLink>
+          </div>
+        </template>
+      </NCard>
+      <div v-else m4 flex="~ col gap-2">
+        <p flex="~ gap-1 wrap items-center">
+          <NButton
+            icon="carbon-copy"
+            n="xs"
+            px-2
+            @click="copy(codeSnippet)"
+          >
+            Copy
+          </NButton>
+          the following code snippet and paste it into your
+          <NButton
+            v-if="routeMatchedFilePath"
+            icon="carbon-launch"
+            n="xs"
+            px-2
+            @click="openInEditor(routeMatchedFilePath)"
+          >
+            page component
+          </NButton>
+          <span v-else>page component</span>
+          to full fill the missing tags.
+        </p>
+        <NCard relative n-code-block>
+          <NCodeBlock
+            :code="codeSnippet"
+            lang="ts"
+            :lines="false"
+            w-full of-auto p3
+          />
+          <div flex="~ gap-2" n="sm primary" absolute right-2 top-2>
+            <NButton
+              icon="carbon-copy"
+              @click="copy(codeSnippet)"
+            >
+              Copy
+            </NButton>
+          </div>
+        </NCard>
+      </div>
+    </NSectionBlock>
+  </template>
+</template>
diff --git a/packages/devtools/client/composables/state.ts b/packages/devtools/client/composables/state.ts
index 1dc4320cb..84abf9a14 100644
--- a/packages/devtools/client/composables/state.ts
+++ b/packages/devtools/client/composables/state.ts
@@ -202,3 +202,19 @@ export function useVirtualFiles() {
   })
   return data
 }
+
+export function useMergedRouteList() {
+  const serverPages = useServerPages()
+  const router = useClientRouter()
+
+  return computed((): RouteInfo[] => {
+    return (router.value?.getRoutes() || [])
+      .map(i => objectPick(i, ['path', 'name', 'meta', 'props', 'children']))
+      .map((i) => {
+        return {
+          ...serverPages.value?.find(j => j.name && j.name === i.name),
+          ...i,
+        }
+      })
+  })
+}
diff --git a/packages/devtools/client/data/seo.ts b/packages/devtools/client/data/seo.ts
index e15370f9d..c9f88be3d 100644
--- a/packages/devtools/client/data/seo.ts
+++ b/packages/devtools/client/data/seo.ts
@@ -7,6 +7,7 @@ export interface SeoTagDefine {
   docs?: string
   description?: string
 }
+
 export const seoTags: SeoTagDefine[] = [
   {
     name: 'title',
diff --git a/packages/devtools/client/pages/modules/pages.vue b/packages/devtools/client/pages/modules/pages.vue
index b42bfb0fa..0d99f2ef6 100644
--- a/packages/devtools/client/pages/modules/pages.vue
+++ b/packages/devtools/client/pages/modules/pages.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { objectPick } from '@antfu/utils'
 import { nextTick } from 'vue'
-import type { RouteInfo } from '~~/../src/types'
 
 definePageMeta({
   icon: 'carbon-tree-view-alt',
@@ -15,19 +13,9 @@ const route = useClientRoute()
 const config = useServerConfig()
 const serverApp = useServerApp()
 
-const serverPages = useServerPages()
 const layouts = useLayouts()
 
-const routes = computed((): RouteInfo[] => {
-  return (router.value?.getRoutes() || [])
-    .map(i => objectPick(i, ['path', 'name', 'meta', 'props', 'children']))
-    .map((i) => {
-      return {
-        ...serverPages.value?.find(j => j.name && j.name === i.name),
-        ...i,
-      }
-    })
-})
+const routes = useMergedRouteList()
 
 const middleware = computed(() => {
   return serverApp.value?.middleware || []
diff --git a/packages/devtools/client/pages/modules/seo.vue b/packages/devtools/client/pages/modules/seo.vue
index d350deaf7..fc01f1078 100644
--- a/packages/devtools/client/pages/modules/seo.vue
+++ b/packages/devtools/client/pages/modules/seo.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import { defu } from 'defu'
-import type { ReactiveHead } from '@unhead/vue'
 import type { NormalizedHeadTag } from '~/../src/types/ui-state'
-import { seoTags } from '~/data/seo'
 
 definePageMeta({
   icon: 'icon-park-outline:seo',
@@ -44,39 +41,8 @@ const headTags = computedAsync(async () => {
   })
 }, [])
 
-const missingTags = computed(() => {
-  return seoTags.filter(define => !headTags.value?.some(tag => tag.name === define.name))
-})
-
-const missingRequiredTags = computed(() => {
-  return missingTags.value.filter(i => i.suggestion === 'required')
-})
-const missingRecommendedTags = computed(() => {
-  return missingTags.value.filter(i => i.suggestion === 'recommended')
-})
-
 const showPreview = ref(true)
 
-const mergedMissingTags = computed(() => {
-  let data: Partial<ReactiveHead> = {}
-  missingTags.value
-    .forEach((tag) => {
-      data = defu(data, tag.default)
-    })
-  return data
-})
-
-const codeSnippet = computed(() => {
-  const body = JSON.stringify(mergedMissingTags.value, null, 2)
-    .replace(/"([^"]+)":/g, '$1:')
-    .replace(/"/g, '\'')
-  return {
-    code: `useHead(${body})`,
-    lang: 'ts',
-    name: 'useHead',
-  }
-})
-
 function refresh() {
   counter.value += 1
 }
@@ -141,51 +107,27 @@ until(router).toBeTruthy().then((v) => {
           </div>
         </template>
       </Navbar>
-      <div flex="~ col gap-4" p4>
-        <!-- TODO: show current route -->
-        <NCard grid="~ cols-[max-content_1fr]" items-center justify-between of-hidden>
-          <template v-for="item, index of headTags" :key="index">
-            <div v-if="index" x-divider />
-            <div v-if="index" x-divider />
-            <div mr2 px4 py2 op50>
-              {{ item.name }}
-            </div>
-            <div w-full p2 font-mono>
-              {{ item.value }}
-              <!-- TODO: make link clickable -->
-            </div>
-          </template>
-        </NCard>
-
-        <template v-if="missingTags.length">
-          <div>{{ missingRequiredTags.length }} required, {{ missingRecommendedTags.length }} recommended</div>
+      <div flex="~ col">
+        <NSectionBlock
+          text="Tags"
+          icon="carbon:tag-group"
+        >
+          <!-- TODO: show current route -->
           <NCard grid="~ cols-[max-content_1fr]" items-center justify-between of-hidden>
-            <template v-for="item, index of missingTags" :key="index">
+            <template v-for="item, index of headTags" :key="index">
               <div v-if="index" x-divider />
               <div v-if="index" x-divider />
-              <div mr2 px4 py2 text-orange op75>
-                <div i-carbon-warning />
+              <div mr2 px4 py2 op50>
                 {{ item.name }}
               </div>
-              <!-- TODO: use icons instead, show link to documentation -->
-              <div w-full p2>
-                {{ item.description }}
-                <NLink
-                  v-if="item.docs"
-                  :to="item.docs"
-                  n="primary" cursor-pointer
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  Docs
-                </NLink>
+              <div w-full p2 font-mono>
+                {{ item.value }}
+              <!-- TODO: make link clickable -->
               </div>
             </template>
           </NCard>
-          <NCard n-code-block>
-            <CodeSnippet :snippet="codeSnippet" />
-          </NCard>
-        </template>
+        </NSectionBlock>
+        <SeoMissingTabs :tags="headTags" />
       </div>
     </div>
     <SocialPreviewGroup v-if="showPreview && headTags?.length" :tags="headTags" border="l base" w-540px flex-none />

From 47a515430ceeb1f56b45d3494d4d5ba29e30ee84 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Mon, 8 May 2023 14:00:54 +0200
Subject: [PATCH 09/14] feat: improve ui presentation for tag docs

---
 .../src/components/NTextExternalLink.vue      | 24 ++++++++++++++++++
 packages/devtools-ui-kit/src/unocss.ts        |  2 +-
 .../client/components/SeoMissingTabs.vue      | 25 ++++++++-----------
 .../devtools/client/pages/modules/seo.vue     | 15 +++++++++--
 4 files changed, 49 insertions(+), 17 deletions(-)
 create mode 100644 packages/devtools-ui-kit/src/components/NTextExternalLink.vue

diff --git a/packages/devtools-ui-kit/src/components/NTextExternalLink.vue b/packages/devtools-ui-kit/src/components/NTextExternalLink.vue
new file mode 100644
index 000000000..9c7661800
--- /dev/null
+++ b/packages/devtools-ui-kit/src/components/NTextExternalLink.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import NLink from './NLink.vue'
+
+defineProps<{
+  link?: string
+}>()
+</script>
+
+<template>
+  <component
+    :is="link ? NLink : 'div'"
+    v-bind="link ? {
+      href: link,
+      target: '_blank',
+      rel: 'noopener noreferrer',
+    } : {}"
+  >
+    <slot />
+    <div
+      v-if="link"
+      i-carbon:arrow-up-right translate-y--1 text-xs op50
+    />
+  </component>
+</template>
diff --git a/packages/devtools-ui-kit/src/unocss.ts b/packages/devtools-ui-kit/src/unocss.ts
index 211b67778..b1cd955a9 100644
--- a/packages/devtools-ui-kit/src/unocss.ts
+++ b/packages/devtools-ui-kit/src/unocss.ts
@@ -98,7 +98,7 @@ export function unocssPreset(): Preset {
 
       // link
       'n-link-base': 'underline underline-offset-2 underline-black/20 dark:underline-white/40',
-      'n-link-hover': 'decoration-dotted text-context underline-context',
+      'n-link-hover': 'decoration-dotted text-context underline-context! op100!',
 
       // card
       'n-card-base': 'border n-border-base rounded n-bg-base shadow-sm',
diff --git a/packages/devtools/client/components/SeoMissingTabs.vue b/packages/devtools/client/components/SeoMissingTabs.vue
index b93560c57..44c18941b 100644
--- a/packages/devtools/client/components/SeoMissingTabs.vue
+++ b/packages/devtools/client/components/SeoMissingTabs.vue
@@ -61,7 +61,7 @@ const routeMatchedFilePath = computed(() => {
       header-class="text-orange op100! [[open]_&]:text-inherit"
       :padding="false"
     >
-      <div flex="~ wrap" w-full flex-none>
+      <div flex="~ wrap" mt--2 w-full flex-none>
         <template v-for="name, idx of tabs" :key="idx">
           <button
             px4 py2 border="r t base"
@@ -81,22 +81,19 @@ const routeMatchedFilePath = computed(() => {
         <template v-for="item, index of missingTags" :key="index">
           <div v-if="index" x-divider />
           <div v-if="index" x-divider />
-          <div mr2 px4 py2 text-orange op75>
-            <div i-carbon-warning />
-            {{ item.name }}
+          <div flex="~ gap-1 items-center" px4 py2>
+            <div i-carbon-warning text-orange />
+            <NTextExternalLink
+              op50
+              :link="item.docs"
+              n="orange"
+            >
+              {{ item.name }}
+            </NTextExternalLink>
           </div>
           <!-- TODO: use icons instead, show link to documentation -->
-          <div w-full p2>
+          <div w-full p2 op75>
             {{ item.description }}
-            <NLink
-              v-if="item.docs"
-              :href="item.docs"
-              n="primary" cursor-pointer
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Docs
-            </NLink>
           </div>
         </template>
       </NCard>
diff --git a/packages/devtools/client/pages/modules/seo.vue b/packages/devtools/client/pages/modules/seo.vue
index fc01f1078..4223d0f33 100644
--- a/packages/devtools/client/pages/modules/seo.vue
+++ b/packages/devtools/client/pages/modules/seo.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { NormalizedHeadTag } from '~/../src/types/ui-state'
+import { seoTags } from '~/data/seo'
 
 definePageMeta({
   icon: 'icon-park-outline:seo',
@@ -62,6 +63,10 @@ const routeInputMatched = computed(() => {
   return router.value.resolve(routeInput.value || '/').matched
 })
 
+function getDocs(item: NormalizedHeadTag) {
+  return seoTags.find(i => i.name === item.name)?.docs
+}
+
 until(route).toBeTruthy().then((v) => {
   routeInput.value = v.path
 })
@@ -117,8 +122,14 @@ until(router).toBeTruthy().then((v) => {
             <template v-for="item, index of headTags" :key="index">
               <div v-if="index" x-divider />
               <div v-if="index" x-divider />
-              <div mr2 px4 py2 op50>
-                {{ item.name }}
+              <div mr2 px4 py2>
+                <NTextExternalLink
+                  op50
+                  :link="getDocs(item)"
+                  n="primary"
+                >
+                  {{ item.name }}
+                </NTextExternalLink>
               </div>
               <div w-full p2 font-mono>
                 {{ item.value }}

From 4cb0c5efabbd47fbfceddafcb32b04540d851295 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Mon, 8 May 2023 14:04:27 +0200
Subject: [PATCH 10/14] feat : make link-like content clickable

---
 packages/devtools/client/pages/modules/seo.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/devtools/client/pages/modules/seo.vue b/packages/devtools/client/pages/modules/seo.vue
index 4223d0f33..c1e72e756 100644
--- a/packages/devtools/client/pages/modules/seo.vue
+++ b/packages/devtools/client/pages/modules/seo.vue
@@ -131,10 +131,13 @@ until(router).toBeTruthy().then((v) => {
                   {{ item.name }}
                 </NTextExternalLink>
               </div>
-              <div w-full p2 font-mono>
+              <NTextExternalLink
+                :link=" item.value.match(/^https?:\/\//) ? item.value : undefined"
+                w-full p2 font-mono
+                n="primary"
+              >
                 {{ item.value }}
-              <!-- TODO: make link clickable -->
-              </div>
+              </NTextExternalLink>
             </template>
           </NCard>
         </NSectionBlock>

From d78e35ea763bb72c970a7ae8438a937136679d66 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Mon, 8 May 2023 14:11:09 +0200
Subject: [PATCH 11/14] feat: add open in editor button

---
 .../client/components/SeoMissingTabs.vue      | 20 +++++--------------
 .../components/social/SocialTwitter.vue       |  2 +-
 .../devtools/client/pages/modules/seo.vue     | 16 ++++++++++++++-
 3 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/packages/devtools/client/components/SeoMissingTabs.vue b/packages/devtools/client/components/SeoMissingTabs.vue
index 44c18941b..a4b28ad14 100644
--- a/packages/devtools/client/components/SeoMissingTabs.vue
+++ b/packages/devtools/client/components/SeoMissingTabs.vue
@@ -6,6 +6,7 @@ import { seoTags } from '../data/seo'
 
 const props = defineProps<{
   tags: NormalizedHeadTag[]
+  matchedRouteFilepath?: string
 }>()
 
 const missingTags = computed(() => {
@@ -43,13 +44,6 @@ const tabs = [
   'Code Snippet',
 ]
 const selectedTab = ref(tabs[0])
-
-const route = useClientRoute()
-const routes = useMergedRouteList()
-const routeMatchedFilePath = computed(() => {
-  const matched = routes.value.find(i => i.path === route.value?.matched?.[0]?.path)
-  return matched?.file || matched?.meta?.file as string
-})
 </script>
 
 <template>
@@ -100,20 +94,16 @@ const routeMatchedFilePath = computed(() => {
       <div v-else m4 flex="~ col gap-2">
         <p flex="~ gap-1 wrap items-center">
           <NButton
-            icon="carbon-copy"
-            n="xs"
-            px-2
+            icon="carbon-copy" n="xs" px-2
             @click="copy(codeSnippet)"
           >
             Copy
           </NButton>
           the following code snippet and paste it into your
           <NButton
-            v-if="routeMatchedFilePath"
-            icon="carbon-launch"
-            n="xs"
-            px-2
-            @click="openInEditor(routeMatchedFilePath)"
+            v-if="matchedRouteFilepath"
+            icon="carbon-launch" n="xs" px-2
+            @click="openInEditor(matchedRouteFilepath)"
           >
             page component
           </NButton>
diff --git a/packages/devtools/client/components/social/SocialTwitter.vue b/packages/devtools/client/components/social/SocialTwitter.vue
index 4dc51913f..3f0be2185 100644
--- a/packages/devtools/client/components/social/SocialTwitter.vue
+++ b/packages/devtools/client/components/social/SocialTwitter.vue
@@ -36,7 +36,7 @@ const type = computed(() => {
     />
     <div
       v-else
-      class="h-[122px] w-[122px] border-r border-base bg-cover bg-center bg-no-repeat"
+      class="h-[122px] w-[122px] flex-none border-r border-base bg-cover bg-center bg-no-repeat"
       :style="{ backgroundImage: `url(${JSON.stringify(card.image)})` }"
     />
     <div class="break-words border-base p-[0.75em] antialiased" flex="~ col justify-center gap-1">
diff --git a/packages/devtools/client/pages/modules/seo.vue b/packages/devtools/client/pages/modules/seo.vue
index c1e72e756..b62a451b7 100644
--- a/packages/devtools/client/pages/modules/seo.vue
+++ b/packages/devtools/client/pages/modules/seo.vue
@@ -51,6 +51,8 @@ function refresh() {
 const router = useClientRouter()
 const route = useClientRoute()
 const routeInput = ref('')
+const routes = useMergedRouteList()
+const openInEditor = useOpenInEditor()
 
 async function navigate() {
   if (routeInput.value !== route.value.path)
@@ -63,6 +65,11 @@ const routeInputMatched = computed(() => {
   return router.value.resolve(routeInput.value || '/').matched
 })
 
+const routeMatchedFilePath = computed(() => {
+  const matched = routes.value.find(i => i.path === route.value?.matched?.[0]?.path)
+  return matched?.file || matched?.meta?.file as string
+})
+
 function getDocs(item: NormalizedHeadTag) {
   return seoTags.find(i => i.name === item.name)?.docs
 }
@@ -97,6 +104,13 @@ until(router).toBeTruthy().then((v) => {
         </template>
         <template #actions>
           <div flex-none flex="~ gap4">
+            <button
+              v-if="routeMatchedFilePath"
+              title="Open file in editor"
+              @click="openInEditor(routeMatchedFilePath)"
+            >
+              <NIcon icon="carbon:launch" />
+            </button>
             <button
               title="Refresh Data"
               @click="refresh"
@@ -141,7 +155,7 @@ until(router).toBeTruthy().then((v) => {
             </template>
           </NCard>
         </NSectionBlock>
-        <SeoMissingTabs :tags="headTags" />
+        <SeoMissingTabs :tags="headTags" :matched-route-filepath="routeMatchedFilePath" />
       </div>
     </div>
     <SocialPreviewGroup v-if="showPreview && headTags?.length" :tags="headTags" border="l base" w-540px flex-none />

From b7090876baf51a0a5092c3000fb6a3d3bbb3da93 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Mon, 8 May 2023 14:14:17 +0200
Subject: [PATCH 12/14] chore: fix build error

---
 .../client/components/CodeSnippet.vue         | 34 -------------------
 .../client/components/CodeSnippets.vue        | 24 +++++++++++--
 playgrounds/tab-seo/package.json              |  3 +-
 3 files changed, 23 insertions(+), 38 deletions(-)
 delete mode 100644 packages/devtools/client/components/CodeSnippet.vue

diff --git a/packages/devtools/client/components/CodeSnippet.vue b/packages/devtools/client/components/CodeSnippet.vue
deleted file mode 100644
index dcc8cf3a3..000000000
--- a/packages/devtools/client/components/CodeSnippet.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup lang="ts">
-import type { CodeSnippet } from '~~/../src/types'
-
-defineProps<{
-  snippet: CodeSnippet
-}>()
-
-const copy = useCopy()
-</script>
-
-<template>
-  <div>
-    <NCodeBlock
-      :code="snippet.code"
-      :lang="snippet.lang"
-      :lines="false"
-      w-full of-auto p3
-    />
-    <div flex="~ gap-2" px3 pb3 n="sm primary">
-      <NButton
-        icon="carbon-copy"
-        @click="copy(snippet!.code)"
-      >
-        Copy
-      </NButton>
-      <NButton
-        v-if="snippet?.docs" :to="snippet.docs" target="_blank"
-        icon="carbon-catalog"
-      >
-        Docs
-      </NButton>
-    </div>
-  </div>
-</template>
diff --git a/packages/devtools/client/components/CodeSnippets.vue b/packages/devtools/client/components/CodeSnippets.vue
index 57acca822..7806bf617 100644
--- a/packages/devtools/client/components/CodeSnippets.vue
+++ b/packages/devtools/client/components/CodeSnippets.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { CodeSnippet } from '~~/../src/types'
+import type { CodeSnippet } from '~~/../src/types'
 
 const props = defineProps<{
   codeSnippets: CodeSnippet[]
 }>()
 
 const selected = shallowRef<CodeSnippet | undefined>(props.codeSnippets[0])
+const copy = useCopy()
 
 watchEffect(() => {
   if (!props.codeSnippets.includes(selected.value!))
@@ -32,7 +33,26 @@ watchEffect(() => {
     </div>
 
     <template v-if="selected">
-      <CodeSnippet :snippet="selected" />
+      <NCodeBlock
+        :code="selected.code"
+        :lang="selected.lang"
+        :lines="false"
+        w-full of-auto p3
+      />
+      <div flex="~ gap-2" px3 pb3 n="sm primary">
+        <NButton
+          icon="carbon-copy"
+          @click="copy(selected!.code)"
+        >
+          Copy
+        </NButton>
+        <NButton
+          v-if="selected?.docs" :to="selected.docs" target="_blank"
+          icon="carbon-catalog"
+        >
+          Docs
+        </NButton>
+      </div>
     </template>
   </div>
 </template>
diff --git a/playgrounds/tab-seo/package.json b/playgrounds/tab-seo/package.json
index 8c2c91c58..7d699e2a6 100644
--- a/playgrounds/tab-seo/package.json
+++ b/playgrounds/tab-seo/package.json
@@ -5,8 +5,7 @@
     "build": "nuxt build",
     "dev": "nuxt dev",
     "generate": "nuxt generate",
-    "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
+    "preview": "nuxt preview"
   },
   "devDependencies": {
     "@types/node": "^18",

From 12cd08d01baa4112cbd0a4e508a786ee2ce40042 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Mon, 8 May 2023 14:23:22 +0200
Subject: [PATCH 13/14] fix: rename to open graph

---
 ...SeoMissingTabs.vue => OpenGraphMissingTabs.vue} |  4 ++--
 .../devtools/client/components/docs/open-graph.md  | 14 ++++++++++++++
 packages/devtools/client/components/docs/seo.md    |  8 --------
 .../devtools/client/data/{seo.ts => open-graph.ts} |  4 ++--
 .../pages/modules/{seo.vue => open-graph.vue}      | 13 ++++++-------
 5 files changed, 24 insertions(+), 19 deletions(-)
 rename packages/devtools/client/components/{SeoMissingTabs.vue => OpenGraphMissingTabs.vue} (96%)
 create mode 100644 packages/devtools/client/components/docs/open-graph.md
 delete mode 100644 packages/devtools/client/components/docs/seo.md
 rename packages/devtools/client/data/{seo.ts => open-graph.ts} (98%)
 rename packages/devtools/client/pages/modules/{seo.vue => open-graph.vue} (94%)

diff --git a/packages/devtools/client/components/SeoMissingTabs.vue b/packages/devtools/client/components/OpenGraphMissingTabs.vue
similarity index 96%
rename from packages/devtools/client/components/SeoMissingTabs.vue
rename to packages/devtools/client/components/OpenGraphMissingTabs.vue
index a4b28ad14..81780c0d7 100644
--- a/packages/devtools/client/components/SeoMissingTabs.vue
+++ b/packages/devtools/client/components/OpenGraphMissingTabs.vue
@@ -2,7 +2,7 @@
 import { defu } from 'defu'
 import type { ReactiveHead } from '@unhead/vue'
 import type { NormalizedHeadTag } from '../../src/types'
-import { seoTags } from '../data/seo'
+import { ogTags } from '../data/open-graph'
 
 const props = defineProps<{
   tags: NormalizedHeadTag[]
@@ -10,7 +10,7 @@ const props = defineProps<{
 }>()
 
 const missingTags = computed(() => {
-  return seoTags.filter(define => !props.tags?.some(tag => tag.name === define.name))
+  return ogTags.filter(define => !props.tags?.some(tag => tag.name === define.name))
 })
 
 const missingRequiredTags = computed(() => {
diff --git a/packages/devtools/client/components/docs/open-graph.md b/packages/devtools/client/components/docs/open-graph.md
new file mode 100644
index 000000000..6cb0168f7
--- /dev/null
+++ b/packages/devtools/client/components/docs/open-graph.md
@@ -0,0 +1,14 @@
+# Open Graph
+
+Nuxt provides several different ways to manage your meta tags using [`unhead`](https://unhead.harlanzw.com/). Improve your Nuxt app's SEO with powerful head config, composables and components.
+
+[Learn more on the documentation](https://nuxt.com/docs/getting-started/seo-meta)
+
+---
+
+You can also find how open graph specs are defined in:
+
+- [The Open Graph protocol](https://ogp.me/)
+- [Twitter Cards](https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started)
+
+<!-- and maybe also add reference to SEO modules(https://nuxt.com/modules?category=SEO) ? -->
diff --git a/packages/devtools/client/components/docs/seo.md b/packages/devtools/client/components/docs/seo.md
deleted file mode 100644
index 44cb69f2b..000000000
--- a/packages/devtools/client/components/docs/seo.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# SEO
-
-Nuxt provides several different ways to manage your meta tags using `@vueuse/head`. Improve your Nuxt app's SEO with powerful head config, composables and components.
-
-[Learn more on the documentation](https://nuxt.com/docs/getting-started/seo-meta)
-
-
-<!-- and maybe also add reference to SEO modules(https://nuxt.com/modules?category=SEO) ? -->
diff --git a/packages/devtools/client/data/seo.ts b/packages/devtools/client/data/open-graph.ts
similarity index 98%
rename from packages/devtools/client/data/seo.ts
rename to packages/devtools/client/data/open-graph.ts
index c9f88be3d..e914c5124 100644
--- a/packages/devtools/client/data/seo.ts
+++ b/packages/devtools/client/data/open-graph.ts
@@ -1,6 +1,6 @@
 import type { ReactiveHead } from '@unhead/vue'
 
-export interface SeoTagDefine {
+export interface OpenGraphTagDefine {
   name: string
   suggestion: 'required' | 'recommended' | 'optional'
   default: Partial<ReactiveHead>
@@ -8,7 +8,7 @@ export interface SeoTagDefine {
   description?: string
 }
 
-export const seoTags: SeoTagDefine[] = [
+export const ogTags: OpenGraphTagDefine[] = [
   {
     name: 'title',
     suggestion: 'required',
diff --git a/packages/devtools/client/pages/modules/seo.vue b/packages/devtools/client/pages/modules/open-graph.vue
similarity index 94%
rename from packages/devtools/client/pages/modules/seo.vue
rename to packages/devtools/client/pages/modules/open-graph.vue
index b62a451b7..b4d6fcf3f 100644
--- a/packages/devtools/client/pages/modules/seo.vue
+++ b/packages/devtools/client/pages/modules/open-graph.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import type { NormalizedHeadTag } from '~/../src/types/ui-state'
-import { seoTags } from '~/data/seo'
+import { ogTags } from '~/data/open-graph'
 
 definePageMeta({
-  icon: 'icon-park-outline:seo',
-  title: 'SEO',
+  icon: 'carbon:image-search',
+  title: 'Open Graph',
   layout: 'full',
   category: 'analyze',
-  experimental: true,
   show: () => !!useClient().value,
 })
 
@@ -71,7 +70,7 @@ const routeMatchedFilePath = computed(() => {
 })
 
 function getDocs(item: NormalizedHeadTag) {
-  return seoTags.find(i => i.name === item.name)?.docs
+  return ogTags.find(i => i.name === item.name)?.docs
 }
 
 until(route).toBeTruthy().then((v) => {
@@ -155,13 +154,13 @@ until(router).toBeTruthy().then((v) => {
             </template>
           </NCard>
         </NSectionBlock>
-        <SeoMissingTabs :tags="headTags" :matched-route-filepath="routeMatchedFilePath" />
+        <OpenGraphMissingTabs :tags="headTags" :matched-route-filepath="routeMatchedFilePath" />
       </div>
     </div>
     <SocialPreviewGroup v-if="showPreview && headTags?.length" :tags="headTags" border="l base" w-540px flex-none />
   </div>
 
   <HelpFab>
-    <DocsSeo />
+    <DocsOpenGraph />
   </HelpFab>
 </template>

From 6092ad9b3f95569bbfd934a52c36f90636c00814 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Mon, 8 May 2023 14:27:28 +0200
Subject: [PATCH 14/14] chore: fix type error

---
 tsconfig.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tsconfig.json b/tsconfig.json
index 382e9bfc2..d1492fa37 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,6 +22,7 @@
     "**/node_modules",
     "**/dist",
     "**/playground",
+    "**/playgrounds",
     "**/docs",
     "./packages/devtools/client"
   ]