diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js index 3fdb8baa..43fff623 100644 --- a/src/.vuepress/config.js +++ b/src/.vuepress/config.js @@ -239,6 +239,7 @@ module.exports = { $page.lastUpdated && new Date($page.lastUpdated).toISOString(), }, ], + [require('./plugins/vuepress-plugin-og-image')], ['vuepress-plugin-robots', { host: CANONICAL_BASE }], [ '@vuepress/html-redirect', diff --git a/src/.vuepress/plugins/vuepress-plugin-og-image/index.js b/src/.vuepress/plugins/vuepress-plugin-og-image/index.js new file mode 100644 index 00000000..aa5c96eb --- /dev/null +++ b/src/.vuepress/plugins/vuepress-plugin-og-image/index.js @@ -0,0 +1,6 @@ +const path = require('path') + +module.exports = { + name: 'vuepress-plugin-og-image', + clientRootMixin: path.resolve(__dirname, 'pageMeta-mixin.js'), +} diff --git a/src/.vuepress/plugins/vuepress-plugin-og-image/pageMeta-mixin.js b/src/.vuepress/plugins/vuepress-plugin-og-image/pageMeta-mixin.js new file mode 100644 index 00000000..94998cef --- /dev/null +++ b/src/.vuepress/plugins/vuepress-plugin-og-image/pageMeta-mixin.js @@ -0,0 +1,23 @@ +const { normalize } = require('path') + +export default { + created() { + if (typeof this.$ssrContext !== 'undefined') { + const meta = this.$frontmatter.meta + const og = meta && meta.find((m) => m.property === 'og:image') + if (meta && og) { + try { + const assetPath = normalize(og.content).replace(/^\/|\/$/g, '') + const imgPath = require('@source/assets/' + assetPath) + const { pageMeta } = this.$ssrContext + this.$ssrContext.pageMeta = pageMeta.replace( + new RegExp(og.content, 'g'), + imgPath + ) + } catch (e) { + throw new Error(`could not load og:image ${og.content}`) + } + } + } + }, +}