refactor: use layout component

Author: araujogui

src/generators/jsx-ast/utils/buildContent.mjs

@@ -295,29 +295,14 @@ export const createDocumentLayout = (
   const config = getConfig('jsx-ast');
 
   return createTree('root', [
-    createJSXElement(JSX_IMPORTS.AnnouncementBanner.name, {
-      remoteConfig: config.remoteConfig,
-      versionMajor: config.version?.major ?? null,
-    }),
-    createJSXElement(JSX_IMPORTS.NavBar.name),
-    createJSXElement(JSX_IMPORTS.Article.name, {
-      children: [
-        createJSXElement(JSX_IMPORTS.SideBar.name, sideBarProps),
-        createElement('div', [
-          createElement('div', [
-            createJSXElement(JSX_IMPORTS.TableOfContents.name, {
-              headings: metaBarProps.headings,
-              summaryTitle: 'On this page',
-            }),
-            createElement('br'),
-            createElement(
-              'main',
-              entries.map(entry => processEntry(entry, remark))
-            ),
-          ]),
-          createJSXElement(JSX_IMPORTS.MetaBar.name, metaBarProps),
-        ]),
-      ],
+    createJSXElement(JSX_IMPORTS.Layout.name, {
+      sideBarProps,
+      metaBarProps,
+      announcementBannerProps: {
+        remoteConfig: config.remoteConfig,
+        versionMajor: config.version?.major ?? null,
+      },
+      children: entries.map(entry => processEntry(entry, remark)),
     }),
   ]);
 };

src/generators/web/constants.mjs

@@ -14,34 +14,10 @@ export const ROOT = dirname(fileURLToPath(import.meta.url));
  * An object containing mappings for various JSX components to their import paths.
  */
 export const JSX_IMPORTS = {
-  AnnouncementBanner: {
-    name: 'AnnouncementBanner',
-    source: resolve(ROOT, './ui/components/AnnouncementBanner'),
-  },
   Layout: {
     name: 'Layout',
     source: '#theme/Layout',
   },
-  NavBar: {
-    name: 'NavBar',
-    source: resolve(ROOT, './ui/components/NavBar'),
-  },
-  Article: {
-    name: 'Article',
-    source: '@node-core/ui-components/Containers/Article',
-  },
-  SideBar: {
-    name: 'SideBar',
-    source: resolve(ROOT, './ui/components/SideBar'),
-  },
-  TableOfContents: {
-    name: 'TableOfContents',
-    source: '@node-core/ui-components/Common/TableOfContents',
-  },
-  MetaBar: {
-    name: 'MetaBar',
-    source: resolve(ROOT, './ui/components/MetaBar'),
-  },
   CodeBox: {
     name: 'CodeBox',
     source: resolve(ROOT, './ui/components/CodeBox'),

src/generators/web/ui/components/Layout/index.jsx

@@ -1,6 +1,8 @@
 import TableOfContents from '@node-core/ui-components/Common/TableOfContents';
 import Article from '@node-core/ui-components/Containers/Article';
 
+import AnnouncementBanner from '../AnnouncementBanner';
+
 import Footer from '#theme/Footer';
 import MetaBar from '#theme/Metabar';
 import NavBar from '#theme/Navigation';
@@ -13,10 +15,16 @@ import SideBar from '#theme/Sidebar';
  * main content, meta bar, and footer. Override via `#theme/Layout` in your
  * configuration's `imports` to customize the entire page structure.
  *
- * @param {{ sideBarProps: object, metaBarProps: object, children: import('preact').ComponentChildren }} props
+ * @param {{ sideBarProps: object, metaBarProps: object, announcementBannerProps: object, children: import('preact').ComponentChildren }} props
  */
-export default ({ sideBarProps, metaBarProps, children }) => (
+export default ({
+  sideBarProps,
+  metaBarProps,
+  announcementBannerProps,
+  children,
+}) => (
   <>
+    <AnnouncementBanner {...announcementBannerProps} />
     <NavBar />
     <Article>
       <SideBar {...sideBarProps} />