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

[moshams272]

Summary

This PR replaces TODOs that related to StackBlitzPreview after adding it as component with the same design from webpack.js.org with our colors and migrates the examples directory from webpack.js.org

Summary by CodeRabbit

• New Features

  • Added interactive StackBlitz previews for getting-started and Module Federation guides.
  • Preview cards include configurable descriptions, images, and links to launch examples externally.
  • Added responsive styling with dark-mode support.

• Documentation

  • Updated relevant guides to display live StackBlitz examples directly within the documentation.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
webpack-doc-kit	Ready	Preview	Aug 20, 2026 1:20pm

[socket-security]

No dependency changes detected. Learn more about Socket for GitHub.

👍 No dependency changes detected in pull request

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 83a8a192-e4f5-4541-ab47-4e955ad1afbb

📥 Commits

Reviewing files that changed from the base of the PR and between 76b5a11 and 11c2515.

📒 Files selected for processing (1)

• components/StackBlitzPreview/index.jsx

🔗 Linked repositories identified

CodeRabbit considers these linked repositories for cross-repo context during reviews:

• webpack/webpack (auto-detected)

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

Walkthrough

Added the StackBlitzPreview React component and its styling. The component builds StackBlitz URLs for webpack/webpack.js.org examples and renders configurable preview content. Registered the component with doc-kit. Enabled MDX and embedded previews in the getting-started and Module Federation guides. Excluded the examples/ directory from ESLint.

Merge Risk: 🟡 Moderate · up to 11c25

The new documentation previews currently target the wrong example repository, and the getting-started example still cannot render through its documented serve flow because it lacks an HTML entry. These issues can make the newly linked examples unusable, so they should be fixed or explicitly accepted before merging.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the primary changes: adding StackBlitzPreview and migrating the examples directory from webpack.js.org.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (2)

examples/module-federation/app1/src/App.js (1)

17-19: 🩺 Stability & Availability | 🔵 Trivial | ⚡ Quick win

Handle rejected remote loads with an Error Boundary.

The current fallback covers only the pending load. If remoteEntry.js or the exposed module fails, React.lazy sends the rejection to the nearest Error Boundary instead of this Suspense fallback. (react.dev)

If the application root does not already provide an Error Boundary, add one around RemoteApp so the preview shows a recoverable error.

eslint.config.mjs (1)

32-32: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Keep runnable examples covered by validation.

The examples/ directory now bypasses the repository's ESLint checks. If the ignore is required for imported example style, add a separate CI smoke check that installs and builds each preview example. Otherwise, narrow the ignore pattern. This prevents the documentation from advertising an example that cannot compile.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 4d49e55d-1f1b-41da-bd83-221202eb10ab

📥 Commits

Reviewing files that changed from the base of the PR and between df0d506 and e160d41.

⛔ Files ignored due to path filters (2)

• examples/getting-started/dist/index.html is excluded by !**/dist/**
• public/assets/open-in-stackblitz-button.svg is excluded by !**/*.svg

📒 Files selected for processing (25)

• components/StackBlitzPreview/index.jsx
• components/StackBlitzPreview/index.module.css
• eslint.config.mjs
• examples/getting-started/README.md
• examples/getting-started/package.json
• examples/getting-started/src/index.js
• examples/getting-started/webpack.config.js
• examples/module-federation/README.md
• examples/module-federation/app1/package.json
• examples/module-federation/app1/public/index.html
• examples/module-federation/app1/src/App.js
• examples/module-federation/app1/src/bootstrap.js
• examples/module-federation/app1/src/index.js
• examples/module-federation/app1/webpack.config.js
• examples/module-federation/app2/package.json
• examples/module-federation/app2/public/index.html
• examples/module-federation/app2/src/App.js
• examples/module-federation/app2/src/bootstrap.js
• examples/module-federation/app2/src/index.js
• examples/module-federation/app2/webpack.config.js
• examples/module-federation/lerna.json
• examples/module-federation/package.json
• pages/guides/getting-started/concepts/module-federation.md
• pages/guides/getting-started/index.md
• scripts/html/doc-kit.config.mjs

Included review availability: Your plan includes up to 3 reviews per rolling hour; 2 remain after this review.

[ovflowd]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff Package Supply Chain
Security Vulnerability Quality Maintenance License
lerna@​4.0.0
@​babel/​preset-react@​7.29.7
external-remotes-plugin@​1.0.0
@​babel/​core@​7.29.7
lodash@​4.18.1
babel-loader@​8.4.1
webpack-dev-server@​4.15.2
serve@​12.0.1
html-webpack-plugin@​5.6.8
webpack-cli@​4.10.0
View full report

Trying to understand why Socket believes we use lerna as a dependency?

[avivkeller]

@ovflowd socket probably thinks that all the dependencies from the examples are added, but they aren't

[ovflowd]

@ovflowd socket probably thinks that all the dependencies from the examples are added, but they aren't

That adds quite the noise :/

[moshams272]

@ovflowd socket probably thinks that all the dependencies from the examples are added, but they aren't

Yeah, I just investgated it and found that in examples/module-federation/package.json it uses lerna as a dependency.

[moshams272]

That adds quite the noise :/

Before pushing this PR, I actually thought about why we should add examples dir in our repo. The webpack/webpack repo has examples dir in the root, but I added it here in the same way the webpack/webpack.js.org does and said to myself, "Let's push this PR and see what maintainers like to do."

So, WDUT?!

[avivkeller]

I'm not sure if we need examples in this repo, or at all, nothing reads then, right?

[moshams272]

I'm not sure if we need examples in this repo, or at all, nothing reads then, right?

Just the StackBlitzPreview use them to clone the examples dir, we can remove them from here and just change the link:

 const url = `https://stackblitz.com/github/webpack/webpack-doc-kit/tree/main/examples/${example}`;

to webpack/webpack and check if they have in their examples dir what we need so it's ok if they've not I will open PR copying them.

[avivkeller]

LGTM

[avivkeller]

Oh! Right, ha! I forgot that these aren't hosted on StackBlitz itself