paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 29 Packages Projects Releases Wiki Activity

update home documentation code examples

Browse Source 
Signed-off-by: Emma Indal <emma.indahl@gmail.com>
This commit is contained in:
Emma Indal
2023-05-26 10:09:53 +02:00
parent 7dd8b39a92
commit 82cc463ced
2 changed files with 30 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/getting-started/homepage.md
+9 -11
View File
@@ -40,10 +40,10 @@ Inside your `packages/app` directory, create a new file where our new homepage c
```tsx
import React from 'react';
export const HomePage = () => {
export const homePage = (
/* We will shortly compose a pretty homepage here. */
return <h1>Welcome to Backstage!</h1>;
};
<h1>Welcome to Backstage!</h1>
);
```
#### 3. Update router for the root `/` route
@@ -161,13 +161,11 @@ import React from 'react';
import Grid from '@material-ui/core/Grid';
import { HomePageCompanyLogo } from '@backstage/plugin-home';
export const HomePage = () => {
return (
<Grid container spacing={3}>
<Grid item xs={12} md={4}>
<HomePageCompanyLogo />
</Grid>
export const homePage = (
<Grid container spacing={3}>
<Grid item xs={12} md={4}>
<HomePageCompanyLogo />
</Grid>
);
};
</Grid>
);
```
plugins/home/README.md
+21 -27
View File
@@ -22,11 +22,9 @@ yarn add --cwd packages/app @backstage/plugin-home
```tsx
import React from 'react';
export const HomePage = () => {
return {
/* TODO: Compose a Home Page here */
};
};
export const homePage = (
/* TODO: Compose a Home Page here */
);
```
2. Add a route where the homepage will live, presumably `/`.
@@ -35,11 +33,11 @@ export const HomePage = () => {
```tsx
import { HomepageCompositionRoot } from '@backstage/plugin-home';
import { HomePage } from './components/home/HomePage';
import { homePage } from './components/home/HomePage';
// ...
<Route path="/" element={<HomepageCompositionRoot />}>
<HomePage />
{homePage}
</Route>;
// ...
```
@@ -72,15 +70,13 @@ import React from 'react';
import Grid from '@material-ui/core/Grid';
import { RandomJokeHomePageComponent } from '@backstage/plugin-home';
export const HomePage = () => {
return (
<Grid container spacing={3}>
<Grid item xs={12} md={4}>
<RandomJokeHomePageComponent />
</Grid>
export const homePage = (
<Grid container spacing={3}>
<Grid item xs={12} md={4}>
<RandomJokeHomePageComponent />
</Grid>
);
};
</Grid>
);
```
Additionally, the App Integrator is provided an escape hatch in case the way the card is rendered does not fit their requirements. They may optionally pass the `Renderer`-prop, which will receive the `title`, `content` and optionally `actions`, `settings` and `contextProvider`, if they exist for the component. This allows the App Integrator to render the content in any way they want.
@@ -102,18 +98,16 @@ import { HomePageSearchBar } from '@backstage/plugin-search';
import { HomePageCalendar } from '@backstage/plugin-gcalendar';
import { MicrosoftCalendarCard } from '@backstage/plugin-microsoft-calendar';
export const HomePage = () => {
return (
<CustomHomepageGrid>
// Insert the allowed widgets inside the grid
<HomePageSearchBar />
<HomePageRandomJoke />
<HomePageCalendar />
<MicrosoftCalendarCard />
<HomePageStarredEntities />
</CustomHomepageGrid>
);
};
export const homePage = (
<CustomHomepageGrid>
// Insert the allowed widgets inside the grid
<HomePageSearchBar />
<HomePageRandomJoke />
<HomePageCalendar />
<MicrosoftCalendarCard />
<HomePageStarredEntities />
</CustomHomepageGrid>
);
```
### Creating Customizable Components