docs: generate open graph images for all pages

docs/src/components/LiveDemo/index.vue

@@ -23,6 +23,8 @@
   </div>
 </template>
 
+<script>
+/*
 <static-query>
 query {
   packages: allPackage {
@@ -34,8 +36,7 @@ query {
   }
 }
 </static-query>
-
-<script>
+*/
 // import collect from 'collect.js'
 import { VueLive } from 'vue-live'
 import CustomLayout from './CustomLayout'

docs/src/templates/DocPage/index.vue

@@ -31,7 +31,7 @@ export default {
         },
         {
           property: 'og:image',
-          content: 'https://next.tiptap.dev/og-image.png',
+          content: this.getOpenGraphImage(),
         },
         /* Twitter */
         {
@@ -44,7 +44,7 @@ export default {
         },
         {
           name: 'twitter:image',
-          content: 'https://next.tiptap.dev/og-image.png',
+          content: this.getOpenGraphImage(),
         },
         {
           name: 'twitter:site',
@@ -53,6 +53,15 @@ export default {
       ],
     }
   },
+  methods: {
+    getOpenGraphImage() {
+      const path = this.$route.path.replace(/\/$/, '')
+
+      return path === ''
+        ? 'https://next.tiptap.dev/og-image.png'
+        : `/images${path}/og-image.png`
+    },
+  },
 }
 </script>