fix: resolve missing interactive components from islands migration

components/Blog/Byline/index.jsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import AvatarGroup from '@node-core/ui-components/Common/AvatarGroup';
 import Avatar from '@node-core/ui-components/Common/AvatarGroup/Avatar';
+import withIsland from '../../../node_modules/@doc-kit/generator-react/src/html/ui/islands/withIsland.jsx';
 
 import styles from './index.module.css';
 
@@ -50,7 +51,7 @@ const authorLabel = authors => {
  *   className?: string,
  * }} props
  */
-export default function Byline({ authors, date, size = 'sm', className }) {
+function Byline({ authors, date, size = 'sm', className }) {
   const format = size === 'md' ? fullDate : shortDate;
   const avatarSize = size === 'md' ? 'medium' : 'small';
 
@@ -81,3 +82,5 @@ export default function Byline({ authors, date, size = 'sm', className }) {
     </div>
   );
 }
+
+export default withIsland(Byline, { name: 'Byline', on: { idle: true } });

components/MetaBar/index.jsx

@@ -5,12 +5,13 @@ import GitHubIcon from '@node-core/ui-components/Icons/Social/GitHub';
 import useSponsors from '../../hooks/useSponsors.mjs';
 import { editURL } from '#theme/config';
 import SponsorCard from '../Sponsors/Card/index.jsx';
+import withIsland from '../../node_modules/@doc-kit/generator-react/src/html/ui/islands/withIsland.jsx';
 
 import styles from './index.module.css';
 
 const OC_URL = 'https://opencollective.com/webpack';
 
-export default ({ metadata, headings = [], readingTime }) => {
+function MetaBarComponent({ metadata, headings = [], readingTime }) {
   const { sponsors } = useSponsors();
   const platinumSponsors = sponsors
     .filter(sponsor => sponsor.monthly.tier === 'platinum')
@@ -71,4 +72,9 @@ export default ({ metadata, headings = [], readingTime }) => {
       }}
     />
   );
-};
+}
+
+export default withIsland(MetaBarComponent, {
+  name: 'MetaBar',
+  on: { idle: true },
+});

layouts/Blog/index.jsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 
 import BasePagination from '@node-core/ui-components/Common/BasePagination';
+import withIsland from '../../node_modules/@doc-kit/generator-react/src/html/ui/islands/withIsland.jsx';
 
 import NavBar from '../../components/NavBar.jsx';
 import Footer from '../../components/Footer/index.jsx';
@@ -38,7 +39,7 @@ const hrefFor = ({ category, page }) => {
 /**
  * @param {{ metadata: object }} props
  */
-export default function BlogLayout({ metadata }) {
+function BlogLayout({ metadata }) {
   const [{ category, page }, setView] = useState({ category: ALL, page: 1 });
 
   useEffect(() => {
@@ -116,3 +117,8 @@ export default function BlogLayout({ metadata }) {
     </>
   );
 }
+
+export default withIsland(BlogLayout, {
+  name: 'BlogLayout',
+  on: { idle: true },
+});

pages/guides/index.md

@@ -1,6 +1,6 @@
 ---
 title: Guides
-authors: moshams272s
+authors: moshams272
 ---
 
 # Guides

scripts/html/doc-kit.config.mjs

@@ -99,6 +99,8 @@ export default {
       '#theme/Metabar': join(ROOT, 'components/MetaBar/index.jsx'),
       '#theme/blog': join(ROOT, 'generated/blog.json'),
       '#theme/Layout': join(ROOT, 'components/Layout.jsx'),
+      '#theme/BlogLayout': join(ROOT, 'layouts/Blog/index.jsx'),
+      '#theme/Blog/Byline': join(ROOT, 'components/Blog/Byline/index.jsx'),
       '#theme/Navigation': join(ROOT, 'components/NavBar.jsx'),
       '#theme/Footer': join(ROOT, 'components/Footer/index.jsx'),
       '#theme/Logo': join(ROOT, 'components/Icons/Webpack.jsx'),
@@ -119,6 +121,9 @@ export default {
       ConfigSection: '#theme/Home/ConfigSection',
       HomeSponsorSection: '#theme/Home/SponsorSection',
       SponsorBoard: '#theme/Sponsors/Board',
+      BlogLayout: '#theme/BlogLayout',
+      Byline: '#theme/Blog/Byline',
+      MetaBar: '#theme/Metabar',
     },
     bundler: createViteBundler({
       plugins: [tailwindcss()],