refactor(v2): add useThemeConfig hook + cleanup useless theme default values (#3394)

* refactor(theme-classic): clean default or fallback values

* refactor(theme-classic): fix announcementbar undefined error

* refactor(theme-classic): fixed react hook warning error

* refactor(theme-classic): revert prism destruct

* create useThemeConfig and use it whenever possible

* validateThemeConfig => add [] as default value for almost all arrays

* fix tests

Co-authored-by: slorber <lorber.sebastien@gmail.com>
This commit is contained in:
Shubham Kumar 2020-10-02 22:53:34 +05:30 committed by GitHub
parent f5f2064656
commit 0951eef2d7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 154 additions and 142 deletions

View file

@ -24,18 +24,13 @@ import useLogo from '@theme/hooks/useLogo';
const Example = () => {
// highlight-next-line
const {logoLink, logoLinkProps, logoImageUrl, logoAlt} = useLogo();
const {logoLink, logoLinkProps, logoImageUrl, logoAlt} = useLogo();
return (
<Link to={logoLink} {...logoLinkProps}>
{logoImageUrl != null && (
<img
src={logoImageUrl}
alt={logoAlt}
/>
)}
{logoImageUrl != null && <img src={logoImageUrl} alt={logoAlt} />}
</Link>
)
);
};
```
@ -107,7 +102,6 @@ React Router should automatically apply active link styling to links, but you ca
Outbound (external) links automatically get `target="_blank" rel="noopener noreferrer"` attributes.
## Footer
You can add logo and a copyright to the footer via `themeConfig.footer`. Logo can be placed in [static folder](static-assets.md). Logo URL works in the same way of the navbar logo.
@ -125,58 +119,58 @@ You can add logo and a copyright to the footer via `themeConfig.footer`. Logo ca
```
## Footer Links
You can add links to the navbar via `themeConfig.footer.links`:
You can add links to the navbar via `themeConfig.footer.links`:
```js {5-15} title="docusaurus.config.js"
module.exports = {
// ...
footer: {
links: [
{
// Label of the section of these links
title: 'Docs',
items: [
{
// Label of the link
label: 'Style Guide',
// Client-side routing, used for navigating within the website.
// The baseUrl will be automatically prepended to this value.
to: 'docs/',
},
{
label: 'Second Doc',
to: 'docs/doc2/',
},
],
},
{
title: 'Community',
items: [
{
label: 'Stack Overflow',
// A full-page navigation, used for navigating outside of the website.
href: 'https://stackoverflow.com/questions/tagged/docusaurus',
},
{
label: 'Discord',
href: 'https://discordapp.com/invite/docusaurus',
},
{
label: 'Twitter',
href: 'https://twitter.com/docusaurus',
},
{
//Renders the html pass-through instead of a simple link
html: `
links: [
{
// Label of the section of these links
title: 'Docs',
items: [
{
// Label of the link
label: 'Style Guide',
// Client-side routing, used for navigating within the website.
// The baseUrl will be automatically prepended to this value.
to: 'docs/',
},
{
label: 'Second Doc',
to: 'docs/doc2/',
},
],
},
{
title: 'Community',
items: [
{
label: 'Stack Overflow',
// A full-page navigation, used for navigating outside of the website.
href: 'https://stackoverflow.com/questions/tagged/docusaurus',
},
{
label: 'Discord',
href: 'https://discordapp.com/invite/docusaurus',
},
{
label: 'Twitter',
href: 'https://twitter.com/docusaurus',
},
{
//Renders the html pass-through instead of a simple link
html: `
<a href="https://www.netlify.com" target="_blank" rel="noreferrer noopener" aria-label="Deploys by Netlify">
<img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" alt="Deploys by Netlify" />
</a>
`,
},
],
},
],
},
},
],
},
],
},
};
```