Documentation for my website is built with Docusaurus, and I'm currently using the latest release, 2.0.0-alpha.61.
Compiled documentation is saved to the /docs
directory of my website, while most of the rest of my site is built with GatsbyJS. So... if you hit /docs/something
you arrive at a Docusaurus-built page, but if you hit /contact
or /about-us
or whatever, you hit a page built using GatsbyJS.
My docusaurus.config.js
contains:
baseUrl: "/docs/",
...
presets: [
[
"@docusaurus/preset-classic",
{
docs: {
sidebarPath: require.resolve("./sidebars/index.js"),
showLastUpdateTime: true,
routeBasePath: "",
},
...
so that Docusaurus is aware that it lives in /docs.
Here's my issue: In the footer of pages created in Docusaurus I'd like to link to /contact or /about-us, etc., on the main page.
The footer portion of docusaurus.config.js
allows you to have links like this:
{
label: "Github",
href: "https://github.com/my-org/my-repo",
},
or this:
{
label: "Contributing",
to: "/docs/contributing",
}
However, if you do something like this:
{
label: "About Us",
href: "/about-us",
},
You get an error noting that /about-us
is not a valid url. The error states ValidationError: "footer.links[0].items[0].href" must be a valid uri
. Presumably this is because /about-us
isn't prepended with https://
. I'd like to avoid defining absolute URLs, since I want to be able to stamp out qa, staging, and prod environments for the website and docs.
If you instead do something like this:
{
label: "About Us",
to: "/about-us",
},
Then it compiles, but Docusaurus' React router intercepts the link when clicked, directs you to https://my-site.com/about-us, but shows a Docusaurus 404 "not found" page since Docusaurus' react router is not aware of an /about-us page. If you refresh the page you see the appropriate "about us" page from GatsbyJS, since Docusaurus' React router doesn't get in the way if you hit the page directly.
What would be the best way to link to my GatsbyJS-generated pages from the Docusaurus footer? I "swizzled" the footer and have as hack in place right now where my docusaurus.config.js
links have an additional property:
{
label: "About Us",
to: "/about-us",
localLink: true,
},
and I have an if
clause in my swizzled component that creates an <a>
tag if localLink
is true, and creates a normal React link component otherwise, but I'm not a huge fan of swizzling out components with an alpha release of Docusaurus.
Is there a better way to link to my main page from the footer?
Thanks a bunch!