docs(home): update docs and app-next example for HomePageLayoutBlueprint

- Update README.md to reference HomePageLayoutBlueprint instead of
  deleted HomepageBlueprint, with a complete working example
- Update docs/getting-started/homepage.md with corrected blueprint name
- Fix app-next example to properly accept and render widgets via the
  HomePageLayoutProps interface instead of ignoring them
Signed-off-by: Adam Kunicki <kunickiaj@gmail.com>
This commit is contained in:
Adam Kunicki
2026-02-07 05:02:22 -08:00
parent 03fc07adb7
commit 1ba0ee341a
3 changed files with 73 additions and 17 deletions
+36 -10
View File
@@ -41,25 +41,51 @@ The plugin will automatically provide:
#### Creating Custom Homepage Layouts
Use the `HomepageBlueprint` to create custom homepage layouts:
Use the `HomePageLayoutBlueprint` from `@backstage/plugin-home-react/alpha` to
create custom homepage layouts. A layout receives the installed widgets and is
responsible for arranging them on the page. If no custom layout is installed, the
plugin provides a built-in default.
```ts
import { HomepageBlueprint } from '@backstage/plugin-home/alpha';
import { HomePageLayoutBlueprint } from '@backstage/plugin-home-react/alpha';
import { CustomHomepageGrid } from '@backstage/plugin-home';
import { Content, Header, Page } from '@backstage/core-components';
import { Fragment } from 'react';
const myHomePage = HomepageBlueprint.make({
const myHomePageLayout = HomePageLayoutBlueprint.make({
params: {
title: 'My Custom Home',
render: ({ grid }) => (
<Page themeId="home">
<Header title="Welcome" />
<Content>{grid}</Content>
</Page>
),
loader: async () =>
function MyHomePageLayout({ widgets }) {
return (
<Page themeId="home">
<Header title="Welcome" />
<Content>
<CustomHomepageGrid>
{widgets.map((widget, index) => (
<Fragment key={widget.name ?? index}>
{widget.component}
</Fragment>
))}
</CustomHomepageGrid>
</Content>
</Page>
);
},
},
});
```
Then register the layout in a frontend module:
```ts
import { createFrontendModule } from '@backstage/frontend-plugin-api';
const homeModule = createFrontendModule({
pluginId: 'home',
extensions: [myHomePageLayout],
});
```
#### Visit Tracking (Optional)
Visit tracking is an **optional feature** that must be explicitly enabled. When enabled, it provides intelligent storage fallbacks: