From ff34956550535ccbfeaacecf5e90c5fb862307ea Mon Sep 17 00:00:00 2001
From: curben <2809763-curben@users.noreply.gitlab.com>
Date: Wed, 18 Dec 2019 02:46:39 +0000
Subject: [PATCH] feat: use page's screenshot as og:image

- Some microbrowser loads all "og:image" images before choosing one
- Now there is only one "og:image" tag and it's a screenshot of the page
- https://24ways.org/2019/microbrowsers-are-everywhere/
---
 source/_redirects                     |  1 +
 themes/chameleon/scripts/openGraph.js | 41 ++++-----------------------
 2 files changed, 6 insertions(+), 36 deletions(-)

diff --git a/source/_redirects b/source/_redirects
index 50737e5..f359a42 100644
--- a/source/_redirects
+++ b/source/_redirects
@@ -1,3 +1,4 @@
 # Reverse proxy to cdn
 /libs/* https://cdn.statically.io/libs/:splat 200
 /img/* https://cdn.statically.io/img/gitlab.com/curben/blog/raw/site/:splat 200
+/screenshot/* https://cdn.statically.io/screenshot/curben.netlify.com/:splat?mobile=true 200
diff --git a/themes/chameleon/scripts/openGraph.js b/themes/chameleon/scripts/openGraph.js
index 6d3e20d..1aa6d17 100644
--- a/themes/chameleon/scripts/openGraph.js
+++ b/themes/chameleon/scripts/openGraph.js
@@ -9,10 +9,9 @@
 * https://nodejs.org/api/url.html#url_the_whatwg_url_api
 */
 
-'use strict'
-
 const moment = require('moment')
-const { encodeURL, escapeHTML, htmlTag, stripHTML } = require('hexo-util')
+const { escapeHTML, htmlTag, prettyUrls, stripHTML } = require('hexo-util')
+const fullUrlFor = require('hexo-util').full_url_for
 
 function meta (name, content) {
   return `${htmlTag('meta', {
@@ -30,15 +29,13 @@ function og (name, content) {
 
 function openGraphHelper () {
   const { config, page, theme } = this
-  const { content } = page
-  let images = page.photos || []
   let description = page.excerpt || theme.description || false
   const author = config.author
   const keywords = page.tags || false
   const title = page.title || theme.nickname
   const type = (this.is_post() ? 'article' : 'website')
-  const url = config.pretty_urls.trailing_index ? encodeURL(this.url)
-    : encodeURL(this.url).replace(/index\.html$/, '')
+  const url = prettyUrls(this.url, config.pretty_urls)
+  const screenshot = '/screenshot/' + prettyUrls(this.path, config.pretty_urls)
   const siteName = config.subtitle || theme.nickname || false
   const published = page.date || false
   const updated = page.lastUpdated || false
@@ -76,35 +73,7 @@ function openGraphHelper () {
 
   result += og('og:locale', language)
 
-  if (!images.length && content && content.includes('<img')) {
-    images = images.slice()
-
-    let img
-    const imgPattern = /<img [^>]*src=['"]([^'"]+)([^>]*>)/gi
-    while ((img = imgPattern.exec(content)) !== null) {
-      images.push(img[1])
-    }
-  }
-
-  if (!Array.isArray(images)) images = [images]
-
-  images = images.map(path => {
-    let url
-    // resolve `path`'s absolute path relative to current page's url
-    // `path` can be both absolute (starts with `/`) or relative.
-    try {
-      url = new URL(path).href
-    } catch (e) {
-      url = new URL(path, config.url).href
-      return url
-    }
-
-    return url
-  })
-
-  images.forEach(path => {
-    result += og('og:image', path)
-  })
+  result += og('og:image', fullUrlFor.call(this, screenshot))
 
   if (published) {
     if ((moment.isMoment(published) || moment.isDate(published)) && !isNaN(published.valueOf())) {