add page titles

docs/gridsome.config.js

@@ -12,7 +12,7 @@ function addStyleResource(rule) {
 
 module.exports = {
   siteName: 'tiptap',
-  titleTemplate: '%s',
+  titleTemplate: '%s | tiptap',
   port: 3000,
   plugins: [
     {
@@ -20,7 +20,7 @@ module.exports = {
       options: {
         typeName: 'DocPage',
         baseDir: './src/docPages',
-        template: './src/templates/DocPage',
+        template: './src/templates/DocPage/index.vue',
         index: './introduction',
         plugins: [
           '@gridsome/remark-prismjs',

docs/src/docPages/introduction.md

@@ -1,3 +1,7 @@
+---
+title: Renderless rich-text editor
+---
+
 :::error Don’t try this at home
 Nothing here is production-ready, don’t use it anywhere.
 :::

docs/src/templates/DocPage/index.vue

@@ -6,4 +6,42 @@
   </Layout>
 </template>
 
+<page-query>
+query($path: String!) {
+  docPage(path: $path) {
+    id
+    title
+    fileInfo {
+      path
+    }
+  }
+}
+</page-query>
+
+<script>
+export default {
+  metaInfo() {
+    return {
+      title: this.$page?.docPage?.title,
+      meta: [
+        /* OpenGraph */
+        {
+          property: 'og:title',
+          content: this.$page?.docPage?.title,
+        },
+        /* Twitter */
+        {
+          name: 'twitter:title',
+          content: this.$page?.docPage?.title,
+        },
+        {
+          name: 'twitter:site',
+          content: '@_ueberdosis',
+        },
+      ],
+    }
+  },
+}
+</script>
+
 <style lang="scss" src="./style.scss" scoped></style>