Chapter 9. Customizing the Home page
Chapter 9. Customizing the Home page When using the app-config , you can do the following: Customize and extend the default Home page layout with additional cards that appear based on the plugins you have installed and enabled. Change quick access links. Add, reorganize, and remove the following available cards: Search bar Quick access Headline Markdown Placeholder Catalog starred entities Featured docs 9.1. Customizing the Home page cards Administrators can change the fixed height of cards that are in a 12-column grid. The default Home page is as shown in the following app-config file configuration: dynamicPlugins: frontend: red-hat-developer-hub.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 } Prerequisites You have administrative access and can modify the app-config.yaml file for dynamic plugin configurations. Procedure Configure different cards for your Home page in Red Hat Developer Hub as follows: Search dynamicPlugins: frontend: red-hat-developer-hub.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 } Table 9.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 Quick access dynamicPlugins: frontend: red-hat-developer-hub.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 } Table 9.2. 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 Headline dynamicPlugins: frontend: red-hat-developer-hub.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 Table 9.3. Available props Prop Default Description title none Title Markdown dynamicPlugins: frontend: red-hat-developer-hub.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/) * [Janus Plugins](https://github.com/janus-idp/backstage-plugins) * [Backstage Community Plugins](https://github.com/backstage/community-plugins) * [RHDH Plugins](https://github.com/redhat-developer/rhdh-plugins) * [RHDH Showcase](https://github.com/redhat-developer/rhdh) - 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/) * [Documentation](https://docs.redhat.com/en/documentation/red_hat_developer_hub/) * [Janus Plugins](https://github.com/janus-idp/backstage-plugins) * [Backstage Community Plugins](https://github.com/backstage/community-plugins) * [RHDH Plugins](https://github.com/redhat-developer/rhdh-plugins) * [RHDH Showcase](https://github.com/redhat-developer/rhdh) Placeholder dynamicPlugins: frontend: red-hat-developer-hub.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' Catalog starred entities dynamicPlugins: frontend: red-hat-developer-hub.backstage-plugin-dynamic-home-page: mountPoints: - mountPoint: home.page/cards importName: CatalogStarredEntitiesCard Featured docs dynamicPlugins: frontend: red-hat-developer-hub.backstage-plugin-dynamic-home-page: mountPoints: - mountPoint: home.page/cards importName: FeaturedDocsCard 9.2. Defining the layout of the Red Hat Developer Hub Home page Prerequisites Include the following optimal parameters in each of your breakpoints: width (w) height (h) position (x and y) Procedure Configure your Developer Hub app-config.yaml configuration file by choosing one of the following options: Use the full space on smaller windows and half of the space on larger windows as follows: dynamicPlugins: frontend: red-hat-developer-hub.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 Show the cards side by side by defining the x parameter as follows: dynamicPlugins: frontend: red-hat-developer-hub.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 However, you can see a second card below this card by default. Show the cards in three columns by defining the x parameter as follows: dynamicPlugins: frontend: red-hat-developer-hub.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
dynamicPlugins: frontend: red-hat-developer-hub.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 } dynamicPlugins: frontend: red-hat-developer-hub.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 } dynamicPlugins: frontend: red-hat-developer-hub.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 } dynamicPlugins: frontend: red-hat-developer-hub.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 dynamicPlugins: frontend: red-hat-developer-hub.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/) * [Janus Plugins](https://github.com/janus-idp/backstage-plugins) * [Backstage Community Plugins](https://github.com/backstage/community-plugins) * [RHDH Plugins](https://github.com/redhat-developer/rhdh-plugins) * [RHDH Showcase](https://github.com/redhat-developer/rhdh) - 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/) * [Documentation](https://docs.redhat.com/en/documentation/red_hat_developer_hub/) * [Janus Plugins](https://github.com/janus-idp/backstage-plugins) * [Backstage Community Plugins](https://github.com/backstage/community-plugins) * [RHDH Plugins](https://github.com/redhat-developer/rhdh-plugins) * [RHDH Showcase](https://github.com/redhat-developer/rhdh) dynamicPlugins: frontend: red-hat-developer-hub.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' dynamicPlugins: frontend: red-hat-developer-hub.backstage-plugin-dynamic-home-page: mountPoints: - mountPoint: home.page/cards importName: CatalogStarredEntitiesCard dynamicPlugins: frontend: red-hat-developer-hub.backstage-plugin-dynamic-home-page: mountPoints: - mountPoint: home.page/cards importName: FeaturedDocsCard dynamicPlugins: frontend: red-hat-developer-hub.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 dynamicPlugins: frontend: red-hat-developer-hub.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 dynamicPlugins: frontend: red-hat-developer-hub.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