feat(ui): add StackBlitzPreview and migrate examples directory from webpack.js.org

components/StackBlitzPreview/index.jsx

@@ -0,0 +1,23 @@
+import styles from './index.module.css';
+
+export default function StackBlitzPreview(props = {}) {
+  const {
+    example = '',
+    description = 'Check out this guide live on StackBlitz.',
+  } = props;
+
+  const url = `https://stackblitz.com/github/webpack/webpack.js.org/tree/main/examples/${example}`;
+
+  return (
+    <aside className={styles.preview}>
+      <h6 className={styles.previewPrefix}>live preview</h6>
+      <p>{description}</p>
+      <a href={url} target="_blank" rel="noopener noreferrer">
+        <img
+          src={'/assets/open-in-stackblitz-button.svg'}
+          alt="Open in StackBlitz"
+        />
+      </a>
+    </aside>
+  );
+}

components/StackBlitzPreview/index.module.css

@@ -0,0 +1,43 @@
+@reference "../../styles/index.css";
+
+.preview {
+  @apply px-6
+    py-5
+    my-6
+    bg-neutral-100
+    dark:bg-neutral-900
+    border-l-[3px]
+    border-blue-600
+    dark:border-blue-500
+    text-neutral-900
+    dark:text-neutral-50
+    rounded-r-md;
+}
+
+.previewPrefix {
+  @apply capitalize
+    font-semibold
+    block
+    text-base
+    mt-0
+    mb-2
+    text-neutral-700
+    dark:text-neutral-400;
+}
+
+.preview p {
+  @apply mt-0
+    mb-5;
+}
+
+.preview a {
+  @apply inline-block
+    transition-opacity
+    hover:opacity-80;
+}
+
+.preview img {
+  @apply block
+    w-auto
+    h-auto;
+}

eslint.config.mjs

@@ -29,6 +29,7 @@ export default [
       'out/',
       '.cache/',
       'webpack/',
+      'examples/',
       'pages/api',
       'pages/docs/api',
       'pages/docs/loaders',

pages/guides/getting-started/concepts/module-federation.md

@@ -1,6 +1,7 @@
 ---
 title: Module Federation
 authors: sokra,chenxsan,EugeneHlushko,jamesgeorge007,ScriptedAlchemy,snitin315,XiaofengXie16,KyleBastien,Alevale,burhanuday,RexSkz,avivkeller
+mdx: true
 ---
 
 # Module Federation
@@ -11,7 +12,7 @@ Multiple separate builds should be able to form a single application. These sepa
 
 This is often called Micro-Frontends, but it is not limited to that pattern.
 
-<!-- TODO: StackBlitzPreview example="module-federation?terminal=start&terminal=" -->
+<StackBlitzPreview example="module-federation?terminal=start&terminal=" description="Check out this live module federation example on StackBlitz."/>
 
 ## Low-level concepts
 

pages/guides/getting-started/index.md

@@ -1,6 +1,7 @@
 ---
 title: Getting Started
 authors: bebraw,varunjayaraman,cntanglijun,chrisVillanueva,johnstew,simon04,aaronang,TheDutchCoder,sudarsangp,Vanguard90,chenxsan,EugeneHlushko,ATGardner,ayvarot,bjarki,ztomasze,Spiral90210,byzyk,wizardofhogwarts,myshov,anshumanv,d3lm,snitin315,Etheryen,zowiebeha,avivkeller,alexander-akait
+mdx: true
 ---
 
 # Getting Started
@@ -12,7 +13,7 @@ webpack is used to efficiently compile JavaScript modules. Once [installed](/gui
 > [!WARNING]
 > The examples in this guide use `webpack-cli` 7, which requires Node.js 20.9.0 or later.
 
-<!-- TODO: StackBlitzPreview example="getting-started?terminal=" -->
+<StackBlitzPreview example="getting-started?terminal=" />
 
 ## Quick start (minimal working example)
 

scripts/html/doc-kit.config.mjs

@@ -114,6 +114,10 @@ export default {
         'components/HomePage/HomeSponsorSection/index.jsx'
       ),
       '#theme/Sponsors/Board': join(ROOT, 'layouts/Sponsors/Board.jsx'),
+      '#theme/StackBlitzPreview': join(
+        ROOT,
+        'components/StackBlitzPreview/index.jsx'
+      ),
     },
 
     components: {
@@ -124,6 +128,7 @@ export default {
       BlogLayout: '#theme/BlogLayout',
       Byline: '#theme/Blog/Byline',
       MetaBar: '#theme/Metabar',
+      StackBlitzPreview: '#theme/StackBlitzPreview',
     },
     bundler: createViteBundler({
       plugins: [tailwindcss()],