feat: add more comprehensive preview implementation

.gitignore

@@ -1,2 +1,3 @@
 /node_modules
-/.cache
+/.cache
+/index.dev.mjs

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "Vue.volar"
+  ]
+}

package.json

@@ -1,26 +1,37 @@
 {
+  "packageManager": "[email protected]",
   "scripts": {
-    "dev": "parcel watch src/index.js --no-source-maps -d ./",
-    "build": "parcel build src/index.js --no-source-maps --experimental-scope-hoisting -d ./"
-  },
-  "license": {
-    "type": "MIT",
-    "url": "https://www.opensource.org/licenses/mit-license.php"
-  },
-  "posthtml": {
-    "recognizeSelfClosing": true
+    "dev": "kirbyup serve src/index.js",
+    "build": "kirbyup src/index.js",
+    "lint": "eslint \"src/**/*.{js,vue}\"",
+    "lint:fix": "npm run lint -- --fix",
+    "format": "prettier \"src/**/*.{css,js,vue}\" --write"
   },
+  "license": "MIT",
   "devDependencies": {
-    "@vue/component-compiler-utils": "^3.2.0",
-    "cssnano": "^4.1.10",
-    "sass": "^1.32.8",
-    "vue-template-compiler": "^2.6.12"
+    "eslint": "^8.25.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-vue": "^9.6.0",
+    "kirbyup": "^2.1.0",
+    "prettier": "^2.7.1"
   },
-  "dependencies": {
-    "core-js": "^3.9.0",
-    "global": "^4.4.0",
-    "parcel": "1.12.3",
-    "vue": "^2.6.12",
-    "vue-hot-reload-api": "^2.3.4"
+  "dependencies": {},
+  "eslintConfig": {
+    "env": {
+      "browser": true,
+      "es2022": true
+    },
+    "extends": [
+      "eslint:recommended",
+      "plugin:vue/recommended",
+      "prettier"
+    ],
+    "parserOptions": {
+      "ecmaVersion": "latest",
+      "sourceType": "module"
+    },
+    "rules": {
+      "vue/multi-word-component-names": "off"
+    }
   }
 }

sections/facebook_sharing_preview.php

@@ -1,17 +1,44 @@
 <?php
 
+$og_image_thumb = [
+    'width'   => 1200,
+    'height'  => 630,
+    'quality' => 80,
+    'crop'    => true
+];
+
 return [
     'props' => [
         'headline' => function ($headline = 'Facebook Sharing Preview') {
             return $headline;
         }
     ],
     'computed' => [
-      'title' => function () {
-          return $this->model()->title();
-      },
-      'url' => function () {
-          return $this->model()->url();
-      }
-    ]
+        'page' => function() use ($og_image_thumb) {
+            $page = $this->model();
+            $img = $page->og_image()->toFile();
+
+            return [
+                'title' => $page->title()->value(),
+                'og_title' => $page->og_title()->value(),
+                'og_image' => $img ? $img->thumb($og_image_thumb)->url() : null,
+                'og_description' => $page->og_description()->value(),
+                'og_site_name' => $page->og_site_name()->value(),
+                'meta_title' => $page->meta_title()->value(),
+                'meta_description' => $page->meta_description()->value(),
+            ];
+        },
+        'site' => function() use ($og_image_thumb) {
+            $site = $this->kirby()->site();
+            $img = $site->og_image()->toFile();
+
+            return [
+                'og_title' => $site->og_title()->value(),
+                'og_image' => $img ? $img->thumb($og_image_thumb)->url() : null,
+                'og_site_name' => $site->og_site_name()->value(),
+                'meta_title' => $site->meta_title()->value(),
+                'meta_description' => $site->meta_description()->value(),
+            ];
+        },
+    ],
 ];

sections/google_search_preview.php

@@ -7,23 +7,32 @@
         }
     ],
     'computed' => [
-      'title' => function () {
-          return $this->model()->title();
-      },
-      'url' => function () {
-          return $this->model()->url();
-      },
-      'uid' => function () {
-        return $this->model()->uid();
-      },
-      'siteTitleAfterPageTitle' => function () {
-          return option('diesdasdigital.meta-knight.siteTitleAfterPageTitle', true);
-      },
-      'siteTitleAsHomePageTitle' => function () {
-        return option('diesdasdigital.meta-knight.siteTitleAsHomePageTitle', false);
-      },
-      'separator' => function () {
-        return option('diesdasdigital.meta-knight.separator', ' - ');
-      },
-    ]
+        'page' => function() {
+            $page = $this->model();
+
+            return [
+                'url' => $page->url(),
+                'title' => $page->title()->value(),
+                'meta_title' => $page->meta_title()->value(),
+                'meta_description' => $page->meta_description()->value(),
+                'isHomePage' => $page->isHomePage(),
+            ];
+        },
+        'site' => function() {
+            $site = $this->kirby()->site();
+
+            return [
+                'meta_title' => $site->meta_title()->value(),
+                'meta_description' => $site->meta_description()->value(),
+            ];
+        },
+        'options' => function() {
+            return [
+                'pageTitleAsHomePageTitle' => option('diesdasdigital.meta-knight.pageTitleAsHomePageTitle', false),
+                'siteTitleAsHomePageTitle' => option('diesdasdigital.meta-knight.siteTitleAsHomePageTitle', false),
+                'siteTitleAfterPageTitle' => option('diesdasdigital.meta-knight.siteTitleAfterPageTitle', true),
+                'separator' => option('diesdasdigital.meta-knight.separator', ' - '),
+            ];
+        },
+    ],
 ];

sections/twitter_card_preview.php

@@ -1,20 +1,45 @@
 <?php
 
+$twitter_image_thumb = [
+    'width'   => 1200,
+    'height'  => 675,
+    'quality' => 80,
+    'crop'    => true
+];
+
 return [
     'props' => [
         'headline' => function ($headline = 'Twitter Card Preview') {
             return $headline;
         }
     ],
     'computed' => [
-      'title' => function () {
-          return $this->model()->title();
-      },
-      'url' => function () {
-          return $this->model()->url();
-      },
-      'siteTitleAfterPageTitle' => function () {
-          return option('diesdasdigital.meta-knight.siteTitleAfterPageTitle', true);
-      }
-    ]
+        'page' => function() use ($twitter_image_thumb) {
+            $page = $this->model();
+            $img = $page->twitter_image()->toFile();
+
+            return [
+                'url' => $page->url(),
+                'title' => $page->title()->value(),
+                'twitter_title' => $page->twitter_title()->value(),
+                'twitter_image' => $img ? $img->thumb($twitter_image_thumb)->url() : null,
+                'twitter_description' => $page->twitter_description()->value(),
+                'twitter_card_type' => $page->twitter_card_type()->value(),
+                'meta_title' => $page->meta_title()->value(),
+                'meta_description' => $page->meta_description()->value(),
+            ];
+        },
+        'site' => function() use ($twitter_image_thumb) {
+            $site = $this->kirby()->site();
+            $img = $site->twitter_image()->toFile();
+
+            return [
+                'twitter_title' => $site->twitter_title()->value(),
+                'twitter_image' => $img ? $img->thumb($twitter_image_thumb)->url() : null,
+                'twitter_card_type' => $site->twitter_card_type()->value(),
+                'meta_title' => $site->meta_title()->value(),
+                'meta_description' => $site->meta_description()->value(),
+            ];
+        },
+    ],
 ];

src/components/sections/facebook_sharing_preview.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
     <div class="k-field-label">
-      <span class="facebook-icon"></span> {{ headline }}
+      <span class="facebook-icon"></span> {{ loadedData.headline }}
     </div>
-    <div class="open-graph-preview">
+    <div class="open-graph-preview" :style="hide && 'visibility: hidden'">
       <div class="open-graph-preview__image-container">
         <img
-          v-if="this.store_image.length"
+          v-if="og_image"
           :src="og_image"
           class="open-graph-preview__preview-image"
         />
@@ -28,88 +28,79 @@
 export default {
   data() {
     return {
-      headline: "Basic Meta Information",
-      site_title: null,
-      page_title: null,
-      url: null,
-      og_image: null,
+      hide: true,
+      loadedData: {
+        headline: "Basic Meta Information",
+        page: {},
+        site: {},
+      },
     };
   },
-  created: function() {
-    this.load().then((response) => {
-      this.headline = response.headline;
-      this.page_title = response.title.value;
-      this.url = response.url;
-    });
-    this.$api.site.get().then((response) => {
-      this.site_title = response.title;
-    });
-  },
   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) {
-        if (meta_title.length > 0) {
-          og_title = meta_title;
-        } else {
-          og_title = page_title;
-        }
-      }
-
-      return og_title;
+    originals() {
+      return this.$store.getters["content/model"]().originals;
     },
-    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 = meta_description;
-        if (meta_description.length < 1) {
-          og_description = "[OG Description and Fallback Description Missing]";
-        }
-      }
-
-      return og_description;
+    changes() {
+      return this.$store.getters["content/model"]().changes;
+    },
+    og_image() {
+      return (
+        this.changes.og_image?.[0]?.url ||
+        this.loadedData.page.og_image ||
+        this.loadedData.site.og_image
+      );
     },
     og_site_name() {
-      let og_site_name = this.$store.getters["content/values"]().og_site_name;
-
-      if (og_site_name.length < 1) {
-        og_site_name = this.site_title;
-        return og_site_name;
-      } else {
-        return og_site_name;
-      }
+      return (
+        this.changes.og_site_name ||
+        this.loadedData.page.og_site_name ||
+        this.loadedData.site.og_site_name ||
+        this.loadedData.site.meta_title ||
+        this.$system.title
+      );
+    },
+    og_title() {
+      return (
+        this.changes.og_title ||
+        this.loadedData.page.og_title ||
+        this.changes.meta_title ||
+        this.loadedData.page.meta_title ||
+        this.loadedData.site.og_title ||
+        this.loadedData.site.meta_title ||
+        this.loadedData.page.title
+      );
+    },
+    og_description() {
+      return (
+        this.changes.og_description ||
+        this.loadedData.page.og_description ||
+        this.changes.meta_description ||
+        this.loadedData.page.meta_description ||
+        this.loadedData.site.meta_description ||
+        "[OG Description and Fallback Description Missing]"
+      );
     },
-    store_image() {
-      return this.$store.getters["content/values"]().og_image;
+    originals_og_image() {
+      return this.originals.og_image?.[0];
     },
   },
   watch: {
-    store_image: {
-      handler() {
-        if (this.store_image.length === 0) {
-          this.og_image = this.site_og_image_url;
-        } else {
-          this.$api.files
-            .get(
-              this.$store.getters["content/model"]().api,
-              this.store_image[0].filename,
-              {
-                view: "compact",
-              }
-            )
-            .then((response) => {
-              this.og_image = response.url;
-            });
-        }
-      },
-      immediate: true,
+    originals_og_image: "fetchData",
+    "originals.og_site_name": "fetchData",
+    "originals.og_title": "fetchData",
+    "originals.meta_title": "fetchData",
+    "originals.og_description": "fetchData",
+    "originals.meta_description": "fetchData",
+  },
+  created() {
+    this.fetchData();
+  },
+  methods: {
+    fetchData() {
+      this.$store.dispatch("isLoading", (this.hide = true));
+      this.load()
+        .then((responseData) => (this.loadedData = responseData))
+        .finally(() => this.$store.dispatch("isLoading", (this.hide = false)));
     },
   },
 };