Merge pull request #14 from vueuse/feat/migrate-schema-org-graph-js

feat: migrate to schema-org-graph-js

Author: harlan-zw

README.md

@@ -19,24 +19,24 @@ Schema.org for Vue. Supports typed and automated Google Rich Results
 <table>
 <tbody>
 <td align="center">
-<img width="2000" height="0" /><br>
+<img width="830" height="0" /><br>
 <i>Status:</i> <b>Early Access</b> <br>
 <sup> Please report any issues 🐛</sup><br>
 <sub>Made possible by my <a href="https://github.com/sponsors/harlan-zw">Sponsor Program 💖</a><br> Follow me <a href="https://twitter.com/harlan_zw">@harlan_zw</a> 🐦</sub><br>
-<img width="2000" height="0" />
+<img width="830" height="0" />
 </td>
 </tbody>
 </table>
 </p>
 
 ## Features
 
-- 😊 No Schema.org knowledge required, get up and running in minutes with minimal configuration
-- ✨ 20+ Typed Schemas for best practice ([Google](https://developers.google.com/search/docs/advanced/structured-data/search-gallery), [Yoast](https://developer.yoast.com/features/schema/overview)) Rich Results
+- ✨ Powered [schema-org-graph-js](https://github.com/harlan-zw/schema-org-graph-js): No Schema.org knowledge required, 20+ Typed Schemas 
 - 🧙 Automated Schema: `@id`, URL / date resolving, route meta and more
 - 🤝 Integrations for [VitePress](https://vitepress.vue.com), [Nuxt](https://nuxtjs.org/), [Vitesse](https://nuxtjs.org/) and [Vite](https://vitejs.dev/) with auto-imports
 - 🍞 Choose your preferred API: Composables or Components
-- 🌳 SSR, tree-shaking and Schema inheritance ready
+- ⛏️ Choose your preferred Schema.org types: simple or full (schema-dts)
+- 🌳 **0 kB client runtime**, SSR, tree-shaking
 
 ## Background
 

docs/.vitepress/theme/MyLayout.vue

@@ -27,7 +27,6 @@ const route = useRoute()
   <template #doc-after>
   <div style="margin-top: 50px;">
     <p class="italic">Preview of <a href="/guide/debugging.html#component-schemaorginspector">SchemaOrgInspector</a> displaying current Schema for the page.</p>
-    <SchemaOrgInspector style="max-width: 100%;" />
   </div>
   </template>
 </Layout>

docs/api/core/create-schema-org.md

@@ -11,11 +11,7 @@
 
   const schemaOrg = createSchemaOrg({
     ...options,
-    provider: {
-      setupDOM: useVueUseHead(head),
-      provider: 'vitesse',
-      useRoute: () => ctx.router.currentRoute.value,
-    },
+    setupDOM: useVueUseHead(head),
   })
   ```
   **CreateSchemaOrgInput**

docs/components.d.ts

@@ -24,10 +24,10 @@ declare module '@vue/runtime-core' {
     Links: typeof import('./src/components/Links.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    SchemaOrgInspector: typeof import('@vueuse/schema-org')['SchemaOrgInspector']
-    SchemaOrgPerson: typeof import('@vueuse/schema-org')['SchemaOrgPerson']
-    SchemaOrgWebPage: typeof import('@vueuse/schema-org')['SchemaOrgWebPage']
-    SchemaOrgWebSite: typeof import('@vueuse/schema-org')['SchemaOrgWebSite']
+    SchemaOrgInspector: typeof import('#vueuse/schema-org/runtime')['SchemaOrgInspector']
+    SchemaOrgPerson: typeof import('#vueuse/schema-org/runtime')['SchemaOrgPerson']
+    SchemaOrgWebPage: typeof import('#vueuse/schema-org/runtime')['SchemaOrgWebPage']
+    SchemaOrgWebSite: typeof import('#vueuse/schema-org/runtime')['SchemaOrgWebSite']
     SponsorBanner: typeof import('./src/components/SponsorBanner.vue')['default']
   }
 }

docs/components/index.md

@@ -55,60 +55,17 @@ will be the resolved node.
 <SchemaOrgQuestion>
   <!-- Scoped slots won't render anything -->
   <template #name>
-  What is quantum mechanics?
+    {{ question }}
   </template>
   <template #acceptedAnswer>
-  <p>Quantum mechanics is the study of the nature of matter.</p>
-  <p>It is the study of the nature of the interaction between particles and the nature of the universe.</p>
-  <p>Particles are the smallest particles in the universe.</p>
-  <p>The universe is made up of particles.</p>
-  <p>Particles are made up of matter.</p>
-  <p>Matter is made up of energy.</p>
-  <p>Energy is made up of heat.</p>
-  <p>Heat is made up of light.</p>
-  <p>Light is made up of sound.</p>
-  <p>Sound is made up of colour.</p>
-  <p>Colour is made up of light.</p>
-  <p>Light is made up of light.</p>
+   <div v-html="answer" />
   </template>
   <!-- Default slot will render -->
-  <template #default="{ acceptedAnswer, name }">
+  <template>
   <h2>
-    # {{ name }}
+    {{ question }}
   </h2>
-  <p v-html="acceptedAnswer.text" />
-  <div>Wow!</div>
-  </template>
-</SchemaOrgQuestion>
-</template>
-```
-
-
-## Rendered Scoped Slots
-
-Providing the `render-scoped-slots` will allow the slots to be rendered. This is useful in avoiding having markup in your
-template twice.
-
-```vue
-<template>
-<SchemaOrgQuestion v-slot="{ acceptedAnswer, name}" render-scoped-slots>
-  <!-- Scoped slots will render -->
-  <template #name>
-    <h3>What is quantum mechanics?</h3>
-  </template>
-  <template #acceptedAnswer>
-  <p>Quantum mechanics is the study of the nature of matter.</p>
-  <p>It is the study of the nature of the interaction between particles and the nature of the universe.</p>
-  <p>Particles are the smallest particles in the universe.</p>
-  <p>The universe is made up of particles.</p>
-  <p>Particles are made up of matter.</p>
-  <p>Matter is made up of energy.</p>
-  <p>Energy is made up of heat.</p>
-  <p>Heat is made up of light.</p>
-  <p>Light is made up of sound.</p>
-  <p>Sound is made up of colour.</p>
-  <p>Colour is made up of light.</p>
-  <p>Light is made up of light.</p>
+  <div v-html="answer" />
   </template>
 </SchemaOrgQuestion>
 </template>

docs/guide/setup/vite.md

@@ -43,12 +43,12 @@ const head = createHead()
 app.use(head)
 
 const schemaOrg = createSchemaOrg({
-  provider: {
-    useRoute: () => router.currentRoute,
-    setupDOM: useVueUseHead(head)
-  }
+  setupDOM: useVueUseHead(head),
   /* config */
 })
+watch(() => router.currentRoute, () => {
+  // @todo
+})
 app.use(schemaOrg)
 schemaOrg.setupDOM()
 

docs/package.json

@@ -9,25 +9,25 @@
   },
   "dependencies": {
     "@panelbear/panelbear-js": "^1.3.3",
-    "@vueuse/core": "^8.9.4",
+    "@vueuse/core": "^9.1.0",
     "@vueuse/schema-org": "link:../packages/schema-org",
     "@vueuse/schema-org-vite": "link:../packages/vite",
     "change-case": "^4.1.2",
     "typewriter-effect": "^2.18.2",
-    "unplugin-auto-import": "^0.9.3",
-    "unplugin-icons": "^0.14.7",
-    "vite": "^3.0.0",
+    "unplugin-auto-import": "^0.11.1",
+    "unplugin-icons": "^0.14.8",
+    "vite": "^3.0.7",
     "vite-plugin-windicss": "^1.8.7",
     "vue": "^3.2.37"
   },
   "devDependencies": {
-    "@iconify-json/carbon": "^1.1.6",
-    "@iconify-json/logos": "^1.1.10",
-    "@unocss/reset": "^0.44.3",
-    "@vitejs/plugin-vue": "^3.0.0",
+    "@iconify-json/carbon": "^1.1.7",
+    "@iconify-json/logos": "^1.1.14",
+    "@unocss/reset": "^0.45.6",
+    "@vitejs/plugin-vue": "^3.0.3",
     "markdown-it": "^13.0.1",
-    "unocss": "^0.44.3",
-    "unplugin-vue-components": "^0.21.1",
+    "unocss": "^0.45.6",
+    "unplugin-vue-components": "^0.22.4",
     "vitepress": "^1.0.0-alpha.4"
   }
 }