feat(devtools): new design (#115)

Author: harlan-zw

.playground-minimal/app.vue

@@ -9,6 +9,6 @@ defineOgImageCached({
 
 <template>
   <div>
-    <img src="/__og_image__/og.png" width="1200" height="630">
+    <img src="/__og-image__/image/og.png" width="1200" height="630">
   </div>
 </template>

.playground/components/OgImage/ArrayProp.vue

@@ -19,6 +19,8 @@ const containerStyles = {
 
 <template>
   <div :style="containerStyles">
+    <div>{{ title }}</div>
+    <div>{{ description }}</div>
     <Icon name="uil:github" size="250px" style="margin: 0 auto;" />
   </div>
 </template>

.playground/components/OgImage/NuxtIcon.vue

@@ -91,6 +91,7 @@ export default defineNuxtConfig({
   },
 
   site: {
+    url: 'https://nuxtseo.com',
     name: 'OG Image Playground',
   },
 

.playground/nuxt.config.ts

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, definePageMeta, onBeforeUnmount, onMounted, ref, useDebounceFn, useServerSeoMeta, watch } from '#imports'
+import { computed, definePageMeta, useServerSeoMeta } from '#imports'
 
 definePageMeta({
   title: 'Home',
@@ -8,57 +8,16 @@ definePageMeta({
 })
 
 useServerSeoMeta({
-  title: 'Home & //<"With Encoding">\\\\',
-  ogTitle: 'Home & //<"With Encoding">\\\\',
+  title: 'Welcome to the playground',
+  ogTitle: 'Welcome to the playground',
 })
 
 const host = computed(() => typeof window !== 'undefined' ? window.location.href : '/')
-
-const color = ref('bg-green-500')
-const title = ref('Fully dynamic')
-
-const time = ref('')
-
-function setTime() {
-  const date = new Date()
-  const hours = date.getHours()
-  const minutes = date.getMinutes()
-  const seconds = date.getSeconds()
-  // use am pm
-  const ampm = hours >= 12 ? 'PM' : 'AM'
-  const hours12 = hours % 12 || 12
-  time.value = `${hours12}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds} ${ampm}`
-}
-
-setTime()
-
-let interval = null
-onMounted(() => {
-  interval = setInterval(() => {
-    setTime()
-  }, 15000)
-})
-
-onBeforeUnmount(() => {
-  clearInterval(interval)
-})
-
-const tailwindUrl = ref(`${host.value}satori/tailwind/__og_image__/og.png?title=${encodeURIComponent(title.value)}&bgColor=${color.value.replace('#', '')}`)
-
-const setTailwindUrl = useDebounceFn(() => {
-  // do something
-  tailwindUrl.value = `${host.value}satori/tailwind/__og_image__/og.png?title=${encodeURIComponent(title.value)}&bgColor=${color.value.replace('#', '')}`
-}, 500)
-
-watch([color, title], () => {
-  // do debounce
-  setTailwindUrl()
-})
 </script>
 
 <template>
   <div class="px-7 my-5">
-    <OgImage description="My description of the home page." theme-color="#b5ffd6" />
-    <img :src="`${host}satori/static/__og_image__/og.png`" width="400" height="210" class="rounded">
+    <OgImage description="My description of the home page." />
+    <img :src="`${host}__og-image__/image/satori/static/og.png`" width="400" height="210" class="rounded">
   </div>
 </template>

.playground/pages/index.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-defineOgImage({
+import ArrayProp from '~/components/OgImage/ArrayProp.vue'
+
+defineOgImage(ArrayProp, {
   component: 'ArrayProp',
   list: [1, 2, 3],
 })

.playground/pages/satori/array-prop.vue

@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}