diff --git a/plugins/dynamic-home-page/catalog-info.yaml b/plugins/dynamic-home-page/catalog-info.yaml new file mode 100644 index 0000000000..db605b10fd --- /dev/null +++ b/plugins/dynamic-home-page/catalog-info.yaml @@ -0,0 +1,61 @@ +# https://backstage.io/docs/features/software-catalog/descriptor-format#kind-component +apiVersion: backstage.io/v1alpha1 +kind: Component +metadata: + name: janus-idp-dynamic-home-page + title: Dynamic Home Page plugin + description: Home Page plugin based on the upstream home [page] plugin that can be extended via (dynamic) plugins. + annotations: + backstage.io/source-location: url:https://github.com/janus-idp/backstage-showcase/tree/main/plugins/dynamic-home-page + #backstage.io/source-location: file:../../plugins/dynamic-home-page/REQUIRED_TO_BUILD_THE_TECHDOCS_LOCALLY + backstage.io/view-url: https://github.com/janus-idp/backstage-showcase/blob/main/plugins/dynamic-home-page/catalog-info.yaml + backstage.io/edit-url: https://github.com/janus-idp/backstage-showcase/edit/main/plugins/dynamic-home-page/catalog-info.yaml + backstage.io/techdocs-ref: dir:. + github.com/project-slug: janus-idp/backstage-showcase + github.com/team-slug: janus-idp/maintainers-plugins + sonarqube.org/project-key: janus-idp_backstage-showcase + tags: + - homepage + links: + - url: https://github.com/janus-idp/backstage-showcase/tree/main/plugins/dynamic-home-page + title: GitHub Source + icon: source + type: source +spec: + type: backstage-plugin + lifecycle: production + owner: rhdh-team + system: rhdh + subcomponentOf: janus-idp-backstage-plugins +--- +# https://backstage.io/docs/features/software-catalog/descriptor-format#kind-component +apiVersion: backstage.io/v1alpha1 +kind: Component +metadata: + name: janus-idp-dynamic-home-page-frontend + title: '@janus-idp/backstage-plugin-dynamic-home-page' + description: Home Page plugin based on the upstream home [page] plugin that can be extended via (dynamic) plugins. + annotations: + backstage.io/source-location: url:https://github.com/janus-idp/backstage-showcase/tree/main/plugins/dynamic-home-page + backstage.io/view-url: https://github.com/janus-idp/backstage-showcase/blob/main/plugins/dynamic-home-page/catalog-info.yaml + backstage.io/edit-url: https://github.com/janus-idp/backstage-showcase/edit/main/plugins/dynamic-home-page/catalog-info.yaml + backstage.io/techdocs-entity: component:janus-idp-dynamic-home-page + github.com/project-slug: janus-idp/backstage-showcase + github.com/team-slug: janus-idp/maintainers-plugins + sonarqube.org/project-key: janus-idp_backstage-showcase + tags: + - homepage + links: + - url: https://github.com/janus-idp/backstage-plugins/tree/main/plugins/dynamic-home-page + title: GitHub Source + icon: source + type: source +spec: + type: backstage-frontend-plugin + lifecycle: production + owner: rhdh-team + system: rhdh + subcomponentOf: janus-idp-dynamic-home-page + dependsOn: + - component:backstage-plugin-home + - component:backstage-plugin-home-react diff --git a/plugins/dynamic-home-page/docs/catalog-starred.md b/plugins/dynamic-home-page/docs/catalog-starred.md new file mode 100644 index 0000000000..ea2224edc1 --- /dev/null +++ b/plugins/dynamic-home-page/docs/catalog-starred.md @@ -0,0 +1,34 @@ +# Catalog starred entities + +Shows entities the user has starred in the catalog. + +![Home page with catalog starred entities card](catalog-starred.png) + +## Examples + +Starred entities and starred entities grouped by catalog `Kind`: + +```yaml +dynamicPlugins: + frontend: + janus-idp.backstage-plugin-dynamic-home-page: + mountPoints: + - mountPoint: home.page/cards + importName: CatalogStarredEntitiesCard + - mountPoint: home.page/cards + importName: CatalogStarredEntitiesCard + config: + props: + groupByKind: true +``` + +## Available props + +| Prop | Default | Description | +| -------------------------- | -------------------------------------------------------------- | ---------------------------------------------------------------- | +| `noStarredEntitiesMessage` | "Click the star beside an entity name to add it to this list!" | Message that is shown when no entities are starred | +| `groupByKind` | `false` | Option to enable a variant that group the elements by their kind | + +## Contributions + +The dynamic home page plugin reexports the [`HomePageStarredEntities`](https://github.com/backstage/backstage/tree/master/plugins/home/src/homePageComponents/StarredEntities) from the [home plugin](https://github.com/backstage/backstage/tree/master/plugins/home). diff --git a/plugins/dynamic-home-page/docs/catalog-starred.png b/plugins/dynamic-home-page/docs/catalog-starred.png new file mode 100644 index 0000000000..27d24e8ad6 Binary files /dev/null and b/plugins/dynamic-home-page/docs/catalog-starred.png differ diff --git a/plugins/dynamic-home-page/docs/create-a-new-card.md b/plugins/dynamic-home-page/docs/create-a-new-card.md new file mode 100644 index 0000000000..d4be57b555 --- /dev/null +++ b/plugins/dynamic-home-page/docs/create-a-new-card.md @@ -0,0 +1,53 @@ +# Create a new card + +Any plugin can add additional cards/content by exporting a react component. + +Cards commonly uses the [InfoCard](https://backstage.io/storybook/?path=/story/layout-information-card--default) component from `@backstage/core-components`. + +1. Create and export a new react component: + + ```tsx + import React from 'react'; + + import { InfoCard, MarkdownContent } from '@backstage/core-components'; + + export interface MarkdownCardProps { + title?: string; + content?: string; + } + + export const MarkdownCard = (props: MarkdownCardProps) => { + return ( + + + + ); + }; + ``` + +2. Export the card in your `plugin.ts`: + + ```tsx + export const Markdown = dynamicHomePagePlugin.provide( + createComponentExtension({ + name: 'Markdown', + component: { + lazy: () => import('./components/Markdown').then(m => m.Markdown), + }, + }), + ); + ``` + +3. And finally, users can add them to their `app-config` to expose the component as mount point `home.page/cards`: + + ```yaml + dynamicPlugins: + frontend: + your-plugin-id: + mountPoints: + - mountPoint: home.page/cards + importName: YourHomePageCard + config: + layout: ... + props: ... + ``` diff --git a/plugins/dynamic-home-page/docs/customization.md b/plugins/dynamic-home-page/docs/customization.md new file mode 100644 index 0000000000..e4a1993632 --- /dev/null +++ b/plugins/dynamic-home-page/docs/customization.md @@ -0,0 +1,80 @@ +# Customization + +The dynamic home page allows admins to constomize the homepage in the `app-config`, and plugin authors to extend the home page with additional cards or content. + +Additional cards can automatically appear based on installed and enabled plugins. + +## Default home page + +The default home page shows a Search input field, a "Quick Access" card, and a "Your Starred Entities" card by default. + +![Default home page](default-homepage.png) + +The customization can happen in any loaded `app-config` from the `dynamicPlugins` section. + +The home page loads automatically a configuration like this, when no other configiration is passed: + +```yaml +dynamicPlugins: + frontend: + janus-idp.backstage-plugin-dynamic-home-page: + dynamicRoutes: + - path: / + importName: DynamicHomePage + mountPoints: + - mountPoint: home.page/cards + importName: SearchBar + config: + layouts: + xl: { w: 10, h: 1, x: 1 } + lg: { w: 10, h: 1, x: 1 } + md: { w: 10, h: 1, x: 1 } + sm: { w: 10, h: 1, x: 1 } + xs: { w: 12, h: 1 } + xxs: { w: 12, h: 1 } + - mountPoint: home.page/cards + importName: QuickAccessCard + config: + layouts: + xl: { w: 7, h: 8 } + lg: { w: 7, h: 8 } + md: { w: 7, h: 8 } + sm: { w: 12, h: 8 } + xs: { w: 12, h: 8 } + xxs: { w: 12, h: 8 } + - mountPoint: home.page/cards + importName: CatalogStarredEntitiesCard + config: + layouts: + xl: { w: 5, h: 4, x: 7 } + lg: { w: 5, h: 4, x: 7 } + md: { w: 5, h: 4, x: 7 } + sm: { w: 12, h: 4 } + xs: { w: 12, h: 4 } + xxs: { w: 12, h: 4 } +``` + +## Adding cards from a plugin + +Plugins can add additional cards/content by exporting a react component. + +Each card can have a `layouts` definition and `props` that are depending on the used component like this: + +```yaml +dynamicPlugins: + frontend: + janus-idp.backstage-plugin-dynamic-home-page: + mountPoints: + - mountPoint: home.page/cards + importName: Headline + config: + layouts: + xl: { h: 1 } + lg: { h: 1 } + md: { h: 1 } + sm: { h: 1 } + xs: { h: 1 } + xxs: { h: 1 } + props: + title: Important info +``` diff --git a/plugins/dynamic-home-page/docs/default-homepage.png b/plugins/dynamic-home-page/docs/default-homepage.png new file mode 100644 index 0000000000..f85b40b71b Binary files /dev/null and b/plugins/dynamic-home-page/docs/default-homepage.png differ diff --git a/plugins/dynamic-home-page/docs/default-size.png b/plugins/dynamic-home-page/docs/default-size.png new file mode 100644 index 0000000000..c56d72290f Binary files /dev/null and b/plugins/dynamic-home-page/docs/default-size.png differ diff --git a/plugins/dynamic-home-page/docs/featured-docs.md b/plugins/dynamic-home-page/docs/featured-docs.md new file mode 100644 index 0000000000..926fd9e6bd --- /dev/null +++ b/plugins/dynamic-home-page/docs/featured-docs.md @@ -0,0 +1,28 @@ +# Featured docs + +Shows some techdocs. + +![Home page with featured docs card](featured-docs.png) + +## Example + +```yaml +dynamicPlugins: + frontend: + janus-idp.backstage-plugin-dynamic-home-page: + mountPoints: + - mountPoint: home.page/cards + importName: FeaturedDocsCard +``` + +## Available props + +| Prop | Default | Description | +| --------------- | ------------ | ------------------------------------ | +| `filter` | none | Catalog filter options | +| `responseLimit` | 10 | Number of entries that are displayed | +| `subLinkText` | `LEARN MORE` | Link text to open the docs | + +## Contributions + +The dynamic home page plugin reexports the [`FeaturedDocsCard`](https://github.com/backstage/backstage/tree/master/plugins/home/src/homePageComponents/FeaturedDocsCard) from the [home plugin](https://github.com/backstage/backstage/tree/master/plugins/home). diff --git a/plugins/dynamic-home-page/docs/featured-docs.png b/plugins/dynamic-home-page/docs/featured-docs.png new file mode 100644 index 0000000000..5203ef3e16 Binary files /dev/null and b/plugins/dynamic-home-page/docs/featured-docs.png differ diff --git a/plugins/dynamic-home-page/docs/headline.md b/plugins/dynamic-home-page/docs/headline.md new file mode 100644 index 0000000000..98ca13061f --- /dev/null +++ b/plugins/dynamic-home-page/docs/headline.md @@ -0,0 +1,32 @@ +# Headline + +Allow admins and customers to structure the home page content. + +![Home page with some headlines](headline.png) + +## Example + +```yaml +dynamicPlugins: + frontend: + janus-idp.backstage-plugin-dynamic-home-page: + mountPoints: + - mountPoint: home.page/cards + importName: Headline + config: + layouts: + xl: { h: 1 } + lg: { h: 1 } + md: { h: 1 } + sm: { h: 1 } + xs: { h: 1 } + xxs: { h: 1 } + props: + title: Important info +``` + +## Available props + +| Prop | Default | Description | +| ------- | ------- | ----------- | +| `title` | none | Title | diff --git a/plugins/dynamic-home-page/docs/headline.png b/plugins/dynamic-home-page/docs/headline.png new file mode 100644 index 0000000000..381d3011f5 Binary files /dev/null and b/plugins/dynamic-home-page/docs/headline.png differ diff --git a/plugins/dynamic-home-page/docs/index.md b/plugins/dynamic-home-page/docs/index.md new file mode 100644 index 0000000000..5d49be156f --- /dev/null +++ b/plugins/dynamic-home-page/docs/index.md @@ -0,0 +1,11 @@ +# Dynamic home page + +The dynamic home page plugin is based on the upstream [home plugin](https://github.com/backstage/backstage/blob/master/plugins/home/README.md). + +It allows admins to constomize the homepage in the `app-config`, and plugin authors to extend the home page with additional cards or content. + +The default home page shows a Search input field, a "Quick Access" card, and a "Your Starred Entities" card by default. + +Additional cards can automatically appear based on installed and enabled plugins. + +![Default home page](default-homepage.png) diff --git a/plugins/dynamic-home-page/docs/jokes.md b/plugins/dynamic-home-page/docs/jokes.md new file mode 100644 index 0000000000..d6f7dd1dc8 --- /dev/null +++ b/plugins/dynamic-home-page/docs/jokes.md @@ -0,0 +1,22 @@ +# Jokes + +A card that shows a random joke loaded from [official-joke-api.appspot.com](https://official-joke-api.appspot.com/). + +The sourcecode and jokes of the Joke API are available on [GitHub](https://github.com/15Dkatz/official_joke_api). + +![Home page with a joke card](jokes.png) + +## Example + +```yaml +dynamicPlugins: + frontend: + janus-idp.backstage-plugin-dynamic-home-page: + mountPoints: + - mountPoint: home.page/cards + importName: JokeCard +``` + +## Contributions + +The dynamic home page plugin reexports the [`HomePageRandomJoke`](https://github.com/backstage/backstage/tree/master/plugins/home/src/homePageComponents/RandomJoke) from the [home plugin](https://github.com/backstage/backstage/tree/master/plugins/home). diff --git a/plugins/dynamic-home-page/docs/jokes.png b/plugins/dynamic-home-page/docs/jokes.png new file mode 100644 index 0000000000..0a35521c46 Binary files /dev/null and b/plugins/dynamic-home-page/docs/jokes.png differ diff --git a/plugins/dynamic-home-page/docs/layout-columns.png b/plugins/dynamic-home-page/docs/layout-columns.png new file mode 100644 index 0000000000..e825d5bb01 Binary files /dev/null and b/plugins/dynamic-home-page/docs/layout-columns.png differ diff --git a/plugins/dynamic-home-page/docs/layout-example-1-placeholder.png b/plugins/dynamic-home-page/docs/layout-example-1-placeholder.png new file mode 100644 index 0000000000..75a13ad13f Binary files /dev/null and b/plugins/dynamic-home-page/docs/layout-example-1-placeholder.png differ diff --git a/plugins/dynamic-home-page/docs/layout-example-2-placeholder.png b/plugins/dynamic-home-page/docs/layout-example-2-placeholder.png new file mode 100644 index 0000000000..06e8328a7a Binary files /dev/null and b/plugins/dynamic-home-page/docs/layout-example-2-placeholder.png differ diff --git a/plugins/dynamic-home-page/docs/layout-example-3-placeholder.png b/plugins/dynamic-home-page/docs/layout-example-3-placeholder.png new file mode 100644 index 0000000000..029e63598b Binary files /dev/null and b/plugins/dynamic-home-page/docs/layout-example-3-placeholder.png differ diff --git a/plugins/dynamic-home-page/docs/layout-options.md b/plugins/dynamic-home-page/docs/layout-options.md new file mode 100644 index 0000000000..c5724b70f8 --- /dev/null +++ b/plugins/dynamic-home-page/docs/layout-options.md @@ -0,0 +1,169 @@ +# Layout options + +The cards and content of the home page is rendered in a **12-column-grid**. + +All cards have a **fixed height** that can be changed by the admin. + +![Layout columns](layout-columns.png) + +## Default size + +When no layout configuration is defined, the card will take the full width and uses four heights. + +A single height unit takes 60 pixels and there is a gap between each column and row of 16 pixels. + +So the default width takes 100% and the default height is 4*60 (row height) + 3*16 (gap) = 228 pixels. + +![Default size](default-size.png) + +```yaml +dynamicPlugins: + frontend: + janus-idp.backstage-plugin-dynamic-home-page: + mountPoints: + - mountPoint: home.page/cards + importName: Placeholder + config: + props: + showBorder: true +``` + +## Breakpoints + +To have more space for the cards on smaller screensized, the home page supports breakpoints. + +This breakpoints are: + +| Breakpoint | Available content width (not the window or viewport width) | +| ---------- | ---------------------------------------------------------- | +| `xl` | >= 1600 | +| `lg` | >= 1200 | +| `md` | >= 996 | +| `sm` | >= 768 | +| `xs` | >= 480 | +| `xxs` | >= 0 | + +## Layout definition + +When a layout is defined it requires a layout for all breakpoints. + +Each breakpoint have four optional parameters for the width (`w`), height (`h`) and the position (`x` and `y`). + +The width is 12, the height is 4, and the position is x=0 and y=0 by default. + +Cards are automatically shown among themselves, so that in the most cases it's not required to define `y`. + +The following card will use the full space on smaller widows, and the half of the space on larger windows: + +![Layout example with 1 placeholder](layout-example-1-placeholder.png) + +```yaml +dynamicPlugins: + frontend: + janus-idp.backstage-plugin-dynamic-home-page: + mountPoints: + - mountPoint: home.page/cards + importName: Placeholder + config: + layouts: + xl: { w: 6, h: 2 } + lg: { w: 6, h: 2 } + md: { w: 6, h: 2 } + sm: { w: 12, h: 2 } + xs: { w: 12, h: 2 } + xxs: { w: 12, h: 2 } + props: + showBorder: true + debugContent: a placeholder +``` + +
+ +A second card will be shown below that card by default. To show cards side by side the card on the right must define a `x`-parameter like this: + +![Layout example with 2 placeholder](layout-example-2-placeholder.png) + +```yaml +dynamicPlugins: + frontend: + janus-idp.backstage-plugin-dynamic-home-page: + mountPoints: + - mountPoint: home.page/cards + importName: Placeholder + config: + layouts: + xl: { w: 6, h: 2 } + lg: { w: 6, h: 2 } + md: { w: 6, h: 2 } + sm: { w: 12, h: 2 } + xs: { w: 12, h: 2 } + xxs: { w: 12, h: 2 } + props: + showBorder: true + debugContent: left + - mountPoint: home.page/cards + importName: Placeholder + config: + layouts: + xl: { w: 6, h: 2, x: 6 } + lg: { w: 6, h: 2, x: 6 } + md: { w: 6, h: 2, x: 6 } + sm: { w: 12, h: 2, x: 0 } + xs: { w: 12, h: 2, x: 0 } + xxs: { w: 12, h: 2, x: 0 } + props: + showBorder: true + debugContent: right +``` + +
+ +And this will work similar also for 3 columns of course: + +![Layout example with 3 placeholder](layout-example-3-placeholder.png) + +```yaml +dynamicPlugins: + frontend: + janus-idp.backstage-plugin-dynamic-home-page: + mountPoints: + - mountPoint: home.page/cards + importName: Placeholder + config: + layouts: + xl: { w: 4, h: 2 } + lg: { w: 4, h: 2 } + md: { w: 4, h: 2 } + sm: { w: 6, h: 2 } + xs: { w: 12, h: 2 } + xxs: { w: 12, h: 2 } + props: + showBorder: true + debugContent: left + - mountPoint: home.page/cards + importName: Placeholder + config: + layouts: + xl: { w: 4, h: 2, x: 4 } + lg: { w: 4, h: 2, x: 4 } + md: { w: 4, h: 2, x: 4 } + sm: { w: 6, h: 2, x: 6 } + xs: { w: 12, h: 2 } + xxs: { w: 12, h: 2 } + props: + showBorder: true + debugContent: center + - mountPoint: home.page/cards + importName: Placeholder + config: + layouts: + xl: { w: 4, h: 2, x: 8 } + lg: { w: 4, h: 2, x: 8 } + md: { w: 4, h: 2, x: 8 } + sm: { w: 6, h: 2 } + xs: { w: 12, h: 2 } + xxs: { w: 12, h: 2 } + props: + showBorder: true + debugContent: right +``` diff --git a/plugins/dynamic-home-page/docs/markdown.md b/plugins/dynamic-home-page/docs/markdown.md new file mode 100644 index 0000000000..5b41298c9b --- /dev/null +++ b/plugins/dynamic-home-page/docs/markdown.md @@ -0,0 +1,61 @@ +# Markdown + +Markdown can be rendered in a `MarkdownCard` or as plain `Markdown` (without a border). Both components scroll as soon as the content is longer than the display area. + +The title is optional for both components. + +![Home page with a markdown card with and without a border](markdown.png) + +## Examples + +```yaml +dynamicPlugins: + frontend: + janus-idp.backstage-plugin-dynamic-home-page: + mountPoints: + - mountPoint: home.page/cards + importName: MarkdownCard + config: + layouts: + xl: { w: 6, h: 4 } + lg: { w: 6, h: 4 } + md: { w: 6, h: 4 } + sm: { w: 6, h: 4 } + xs: { w: 6, h: 4 } + xxs: { w: 6, h: 4 } + props: + title: Company links + content: | + ### RHDH + + * [Website](https://developers.redhat.com/rhdh/overview) + * [Documentation](https://docs.redhat.com/en/documentation/red_hat_developer_hub/) + * [GitHub Showcase](https://github.com/janus-idp/backstage-showcase) + * [GitHub Plugins](https://github.com/janus-idp/backstage-plugins) + - mountPoint: home.page/cards + importName: Markdown + config: + layouts: + xl: { w: 6, h: 4, x: 6 } + lg: { w: 6, h: 4, x: 6 } + md: { w: 6, h: 4, x: 6 } + sm: { w: 6, h: 4, x: 6 } + xs: { w: 6, h: 4, x: 6 } + xxs: { w: 6, h: 4, x: 6 } + props: + title: Important company links + content: | + ### RHDH + + * [Website](https://developers.redhat.com/rhdh/overview) + * [Documentation](https://docs.redhat.com/en/documentation/red_hat_developer_hub/) + * [GitHub Showcase](https://github.com/janus-idp/backstage-showcase) + * [GitHub Plugins](https://github.com/janus-idp/backstage-plugins) +``` + +## Available props + +| Prop | Default | Description | +| --------- | ------- | ------------ | +| `title` | none | Card title | +| `content` | none | Card content | diff --git a/plugins/dynamic-home-page/docs/markdown.png b/plugins/dynamic-home-page/docs/markdown.png new file mode 100644 index 0000000000..c5102abb4f Binary files /dev/null and b/plugins/dynamic-home-page/docs/markdown.png differ diff --git a/plugins/dynamic-home-page/docs/placeholder.md b/plugins/dynamic-home-page/docs/placeholder.md new file mode 100644 index 0000000000..be78d64deb --- /dev/null +++ b/plugins/dynamic-home-page/docs/placeholder.md @@ -0,0 +1,101 @@ +# Placeholder + +The placeholder component could be used to test different layout options, and could also be used to add gaps between other components. + +![Home page with some placeholder cards](placeholder.png) + +## Examples + +```yaml +dynamicPlugins: + frontend: + janus-idp.backstage-plugin-dynamic-home-page: + mountPoints: + - mountPoint: home.page/cards + importName: Placeholder + config: + layouts: + xl: { w: 1, h: 1 } + lg: { w: 1, h: 1 } + md: { w: 1, h: 1 } + sm: { w: 1, h: 1 } + xs: { w: 1, h: 1 } + xxs: { w: 1, h: 1 } + props: + showBorder: true + debugContent: '1' + - mountPoint: home.page/cards + importName: Placeholder + config: + layouts: + xl: { w: 1, h: 1, x: 1 } + lg: { w: 1, h: 1, x: 1 } + md: { w: 1, h: 1, x: 1 } + sm: { w: 1, h: 1, x: 1 } + xs: { w: 1, h: 1, x: 1 } + xxs: { w: 1, h: 1, x: 1 } + props: + showBorder: true + debugContent: '2' + - mountPoint: home.page/cards + importName: Placeholder + config: + layouts: + xl: { w: 1, h: 1 } + lg: { w: 1, h: 1 } + md: { w: 1, h: 1 } + sm: { w: 1, h: 1 } + xs: { w: 1, h: 1 } + xxs: { w: 1, h: 1 } + props: + showBorder: true + debugContent: '3' + + - mountPoint: home.page/cards + importName: Placeholder + config: + layouts: + xl: { w: 12, h: 1 } + lg: { w: 12, h: 1 } + md: { w: 12, h: 1 } + sm: { w: 12, h: 1 } + xs: { w: 12, h: 1 } + xxs: { w: 12, h: 1 } + props: + showBorder: true + debugContent: '4' + + - mountPoint: home.page/cards + importName: Placeholder + config: + layouts: + xl: { w: 1, h: 1 } + lg: { w: 1, h: 1 } + md: { w: 1, h: 1 } + sm: { w: 1, h: 1 } + xs: { w: 1, h: 1 } + xxs: { w: 1, h: 1 } + props: + showBorder: true + debugContent: '5' + - mountPoint: home.page/cards + importName: Placeholder + config: + layouts: + xl: { w: 1, h: 1, x: 1 } + lg: { w: 1, h: 1, x: 1 } + md: { w: 1, h: 1, x: 1 } + sm: { w: 1, h: 1, x: 1 } + xs: { w: 1, h: 1, x: 1 } + xxs: { w: 1, h: 1, x: 1 } + props: + showBorder: true + debugContent: '6' +``` + +## Available props + +| Prop | Default | Description | +| -------------- | ------- | ------------------------------------------------------ | +| `showBorder` | `false` | Option to show a gray border (for testing purpose) | +| `debugContent` | `''` | Option to show a text in the box (for testing purpose) | diff --git a/plugins/dynamic-home-page/docs/placeholder.png b/plugins/dynamic-home-page/docs/placeholder.png new file mode 100644 index 0000000000..42f921ad71 Binary files /dev/null and b/plugins/dynamic-home-page/docs/placeholder.png differ diff --git a/plugins/dynamic-home-page/docs/quick-access.md b/plugins/dynamic-home-page/docs/quick-access.md new file mode 100644 index 0000000000..1e4fae31aa --- /dev/null +++ b/plugins/dynamic-home-page/docs/quick-access.md @@ -0,0 +1,31 @@ +# Quick access card + +Allow users to easily discover resource. + +![Home page with search a quick access card](quick-access.png) + +## Example + +```yaml +dynamicPlugins: + frontend: + janus-idp.backstage-plugin-dynamic-home-page: + mountPoints: + - mountPoint: home.page/cards + importName: QuickAccessCard + config: + layouts: + xl: { h: 8 } + lg: { h: 8 } + md: { h: 8 } + sm: { h: 8 } + xs: { h: 8 } + xxs: { h: 8 } +``` + +## Available props + +| Prop | Default | Description | +| ------- | -------------- | --------------------------------------------------- | +| `title` | `Quick Access` | Override the linked search path if needed. | +| `path` | none | Override the search query parameter name if needed. | diff --git a/plugins/dynamic-home-page/docs/quick-access.png b/plugins/dynamic-home-page/docs/quick-access.png new file mode 100644 index 0000000000..ce0ea7e520 Binary files /dev/null and b/plugins/dynamic-home-page/docs/quick-access.png differ diff --git a/plugins/dynamic-home-page/docs/recently-visited.md b/plugins/dynamic-home-page/docs/recently-visited.md new file mode 100644 index 0000000000..2aa7bc2449 --- /dev/null +++ b/plugins/dynamic-home-page/docs/recently-visited.md @@ -0,0 +1,24 @@ +# Recently visited + +> [!CAUTION] +> This feature is not part of RHDH 1.3, it is planned for RHDH 1.4. +> Follow [RHIDP-4235](https://issues.redhat.com/browse/RHIDP-4235) for more information. + +Shows the recently visited pages (incl. catalog entities) the current user visited. + +![Home page with recently visited card](recently-visited.png) + +## Example + +```yaml +dynamicPlugins: + frontend: + janus-idp.backstage-plugin-dynamic-home-page: + mountPoints: + - mountPoint: home.page/cards + importName: RecentlyVisitedCard +``` + +## Contributions + +The dynamic home page plugin reexports the [`HomePageRecentlyVisited`](https://github.com/backstage/backstage/tree/master/plugins/home/src/homePageComponents/VisitedByType) from the [home plugin](https://github.com/backstage/backstage/tree/master/plugins/home). diff --git a/plugins/dynamic-home-page/docs/recently-visited.png b/plugins/dynamic-home-page/docs/recently-visited.png new file mode 100644 index 0000000000..c1ef8316c9 Binary files /dev/null and b/plugins/dynamic-home-page/docs/recently-visited.png differ diff --git a/plugins/dynamic-home-page/docs/search.md b/plugins/dynamic-home-page/docs/search.md new file mode 100644 index 0000000000..404a1c4f73 --- /dev/null +++ b/plugins/dynamic-home-page/docs/search.md @@ -0,0 +1,31 @@ +# Search bar + +The search bar is a simple component that allows the user to start a search. + +![Home page with search bar](search.png) + +## Example + +```yaml +dynamicPlugins: + frontend: + janus-idp.backstage-plugin-dynamic-home-page: + mountPoints: + - mountPoint: home.page/cards + importName: SearchBar + config: + layouts: + xl: { w: 10, h: 1, x: 1 } + lg: { w: 10, h: 1, x: 1 } + md: { w: 10, h: 1, x: 1 } + sm: { w: 10, h: 1, x: 1 } + xs: { w: 12, h: 1 } + xxs: { w: 12, h: 1 } +``` + +## Available props + +| Prop | Default | Description | +| ------------ | --------- | --------------------------------------------------- | +| `path` | `/search` | Override the linked search path if needed. | +| `queryParam` | `query` | Override the search query parameter name if needed. | diff --git a/plugins/dynamic-home-page/docs/search.png b/plugins/dynamic-home-page/docs/search.png new file mode 100644 index 0000000000..b196f80d62 Binary files /dev/null and b/plugins/dynamic-home-page/docs/search.png differ diff --git a/plugins/dynamic-home-page/docs/top-visited.md b/plugins/dynamic-home-page/docs/top-visited.md new file mode 100644 index 0000000000..8917c75b90 --- /dev/null +++ b/plugins/dynamic-home-page/docs/top-visited.md @@ -0,0 +1,24 @@ +# Top visited + +> [!CAUTION] +> This feature is not part of RHDH 1.3, it is planned for RHDH 1.4. +> Follow [RHIDP-4235](https://issues.redhat.com/browse/RHIDP-4235) for more information. + +Shows the top visited pages (incl. catalog entities) the current user visited. + +![Home page with top visited card](top-visited.png) + +## Example + +```yaml +dynamicPlugins: + frontend: + janus-idp.backstage-plugin-dynamic-home-page: + mountPoints: + - mountPoint: home.page/cards + importName: TopVisitedCard +``` + +## Contributions + +The dynamic home page plugin reexports the [`HomePageTopVisited`](https://github.com/backstage/backstage/tree/master/plugins/home/src/homePageComponents/VisitedByType) from the [home plugin](https://github.com/backstage/backstage/tree/master/plugins/home). diff --git a/plugins/dynamic-home-page/docs/top-visited.png b/plugins/dynamic-home-page/docs/top-visited.png new file mode 100644 index 0000000000..bd9db60404 Binary files /dev/null and b/plugins/dynamic-home-page/docs/top-visited.png differ diff --git a/plugins/dynamic-home-page/mkdocs.yaml b/plugins/dynamic-home-page/mkdocs.yaml new file mode 100644 index 0000000000..7f9574436b --- /dev/null +++ b/plugins/dynamic-home-page/mkdocs.yaml @@ -0,0 +1,21 @@ +site_name: Dynamic Home Page + +plugins: + - techdocs-core + +nav: + - Customization: customization.md + - Layout options: layout-options.md + - Cards: + - Search: search.md + - Quick access: quick-access.md + - Headline: headline.md + - Markdown: markdown.md + - Placeholder: placeholder.md + - Catalog starred entities: catalog-starred.md + - Recently visited: recently-visited.md + - Top visited: top-visited.md + - Featured docs: featured-docs.md + - Jokes: jokes.md + - Plugins: + - Create a new card: create-a-new-card.md