[Home] first homepage template to storybook + two more home components (#8434)

* add new toolkit component Signed-off-by: Emma Indal <emmai@spotify.com> * add toolkit content test Signed-off-by: Emma Indal <emmai@spotify.com> * add key to toolkit items Signed-off-by: Emma Indal <emmai@spotify.com> * add reusable company logo component Signed-off-by: Emma Indal <emmai@spotify.com> * export root ref from search plugin Signed-off-by: Emma Indal <emmai@spotify.com> * add homepage template to storybook Signed-off-by: Emma Indal <emmai@spotify.com> * export new homepage components from plugin Signed-off-by: Emma Indal <emmai@spotify.com> * fix imports Signed-off-by: Emma Indal <emmai@spotify.com> * add search plugin to dependencies Signed-off-by: Emma Indal <emmai@spotify.com> * add home plugin changeset Signed-off-by: Emma Indal <emmai@spotify.com> * add storybook changeset Signed-off-by: Emma Indal <emmai@spotify.com> * delete changeset for storybook Signed-off-by: Emma Indal <emma.indahl@gmail.com> * delete duplicated search context provider Signed-off-by: Emma Indal <emmai@spotify.com> * use list item text props Signed-off-by: Emma Indal <emmai@spotify.com> * update home plugin documentation + add customize app docs Signed-off-by: Emma Indal <emmai@spotify.com> * named exports Signed-off-by: Emma Indal <emmai@spotify.com> * add homepage components to storybook Signed-off-by: Emma Indal <emmai@spotify.com> * use app config as default for company logo Signed-off-by: Emma Indal <emmai@spotify.com> * rename homepage template Signed-off-by: Emma Indal <emmai@spotify.com> * use props instead of context for tools, update Content component of card extension to accept props Signed-off-by: Emma Indal <emmai@spotify.com> * fix api reports + docstrings + markers Signed-off-by: Emma Indal <emmai@spotify.com> * export ToolkitContentProps instead of Tool Signed-off-by: Emma Indal <emmai@spotify.com> * docs and stories fixups Signed-off-by: Emma Indal <emmai@spotify.com> * do not export rootRouteRef from search plugin Signed-off-by: Emma Indal <emmai@spotify.com> * update docs links Signed-off-by: Emma Indal <emmai@spotify.com> * change unpacking of props Signed-off-by: Emma Indal <emmai@spotify.com> * delete extra fragment Signed-off-by: Emma Indal <emmai@spotify.com> * fixup searchbar border styles Signed-off-by: Emma Indal <emmai@spotify.com>
2022-01-10 11:40:07 +01:00
parent 5b516c1395
commit bdf1419d20
23 changed files with 833 additions and 33 deletions
@@ -253,3 +253,73 @@ const LogoFull = () => {
  return <img src={MyCustomLogoFull} />;
 };
 ```
+
+## Custom Homepage
+
+In addition to a custom theme, a custom logo, you can also customize the
+homepage of your app. To do that we need to go through a few steps.
+
+### Setting up the Home Page
+
+1. Create a Home Page Component that will be used for composition.
+
+`packages/app/src/components/home/HomePage.tsx`
+
+```tsx
+import React from 'react';
+
+export const HomePage = () => {
+  return {
+    /* TODO: Compose a Home Page here */
+  };
+};
+```
+
+2. Add a route where the homepage will live, presumably `/`.
+
+`packages/app/src/App.tsx`
+
+```tsx
+import { HomepageCompositionRoot } from '@backstage/plugin-home';
+import { HomePage } from './components/home/HomePage';
+
+// ...
+<Route path="/" element={<HomepageCompositionRoot />}>
+  <HomePage />
+</Route>;
+// ...
+```
+
+### Composing your Home Page
+
+Composing a Home Page is no different from creating a regular React Component,
+i.e. the App Integrator is free to include whatever content they like. However,
+there are components developed with the Home Page in mind. If you are looking
+for components to use when composing your homepage, you can take a look at the
+[collection of Homepage components](https://backstage.io/?path=/story/plugins-home-components)
+in storybook. If you don't find a component that suits your needs but want to
+contribute, check the
+[Contributing documentation](https://github.com/backstage/backstage/blob/master/plugins/home/README.md#contributing).
+
+!!! tip If you want to use one of the available homepage templates you can find
+the
+[templates](https://backstage.io/storybook/?path=/story/plugins-home-templates)
+in the storybook under the "Home" plugin. And if you would like to contribute a
+template, please see the
+[Contributing documentation](https://github.com/backstage/backstage/blob/master/plugins/home/README.md#contributing)
+
+```tsx
+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 className={container} />
+      </Grid>
+    </Grid>
+  );
+};
+```