Add trailing slash to internal links option

[lemoswilson]

On HFO all canonical urls have trailing slash, and a bunch of links on the CMS don't have the trailing slash, so a lot of the links in the pages are actually not the canonical version, and thus are not the URLs indexed. This means that we are linking towards pages that are not true end pages in Google’s eyes.

To fix this I propose adding a internalTrailingSlash prop to the smart-link component, if this prop is true, then the link will automatically add a trailing slash to the URL.

[weotch]

How about this instead. It maybe computationally cheaper (don't need to construct a URL instance) and is more backwards compatible (since endsWidth isn't available in IE11).

Suggested change

	url = new URL to
	url.pathname += if url.pathname.endsWith "/" then "" else "/"
	url.toString()
	if to.match /\/$/ then to else to + '/'

[lemoswilson]

replacing the URL object approach with a direct string manipulation had some problems when dealing with urls such as "https://www.happyfamilyorganics.com/learning-center/all?postCategory=postnatal". Therefore I dropped the endsWith method for the regex match, but kept the URL construct.

[weotch]

This makes sense, but it does seem like pain to set everywhere.

You see how there is this concept of settings in this package?

vue-routing-anchor-parser/index.coffee

Lines 4 to 10 in ac67b2f

	# Default settings
	settings =
	addBlankToExternal: false
	internalUrls: []
	sameWindowUrls: []
	internalHosts: []
	externalPaths: []

I think you should make addTrailingSlashToInternal as a setting here. Then, because the nuxt module of this project automatically relays it's setting, we should be able to set addTrailingSlashToInternal in the anchorParser settings of a project's nuxt.config.

However, we still have the problem of how do we get smart-link to read those settings. To solve this, we'll used Nuxt's publicRuntimeConfig feature.

You should edit the nuxt/module.js file and add

this.options.publicRuntimeConfig.anchorParser = options

This will relay the module options for accessing in $config in all components. I talk about this approach here with regards to setPublicDefaultOptions.

Because this component is functional, we can't access this. But we can access parent and, from there, we can get at $config.

So you want to edit the render function to destructure parent. Then you would add something like:

if internalTrailingSlash or parent?.$config?.anchorParser?.addTrailingSlashToInternal
then makeRouterPath addTrailingSlash to
else makeRouterPath to

Thus, we enable internalTrailingSlash globally on a project from the nuxt.config.

I did a little POC of accessing publicRuntimeConfig from a functional component here: https://codesandbox.io/s/jolly-fast-w8zngq?file=/components/fake-smart-link.coffee

[lemoswilson]

Yeah, looks like a good idea, definitely easier to enable this setting globally by following this approach. Thanks for the feedback.

[weotch]

Sorry it took me a while to loop back on this, but i just merged and tagged it