gatsby: Simple gatsby-plugin-canonical-urls Protocol Bug

Description

The gatsby-plugin-canonical-urls plugin adds a rel=canonical <link> tag to the head of each HTML page.

Here is an example of code added to the head of the html document:

<link rel="canonical" href="https://www.abc.com" data-baseprotocol="https:" data-basehost="www.abc.com">

The potential problem is with the protocol. It states the protocol is “https:”. But shouldn’t it be “https” without the colon?

How to Reproduce

1. Start with the Gatsby Starter Default.
2. Install the gatsby-plugin-canonical-urls plugin.
3. Run “gatsby develop”
4. Open “localhost:8000” in Google Chrome.
5. Open the developer tools (click F12).
6. Select “Elements”
7. Expand the “head” section.
8. Look for the rel=canonical <link> tag.
9. Find the property data-baseprotocol. It should be equal to “https” not “https:”

Solution

Open the gatsby-srr.js file. And modify line 29 to remove the colon. Here is what line 29 should look like:

data-baseprotocol={parsed.protocol.slice(0, -1)}