fix(v2): fix external URL for og:image tag

[38elements]

Motivation

// docusaurus.config.js
module.exports = {
  ...
  themeConfig: {
    // Relative to your site's "static" directory.
    // Cannot be SVGs. Can be external URLs too.
    image: 'img/docusaurus.png',
    ...
  },
}

https://github.com/facebook/docusaurus/blob/2b6e4409704fb20a39a9273b1b051065f0eb8079/website/docs/theme-classic.md#meta-image

Currently, when url is setted to themeConfig.image, this does not work as below.

https://example.comhttps://example.com/img/foo.png

This fixes it.

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

(Write your test plan here. If you changed any code, please provide us with clear instructions on how you verified your changes work. Bonus points for screenshots and videos!)

Related PRs

(If this PR adds or changes functionality, please take some time to update the docs at https://github.com/facebook/docusaurus, and link to your PR here.)

[docusaurus-bot]

Deploy preview for docusaurus-2 failed.

Built with commit 6d5c797

https://app.netlify.com/sites/docusaurus-2/deploys/5e71f246330f8100084ac4e6

[lex111]

Nice!

[38elements]

@lex111

This does not work normally.
I will add useMetaImageUrl().

docusaurus/packages/docusaurus/src/client/exports/useBaseUrl.js

Lines 10 to 28 in 32c1a92

	export default function useBaseUrl(url) {
	const {siteConfig} = useDocusaurusContext();
	const {baseUrl = '/'} = siteConfig || {};
	if (!url) {
	return url;
	}
	const externalRegex = /^(https?:|\/\/)/;
	if (externalRegex.test(url)) {
	return url;
	}
	if (url.startsWith('/')) {
	return baseUrl + url.slice(1);
	}
	return baseUrl + url;
	}

docusaurus/packages/docusaurus/src/client/exports/isInternalUrl.js

Lines 8 to 10 in 32c1a92

	export default function isInternalUrl(url) {
	return /^\/(?!\/)/.test(url);
	}

/^\/(?!\/)/.test('/foo.jpg') // true
/^\/(?!\/)/.test('foo.jpg') // false
/^\/(?!\/)/.test('foo/foo.jpg') // false

[lex111]

@38elements thank you for the report. We will rework this function, so do not change this PR.

[38elements]

@lex111
Thank you for reply.
I do not change this pull request.
I think it is better to make useMetaImageUrl(siteUrl, metaImage).
Since there is same code as below in 2 file.
I hope someone makes it, after this pull request is merged.

import isInternalUrl from '@docusaurus/isInternalUrl';
// ...
  let metaImageUrl = siteUrl + useBaseUrl(metaImage);
  if (!isInternalUrl(metaImage)) {
    metaImageUrl = metaImage;
  }

[yangshun]

Thank you, this is great!

[yangshun]

I think we need some sort of normalizing function that will ensure between each URL segment there's only one /. Sometimes people add / before and/or after the baseUrl and url in docusaurus.config.js and if we just naively append them, the resulting value might not be a valid URL.

@docusaurus/utils has it but it's not used on the client side, only in plugins.

[yangshun]

Oops premature merging. Probably some formatting issue. I'll fix it later tonight, sorry about that.