Create "BazaarOverviewCard" that can be added to Backstage homepage.

Change-Id: I6e2565360cb3f7af27f60a0336cd87a75b3018c3
Signed-off-by: Frida Jacobsson <fridaja@axis.com>
Signed-off-by: Frida Jacobsson <fridahelenajacobsson@gmail.com>

plugins/bazaar/README.md

@@ -64,6 +64,30 @@ const overviewContent = (
     {/* ...other entity-cards */}
 ```
 
+Add a **Bazaar overview card** to the homepage that displays either the latest projects or random projects. In `packages/app/src/components/home/HomePage.tsx` add:
+
+```diff
++ import { BazaarOverviewCard } from '@backstage/plugin-bazaar';
+
+export const homePage = (
+
+    <Page themeId="home">
+      <Content>
+       <Grid container spacing={3}>
+
++       <Grid item xs={12} md={6}>
++         <BazaarOverviewCard variant={'latest'} limit={4} />
++       </Grid>
+
++       <Grid item xs={12} md={6}>
++         <BazaarOverviewCard variant={'random'} limit={4} />
++       </Grid>
+
+        {/* ...other homepage items */}
+```
+
+Specify how many projects you want through the "limit" props. In the example above 4 cards is specified.
+
 ## How does the Bazaar work?
 
 ### Layout
@@ -72,6 +96,10 @@ The latest modified Bazaar projects are displayed in the Bazaar landing page, lo
 
 ![home](media/layout.png)
 
+The "BazaarOverviewCard" can be displayed in Backstage homepage.
+
+![home](media/overviewCard.png)
+
 ### Workflow
 
 To add a project to the bazaar, simply click on the `add-project` button and fill in the form.