Optimize images

src/.vuepress/config/const.js

@@ -0,0 +1,7 @@
+const DOMAIN = "visnalize.com";
+const ORIGIN = `https://${DOMAIN}`;
+
+module.exports = {
+  DOMAIN,
+  ORIGIN,
+};

src/.vuepress/config/plugins.js

@@ -1,12 +1,14 @@
+const { ORIGIN } = require("./const");
+
 const plugins = [
   [
     "@vuepress/blog",
     {
       sitemap: {
-        hostname: "https://visnalize.com",
+        hostname: ORIGIN,
       },
       feed: {
-        canonical_base: "https://visnalize.com",
+        canonical_base: ORIGIN,
       },
       frontmatters: [
         {
@@ -25,14 +27,14 @@ const plugins = [
       canonical_base:
         process.env.NODE_ENV === "development"
           ? "http://localhost:8080"
-          : "https://visnalize.com",
+          : ORIGIN,
       author: { name: "Visnalize" },
     },
   ],
   [
     "canonical",
     {
-      baseURL: "https://visnalize.com",
+      baseURL: ORIGIN,
     },
   ],
   [

src/.vuepress/theme/layouts/FeatureList.vue

@@ -9,7 +9,10 @@
             <router-link :to="feature.path">
               <span class="image">
                 <v-icon name="image" />
-                <img :src="feature.frontmatter.image" :alt="feature.title" />
+                <img
+                  :src="transform(feature.frontmatter.image)"
+                  :alt="feature.title"
+                />
               </span>
               <span>{{ feature.title }}</span>
             </router-link>
@@ -25,6 +28,7 @@
 
 <script>
 import ParentLayout from "@parent-theme/layouts/Layout.vue";
+import { transform } from "../../utils/images";
 
 export default {
   components: { ParentLayout },
@@ -44,6 +48,11 @@ export default {
       return pages;
     },
   },
+  methods: {
+    transform(imageUrl) {
+      return transform(imageUrl, { width: 450 });
+    },
+  },
 };
 </script>
 

src/.vuepress/theme/layouts/FeaturePage.vue

@@ -5,7 +5,9 @@
         <h1>{{ data.title }}</h1>
         <m-social-links />
         <p>
-          <img :src="data.image" :alt="data.title" />
+          <a :href="data.image" target="_blank" rel="noopener noreferrer">
+            <img :src="transform(data.image)" :alt="data.title" />
+          </a>
         </p>
         <p>
           <b>{{ data.title }}</b> is a simulated application in
@@ -37,6 +39,7 @@
 <script>
 import ParentLayout from "@parent-theme/layouts/Layout.vue";
 import { lowerFirst } from "../../utils/string";
+import { transform } from "../../utils/images";
 
 export default {
   components: { ParentLayout },
@@ -47,6 +50,9 @@ export default {
   },
   methods: {
     lowerFirst,
+    transform(imageUrl) {
+      return transform(imageUrl, { width: 740, quality: 100 });
+    },
   },
 };
 </script>

src/.vuepress/utils/images.js

@@ -0,0 +1,39 @@
+import { ORIGIN } from "../config/const";
+import { isExternal } from "./urls";
+
+/**
+ * Docs: https://developers.cloudflare.com/images/transform-images/transform-via-url/
+ *
+ * @param {string} imagePath
+ * @param {TransformOptions} options
+ * @returns
+ */
+export function transform(imagePath, options) {
+  if (!imagePath || !options) {
+    throw new Error("imageUrl and options are required");
+  }
+  const optionsString = Object.entries(options)
+    .map(([key, value]) => (value === undefined ? "" : `${key}=${value}`))
+    .filter(Boolean)
+    .join(",");
+  const imageUrl = isExternal(imagePath) ? imagePath : `${ORIGIN}${imagePath}`;
+  return `${ORIGIN}/cdn-cgi/image/${optionsString}/${imageUrl}`;
+}
+
+/**
+ * @typedef {Object} TransformOptions
+ * @property {boolean} [anim]
+ * @property {string} [background]
+ * @property {number} [blur]
+ * @property {number} [brightness]
+ * @property {number} [contrast]
+ * @property {'scale-down' | 'contain' | 'cover' | 'crop' | 'pad'} [fit]
+ * @property {number} [gamma]
+ * @property {'auto' | 'left' | 'right' | 'top' | 'bottom'} [gravity]
+ * @property {number} [height]
+ * @property {number} [quality]
+ * @property {number} [rotate]
+ * @property {number} [sharpen]
+ * @property {number} [trim]
+ * @property {number} [width]
+ */

src/.vuepress/utils/urls.js

@@ -0,0 +1,3 @@
+export function isExternal(path) {
+  return /^(https?:|mailto:|tel:)/.test(path);
+}