From 2489c35e332714194877173e38de4d034b053e4b Mon Sep 17 00:00:00 2001 From: jmagak Date: Tue, 24 Sep 2024 15:41:03 +0200 Subject: [PATCH 01/12] Modifies the customizing home page --- .../proc-customize-rhdh-homepage.adoc | 59 +++++++-- ...ining-the-layout-of-the-rhdh-homepage.adoc | 121 ++++++++++++++++++ 2 files changed, 167 insertions(+), 13 deletions(-) create mode 100644 modules/getting-started/proc_defining-the-layout-of-the-rhdh-homepage.adoc diff --git a/modules/getting-started/proc-customize-rhdh-homepage.adoc b/modules/getting-started/proc-customize-rhdh-homepage.adoc index 84b40ccdbb..d41bda0279 100644 --- a/modules/getting-started/proc-customize-rhdh-homepage.adoc +++ b/modules/getting-started/proc-customize-rhdh-homepage.adoc @@ -8,6 +8,12 @@ To access the Home page in {product}, the base URL must include the `/developer- == Using hosted JSON files to provide data to the Learning Paths +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. +* Add, reorganize, and remove the cards. +* Change quick access links. + .Prerequisites You have installed {product} by using either the Operator or Helm chart. @@ -23,21 +29,48 @@ To access the data from the JSON files, complete the following step: + [source,yaml] ---- -proxy: - endpoints: - # Other Proxies - # customize developer hub instance - '/developer-hub': - target: # i.e https://raw.githubusercontent.com/ - pathRewrite: - '^/api/proxy/developer-hub': # i.e /janus-idp/backstage-showcase/main/packages/app/public/homepage/data.json - changeOrigin: true - secure: true - # Change to "false" in case of using self hosted cluster with a self-signed certificate - headers: - : # optional and can be passed as needed i.e Authorization can be passed for private GitHub repo and PRIVATE-TOKEN can be passed for private GitLab repo +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 } ---- +include::modules/getting-started/proc_defining-the-layout-of-the-rhdh-homepage.adoc[leveloffset=+1] + + == Using a dedicated service to provide data to the Learning Paths When using a dedicated service, you can do the following: diff --git a/modules/getting-started/proc_defining-the-layout-of-the-rhdh-homepage.adoc b/modules/getting-started/proc_defining-the-layout-of-the-rhdh-homepage.adoc new file mode 100644 index 0000000000..06de0f06ac --- /dev/null +++ b/modules/getting-started/proc_defining-the-layout-of-the-rhdh-homepage.adoc @@ -0,0 +1,121 @@ +:_newdoc-version: 2.18.3 +:_template-generated: 2024-09-24 +:_mod-docs-content-type: PROCEDURE + +[id="defining-the-layout-of-the-rhdh-homepage_{context}"] += Defining the layout of the {product} Home page + +To define the layout of your Home page, include the following optimal parameters in each of your breakpoints: + +* width (w) +* height (h) +* position (x and y) + +You can use the full space on smaller windows and half of the space on larger windows, as shown in the following example: + +[source,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 +---- + + +You can see a second card below this card by default. However, to show the cards side by side, you must define the `x` parameter, as shown in the following example: + +[source,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 +---- + +You can also show the cards in three columns by defining the `x` parameter, as shown in the following example: + +[source,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 +---- From d93cd3fdd6734052d76216f9250c074b1173c33f Mon Sep 17 00:00:00 2001 From: jmagak Date: Tue, 24 Sep 2024 15:47:48 +0200 Subject: [PATCH 02/12] Modifies the customizing home page --- modules/getting-started/proc-customize-rhdh-homepage.adoc | 2 -- 1 file changed, 2 deletions(-) diff --git a/modules/getting-started/proc-customize-rhdh-homepage.adoc b/modules/getting-started/proc-customize-rhdh-homepage.adoc index d41bda0279..1682f14e80 100644 --- a/modules/getting-started/proc-customize-rhdh-homepage.adoc +++ b/modules/getting-started/proc-customize-rhdh-homepage.adoc @@ -68,8 +68,6 @@ dynamicPlugins: xxs: { w: 12, h: 4 } ---- -include::modules/getting-started/proc_defining-the-layout-of-the-rhdh-homepage.adoc[leveloffset=+1] - == Using a dedicated service to provide data to the Learning Paths From 8d909502c27072576c1015cd622ffc79911d7cac Mon Sep 17 00:00:00 2001 From: jmagak Date: Tue, 24 Sep 2024 17:04:12 +0200 Subject: [PATCH 03/12] Modifies the customizing home page --- .../proc-customize-rhdh-homepage.adoc | 117 +++++++++++++++++ ...ining-the-layout-of-the-rhdh-homepage.adoc | 121 ------------------ 2 files changed, 117 insertions(+), 121 deletions(-) delete mode 100644 modules/getting-started/proc_defining-the-layout-of-the-rhdh-homepage.adoc diff --git a/modules/getting-started/proc-customize-rhdh-homepage.adoc b/modules/getting-started/proc-customize-rhdh-homepage.adoc index 1682f14e80..c37c8a8351 100644 --- a/modules/getting-started/proc-customize-rhdh-homepage.adoc +++ b/modules/getting-started/proc-customize-rhdh-homepage.adoc @@ -68,6 +68,123 @@ dynamicPlugins: xxs: { w: 12, h: 4 } ---- +== Defining the layout of the {product} Home page + +To define the layout of your Home page, include the following optimal parameters in each of your breakpoints: + +* width (w) +* height (h) +* position (x and y) + +You can use the full space on smaller windows and half of the space on larger windows, as shown in the following example: + +[source,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 +---- + + +You can see a second card below this card by default. However, to show the cards side by side, you must define the `x` parameter, as shown in the following example: + +[source,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 +---- + +You can also show the cards in three columns by defining the `x` parameter, as shown in the following example: + +[source,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 +---- + == Using a dedicated service to provide data to the Learning Paths diff --git a/modules/getting-started/proc_defining-the-layout-of-the-rhdh-homepage.adoc b/modules/getting-started/proc_defining-the-layout-of-the-rhdh-homepage.adoc deleted file mode 100644 index 06de0f06ac..0000000000 --- a/modules/getting-started/proc_defining-the-layout-of-the-rhdh-homepage.adoc +++ /dev/null @@ -1,121 +0,0 @@ -:_newdoc-version: 2.18.3 -:_template-generated: 2024-09-24 -:_mod-docs-content-type: PROCEDURE - -[id="defining-the-layout-of-the-rhdh-homepage_{context}"] -= Defining the layout of the {product} Home page - -To define the layout of your Home page, include the following optimal parameters in each of your breakpoints: - -* width (w) -* height (h) -* position (x and y) - -You can use the full space on smaller windows and half of the space on larger windows, as shown in the following example: - -[source,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 ----- - - -You can see a second card below this card by default. However, to show the cards side by side, you must define the `x` parameter, as shown in the following example: - -[source,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 ----- - -You can also show the cards in three columns by defining the `x` parameter, as shown in the following example: - -[source,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 ----- From 963d083075335723dceab3c1c904eae986d188da Mon Sep 17 00:00:00 2001 From: jmagak Date: Tue, 24 Sep 2024 17:24:29 +0200 Subject: [PATCH 04/12] Modify the customization home page --- modules/getting-started/proc-customize-rhdh-homepage.adoc | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/modules/getting-started/proc-customize-rhdh-homepage.adoc b/modules/getting-started/proc-customize-rhdh-homepage.adoc index c37c8a8351..86d6637b48 100644 --- a/modules/getting-started/proc-customize-rhdh-homepage.adoc +++ b/modules/getting-started/proc-customize-rhdh-homepage.adoc @@ -11,7 +11,7 @@ To access the Home page in {product}, the base URL must include the `/developer- 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. -* Add, reorganize, and remove the cards. +* Add, reorganize, and remove cards. * Change quick access links. .Prerequisites @@ -99,7 +99,6 @@ dynamicPlugins: debugContent: a placeholder ---- - You can see a second card below this card by default. However, to show the cards side by side, you must define the `x` parameter, as shown in the following example: [source,yaml] From 0d3779d4bba5e0c01402608451650d994c5962e3 Mon Sep 17 00:00:00 2001 From: jmagak Date: Wed, 25 Sep 2024 13:48:54 +0200 Subject: [PATCH 05/12] Modifies the Customizing Home Page --- modules/getting-started/proc-customize-rhdh-homepage.adoc | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/modules/getting-started/proc-customize-rhdh-homepage.adoc b/modules/getting-started/proc-customize-rhdh-homepage.adoc index 86d6637b48..3c17d96eca 100644 --- a/modules/getting-started/proc-customize-rhdh-homepage.adoc +++ b/modules/getting-started/proc-customize-rhdh-homepage.adoc @@ -11,7 +11,7 @@ To access the Home page in {product}, the base URL must include the `/developer- 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. -* Add, reorganize, and remove cards. +* Add, reorganize, and remove the cards. * Change quick access links. .Prerequisites @@ -68,7 +68,7 @@ dynamicPlugins: xxs: { w: 12, h: 4 } ---- -== Defining the layout of the {product} Home page +=== Defining the layout of the {product} Home page To define the layout of your Home page, include the following optimal parameters in each of your breakpoints: @@ -99,6 +99,7 @@ dynamicPlugins: debugContent: a placeholder ---- + You can see a second card below this card by default. However, to show the cards side by side, you must define the `x` parameter, as shown in the following example: [source,yaml] @@ -135,6 +136,7 @@ dynamicPlugins: debugContent: right ---- + You can also show the cards in three columns by defining the `x` parameter, as shown in the following example: [source,yaml] @@ -184,7 +186,6 @@ dynamicPlugins: debugContent: right ---- - == Using a dedicated service to provide data to the Learning Paths When using a dedicated service, you can do the following: From 741a811f5045b0f2e4cdb06b46ecf2dfe606ddc3 Mon Sep 17 00:00:00 2001 From: jmagak Date: Wed, 25 Sep 2024 14:07:39 +0200 Subject: [PATCH 06/12] Modifies the Customizing Home Page --- modules/getting-started/proc-customize-rhdh-homepage.adoc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/getting-started/proc-customize-rhdh-homepage.adoc b/modules/getting-started/proc-customize-rhdh-homepage.adoc index 3c17d96eca..cdcef1b5a4 100644 --- a/modules/getting-started/proc-customize-rhdh-homepage.adoc +++ b/modules/getting-started/proc-customize-rhdh-homepage.adoc @@ -6,7 +6,7 @@ To access the Home page in {product}, the base URL must include the `/developer- * JSON files hosted on GitHub or GitLab. * A dedicated service that provides the Home page data in JSON format using an API. -== Using hosted JSON files to provide data to the Learning Paths +== Using hosted JSON files to provide data to the Home page When using the `app-config`, you can do the following: @@ -186,7 +186,7 @@ dynamicPlugins: debugContent: right ---- -== Using a dedicated service to provide data to the Learning Paths +== Using a dedicated service to provide data to the Home page When using a dedicated service, you can do the following: From 3c2ad0b46c11b9104aafe118deb777f33900c97b Mon Sep 17 00:00:00 2001 From: jmagak Date: Fri, 27 Sep 2024 14:51:55 +0200 Subject: [PATCH 07/12] Modifies the customizing Home page --- .../proc-customize-rhdh-homepage.adoc | 210 +++++++++++++++++- 1 file changed, 209 insertions(+), 1 deletion(-) diff --git a/modules/getting-started/proc-customize-rhdh-homepage.adoc b/modules/getting-started/proc-customize-rhdh-homepage.adoc index cdcef1b5a4..8767d489d6 100644 --- a/modules/getting-started/proc-customize-rhdh-homepage.adoc +++ b/modules/getting-started/proc-customize-rhdh-homepage.adoc @@ -10,9 +10,19 @@ To access the Home page in {product}, the base URL must include the `/developer- 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. -* Add, reorganize, and remove the cards. * Change quick access links. +* Add, reorganize, and remove the following available cards: ++ +* Search bar +* Quick access +* Headline +* Markdown +* Placeholder +* Catalog starred entities +* Featured docs + .Prerequisites @@ -68,6 +78,204 @@ dynamicPlugins: xxs: { w: 12, h: 4 } ---- +=== Example card configurations for your Home page in {product} + +You can configure different cards for your Home page in {product}, as follows: + +Search:: ++ +-- +[source,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 +|=== +-- + +Quick access:: ++ +-- +[source,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 +|=== +-- + +Headline:: ++ +-- +[source,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 +|=== +-- + +Markdown:: ++ +-- +[source,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 } +---- +-- + +Placeholder:: ++ +-- +[source,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 } +---- +-- + +Catalog starred entities:: ++ +-- +[source,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 } +---- +-- + +Featured docs:: ++ +-- +[source,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 } +---- +-- + === Defining the layout of the {product} Home page To define the layout of your Home page, include the following optimal parameters in each of your breakpoints: From c713dadd85ac5d21499bd604c7fabcb95eeb75a3 Mon Sep 17 00:00:00 2001 From: jmagak Date: Fri, 27 Sep 2024 15:23:28 +0200 Subject: [PATCH 08/12] Modifies the customizing Home page --- .../proc-customize-rhdh-homepage.adoc | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/modules/getting-started/proc-customize-rhdh-homepage.adoc b/modules/getting-started/proc-customize-rhdh-homepage.adoc index 8767d489d6..15e1432a05 100644 --- a/modules/getting-started/proc-customize-rhdh-homepage.adoc +++ b/modules/getting-started/proc-customize-rhdh-homepage.adoc @@ -15,13 +15,13 @@ When using the `app-config`, you can do the following: * Change quick access links. * Add, reorganize, and remove the following available cards: + -* Search bar -* Quick access -* Headline -* Markdown -* Placeholder -* Catalog starred entities -* Featured docs +** Search bar +** Quick access +** Headline +** Markdown +** Placeholder +** Catalog starred entities +** Featured docs .Prerequisites From ce322be1095813adbb34484ac8bffebd37162471 Mon Sep 17 00:00:00 2001 From: jmagak Date: Mon, 30 Sep 2024 19:10:14 +0200 Subject: [PATCH 09/12] Modifies the customizing Home page --- .../proc-customize-rhdh-homepage.adoc | 71 +++++++++++++------ 1 file changed, 49 insertions(+), 22 deletions(-) diff --git a/modules/getting-started/proc-customize-rhdh-homepage.adoc b/modules/getting-started/proc-customize-rhdh-homepage.adoc index 15e1432a05..b5291ef944 100644 --- a/modules/getting-started/proc-customize-rhdh-homepage.adoc +++ b/modules/getting-started/proc-customize-rhdh-homepage.adoc @@ -1,16 +1,8 @@ [id='proc-customize-rhdh-homepage_{context}'] = Customizing the Home page in {product} -To access the Home page in {product}, the base URL must include the `/developer-hub` proxy. You can configure the Home page by passing the data into the `app-config.yaml` file as a proxy. You can provide data to the Home page from the following sources: - -* JSON files hosted on GitHub or GitLab. -* A dedicated service that provides the Home page data in JSON format using an API. - -== Using hosted JSON files to provide data to 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: @@ -23,20 +15,8 @@ When using the `app-config`, you can do the following: ** Catalog starred entities ** Featured docs +The default Home page is as shown in the following `app-config` file configuration: -.Prerequisites - -You have installed {product} by using either the Operator or Helm chart. -//For more information, see xref:proc-install-rhdh_rhdh-getting-started[]. -//replace with link to installation guide. - - -.Procedure - -To access the data from the JSON files, complete the following step: - -* Add the following code to the `app-config.yaml` file: -+ [source,yaml] ---- dynamicPlugins: @@ -78,6 +58,11 @@ dynamicPlugins: xxs: { w: 12, h: 4 } ---- + +== Customizing the Home page cards + +Administrators can change the fixed height of cards that are in a 12-column grid. + === Example card configurations for your Home page in {product} You can configure different cards for your Home page in {product}, as follows: @@ -394,7 +379,49 @@ dynamicPlugins: debugContent: right ---- -== Using a dedicated service to provide data to the Home page + +== Customizing the Quick access card in {product} + +To access the Home page in {product}, the base URL must include the `/developer-hub` proxy. You can configure the Home page by passing the data into the `app-config.yaml` file as a proxy. You can provide data to the Home page from the following sources: + +* JSON files hosted on GitHub or GitLab. +* A dedicated service that provides the Home page data in JSON format using an API. + + +=== Using hosted JSON files to provide data to the Quick access card + +.Prerequisites + +You have installed {product} by using either the Operator or Helm chart. +//For more information, see xref:proc-install-rhdh_rhdh-getting-started[]. +//replace with link to installation guide. + + +.Procedure + +To access the data from the JSON files, complete the following step: + +* Add the following code to the `app-config.yaml` file: ++ +[source,yaml] +---- +proxy: + endpoints: + # Other Proxies + # customize developer hub instance + '/developer-hub': + target: # i.e https://raw.githubusercontent.com/ + pathRewrite: + '^/api/proxy/developer-hub': # i.e /janus-idp/backstage-showcase/main/packages/app/public/homepage/data.json + changeOrigin: true + secure: true + # Change to "false" in case of using self hosted cluster with a self-signed certificate + headers: + : # optional and can be passed as needed i.e Authorization can be passed for private GitHub repo and PRIVATE-TOKEN can be passed for private GitLab repo +---- + + +=== Using a dedicated service to provide data to the Home page When using a dedicated service, you can do the following: From 83749be780939cee05bab849979e2866ef2a9c06 Mon Sep 17 00:00:00 2001 From: jmagak Date: Thu, 3 Oct 2024 12:19:49 +0200 Subject: [PATCH 10/12] Modifies the customizing Home page --- .../proc-customize-rhdh-homepage.adoc | 88 +++++++++++-------- 1 file changed, 50 insertions(+), 38 deletions(-) diff --git a/modules/getting-started/proc-customize-rhdh-homepage.adoc b/modules/getting-started/proc-customize-rhdh-homepage.adoc index b5291ef944..ffa9a39916 100644 --- a/modules/getting-started/proc-customize-rhdh-homepage.adoc +++ b/modules/getting-started/proc-customize-rhdh-homepage.adoc @@ -15,6 +15,10 @@ When using the `app-config`, you can do the following: ** Catalog starred entities ** Featured docs +== 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: [source,yaml] @@ -58,11 +62,6 @@ dynamicPlugins: xxs: { w: 12, h: 4 } ---- - -== Customizing the Home page cards - -Administrators can change the fixed height of cards that are in a 12-column grid. - === Example card configurations for your Home page in {product} You can configure different cards for your Home page in {product}, as follows: @@ -183,15 +182,41 @@ dynamicPlugins: janus-idp.backstage-plugin-dynamic-home-page: mountPoints: - mountPoint: home.page/cards - importName: SearchBar + importName: MarkdownCard 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 } + 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) ---- -- @@ -205,15 +230,18 @@ dynamicPlugins: janus-idp.backstage-plugin-dynamic-home-page: mountPoints: - mountPoint: home.page/cards - importName: SearchBar + importName: Placeholder 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 } + 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' ---- -- @@ -227,15 +255,7 @@ dynamicPlugins: 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 } + importName: CatalogStarredEntitiesCard ---- -- @@ -249,15 +269,7 @@ dynamicPlugins: 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 } + importName: FeaturedDocsCard ---- -- @@ -421,7 +433,7 @@ proxy: ---- -=== Using a dedicated service to provide data to the Home page +=== Using a dedicated service to provide data to the Quick access card When using a dedicated service, you can do the following: From 4a64d4aabdcecdee47619c74bcb3dd552e11b20d Mon Sep 17 00:00:00 2001 From: jmagak Date: Wed, 13 Nov 2024 15:42:22 +0100 Subject: [PATCH 11/12] Updates the customizing rhdh homepage --- ...omizing-the-quick-access-card-in-rhdh.adoc | 25 + ...ssembly-customizing-the-rhdh-homepage.adoc | 20 + .../proc-customize-rhdh-homepage.adoc | 563 ------------------ .../proc-customizing-the-home-page-cards.adoc | 261 ++++++++ ...g-the-layout-of-the-product-home-page.adoc | 122 ++++ ...provide-data-to-the-quick-access-card.adoc | 139 +++++ ...provide-data-to-the-quick-access-card.adoc | 35 ++ .../title-getting-started.adoc | 3 +- 8 files changed, 604 insertions(+), 564 deletions(-) create mode 100644 assemblies/assembly-customizing-the-quick-access-card-in-rhdh.adoc create mode 100644 assemblies/assembly-customizing-the-rhdh-homepage.adoc delete mode 100644 modules/getting-started/proc-customize-rhdh-homepage.adoc create mode 100644 modules/getting-started/proc-customizing-the-home-page-cards.adoc create mode 100644 modules/getting-started/proc-defining-the-layout-of-the-product-home-page.adoc create mode 100644 modules/getting-started/proc-using-a-dedicated-service-to-provide-data-to-the-quick-access-card.adoc create mode 100644 modules/getting-started/proc-using-hosted-json-files-to-provide-data-to-the-quick-access-card.adoc diff --git a/assemblies/assembly-customizing-the-quick-access-card-in-rhdh.adoc b/assemblies/assembly-customizing-the-quick-access-card-in-rhdh.adoc new file mode 100644 index 0000000000..50a686fd9b --- /dev/null +++ b/assemblies/assembly-customizing-the-quick-access-card-in-rhdh.adoc @@ -0,0 +1,25 @@ +:_newdoc-version: 2.18.3 +:_template-generated: 2024-11-13 + +ifdef::context[:parent-context-of-customizing-the-quick-access-card-in-rhdh: {context}] + +:_mod-docs-content-type: ASSEMBLY + +ifndef::context[] +[id="customizing-the-quick-access-card-in-rhdh"] +endif::[] +ifdef::context[] +[id="customizing-the-quick-access-card-in-rhdh_{context}"] +endif::[] += Customizing the Quick access card in {product} + +To access the Home page in {product}, the base URL must include the `/developer-hub` proxy. You can configure the Home page by passing the data into the `app-config.yaml` file as a proxy. You can provide data to the Home page from the following sources: + +* JSON files hosted on GitHub or GitLab. +* A dedicated service that provides the Home page data in JSON format using an API. + +include::modules/getting-started/proc-using-hosted-json-files-to-provide-data-to-the-quick-access-card.adoc[leveloffset=+1] +include::modules/getting-started/proc-using-a-dedicated-service-to-provide-data-to-the-quick-access-card.adoc[leveloffset=+1] + + + diff --git a/assemblies/assembly-customizing-the-rhdh-homepage.adoc b/assemblies/assembly-customizing-the-rhdh-homepage.adoc new file mode 100644 index 0000000000..4a1c8e9c51 --- /dev/null +++ b/assemblies/assembly-customizing-the-rhdh-homepage.adoc @@ -0,0 +1,20 @@ +[id='proc-customize-rhdh-homepage_{context}'] += Customizing the Home page in {product} + +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 + +include::modules/getting-started/proc-customizing-the-home-page-cards.adoc[leveloffset=+1] +include::modules/getting-started/proc-defining-the-layout-of-the-product-home-page.adoc[leveloffset=+1] + diff --git a/modules/getting-started/proc-customize-rhdh-homepage.adoc b/modules/getting-started/proc-customize-rhdh-homepage.adoc deleted file mode 100644 index 8f1261f66b..0000000000 --- a/modules/getting-started/proc-customize-rhdh-homepage.adoc +++ /dev/null @@ -1,563 +0,0 @@ -[id='proc-customize-rhdh-homepage_{context}'] -= Customizing the Home page in {product} - -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 - -== 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: - -[source,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 } ----- - -=== Example card configurations for your Home page in {product} - -You can configure different cards for your Home page in {product}, as follows: - -Search:: -+ --- -[source,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 -|=== --- - -Quick access:: -+ --- -[source,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 -|=== --- - -Headline:: -+ --- -[source,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 -|=== --- - -Markdown:: -+ --- -[source,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) ----- --- - -Placeholder:: -+ --- -[source,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' ----- --- - -Catalog starred entities:: -+ --- -[source,yaml] ----- -dynamicPlugins: - frontend: - janus-idp.backstage-plugin-dynamic-home-page: - mountPoints: - - mountPoint: home.page/cards - importName: CatalogStarredEntitiesCard ----- --- - -Featured docs:: -+ --- -[source,yaml] ----- -dynamicPlugins: - frontend: - janus-idp.backstage-plugin-dynamic-home-page: - mountPoints: - - mountPoint: home.page/cards - importName: FeaturedDocsCard ----- --- - -=== Defining the layout of the {product} Home page - -To define the layout of your Home page, include the following optimal parameters in each of your breakpoints: - -* width (w) -* height (h) -* position (x and y) - -You can use the full space on smaller windows and half of the space on larger windows, as shown in the following example: - -[source,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 ----- - - -You can see a second card below this card by default. However, to show the cards side by side, you must define the `x` parameter, as shown in the following example: - -[source,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 ----- - - -You can also show the cards in three columns by defining the `x` parameter, as shown in the following example: - -[source,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 ----- - - -== Customizing the Quick access card in {product} - -To access the Home page in {product}, the base URL must include the `/developer-hub` proxy. You can configure the Home page by passing the data into the `app-config.yaml` file as a proxy. You can provide data to the Home page from the following sources: - -* JSON files hosted on GitHub or GitLab. -* A dedicated service that provides the Home page data in JSON format using an API. - -=== Using hosted JSON files to provide data to the Quick access card - -.Prerequisites - -You have installed {product} by using either the Operator or Helm chart. - -For more information, see xref:{installing-on-ocp-book-url}#assembly-install-rhdh-ocp[{installing-on-ocp-book-title}]. - -.Procedure - -To access the data from the JSON files, complete the following step: - -* Add the following code to the `app-config.yaml` file: -+ -[source,yaml] ----- -proxy: - endpoints: - # Other Proxies - # customize developer hub instance - '/developer-hub': - target: # i.e https://raw.githubusercontent.com/ - pathRewrite: - '^/api/proxy/developer-hub': # i.e /janus-idp/backstage-showcase/main/packages/app/public/homepage/data.json - changeOrigin: true - secure: true - # Change to "false" in case of using self hosted cluster with a self-signed certificate - headers: - : # optional and can be passed as needed i.e Authorization can be passed for private GitHub repo and PRIVATE-TOKEN can be passed for private GitLab repo ----- - -=== Using a dedicated service to provide data to the Quick access card - -When using a dedicated service, you can do the following: - -* Use the same service to provide the data to all configurable {product-short} pages or use a different service for each page. -* Use the https://github.com/redhat-developer/red-hat-developer-hub-customization-provider[`red-hat-developer-hub-customization-provider`] as an example service, which provides data for both the Home and Tech Radar pages. The `red-hat-developer-hub-customization-provider` service provides the same data as default {product-short} data. You can fork the `red-hat-developer-hub-customization-provider` service repository from GitHub and modify it with your own data, if required. -* Deploy the `red-hat-developer-hub-customization-provider` service and the {product-short} Helm chart on the same cluster. - -.Prerequisites - -* You have installed the {product} using Helm Chart. -For more information, see xref:{installing-on-ocp-book-url}#assembly-install-rhdh-ocp-helm[{installing-on-ocp-book-title} with the Helm chart]. - -.Procedure - -To use a separate service to provide the Home page data, complete the following steps: - -. From the *Developer* perspective in the {ocp-brand-name} web console, click *+Add* > *Import from Git*. -. Enter the URL of your Git repository into the *Git Repo URL* field. -+ --- -To use the `red-hat-developer-hub-customization-provider` service, add the URL for the https://github.com/redhat-developer/red-hat-developer-hub-customization-provider[red-hat-developer-hub-customization-provider] repository or your fork of the repository containing your customizations. --- - -. On the *General* tab, enter *red-hat-developer-hub-customization-provider* in the *Name* field and click *Create*. -. On the *Advanced Options* tab, copy the value from the *Target Port*. -+ -[NOTE] -==== -The *Target Port* automatically generates a Kubernetes or {ocp-short} service to communicate with. -==== -+ -. Add the following code to the `app-config-rhdh.yaml` file: -+ -[source,yaml] ----- -proxy: - endpoints: - # Other Proxies - # customize developer hub instance - '/developer-hub': - target: ${HOMEPAGE_DATA_URL} - changeOrigin: true - # Change to "false" in case of using self-hosted cluster with a self-signed certificate - secure: true ----- -where `HOMEPAGE_DATA_URL` is defined as `pass:c[http://:8080]`, for example, `pass:c[http://rhdh-customization-provider:8080]`. -+ -[NOTE] -==== -The `red-hat-developer-hub-customization-provider` service contains the 8080 port by default. If you are using a custom port, you can specify it with the 'PORT' environmental variable in the `app-config-rhdh.yaml` file. -==== -+ -. Replace the `HOMEPAGE_DATA_URL` by adding the URL to `rhdh-secrets` or by directly replacing it in your custom ConfigMap. -+ -. Delete the {product-short} pod to ensure that the new configurations are loaded correctly. - -.Verification -* To view the service, navigate to the *Administrator* perspective in the {ocp-short} web console and click *Networking* > *Service*. -+ -[NOTE] -==== -You can also view the *Service Resources* in the Topology view. -==== - -* Ensure that the provided API URL for the Home page returns the data in JSON format as shown in the following example: -+ -[source,json] ----- -[ - { - "title": "Dropdown 1", - "isExpanded": false, - "links": [ - { - "iconUrl": "https://imagehost.com/image.png", - "label": "Dropdown 1 Item 1", - "url": "https://example.com/" - }, - { - "iconUrl": "https://imagehost2.org/icon.png", - "label": "Dropdown 1 Item 2", - "url": "" - } - ] - }, - { - "title": "Dropdown 2", - "isExpanded": true, - "links": [ - { - "iconUrl": "http://imagehost3.edu/img.jpg", - "label": "Dropdown 2 Item 1", - "url": "http://example.com" - } - ] - } -] ----- -+ -[NOTE] -==== -If the request call fails or is not configured, the {product-short} instance falls back to the default local data. -==== - -* If the images or icons do not load, then allowlist them by adding your image or icon host URLs to the content security policy’s (csp) `img-src` in your custom ConfigMap as follows: - -[source,yaml] ----- -kind: ConfigMap -apiVersion: v1 -metadata: - name: app-config-rhdh -data: - app-config-rhdh.yaml: | - app: - title: Red Hat Developer Hub - backend: - csp: - connect-src: - - "'self'" - - 'http:' - - 'https:' - img-src: - - "'self'" - - 'data:' - - - - - - - # Other Configurations ----- diff --git a/modules/getting-started/proc-customizing-the-home-page-cards.adoc b/modules/getting-started/proc-customizing-the-home-page-cards.adoc new file mode 100644 index 0000000000..e28c976028 --- /dev/null +++ b/modules/getting-started/proc-customizing-the-home-page-cards.adoc @@ -0,0 +1,261 @@ +:_newdoc-version: 2.18.3 +:_template-generated: 2024-11-13 +:_mod-docs-content-type: PROCEDURE + +[id="customizing-the-home-page-cards_{context}"] += 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: + +[source,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 } +---- + +.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 {product} as follows: + +Search:: ++ +-- +[source,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 +|=== +-- + +Quick access:: ++ +-- +[source,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 +|=== +-- + +Headline:: ++ +-- +[source,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 +|=== +-- + +Markdown:: ++ +-- +[source,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) +---- +-- + +Placeholder:: ++ +-- +[source,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' +---- +-- + +Catalog starred entities:: ++ +-- +[source,yaml] +---- +dynamicPlugins: + frontend: + janus-idp.backstage-plugin-dynamic-home-page: + mountPoints: + - mountPoint: home.page/cards + importName: CatalogStarredEntitiesCard +---- +-- + +Featured docs:: ++ +-- +[source,yaml] +---- +dynamicPlugins: + frontend: + janus-idp.backstage-plugin-dynamic-home-page: + mountPoints: + - mountPoint: home.page/cards + importName: FeaturedDocsCard +---- +-- diff --git a/modules/getting-started/proc-defining-the-layout-of-the-product-home-page.adoc b/modules/getting-started/proc-defining-the-layout-of-the-product-home-page.adoc new file mode 100644 index 0000000000..080f769e0a --- /dev/null +++ b/modules/getting-started/proc-defining-the-layout-of-the-product-home-page.adoc @@ -0,0 +1,122 @@ +:_newdoc-version: 2.18.3 +:_template-generated: 2024-11-13 +:_mod-docs-content-type: PROCEDURE + +[id="defining-the-layout-of-the-product-home-page_{context}"] += Defining the layout of the {product} Home page + +.Prerequisites +* Include the following optimal parameters in each of your breakpoints: +** width (w) +** height (h) +** position (x and y) + +.Procedure +* Use the full space on smaller windows and half of the space on larger windows as follows: + +[source,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 +---- + +* Show the cards side by side by defining the `x` parameter as follows: + +[source,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 +---- +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: + +[source,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 +---- \ No newline at end of file diff --git a/modules/getting-started/proc-using-a-dedicated-service-to-provide-data-to-the-quick-access-card.adoc b/modules/getting-started/proc-using-a-dedicated-service-to-provide-data-to-the-quick-access-card.adoc new file mode 100644 index 0000000000..60348bd630 --- /dev/null +++ b/modules/getting-started/proc-using-a-dedicated-service-to-provide-data-to-the-quick-access-card.adoc @@ -0,0 +1,139 @@ +:_newdoc-version: 2.18.3 +:_template-generated: 2024-11-13 + +:_mod-docs-content-type: CONCEPT + +[id="using-a-dedicated-service-to-provide-data-to-the-quick-access-card_{context}"] += Using a dedicated service to provide data to the Quick access card + +When using a dedicated service, you can do the following: + +* Use the same service to provide the data to all configurable {product-short} pages or use a different service for each page. +* Use the https://github.com/redhat-developer/red-hat-developer-hub-customization-provider[`red-hat-developer-hub-customization-provider`] as an example service, which provides data for both the Home and Tech Radar pages. The `red-hat-developer-hub-customization-provider` service provides the same data as default {product-short} data. You can fork the `red-hat-developer-hub-customization-provider` service repository from GitHub and modify it with your own data, if required. +* Deploy the `red-hat-developer-hub-customization-provider` service and the {product-short} Helm chart on the same cluster. + +.Prerequisites + +* You have installed the {product} using Helm Chart. +For more information, see xref:{installing-on-ocp-book-url}#assembly-install-rhdh-ocp-helm[{installing-on-ocp-book-title} with the Helm chart]. + +.Procedure + +To use a separate service to provide the Home page data, complete the following steps: + +. From the *Developer* perspective in the {ocp-brand-name} web console, click *+Add* > *Import from Git*. +. Enter the URL of your Git repository into the *Git Repo URL* field. ++ +-- +To use the `red-hat-developer-hub-customization-provider` service, add the URL for the https://github.com/redhat-developer/red-hat-developer-hub-customization-provider[red-hat-developer-hub-customization-provider] repository or your fork of the repository containing your customizations. +-- + +. On the *General* tab, enter *red-hat-developer-hub-customization-provider* in the *Name* field and click *Create*. +. On the *Advanced Options* tab, copy the value from the *Target Port*. ++ +[NOTE] +==== +The *Target Port* automatically generates a Kubernetes or {ocp-short} service to communicate with. +==== ++ +. Add the following code to the `app-config-rhdh.yaml` file: ++ +[source,yaml] +---- +proxy: + endpoints: + # Other Proxies + # customize developer hub instance + '/developer-hub': + target: ${HOMEPAGE_DATA_URL} + changeOrigin: true + # Change to "false" in case of using self-hosted cluster with a self-signed certificate + secure: true +---- +where `HOMEPAGE_DATA_URL` is defined as `pass:c[http://:8080]`, for example, `pass:c[http://rhdh-customization-provider:8080]`. ++ +[NOTE] +==== +The `red-hat-developer-hub-customization-provider` service contains the 8080 port by default. If you are using a custom port, you can specify it with the 'PORT' environmental variable in the `app-config-rhdh.yaml` file. +==== ++ +. Replace the `HOMEPAGE_DATA_URL` by adding the URL to `rhdh-secrets` or by directly replacing it in your custom ConfigMap. ++ +. Delete the {product-short} pod to ensure that the new configurations are loaded correctly. + +.Verification +* To view the service, navigate to the *Administrator* perspective in the {ocp-short} web console and click *Networking* > *Service*. ++ +[NOTE] +==== +You can also view the *Service Resources* in the Topology view. +==== + +* Ensure that the provided API URL for the Home page returns the data in JSON format as shown in the following example: ++ +[source,json] +---- +[ + { + "title": "Dropdown 1", + "isExpanded": false, + "links": [ + { + "iconUrl": "https://imagehost.com/image.png", + "label": "Dropdown 1 Item 1", + "url": "https://example.com/" + }, + { + "iconUrl": "https://imagehost2.org/icon.png", + "label": "Dropdown 1 Item 2", + "url": "" + } + ] + }, + { + "title": "Dropdown 2", + "isExpanded": true, + "links": [ + { + "iconUrl": "http://imagehost3.edu/img.jpg", + "label": "Dropdown 2 Item 1", + "url": "http://example.com" + } + ] + } +] +---- ++ +[NOTE] +==== +If the request call fails or is not configured, the {product-short} instance falls back to the default local data. +==== + +* If the images or icons do not load, then allowlist them by adding your image or icon host URLs to the content security policy’s (csp) `img-src` in your custom ConfigMap as follows: + +[source,yaml] +---- +kind: ConfigMap +apiVersion: v1 +metadata: + name: app-config-rhdh +data: + app-config-rhdh.yaml: | + app: + title: Red Hat Developer Hub + backend: + csp: + connect-src: + - "'self'" + - 'http:' + - 'https:' + img-src: + - "'self'" + - 'data:' + - + - + - + # Other Configurations +---- + + diff --git a/modules/getting-started/proc-using-hosted-json-files-to-provide-data-to-the-quick-access-card.adoc b/modules/getting-started/proc-using-hosted-json-files-to-provide-data-to-the-quick-access-card.adoc new file mode 100644 index 0000000000..a014632a50 --- /dev/null +++ b/modules/getting-started/proc-using-hosted-json-files-to-provide-data-to-the-quick-access-card.adoc @@ -0,0 +1,35 @@ +:_newdoc-version: 2.18.3 +:_template-generated: 2024-11-13 + +:_mod-docs-content-type: CONCEPT + +[id="using-hosted-json-files-to-provide-data-to-the-quick-access-card_{context}"] += Using hosted JSON files to provide data to the Quick access card + +.Prerequisites + +* You have installed {product} by using either the Operator or Helm chart. +See xref:{installing-on-ocp-book-url}#assembly-install-rhdh-ocp[{installing-on-ocp-book-title}]. + +.Procedure + +To access the data from the JSON files: + +* Add the following code to the `app-config.yaml` file: ++ +[source,yaml] +---- +proxy: + endpoints: + # Other Proxies + # customize developer hub instance + '/developer-hub': + target: # i.e https://raw.githubusercontent.com/ + pathRewrite: + '^/api/proxy/developer-hub': # i.e /janus-idp/backstage-showcase/main/packages/app/public/homepage/data.json + changeOrigin: true + secure: true + # Change to "false" in case of using self hosted cluster with a self-signed certificate + headers: + : # optional and can be passed as needed i.e Authorization can be passed for private GitHub repo and PRIVATE-TOKEN can be passed for private GitLab repo +---- \ No newline at end of file diff --git a/titles/getting-started-rhdh/title-getting-started.adoc b/titles/getting-started-rhdh/title-getting-started.adoc index b583a77e42..7610d43792 100644 --- a/titles/getting-started-rhdh/title-getting-started.adoc +++ b/titles/getting-started-rhdh/title-getting-started.adoc @@ -22,7 +22,8 @@ include::assemblies/assembly-add-custom-app-file-openshift.adoc[leveloffset=+2] include::assemblies/assembly-bulk-importing-from-github.adoc[leveloffset=+1] -include::modules/getting-started/proc-customize-rhdh-homepage.adoc[leveloffset=+1] +include::assemblies/assembly-customizing-the-rhdh-homepage.adoc[leveloffset=+1] +include::assemblies/assembly-customizing-the-quick-access-card-in-rhdh.adoc[leveloffset=+1] include::modules/getting-started/proc-customize-rhdh-tech-radar-page.adoc[leveloffset=+1] include::modules/getting-started/proc-customize-rhdh-learning-paths.adoc[leveloffset=+1] From 4bc13f9136ea2cdf720e40081420d4c4eb6ca72c Mon Sep 17 00:00:00 2001 From: jmagak Date: Wed, 13 Nov 2024 17:12:29 +0100 Subject: [PATCH 12/12] Updates the customizing rhdh homepage --- ...mbly-customizing-the-quick-access-card-in-rhdh.adoc | 10 ---------- assemblies/assembly-customizing-the-rhdh-homepage.adoc | 3 +-- ...c-defining-the-layout-of-the-product-home-page.adoc | 5 +++-- ...files-to-provide-data-to-the-quick-access-card.adoc | 2 +- 4 files changed, 5 insertions(+), 15 deletions(-) diff --git a/assemblies/assembly-customizing-the-quick-access-card-in-rhdh.adoc b/assemblies/assembly-customizing-the-quick-access-card-in-rhdh.adoc index 50a686fd9b..b94046361b 100644 --- a/assemblies/assembly-customizing-the-quick-access-card-in-rhdh.adoc +++ b/assemblies/assembly-customizing-the-quick-access-card-in-rhdh.adoc @@ -1,16 +1,6 @@ -:_newdoc-version: 2.18.3 -:_template-generated: 2024-11-13 - -ifdef::context[:parent-context-of-customizing-the-quick-access-card-in-rhdh: {context}] - :_mod-docs-content-type: ASSEMBLY -ifndef::context[] [id="customizing-the-quick-access-card-in-rhdh"] -endif::[] -ifdef::context[] -[id="customizing-the-quick-access-card-in-rhdh_{context}"] -endif::[] = Customizing the Quick access card in {product} To access the Home page in {product}, the base URL must include the `/developer-hub` proxy. You can configure the Home page by passing the data into the `app-config.yaml` file as a proxy. You can provide data to the Home page from the following sources: diff --git a/assemblies/assembly-customizing-the-rhdh-homepage.adoc b/assemblies/assembly-customizing-the-rhdh-homepage.adoc index 4a1c8e9c51..9c760feec2 100644 --- a/assemblies/assembly-customizing-the-rhdh-homepage.adoc +++ b/assemblies/assembly-customizing-the-rhdh-homepage.adoc @@ -16,5 +16,4 @@ When using the `app-config`, you can do the following: ** Featured docs include::modules/getting-started/proc-customizing-the-home-page-cards.adoc[leveloffset=+1] -include::modules/getting-started/proc-defining-the-layout-of-the-product-home-page.adoc[leveloffset=+1] - +include::modules/getting-started/proc-defining-the-layout-of-the-product-home-page.adoc[leveloffset=+1] \ No newline at end of file diff --git a/modules/getting-started/proc-defining-the-layout-of-the-product-home-page.adoc b/modules/getting-started/proc-defining-the-layout-of-the-product-home-page.adoc index 080f769e0a..26592ef594 100644 --- a/modules/getting-started/proc-defining-the-layout-of-the-product-home-page.adoc +++ b/modules/getting-started/proc-defining-the-layout-of-the-product-home-page.adoc @@ -12,7 +12,8 @@ ** position (x and y) .Procedure -* Use the full space on smaller windows and half of the space on larger windows as follows: +* Configure your {product-short} `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: [source,yaml] ---- @@ -35,7 +36,7 @@ dynamicPlugins: debugContent: a placeholder ---- -* Show the cards side by side by defining the `x` parameter as follows: +** Show the cards side by side by defining the `x` parameter as follows: [source,yaml] ---- diff --git a/modules/getting-started/proc-using-hosted-json-files-to-provide-data-to-the-quick-access-card.adoc b/modules/getting-started/proc-using-hosted-json-files-to-provide-data-to-the-quick-access-card.adoc index a014632a50..5e05e9371d 100644 --- a/modules/getting-started/proc-using-hosted-json-files-to-provide-data-to-the-quick-access-card.adoc +++ b/modules/getting-started/proc-using-hosted-json-files-to-provide-data-to-the-quick-access-card.adoc @@ -13,7 +13,7 @@ See xref:{installing-on-ocp-book-url}#assembly-install-rhdh-ocp[{installing-on-o .Procedure -To access the data from the JSON files: +* To access the data from the JSON files, add the following code to the {product-short} `app-config.yaml` configuration file: * Add the following code to the `app-config.yaml` file: +