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

* feat(ui): add StackBlitzPreview component & replace TODOs with it * chore: migrate examples directory from webpack.js.org * chore: remove examples directory and point StackBlitz to legacy repo

Author: How To Write A Work Report

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/CloneAGC/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)
 

public/assets/open-in-stackblitz-button.svg

@@ -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()],