feat(v2): allow prepending of baseUrl to href in navbar and footer (#2746)

packages/docusaurus-theme-classic/src/theme/Footer/index.js

@@ -13,8 +13,10 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import styles from './styles.module.css';
 
-function FooterLink({to, href, label, ...props}) {
+function FooterLink({to, href, label, prependBaseUrlToHref, ...props}) {
   const toUrl = useBaseUrl(to);
+  const normalizedHref = useBaseUrl(href, true);
+
   return (
     <Link
       className="footer__link-item"
@@ -22,7 +24,7 @@ function FooterLink({to, href, label, ...props}) {
         ? {
             target: '_blank',
             rel: 'noopener noreferrer',
-            href,
+            href: prependBaseUrlToHref ? normalizedHref : href,
           }
         : {
             to: toUrl,

packages/docusaurus-theme-classic/src/theme/Navbar/index.js

@@ -26,10 +26,12 @@ function NavLink({
   href,
   label,
   activeClassName = 'navbar__link--active',
+  prependBaseUrlToHref,
   ...props
 }) {
   const toUrl = useBaseUrl(to);
   const activeBaseUrl = useBaseUrl(activeBasePath);
+  const normalizedHref = useBaseUrl(href, true);
 
   return (
     <Link
@@ -37,7 +39,7 @@ function NavLink({
         ? {
             target: '_blank',
             rel: 'noopener noreferrer',
-            href,
+            href: prependBaseUrlToHref ? normalizedHref : href,
           }
         : {
             isNavLink: true,

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

@@ -7,7 +7,10 @@
 
 import useDocusaurusContext from './useDocusaurusContext';
 
-export default function useBaseUrl(url: string): string {
+export default function useBaseUrl(
+  url: string,
+  forcePrependBaseUrl: boolean = false,
+): string {
   const {siteConfig} = useDocusaurusContext();
   const {baseUrl = '/'} = siteConfig || {};
 
@@ -15,6 +18,10 @@ export default function useBaseUrl(url: string): string {
     return url;
   }
 
+  if (forcePrependBaseUrl) {
+    return baseUrl + url;
+  }
+
   const externalRegex = /^(https?:|\/\/)/;
   if (externalRegex.test(url)) {
     return url;

website/docs/theme-classic.md

@@ -132,13 +132,23 @@ module.exports = {
     navbar: {
       links: [
         {
+          // Client-side routing, used for navigating within the website.
+          // The baseUrl will be automatically prepended to this value.
           to: 'docs/introduction',
+          // A full-page navigation, used for navigating outside of the website.
+          // You should only use either `to` or `href`.
+          href: 'https://www.facebook.com',
+          // Prepends the baseUrl to href values.
+          prependBaseUrlToHref: true,
+          // The string to be shown.
           label: 'Introduction',
+          // Left or right side of the navbar.
           position: 'left', // or 'right'
           // To apply the active class styling on all
           // routes starting with this path.
           activeBasePath: 'docs',
-          className: '', // Custom CSS class (for styling any item)
+          // Custom CSS class (for styling any item).
+          className: '',
         },
         // ... other links
       ],
@@ -148,7 +158,7 @@ module.exports = {
 };
 ```
 
-Outbound links automatically get `target="_blank" rel="noopener noreferrer"` attributes.
+Outbound (external) links automatically get `target="_blank" rel="noopener noreferrer"` attributes.
 
 ### Navbar Dropdown
 
@@ -200,7 +210,9 @@ module.exports = {
 
 ## Footer
 
-## `CodeBlock`
+TODO.
+
+## CodeBlock
 
 Docusaurus uses [Prism React Renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight code blocks.