Chapter 3. Customizing the Home page in Red Hat Developer Hub

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:
      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 }

  Expand

  Table 3.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

  Show more

  Quick access

  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 }

  Expand

  Table 3.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

  Show more

  Headline

  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

  Expand

  Table 3.3. Available props

  Prop	Default	Description
  title	none	Title

  Show more

  Markdown

  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/redhat-developer/rhdh)
                  * [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/redhat-developer/rhdh)
                  * [GitHub Plugins](https://github.com/janus-idp/backstage-plugins)

  Placeholder

  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'

  Catalog starred entities

  dynamicPlugins:
    frontend:
      janus-idp.backstage-plugin-dynamic-home-page:
        mountPoints:
          - mountPoint: home.page/cards
            importName: CatalogStarredEntitiesCard

  Featured docs

  dynamicPlugins:
    frontend:
      janus-idp.backstage-plugin-dynamic-home-page:
        mountPoints:
          - mountPoint: home.page/cards
            importName: FeaturedDocsCard

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:

• Show the cards side by side by defining the x parameter as follows:

• Show the cards in three columns by defining the x parameter as follows: