feat(theme-classic): new configuration syntax for a simple footer

[christopherklint97]

Motivation

Fixes #6101

Have you read the Contributing Guidelines on pull requests?

Yes.

Test Plan

I actually had some trouble verifying that the simple footer works, but the multi-column footer still seems to work when viewing localhost:3000 without changing anything in docusaurus.config.js.

My trouble with simple footer was that I got the following error from yarn start when I changed the footer in docusaurus.config.js to only link items without titles:

A validation error occurred.
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[0].label" is not allowed

It seems like this validation error is being thrown here: https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-utils-validation/src/validationUtils.ts#L92

This is what I changed the footer to in docusaurus.config.js https://github.com/facebook/docusaurus/blob/main/website/docusaurus.config.js#L418:

footer: {
  style: 'dark',
  links: [
    {
      label: 'Privacy',
      href: 'https://opensource.facebook.com/legal/privacy/',
    },
    {
      label: 'Terms',
      href: 'https://opensource.facebook.com/legal/terms/',
    },
    {
      label: 'Data Policy',
      href: 'https://opensource.facebook.com/legal/data-policy/',
    },
    {
      label: 'Cookie Policy',
      href: 'https://opensource.facebook.com/legal/cookie-policy/',
    },
  ],
  logo: {
    alt: 'Facebook Open Source Logo',
    src: 'img/oss_logo.png',
    width: 160,
    height: 51,
    href: 'https://opensource.facebook.com',
  },
  copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc. Built with Docusaurus.`

Maybe some cache I am missing to clear or some Joi validation I need to change?

[netlify]

✔️ [V2]

🔨 Explore the source changes: e28c22e

🔍 Inspect the deploy log: https://app.netlify.com/sites/docusaurus-2/deploys/61c0ca32724e110007523982

😎 Browse the preview: https://deploy-preview-6132--docusaurus-2.netlify.app

[github-actions]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟢 Performance	96
🟢 Accessibility	98
🟢 Best practices	100
🟢 SEO	100
🟢 PWA	95

Lighthouse ran on https://deploy-preview-6132--docusaurus-2.netlify.app/

[Josh-Cena]

Indeed, you would need to add validation here: https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-theme-classic/src/validateThemeConfig.ts

Joi is quite painful and the current PR is already a good start. Do you want to wrap it up or would you prefer me to take it over?

[christopherklint97]

Awesome, thanks for the help! Now it works great 💪🏾

[Josh-Cena]

Cool. Didn't know if Joi schema like that actually works—would you add test cases about validation?

[Josh-Cena]

Very nice! Appreciate the amazing work ❤️

[christopherklint97]

Thank you for all the great help! 😄 💯

[Josh-Cena]

Thanks again for the work!

[Josh-Cena]

@slorber you may want to test this locally and check the design before merging, e.g. do we want to center the copyright when the footer is simple?

[slorber]

Thanks

Did some little modifications but overall that looks good.

For now I kept the simple footer centered above the copyright

[slorber]

The config validation allows undefined/null.

Undefined can lead to type guards thinking it's a simple footer despite being a multi column one:

null can lead to a weird rendering alignment:

Not sure who's using null, it may make sense to disable column titles and the alignment may be good enough if none of the columns have titles...

---

Edit: see use-case for null: #4267

Just adding default(null) to title validation + this type might be good enough.