feat: add home page by TusharThakur04 · Pull Request #149 · webpack/webpack-doc-kit

TusharThakur04 · 2026-06-19T07:42:40Z

Closes: #96
Summary
This PR adds the Home Page

What kind of change does this PR introduce?
feat

Did you add tests for your changes?
no

Does this PR introduce a breaking change?
no

If relevant, what needs to be documented once your changes are merged or what have you already documented?

Use of AI
used for discussion and repetitive tasks

vercel · 2026-06-19T07:42:46Z

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

Project	Deployment	Actions	Updated (UTC)
webpack-doc-kit	Ready	Preview, Comment	Jun 28, 2026 2:25pm

bjohansebas · 2026-06-19T14:10:15Z

I'm not sure we should have a "Trusted By" section. I think we'd be the first project in the foundation to do that. I'd rather avoid it for now.

That said, I do think we should add a sponsors section to the homepage, since that actually provides value to our sponsors.

@avivkeller wdyt ?, i just replicated the reference u pasted in #96

They are brands and they may or may not use us (I have no idea about most of them), but naming them kind of gives the impression that “we’ve already talked to them to have them there” (and it’s also marketing for them, while many of them don’t give us anything in return).

Also, it doesn’t really bring benefits. It’s better to focus on sponsors, since they actually provide funding that helps us keep going.

@TusharThakur04 The image I showed was a demo, but if Sebastian doesn't think it fits, we can remove it. What if we replace it with, as he said "Sponsored by"?

sure, just wanted to confirm.
as we have whole separate page for the sposors, i was thinking of adding the BackerWall and a link to the sponsors page
wdyt?

bjohansebas · 2026-06-19T14:11:49Z

+  const [isCopied, setIsCopied] = useState(false);
+
+  const handleCopy = async () => {
+    const textToCopy = activeSyntax === 'js' ? jsCode : mjsCode;


We also support configuration files written in TypeScript

bjohansebas · 2026-06-19T14:14:09Z

+    import path from 'path';
+    import { fileURLToPath } from 'url';
+
+    const __dirname = path.dirname(fileURLToPath(import.meta.url));


Suggested change

const __dirname = path.dirname(fileURLToPath(import.meta.url));

bjohansebas · 2026-06-19T14:14:17Z

+      entry: './src/index.js',
+      output: {
+        filename: 'bundle.js',
+        path: path.resolve(__dirname, 'dist')


Suggested change

path: path.resolve(__dirname, 'dist')

path: path.resolve(import.meta.dirname, 'dist')

avivkeller · 2026-06-19T19:26:40Z

+
+import styles from './index.module.css';
+
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';


Rather than adding a needless dependency, I've opened nodejs/doc-kit#845 to allow us to supply this via Markdown.

will it work ? because the HomeLayout is all react driven and index.md only exposes the layout prop so that homelayout can be displayed at the root level.

Theoretically, it should

Could you try using the branch to test it? That way, we'll know whether it would work

I can, just waiting for the doc-kit PR to land, but I can set up a #-based npm install to test

ovflowd · 2026-06-24T12:52:41Z

I feel that the home page should be pretty simple. Think of nodejs.org, but even simpler as all it is needed is a npm i webpack. (maybe with multiple tabs per package manager) but I wouldn't add sponsors to home page, and keep home page a simple hero.

avivkeller · 2026-06-24T14:57:31Z

@TusharThakur04 MDX support landed

avivkeller · 2026-06-24T15:00:24Z

@ovflowd I like the bigger design with more basic info on config, sponsors, etc

bjohansebas · 2026-06-24T15:36:44Z

I feel that the home page should be pretty simple. Think of nodejs.org, but even simpler as all it is needed is a npm i webpack. (maybe with multiple tabs per package manager) but I wouldn't add sponsors to home page, and keep home page a simple hero.

I actually prefer the current design. I don't think following the Node.js design is a good idea, and I think sponsors should be part of the homepage, similar to ESLint or Vue.js. We should give value to that money, and the homepage is naturally the most visited page. We already have a separate sponsors page, but that's a different thing and doesn't replace having a small sponsors section on the homepage. That said, I think this is more of a TSC decision, and it's something we should discuss internally.

TusharThakur04 · 2026-06-25T11:54:38Z

@avivkeller now code block is rendering through the doc-kit mdx support and i have also pushed the homesponsors section, happy to revert if tsc doesnt want it

avivkeller · 2026-06-27T15:41:33Z

+```javascript
+// webpack.config.mjs


Suggested change

```javascript

// webpack.config.mjs

```javascript displayName="webpack.config.mjs"

i know this won't render correctly right now, but that's a doc-kit bug

avivkeller · 2026-06-27T15:42:42Z

+<Hero />
+<ConfigSection>
+


Suggested change

<Hero />

<ConfigSection>

Let's try and limit what's in the markdown versus what's in the layout, e.g. keep the code boxes here in the MD, but the JSX at the top and bottom in the layout

avivkeller · 2026-06-27T15:43:27Z

+  const configFeatures = [
+    'Zero-config for common setups',
+    'Tree-shaking out of the box',
+    'Hot Module Replacement',
+    'Long-term caching with content hashes',
+  ];


nit: declare this outside the function, and then use:

export default ({ children }) => (<MyComponent/>)

avivkeller · 2026-06-27T15:43:52Z

+export default function FeaturesSection() {
+  return (


Suggested change

export default function FeaturesSection() {

return (

export default () => (

avivkeller · 2026-06-27T15:44:16Z

+export default function Hero() {
+  return (


Suggested change

export default function Hero() {

return (

export default () => (

avivkeller · 2026-06-27T15:44:40Z

Can we share a lot of this logic with the main sponsors section, i.e. import helpers from there?

avivkeller · 2026-06-27T15:45:31Z

https://github.com/webpack/webpack-doc-kit/blob/main/components/Icons/Webpack.jsx

avivkeller · 2026-06-27T15:45:56Z

+export default function Home({ metadata, children }) {
+  return (


Suggested change

export default function Home({ metadata, children }) {

return (

export default ({ metadata, children }) => (

avivkeller · 2026-06-27T21:11:09Z

Sign in to view

+export default ({ children }) => {
+  return <div className="config_code_block">{children}</div>;
+};


What's the point of this component?

avivkeller · 2026-06-27T21:11:37Z

 const ROOT = join(dirname(fileURLToPath(import.meta.url)), '..', '..');

-const VERSION = process.env.VERSION;
+const VERSION = undefined;


Suggested change

const VERSION = undefined;

const VERSION = process.env.VERSION;

avivkeller · 2026-06-27T21:12:13Z

+    <>
+      <NavBar metadata={metadata} />
+      <Hero />
+      <ConfigSection codeBlock={children} />


Suggested change

<ConfigSection codeBlock={children} />

<ConfigSection>{children}</ConfigSection>

avivkeller · 2026-06-27T21:13:54Z

+      <span className={styles.dots} aria-hidden="true">
+        · · ·
+      </span>


Suggested change

<span className={styles.dots} aria-hidden="true">

· · ·

</span>

avivkeller · 2026-06-28T14:13:05Z

+module.exports = {
+entry: './src/index.js',
+output: {
+filename: 'bundle.js',
+path: path.resolve(\_\_dirname, 'dist'),
+},
+mode: 'production',
+};


Can you fix the indentation here?

avivkeller · 2026-06-28T14:13:18Z

+```
+
+```javascript displayName="webpack.config.mjs"
+// webpack.config.mjs


We can remove the // comment, it's in the title (I know it doesn't render correctly, but that's a doc-kit bug that will be fixed)

avivkeller · 2026-06-28T14:14:24Z

+  /* blue-50 (#eff6ff) at 50% opacity */
+  background: radial-gradient(
+    ellipse 80% 60% at 50% 0%,
+    rgb(239 246 255 / 50%) 0%,
+    transparent 100%
+  );


Can we get rid of the custom shadow / fade? I feel like it doesn't match

vercel Bot had a problem deploying to Preview June 19, 2026 07:42 Failure

vercel Bot deployed to Preview June 19, 2026 07:52 View deployment

bjohansebas requested changes Jun 19, 2026

View reviewed changes

bjohansebas reviewed Jun 19, 2026

View reviewed changes

vercel Bot deployed to Preview June 19, 2026 16:12 View deployment

avivkeller reviewed Jun 19, 2026

View reviewed changes

TusharThakur04 force-pushed the feat/home-page branch from 233c7ad to d979a72 Compare June 25, 2026 11:50

vercel Bot deployed to Preview June 25, 2026 11:51 View deployment

vercel Bot deployed to Preview June 25, 2026 12:19 View deployment

TusharThakur04 force-pushed the feat/home-page branch from 146238c to d80d757 Compare June 27, 2026 05:15

vercel Bot deployed to Preview June 27, 2026 05:17 View deployment

avivkeller reviewed Jun 27, 2026

View reviewed changes

TusharThakur04 added 4 commits June 27, 2026 21:30

feat: add home page

ac19277

fixup!

47cf8af

fixup!

19aad5f

replace TrustedBy section with Sponsors section

9837f4f

TusharThakur04 added 3 commits June 27, 2026 21:30

refactor: implement syntax highlighting using MDX support by doc-kit

88547e6

remove unnecessary css rules

ac02342

fixup!

8fe1650

TusharThakur04 force-pushed the feat/home-page branch from d80d757 to 8fe1650 Compare June 27, 2026 21:09

vercel Bot deployed to Preview June 27, 2026 21:10 View deployment

avivkeller reviewed Jun 27, 2026

View reviewed changes

fixup!

17dc74d

vercel Bot deployed to Preview June 27, 2026 21:30 View deployment

avivkeller reviewed Jun 28, 2026

View reviewed changes

avivkeller mentioned this pull request Jun 28, 2026

fix(config): default to latest version #159

Merged

fixup!

f8c8718

vercel Bot deployed to Preview June 28, 2026 14:25 View deployment

	path: path.resolve(__dirname, 'dist')
	path: path.resolve(import.meta.dirname, 'dist')


		import styles from './index.module.css';

		import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';

	```javascript
	// webpack.config.mjs
	```javascript displayName="webpack.config.mjs"

	export default function FeaturesSection() {
	return (
	export default () => (

		export default function Home({ metadata, children }) {
		return (

	export default function Home({ metadata, children }) {
	return (
	export default ({ metadata, children }) => (

	const VERSION = undefined;
	const VERSION = process.env.VERSION;

	<ConfigSection codeBlock={children} />
	<ConfigSection>{children}</ConfigSection>

	<span className={styles.dots} aria-hidden="true">
	· · ·
	</span>

Uh oh!

Conversation

TusharThakur04 commented Jun 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel Bot commented Jun 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

avivkeller Jun 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

avivkeller Jun 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ovflowd commented Jun 24, 2026

Uh oh!

avivkeller commented Jun 24, 2026

Uh oh!

avivkeller commented Jun 24, 2026

Uh oh!

bjohansebas commented Jun 24, 2026

Uh oh!

TusharThakur04 commented Jun 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

avivkeller Jun 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

avivkeller Jun 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

This comment was marked as spam.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

TusharThakur04 commented Jun 19, 2026 •

edited

Loading

vercel Bot commented Jun 19, 2026 •

edited

Loading

avivkeller Jun 20, 2026 •

edited

Loading

avivkeller Jun 20, 2026 •

edited

Loading

TusharThakur04 commented Jun 25, 2026 •

edited

Loading

avivkeller Jun 27, 2026 •

edited

Loading

avivkeller Jun 27, 2026 •

edited

Loading

avivkeller Jun 28, 2026 •

edited

Loading