refactor: use native responsive image function

* https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
* https://cloudinary.com/blog/responsive_images_with_srcset_sizes_and_cloudinary
* https://www.html5rocks.com/en/tutorials/responsive/picture-element/
* https://alligator.io/html/picture-element/
* https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/

scripts/cloudinary.js

@@ -14,6 +14,48 @@
 hexo.extend.tag.register('cloudinary', (args) => {
   const fileName = args[0]
   const alt = args[1] || ''
+  let modern = ''
+  let legacy = ''
 
-  return '<a href="https://res.cloudinary.com/curben/' + fileName + '"><img class="cld-responsive" data-src="https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_600,h_400/' + fileName + '" src="/svg/loading.svg" alt="' + alt + '"></a>'
+  if (fileName.endsWith('.png')) {
+    modern = fileName.replace(/\.png$/, '.webp')
+    legacy = fileName
+  } else if (fileName.endsWith('.webp')) {
+    modern = fileName
+    legacy = fileName.replace(/\.webp$/, '.gif')
+  }
+
+  if (fileName.endsWith('.png') || fileName.endsWith('.webp')) {
+    return `<a href="https://res.cloudinary.com/curben/${fileName}">
+      <picture>
+      <source type="image/webp"
+      srcset="https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_300,h_400/${modern} 300w,
+        https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_450,h_400/${modern} 450w,
+        https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_600,h_400/${modern} 600w"
+      sizes="(max-width: 300px) 280px,
+            (max-width: 450px) 430px,
+            600px"
+      src="https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_600,h_400/${legacy}">
+      <img srcset="https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_300,h_400/${legacy} 300w,
+        https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_450,h_400/${legacy} 450w,
+        https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_600,h_400/${legacy} 600w"
+        sizes="(max-width: 300px) 280px,
+              (max-width: 450px) 430px,
+              600px"
+        src="https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_600,h_400/${legacy}"
+        alt="${alt}">
+      </picture></a>`
+  } else {
+    return `<a href="https://res.cloudinary.com/curben/${fileName}">
+      <picture>
+      <img srcset="https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_300,h_400/${fileName} 300w,
+        https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_450,h_400/${fileName} 450w,
+        https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_600,h_400/${fileName} 600w"
+        sizes="(max-width: 300px) 280px,
+              (max-width: 450px) 430px,
+              600px"
+        src="https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_600,h_400/${fileName}"
+        alt="${alt}">
+      </picture></a>`
+  }
 })

scripts/openGraph.js

@@ -13,6 +13,7 @@
 
 const moment = require('moment')
 const { escapeHTML, htmlTag, stripHTML } = require('hexo-util')
+const micromatch = require('micromatch')
 
 function meta (name, content, escape) {
   if (escape !== false && typeof content === 'string') {
@@ -70,9 +71,12 @@ function openGraphHelper (options = {}) {
 
     // https://github.com/hexojs/hexo/pull/3680
     let img
-    const imgPattern = /<img [^>]*src=['"]([^'"]+)([^>]*>)/gi
+    const imgPattern = /<a [^>]*href=['"]([^'"]+)([^>]*>)/gi
     while ((img = imgPattern.exec(content)) !== null) {
-      if (!img[1].endsWith('.svg')) images.push(img[1])
+      const imgExt = ['*.jpg', '*.png', '*.webp']
+      if (micromatch.isMatch(img[1], imgExt, { basename: true })) {
+        images.push(img[1])
+      }
     }
   }
 

themes/typing/layout/_partial/after-footer.ejs

@@ -2,7 +2,5 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js" data-sri-fallback="/js/clipboard.min.js" integrity="sha384-8CYhPwYlLELodlcQV713V9ZikA3DlCVaXFDpjHfP8Z36gpddf/Vrt47XmKDsCttu" crossorigin="anonymous"></script>
 <% } %>
 
-<script src="https://cdnjs.cloudflare.com/ajax/libs/cloudinary-core/2.6.3/cloudinary-core-shrinkwrap.min.js" data-sri-fallback="/js/cloudinary-core-shrinkwrap.min.js" integrity="sha384-AtUi14V2IZNnJArkg9+Z7S73y5MplnidfGOr3uLWrW2VTnQKUnJnRZl0IdvfTueI" crossorigin="anonymous"></script>
-
 <%/* javascript of Typing theme */%>
 <%- js('js/typing') %>

themes/typing/source/js/typing.js

@@ -8,7 +8,7 @@ document.getElementById('searchClickMob').addEventListener('click', () => {
 }, false)
 
 /*
-* Copy button and Cloudinary functions.
+* Copy button
 * Following functions only execute after
 * the 'document' is ready or
 * <script src> is executed.
@@ -36,8 +36,4 @@ document.addEventListener('DOMContentLoaded', () => {
       event.trigger.textContent = 'Copy'
     }, 2000)
   })
-
-  // Initialize Cloudinary responsive function
-  const cl = cloudinary.Cloudinary.new({ cloud_name: 'curben' })
-  cl.responsive()
 }, false)