feat(v2): add ability to set custom HTML in footer items (#1905)

facebook · Oct 29, 2019 · 31d17c9 · 31d17c9
1 parent 2e58e83
commit 31d17c9
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/CHANGELOG-2.x.md b/CHANGELOG-2.x.md
@@ -9,6 +9,7 @@
 - Refactor dark toggle into a hook.
 - Changed the way we read the `USE_SSH` env variable during deployment to be the same as in v1.
 - Fix accessing `docs/` or `/docs/xxxx` that does not match any existing doc page should return 404 (Not found) page, not blank page.
+- Allow user to add custom HTML to footer items.
 - Simplify blog metadata. Previously, accessing `/blog/post-xxx` will request for next and prev blog post metadata too aside from target post metadata. We should only request target post metadata.  
 - Prioritize `@docusaurus/core` dependencies/ node_modules over user's node_modules. This fix a bug whereby if user has core-js@3 on its own node_modules but docusaurus depends on core-js@2, we previously encounter `Module not found: core-js/modules/xxxx` (because core-js@3 doesn't have that).
 Another example is if user installed webpack@3 but docusaurus depends on webpack@4.

diff --git a/packages/docusaurus-theme-classic/src/theme/Footer/index.js b/packages/docusaurus-theme-classic/src/theme/Footer/index.js
@@ -62,11 +62,19 @@ function Footer() {
                 Array.isArray(linkItem.items) &&
                 linkItem.items.length > 0 ? (
                   <ul className="footer__items">
-                    {linkItem.items.map(item => (
-                      <li key={item.href || item.to} className="footer__item">
-                        <FooterLink item={item} />
-                      </li>
-                    ))}
+                    {linkItem.items.map(item =>
+                      item.html ? (
+                        <div
+                          dangerouslySetInnerHTML={{
+                            __html: item.html,
+                          }}
+                        />
+                      ) : (
+                        <li key={item.href || item.to} className="footer__item">
+                          <FooterLink item={item} />
+                        </li>
+                      ),
+                    )}
                   </ul>
                 ) : null}
               </div>