From 37af35db478674d4f4a88891ae46aca9ab3a05f4 Mon Sep 17 00:00:00 2001
From: Mohamed Shams El-Deen <mohamedshamseldeen95@gmail.com>
Date: Sat, 15 Aug 2026 13:39:48 +0300
Subject: [PATCH] fix: resolve missing interactive components from islands
 migration

---
 components/Blog/Byline/index.jsx |  5 ++++-
 components/MetaBar/index.jsx     | 10 ++++++++--
 layouts/Blog/index.jsx           |  8 +++++++-
 pages/guides/index.md            |  2 +-
 scripts/html/doc-kit.config.mjs  |  5 +++++
 5 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/components/Blog/Byline/index.jsx b/components/Blog/Byline/index.jsx
index 91dd18df..b84906b3 100644
--- a/components/Blog/Byline/index.jsx
+++ b/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 } });
diff --git a/components/MetaBar/index.jsx b/components/MetaBar/index.jsx
index c1376217..e0ea5c31 100644
--- a/components/MetaBar/index.jsx
+++ b/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 },
+});
diff --git a/layouts/Blog/index.jsx b/layouts/Blog/index.jsx
index ee2e1e98..35afb3aa 100644
--- a/layouts/Blog/index.jsx
+++ b/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 },
+});
diff --git a/pages/guides/index.md b/pages/guides/index.md
index e131a4b3..5a546754 100644
--- a/pages/guides/index.md
+++ b/pages/guides/index.md
@@ -1,6 +1,6 @@
 ---
 title: Guides
-authors: moshams272s
+authors: moshams272
 ---
 
 # Guides
diff --git a/scripts/html/doc-kit.config.mjs b/scripts/html/doc-kit.config.mjs
index 69078b65..0782bd5a 100644
--- a/scripts/html/doc-kit.config.mjs
+++ b/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()],