Search code examples
javascriptdocdocusaurus

Add section above the copyright in the docusaurus.config.js file

I'm currently working on customizing the footer of my Docusaurus documentation site, and I'd like to include "Links" section with icons and links right above the copyright information.

The desired outcome I'm trying to achieve is shown in this image:

enter image description here

To implement this, I tried creating a new component as follows:

import React from 'react';
import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl';

const LinksList = [
  { icon: 'fab fa-facebook-f', link: 'https://www.facebook.com' },
  { icon: 'fab fa-twitter', link: 'https://twitter.com' }
];

const Link = ({ icon, link }) => (
    <div>
        <Link to={useBaseUrl(link)}>
        <div className="text--center">
            <i className={icon} />
        </div>
        </Link>
    </div>
);

const Links = () => (
    <div>
        <section>
        {LinksList.map((props, idx) => (
            <Link key={idx} {...props} />
        ))}
        </section>
    </div>
);

export default Links;

I included this component in the docusaurus.config.js file like so:

Something like this:

const CLinks = require.resolve('./src/components/index.js');

footer: {
  style: "dark",
  links: [],
  linksWithIcon: CLinks,
  copyright: `Copyright ©`
}

However, when I try to add the Links section, I encounter the following error:

[ERROR] ValidationError: "footer.linksWithIcon" is not allowed
Solution

  • In one of projects I used to work there was similar requirement - to have custom footer links. We used swizzling concept for Footer component and implemented custom links. Link urls with icons can be stored in docusaurus.config.js and you can use them to render list of icons in swizzled Footer component.

    docusaurus.config.js

    {
   ...
   footer: {
     links: [
      { icon: 'fab fa-facebook-f', link: 'https://www.facebook.com' },
      { icon: 'fab fa-twitter', link: 'https://twitter.com' }
    ]
   }
}

    Inside Footer component

    import { useThemeConfig } from "@docusaurus/theme-common";

const { footer } = useThemeConfig();
const { links = [] } = footer // links array declared in footer section of docusaurus.config.js

<section>
  {links.map((props, idx) => (
      <Link key={idx} {...props} />
  ))}
</section>