Add hero banner to top of blog list

[sebdanielsson]

Hi! I'm currently running Docusaurus 2 with the Blog at the root. However I would like to keep the hero banner that's shown on the default start page. I've tried to copy the conent from the module BlogListPage to a new page in /src/pages without much luck. What is the easiest way to achieve this?

[Siemienik]

Following this guide: https://docusaurus.io/docs/typescript-support#swizzling-typescript-theme-components

You may do: npm run swizzle @docusaurus/theme-classic BlogListPage -- --typescript

And edit the created file.
I like to recommend make a commit for this file without any change first, then edit it as a separate commit. That will show you what you actually changed.

[sebdanielsson]

Thanks for the tip! Unfortunately it didn't work for me. Just got a blank page when I moved the generated folder from src/theme/BlogListPage to src/pages/BlogListPage file to my pages directory. Any tips? :)

This is what the Safari console report:

[Log] [HMR] Waiting for update signal from WDS...
[Warning] Ignoring Event: localhost (plausible.js, line 1)
[Error] TypeError: Right side of assignment cannot be destructured
	BlogListPage (BlogListPage.js:17:418)
	renderWithHooks (react-dom.development.js:14985)
	mountIndeterminateComponent (react-dom.development.js:17811)
	callCallback (react-dom.development.js:3945)
	dispatchEvent
	invokeGuardedCallbackDev (react-dom.development.js:3994)
	invokeGuardedCallback (react-dom.development.js:4056)
	beginWork$1 (react-dom.development.js:23959)
	performUnitOfWork (react-dom.development.js:22774)
	workLoopSync (react-dom.development.js:22702)
	renderRootSync (react-dom.development.js:22665)
	performSyncWorkOnRoot (react-dom.development.js:22288)
	scheduleUpdateOnFiber (react-dom.development.js:21876)
	updateContainer (react-dom.development.js:25477)
	(anonymous function) (react-dom.development.js:26016)
	unbatchedUpdates (react-dom.development.js:22426)
	legacyRenderSubtreeIntoContainer (react-dom.development.js:26015)
	(anonymous function) (clientEntry.js:19:229)
	promiseReactionJob
[Error] The above error occurred in the <BlogListPage> component:

BlogListPage
Component
Component
Component
Component
Component
withRouter(PendingNavigation)
Root
App
Component
Component

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
	logCapturedError (react-dom.development.js:20085)
	(anonymous function) (react-dom.development.js:20113)
	callCallback (react-dom.development.js:12318)
	commitUpdateQueue (react-dom.development.js:12339)
	commitLifeCycles (react-dom.development.js:20731)
	commitLayoutEffects (react-dom.development.js:23421)
	callCallback (react-dom.development.js:3945)
	dispatchEvent
	invokeGuardedCallbackDev (react-dom.development.js:3994)
	invokeGuardedCallback (react-dom.development.js:4056)
	commitRootImpl (react-dom.development.js:23146)
	commitRootImpl
	unstable_runWithPriority (scheduler.development.js:468)
	commitRoot (react-dom.development.js:22985)
	performSyncWorkOnRoot (react-dom.development.js:22324)
	scheduleUpdateOnFiber (react-dom.development.js:21876)
	updateContainer (react-dom.development.js:25477)
	(anonymous function) (react-dom.development.js:26016)
	unbatchedUpdates (react-dom.development.js:22426)
	legacyRenderSubtreeIntoContainer (react-dom.development.js:26015)
	(anonymous function) (clientEntry.js:19:229)
	promiseReactionJob
[Error] Unhandled Promise Rejection: TypeError: Right side of assignment cannot be destructured
	commitRootImpl (react-dom.development.js:23270)
	commitRootImpl
	unstable_runWithPriority (scheduler.development.js:468)
	commitRoot (react-dom.development.js:22985)
	performSyncWorkOnRoot (react-dom.development.js:22324)
	scheduleUpdateOnFiber (react-dom.development.js:21876)
	updateContainer (react-dom.development.js:25477)
	(anonymous function) (react-dom.development.js:26016)
	unbatchedUpdates (react-dom.development.js:22426)
	legacyRenderSubtreeIntoContainer (react-dom.development.js:26015)
	(anonymous function) (clientEntry.js:19:229)
	promiseReactionJob