第 12 章 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
12.1. Customizing the Home page cards
As an administrator, you can customize the layout and content of the Home page to create a tailored user experience. This includes integrating various specialized cards into the primary view.
The Home page layout uses a 12-column grid system. You can precisely define the position (x), width (w), and height (h) for each card across multiple screen breakpoints:
- Extra-large (xl)
- Large (lg)
- Medium (md)
- Small (sm)
- Extra-small (xs)
- Extra-extra-small (xxs)
The default Home page is as shown in the following app-config.yaml 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.yamlfile for dynamic plugin configurations.
Procedure
Configure different cards for your Home page in Red Hat Developer Hub as shown in the following code:
- Search
You can use the SearchBar card to provide essential search functionality directly on the Home page.
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 } props: path: /search queryParam: queryExpand 表 12.1. Available props Prop Default Description path/searchOverride the linked search path if needed
queryParamqueryOverride the search query parameter name if needed
- Quick access
You can use the QuickAccessCard card to function as a customizable shortcut panel.
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 } props: title: Quick Access path: /quickaccessExpand 表 12.2. Available props Prop Default Description titleQuick AccessOverride the linked search path if needed
pathnone
Override the search query parameter name if needed
- Headline
You can use the Headline card to display important information.
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 infoExpand 表 12.3. Available props Prop Default Description titlenone
Title
- Markdown
You can use the Markdown card to display richly formatted content directly within the Home page layout. This card uses Markdown syntax to present structured information, such as lists and links (documentation and plugin repositories).
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/) * [Backstage Community Plugins](https://github.com/backstage/community-plugins) * [RHDH Plugins](https://github.com/redhat-developer/rhdh-plugins) * [RHDH Hub](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/) * [Backstage Community Plugins](https://github.com/backstage/community-plugins) * [RHDH Plugins](https://github.com/redhat-developer/rhdh-plugins) * [RHDH Hub](https://github.com/redhat-developer/rhdh)- Placeholder
You can use the Placeholder card as a utility element for reserving space or for layout testing on the Home page.
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
You can use the CatalogStarredEntitiesCard card to provide a dedicated space on the Home page for users to view catalog entities that they have marked as starred.
dynamicPlugins: frontend: red-hat-developer-hub.backstage-plugin-dynamic-home-page: mountPoints: - mountPoint: home.page/cards importName: CatalogStarredEntitiesCard- Featured docs
You can use the FeaturedDocsCard card as a way to highlight specific documentation within Red Hat Developer Hub, as it is available for deployment on the Home page.
dynamicPlugins: frontend: red-hat-developer-hub.backstage-plugin-dynamic-home-page: mountPoints: - mountPoint: home.page/cards importName: FeaturedDocsCard- EntitySection
You can use the EntitySection card to create a visually engaging section that highlights catalog entities of various kinds, such as
Component,API,Resource, andSystem.dynamicPlugins: frontend: red-hat-developer-hub.backstage-plugin-dynamic-home-page: mountPoints: - mountPoint: home.page/cards importName: EntitySection config: layouts: xl: { w: 12, h: 6 } lg: { w: 12, h: 6 } md: { w: 12, h: 6 } sm: { w: 12, h: 6 } xs: { w: 12, h: 6 } xxs: { w: 12, h: 14.5 }- OnboardingSection
You can use the OnboardingSection card to quickly discover learning resources within RHDH.
dynamicPlugins: frontend: red-hat-developer-hub.backstage-plugin-dynamic-home-page: mountPoints: - mountPoint: home.page/cards importName: OnboardingSection config: layouts: xl: { w: 12, h: 5 } lg: { w: 12, h: 5 } md: { w: 12, h: 5 } sm: { w: 12, h: 5 } xs: { w: 12, h: 7 } xxs: { w: 12, h: 12 }- TemplateSection
You can use the TemplateSection card to quickly explore and initiate software templates in RHDH.
dynamicPlugins: frontend: red-hat-developer-hub.backstage-plugin-dynamic-home-page: mountPoints: - mountPoint: home.page/cards importName: TemplateSection config: layouts: xl: { w: 12, h: 5 } lg: { w: 12, h: 5 } md: { w: 12, h: 5 } sm: { w: 12, h: 5 } xs: { w: 12, h: 5 } xxs: { w: 12, h: 14 }
'%20d='M201.5%20305.5c-13.8%200-24.9-11.1-24.9-24.6%200-13.8%2011.1-24.9%2024.9-24.9%2013.6%200%2024.6%2011.1%2024.6%2024.9%200%2013.6-11.1%2024.6-24.6%2024.6zM504%20256c0%20137-111%20248-248%20248S8%20393%208%20256%20119%208%20256%208s248%20111%20248%20248zm-132.3-41.2c-9.4%200-17.7%203.9-23.8%2010-22.4-15.5-52.6-25.5-86.1-26.6l17.4-78.3%2055.4%2012.5c0%2013.6%2011.1%2024.6%2024.6%2024.6%2013.8%200%2024.9-11.3%2024.9-24.9s-11.1-24.9-24.9-24.9c-9.7%200-18%205.8-22.1%2013.8l-61.2-13.6c-3-.8-6.1%201.4-6.9%204.4l-19.1%2086.4c-33.2%201.4-63.1%2011.3-85.5%2026.8-6.1-6.4-14.7-10.2-24.1-10.2-34.9%200-46.3%2046.9-14.4%2062.8-1.1%205-1.7%2010.2-1.7%2015.5%200%2052.6%2059.2%2095.2%20132%2095.2%2073.1%200%20132.3-42.6%20132.3-95.2%200-5.3-.6-10.8-1.9-15.8%2031.3-16%2019.8-62.5-14.9-62.5zM302.8%20331c-18.2%2018.2-76.1%2017.9-93.6%200-2.2-2.2-6.1-2.2-8.3%200-2.5%202.5-2.5%206.4%200%208.6%2022.8%2022.8%2087.3%2022.8%20110.2%200%202.5-2.2%202.5-6.1%200-8.6-2.2-2.2-6.1-2.2-8.3%200zm7.7-75c-13.6%200-24.6%2011.1-24.6%2024.9%200%2013.6%2011.1%2024.6%2024.6%2024.6%2013.8%200%2024.9-11.1%2024.9-24.6%200-13.8-11-24.9-24.9-24.9z'/%3e%3c/svg%3e){kind=small}