Improve twitter and og fallbacks

Author: jonathanmuth

blueprints/fields/open_graph.yml

@@ -6,21 +6,21 @@ fields:
     numbered: false
   og_title:
     label: OG Title
-    help: The title of your object as it should appear within the graph.
+    help: The title of your object as it should appear within the graph. Will use *page title* as fallback.
     type: text
   og_description:
     label: OG Description
-    help: A one to two sentence description of your object.
+    help: A one to two sentence description of your object. Will use *page description* and *site description* as fallbacks.
     type: text
   og_image:
     label: OG Image (1200x630)
-    help: An image which should represent your object within the graph. Will be cropped automatically.
+    help: An image which should represent your object within the graph. Will be cropped automatically. Will use *site OG image* as fallback.
     type: files
     multiple: false
     uploads: seo-image
   og_site_name:
     label: OG Site Name
-    help: If your object is part of a larger web site, the name which should be displayed for the overall site.
+    help: If your object is part of a larger web site, the name which should be displayed for the overall site. Will use *site title* as fallback.
     type: text
     width: 1/2
   og_url:

blueprints/fields/twitter.yml

@@ -8,12 +8,12 @@ fields:
     label: Twitter Title
     type: text
     limit: 70
-    help: The title of your page as it should appear on Twitter
+    help: The title of your page as it should appear on Twitter. Will use *page title* as fallback.
   twitter_description:
     label: Twitter Description
     type: text
     limit: 300
-    help: A one to two sentence description of your page.
+    help: A one to two sentence description of your page. Will use *page description* and *site description* as fallbacks.
   twitter_image:
     label: Twitter Image (1200x675)
     help: Will be cropped automatically.

index.js

@@ -7,15 +7,16 @@
     "recognizeSelfClosing": true
   },
   "devDependencies": {
-    "@vue/component-compiler-utils": "^3.1.1",
+    "@vue/component-compiler-utils": "^3.2.0",
     "cssnano": "^4.1.10",
-    "sass": "^1.25.0",
-    "vue-template-compiler": "^2.6.11"
+    "sass": "^1.32.8",
+    "vue-template-compiler": "^2.6.12"
   },
   "dependencies": {
+    "core-js": "^3.9.0",
     "global": "^4.4.0",
     "parcel": "^1.12.4",
-    "vue": "^2.6.11",
+    "vue": "^2.6.12",
     "vue-hot-reload-api": "^2.3.4"
   }
 }

package.json

@@ -12,6 +12,9 @@
       },
       'url' => function () {
           return $this->model()->url();
+      },
+      'siteTitleAfterPageTitle' => function () {
+          return option('diesdasdigital.meta-knight.siteTitleAfterPageTitle', true);
       }
     ]
 ];

sections/twitter_card_preview.php

@@ -56,9 +56,9 @@
 
 <?php // Open Graph ?>
 
-<meta property="og:title" content="<?= $page->og_title()->or($page->title()) ?>">
+<meta property="og:title" content="<?= $page->og_title()->or($page->meta_title())->or($page->title()) ?>">
 
-<meta property="og:description" content="<?= $page->og_description()->or($site->og_description()) ?>">
+<meta property="og:description" content="<?= $page->og_description()->or($page->meta_description())->or($site->meta_description()) ?>">
 
 <?php if ($ogimage = $page->og_image()->toFile() ?? $site->og_image()->toFile()): ?>
   <meta property="og:image" content="<?= $ogimage->thumb($og_image)->url() ?>">
@@ -103,9 +103,9 @@
 
 <meta name="twitter:card" content="summary">
 
-<meta name="twitter:title" content="<?= $page->twitter_title()->or($site->twitter_title()) ?>">
+<meta name="twitter:title" content="<?= $page->twitter_title()->or($page->meta_title())->or($page->title()) ?>">
 
-<meta name="twitter:description" content="<?= $page->twitter_description()->or($site->twitter_description()) ?>">
+<meta name="twitter:description" content="<?= $page->twitter_description()->or($page->meta_description())->or($site->meta_description()) ?>">
 
 <?php if ($twitterimage = $page->twitter_image()->toFile() ?? $site->twitter_image()->toFile()): ?>
   <meta name="twitter:image" content="<?= $twitterimage->thumb($twitter_image)->url() ?>">

snippets/meta_information.php

@@ -48,23 +48,33 @@ export default {
   computed: {
     og_title() {
       let og_title = this.$store.getters["content/values"]().og_title;
+      let meta_title = this.$store.getters["content/values"]().meta_title;
+      let page_title = this.page_title;
 
       if (og_title.length < 1) {
-        og_title = this.page_title;
+        if (meta_title.length > 0) {
+          og_title = meta_title;
+        } else {
+          og_title = page_title;
+        }
       }
 
       return og_title;
     },
     og_description() {
       let og_description = this.$store.getters["content/values"]()
         .og_description;
+      let meta_description = this.$store.getters["content/values"]()
+        .meta_description;
 
       if (og_description.length < 1) {
-        og_description = "[OG Description Missing]";
-        return og_description;
-      } else {
-        return og_description;
+        og_description = meta_description;
+        if (meta_description.length < 1) {
+          og_description = "[OG Description and Fallback Description Missing]";
+        }
       }
+
+      return og_description;
     },
     og_site_name() {
       let og_site_name = this.$store.getters["content/values"]().og_site_name;
@@ -84,7 +94,7 @@ export default {
     store_image: {
       handler() {
         if (this.store_image.length === 0) {
-          this.og_image = null;
+          this.og_image = this.site_og_image_url;
         } else {
           this.$api.files
             .get(