feat: add support for browser-based theme config file (docusaurus.theme.js)

packages/docusaurus-module-type-aliases/src/index.d.ts

@@ -19,6 +19,13 @@ declare module '@generated/docusaurus.config' {
   export default config;
 }
 
+declare module '@generated/docusaurus.theme' {
+  import type {ThemeConfig} from '@docusaurus/types';
+
+  const themeConfig: ThemeConfig;
+  export default themeConfig;
+}
+
 declare module '@generated/site-metadata' {
   import type {SiteMetadata} from '@docusaurus/types';
 

packages/docusaurus-theme-classic/src/theme/AnnouncementBar/Content/index.tsx

@@ -15,14 +15,23 @@ export default function AnnouncementBarContent(
   props: Props,
 ): JSX.Element | null {
   const {announcementBar} = useThemeConfig();
-  const {content} = announcementBar!;
+  const {content: Content} = announcementBar!;
+
+  // TODO Docusaurus v4: remove legacy announcement bar html string form?
+  if (typeof Content === 'string') {
+    return (
+      <div
+        {...props}
+        className={clsx(styles.content, props.className)}
+        // Developer provided the HTML, so assume it's safe.
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{__html: Content}}
+      />
+    );
+  }
   return (
-    <div
-      {...props}
-      className={clsx(styles.content, props.className)}
-      // Developer provided the HTML, so assume it's safe.
-      // eslint-disable-next-line react/no-danger
-      dangerouslySetInnerHTML={{__html: content}}
-    />
+    <div {...props} className={clsx(styles.content, props.className)}>
+      <Content />
+    </div>
   );
 }

packages/docusaurus-theme-classic/src/theme/Footer/Links/Simple/index.tsx

@@ -6,6 +6,7 @@
  */
 
 import React from 'react';
+import {type FooterLinkItem} from '@docusaurus/theme-common';
 import LinkItem from '@theme/Footer/LinkItem';
 import type {Props} from '@theme/Footer/Links/Simple';
 
@@ -30,7 +31,7 @@ export default function FooterLinksSimple({links}: Props): JSX.Element {
   return (
     <div className="footer__links text--center">
       <div className="footer__links">
-        {links.map((item, i) => (
+        {links.map((item: FooterLinkItem, i: number) => (
           <React.Fragment key={i}>
             <SimpleLinkItem item={item} />
             {links.length !== i + 1 && <Separator />}