question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. ItĀ collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Validation of footer `href` values does not allow URI references (e.g. `/foo/bar`)

See original GitHub issue

šŸ› Bug Report

Upgrading from 2.0.0-alpha.55 to 2.0.0-alpha.61 of all my docusaurus packages has resulted in a validation failure in a working docusaurus.config.js file. In particular, In our project, I am deploying to Netlify, and using a netlify.toml file to add a redirect /community/discord/join URL that will redirect to the current Discord invite link.

In my footer, I’ve been using an item like:

            {
              label: "Discord",
              href: "/community/discord/invite",
            },

So that clicking that link in the footer will redirect the browser to that URL on the current host/origin server, which then redirects to the actual Discord link.

After updating all my NPM packages, I get an error when starting Docusaurus:

āÆ npm start

> docs@0.0.0 start /home/peter/git/zmk/docs
> docusaurus start

Starting the development server...

A validation error occured.
The validation system was added recently to Docusaurus as an attempt to avoid user configuration errors.
We may have made some mistakes.
If you think your configuration is valid and should keep working, please open a bug report.

ValidationError: "footer.links[1].items[0].href" must be a valid uri

I can’t use to instead of href, because that will only redirect with the JS router, not cause a browser navigation, so that just 404s in JS land.

Workaround

I can hardcode the full production deployment URL for this one footer link. It’s not a huge problem. But doing so definitely seems ā€œwrongā€, and I would expect to be able to use a URI-reference for this field, not just a URI.

Have you read the Contributing Guidelines on issues?

Yup!

To Reproduce

(Write your steps here:)

  1. Bootstrap a new V2 docusaurus site with latest packages.
  2. Add a footer link item that uses a relative URI (no scheme or authority section), e.g. /foo/bar
  3. Run npm start

Expected behavior

A footer link will be added that performs a browser navigation to the given relative URI when clicked.

Actual Behavior

I can’t run/build docusaurus.

Your Environment

  • Docusaurus version used: 2.0.0-alpha.61

Reproducible Demo

  1. Check out repo at zmkfirmware/zmk
  2. Change into the docs directory.
  3. Run npm ci
  4. Run npm start and confirm it loads and footer link with labeled ā€œDiscordā€ and confirm it works.
  5. Run npm update to pull in latest Docusaurus NPM packages.
  6. Run npm start
  7. Confirm it fails to start.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
petejohansoncommented, Aug 5, 2020

@slorber Thanks for the quick follow up. The only downside to using DEPLOY_URL is it doesn’t update after a particular deploy is promoted to the active deploy for the site, so your production site ends up w/ the long annoying deploy URL instead of the ā€œniceā€ URL.

I can use process.env.URL for now, but that doesn’t technically work, should I deploy a preview with a different redirect in the netlify.toml.

Agreed this is a niche issue, but still something that seems worth thinking about supporting somehow in Docusaurus.

Thanks again for the great project.

0reactions
petejohansoncommented, Sep 14, 2020

@tommilligan Sure seems like that would address the issue I had to work around, yes.

Read more comments on GitHub >

github_iconTop Results From Across the Web

<footer> - HTML: HyperText Markup Language - MDN Web Docs
The HTML element represents a footer for its nearest ancestor sectioning content or sectioning root element.
Read more >
URL confusion vulnerabilities in the wild: Exploring parser ...
In this post, we will take a look at the history of URLs, explore possible sources of URL parser confusion, run through an...
Read more >
How to use URLs and links in Jekyll - Made Mistakes
This tutorial will explain the various URL types, how to use them when building with Jekyll, and then how to link content and...
Read more >
docusaurus.config.js
API reference for Docusaurus configuration file. ... For example, https://facebook.github.io is the URL of https://facebook.github.io/metro/Ā ...
Read more >
HTML and XHTML Techniques for WCAG 2.0 - W3C
If CSS is used, this technique can be applied to combine the links. Examples. Example 1. The icon and text are contained in...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found