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/
This commit is contained in:
curben 2019-12-18 02:46:39 +00:00
parent 80c9e584f2
commit ff34956550
No known key found for this signature in database
GPG Key ID: 5D9DB57A25D34EE3
2 changed files with 6 additions and 36 deletions

View File

@ -1,3 +1,4 @@
# Reverse proxy to cdn # Reverse proxy to cdn
/libs/* https://cdn.statically.io/libs/:splat 200 /libs/* https://cdn.statically.io/libs/:splat 200
/img/* https://cdn.statically.io/img/gitlab.com/curben/blog/raw/site/: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

View File

@ -9,10 +9,9 @@
* https://nodejs.org/api/url.html#url_the_whatwg_url_api * https://nodejs.org/api/url.html#url_the_whatwg_url_api
*/ */
'use strict'
const moment = require('moment') 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) { function meta (name, content) {
return `${htmlTag('meta', { return `${htmlTag('meta', {
@ -30,15 +29,13 @@ function og (name, content) {
function openGraphHelper () { function openGraphHelper () {
const { config, page, theme } = this const { config, page, theme } = this
const { content } = page
let images = page.photos || []
let description = page.excerpt || theme.description || false let description = page.excerpt || theme.description || false
const author = config.author const author = config.author
const keywords = page.tags || false const keywords = page.tags || false
const title = page.title || theme.nickname const title = page.title || theme.nickname
const type = (this.is_post() ? 'article' : 'website') const type = (this.is_post() ? 'article' : 'website')
const url = config.pretty_urls.trailing_index ? encodeURL(this.url) const url = prettyUrls(this.url, config.pretty_urls)
: encodeURL(this.url).replace(/index\.html$/, '') const screenshot = '/screenshot/' + prettyUrls(this.path, config.pretty_urls)
const siteName = config.subtitle || theme.nickname || false const siteName = config.subtitle || theme.nickname || false
const published = page.date || false const published = page.date || false
const updated = page.lastUpdated || false const updated = page.lastUpdated || false
@ -76,35 +73,7 @@ function openGraphHelper () {
result += og('og:locale', language) result += og('og:locale', language)
if (!images.length && content && content.includes('<img')) { result += og('og:image', fullUrlFor.call(this, screenshot))
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)
})
if (published) { if (published) {
if ((moment.isMoment(published) || moment.isDate(published)) && !isNaN(published.valueOf())) { if ((moment.isMoment(published) || moment.isDate(published)) && !isNaN(published.valueOf())) {