From e4ff4ebabd4240667561b4b71d2f8d31992a1b7d Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Thu, 6 Nov 2025 11:10:35 +0100 Subject: [PATCH 1/5] Update the QuickAccess card icons on the Homepage --- .../assembly-customizing-the-homepage.adoc | 5 +- ...ccess-card-icons-on-the-rhdh-homepage.adoc | 99 +++++++++++++++++++ 2 files changed, 103 insertions(+), 1 deletion(-) create mode 100644 modules/customizing-the-home-page/proc-customizing-quickaccess-card-icons-on-the-rhdh-homepage.adoc diff --git a/assemblies/assembly-customizing-the-homepage.adoc b/assemblies/assembly-customizing-the-homepage.adoc index 03d16867a3..38c759ec64 100644 --- a/assemblies/assembly-customizing-the-homepage.adoc +++ b/assemblies/assembly-customizing-the-homepage.adoc @@ -20,4 +20,7 @@ include::modules/customizing-the-home-page/proc-customizing-the-home-page-cards. include::modules/customizing-the-home-page/proc-defining-the-layout-of-the-product-home-page.adoc[leveloffset=+1] -include::modules/customizing-the-home-page/proc-customizing-the-home-page.adoc[leveloffset=+1] \ No newline at end of file +include::modules/customizing-the-home-page/proc-customizing-the-home-page.adoc[leveloffset=+1] + + +include::modules/customizing-the-home-page/proc-customizing-quickaccess-card-icons-on-the-rhdh-homepage.adoc[leveloffset=+1] \ No newline at end of file diff --git a/modules/customizing-the-home-page/proc-customizing-quickaccess-card-icons-on-the-rhdh-homepage.adoc b/modules/customizing-the-home-page/proc-customizing-quickaccess-card-icons-on-the-rhdh-homepage.adoc new file mode 100644 index 0000000000..1d6fbe4db7 --- /dev/null +++ b/modules/customizing-the-home-page/proc-customizing-quickaccess-card-icons-on-the-rhdh-homepage.adoc @@ -0,0 +1,99 @@ +:_mod-docs-content-type: PROCEDURE + +[id="customizing-quickaccess-card-icons-on-the-rhdh-homepage_{context}"] += Customizing QuickAccess card icons on the {product} homepage + +.Procedure + +. Add the JSON Data source. The QuickAccess Cards on the Homepage supports loading data from a JSON file. This JSON file can be hosted in your GitHub repository or any accessible endpoint. + +. Configure the Proxy in `{my-app-config-file}` ++ +To allow the Homepage to fetch data from the hosted JSON file, add the following proxy configuration to your `{my-app-config-file}`: + +[source,yaml] +---- +proxy: + endpoints: + # customize your backstage instance + '/developer-hub': + target: https://raw.githubusercontent.com/ # For example, https://raw.githubusercontent.com/ + pathRewrite: + '^/api/proxy/developer-hub$': .json # For example, /redhat-developer/rhdh/main/packages/app/public/homepage/data.json + changeOrigin: true + secure: true +---- + +The following table lists the supported icon types: + +[cols="25%,25%,50%", frame="all", options="header"] +|=== +|Icon type +|Example +|Rendered as + +|*Backstage System Icon* +|`"catalog"` +|Uses Backstage system [icons](https://github.com/backstage/backstage/blob/master/packages/app-defaults/src/defaults/icons.tsx) + +|*SVG String* +|`"..."` +|Renders inline SVG + +|*Image URL* +|`"https://example.com/icon.png"` +|Renders external image. External images might be be restricted to Content Security Policy (CSP) which can be configured in the `app-config.yaml`. + +|*Relative Path* +|`"/homepage/icons/icon.png"` +|Loads the icon from the app public folder (if present) +|=== + +[NOTE] +==== +SVGs must be valid strings when stored inside JSON (use single quotes inside ``) +==== + +The following is an example of a JSON file: + +[source,yaml] +---- +[ + { + "title": "Community", + "isExpanded": true, + "links": [ + { + "iconUrl": "https://img.icons8.com/ios/50/globe--v1.png", + "label": "Website", + "url": "https://developers.redhat.com/" + }, + { + "iconUrl": "https://img.icons8.com/ios/50/link--v1.png", + "label": "Blog", + "url": "https://developers.redhat.com/blog" + }, + { + "iconUrl": "github", + "label": "GitHub", + "url": "https://github.com/redhat-developer" + }, + { + "iconUrl": "https://img.icons8.com/color/48/slack.png", + "label": "Slack", + "url": "https://join.slack.com/xyz" + }, + { + "iconUrl": "https://img.icons8.com/color/48/youtube-squared.png", + "label": "Videos for developers", + "url": "https://developers.redhat.com/videos" + }, + { + "iconUrl": "", + "label": "Mailing List", + "url": "https://groups.google.com/g/xyz" + }, + ] +} +] +---- \ No newline at end of file From 6ae32bc437de72557390f959f98cb1453bbd5880 Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Thu, 6 Nov 2025 11:46:02 +0100 Subject: [PATCH 2/5] Minor fix --- ...stomizing-quickaccess-card-icons-on-the-rhdh-homepage.adoc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/customizing-the-home-page/proc-customizing-quickaccess-card-icons-on-the-rhdh-homepage.adoc b/modules/customizing-the-home-page/proc-customizing-quickaccess-card-icons-on-the-rhdh-homepage.adoc index 1d6fbe4db7..7ad8343f0d 100644 --- a/modules/customizing-the-home-page/proc-customizing-quickaccess-card-icons-on-the-rhdh-homepage.adoc +++ b/modules/customizing-the-home-page/proc-customizing-quickaccess-card-icons-on-the-rhdh-homepage.adoc @@ -5,11 +5,11 @@ .Procedure -. Add the JSON Data source. The QuickAccess Cards on the Homepage supports loading data from a JSON file. This JSON file can be hosted in your GitHub repository or any accessible endpoint. +. Add the JSON Data source. The QuickAccess Cards on the homepage supports loading data from a JSON file. This JSON file can be hosted in your GitHub repository or any accessible endpoint. . Configure the Proxy in `{my-app-config-file}` + -To allow the Homepage to fetch data from the hosted JSON file, add the following proxy configuration to your `{my-app-config-file}`: +To allow the homepage to fetch data from the hosted JSON file, add the following proxy configuration to your `{my-app-config-file}`: [source,yaml] ---- From 09325ae56ef0d8279e76f865bb03693e769b493c Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Thu, 6 Nov 2025 12:00:01 +0100 Subject: [PATCH 3/5] Minor fix --- ...customizing-quickaccess-card-icons-on-the-rhdh-homepage.adoc | 2 ++ 1 file changed, 2 insertions(+) diff --git a/modules/customizing-the-home-page/proc-customizing-quickaccess-card-icons-on-the-rhdh-homepage.adoc b/modules/customizing-the-home-page/proc-customizing-quickaccess-card-icons-on-the-rhdh-homepage.adoc index 7ad8343f0d..2c462198d3 100644 --- a/modules/customizing-the-home-page/proc-customizing-quickaccess-card-icons-on-the-rhdh-homepage.adoc +++ b/modules/customizing-the-home-page/proc-customizing-quickaccess-card-icons-on-the-rhdh-homepage.adoc @@ -3,6 +3,8 @@ [id="customizing-quickaccess-card-icons-on-the-rhdh-homepage_{context}"] = Customizing QuickAccess card icons on the {product} homepage +As an administrator, you can customize the QuickAccess card icons on the {product} homepage to enhance its visual appeal and user experience. You can integrate custom branding or standard icons by leveraging a remote JSON configuration file. + .Procedure . Add the JSON Data source. The QuickAccess Cards on the homepage supports loading data from a JSON file. This JSON file can be hosted in your GitHub repository or any accessible endpoint. From 926530286bd8eccdb14bb0e79e399b777618f6ad Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Thu, 6 Nov 2025 15:37:51 +0100 Subject: [PATCH 4/5] Apply suggestions --- ...uickaccess-card-icons-on-the-rhdh-homepage.adoc | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/modules/customizing-the-home-page/proc-customizing-quickaccess-card-icons-on-the-rhdh-homepage.adoc b/modules/customizing-the-home-page/proc-customizing-quickaccess-card-icons-on-the-rhdh-homepage.adoc index 2c462198d3..510e5108d7 100644 --- a/modules/customizing-the-home-page/proc-customizing-quickaccess-card-icons-on-the-rhdh-homepage.adoc +++ b/modules/customizing-the-home-page/proc-customizing-quickaccess-card-icons-on-the-rhdh-homepage.adoc @@ -9,10 +9,10 @@ As an administrator, you can customize the QuickAccess card icons on the {produc . Add the JSON Data source. The QuickAccess Cards on the homepage supports loading data from a JSON file. This JSON file can be hosted in your GitHub repository or any accessible endpoint. -. Configure the Proxy in `{my-app-config-file}` +. Configure the Proxy in your {product-very-short} `{my-app-config-file}` file. ++ +To allow the homepage to fetch data from the hosted JSON file, add the following proxy configuration to your {product-very-short} `{my-app-config-file}` file: + -To allow the homepage to fetch data from the hosted JSON file, add the following proxy configuration to your `{my-app-config-file}`: - [source,yaml] ---- proxy: @@ -34,9 +34,9 @@ The following table lists the supported icon types: |Example |Rendered as -|*Backstage System Icon* +|*{product-custom-resource-type} system icon* |`"catalog"` -|Uses Backstage system [icons](https://github.com/backstage/backstage/blob/master/packages/app-defaults/src/defaults/icons.tsx) +|Uses {product-custom-resource-type} system [icons](https://github.com/backstage/backstage/blob/master/packages/app-defaults/src/defaults/icons.tsx) |*SVG String* |`"..."` @@ -44,7 +44,7 @@ The following table lists the supported icon types: |*Image URL* |`"https://example.com/icon.png"` -|Renders external image. External images might be be restricted to Content Security Policy (CSP) which can be configured in the `app-config.yaml`. +||Renders external image. External images might be restricted to Content Security Policy (CSP) which can be configured in your {product-very-short} `{my-app-config-file}` file. |*Relative Path* |`"/homepage/icons/icon.png"` @@ -53,7 +53,7 @@ The following table lists the supported icon types: [NOTE] ==== -SVGs must be valid strings when stored inside JSON (use single quotes inside ``) +SVGs must be valid strings when stored inside JSON (use single quotes inside ``). ==== The following is an example of a JSON file: From 46fa7dbce9e549d31e0931dcb10aefde0ce873c2 Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Thu, 6 Nov 2025 15:50:59 +0100 Subject: [PATCH 5/5] Apply suggestions --- ...omizing-quickaccess-card-icons-on-the-rhdh-homepage.adoc | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/modules/customizing-the-home-page/proc-customizing-quickaccess-card-icons-on-the-rhdh-homepage.adoc b/modules/customizing-the-home-page/proc-customizing-quickaccess-card-icons-on-the-rhdh-homepage.adoc index 510e5108d7..22f8060f0f 100644 --- a/modules/customizing-the-home-page/proc-customizing-quickaccess-card-icons-on-the-rhdh-homepage.adoc +++ b/modules/customizing-the-home-page/proc-customizing-quickaccess-card-icons-on-the-rhdh-homepage.adoc @@ -1,13 +1,13 @@ :_mod-docs-content-type: PROCEDURE [id="customizing-quickaccess-card-icons-on-the-rhdh-homepage_{context}"] -= Customizing QuickAccess card icons on the {product} homepage += Customizing QuickAccessCard card icons on the {product} homepage -As an administrator, you can customize the QuickAccess card icons on the {product} homepage to enhance its visual appeal and user experience. You can integrate custom branding or standard icons by leveraging a remote JSON configuration file. +As an administrator, you can customize the *QuickAccessCard* card icons on the {product} homepage to enhance its visual appeal and user experience. You can integrate custom branding or standard icons by leveraging a remote JSON configuration file. .Procedure -. Add the JSON Data source. The QuickAccess Cards on the homepage supports loading data from a JSON file. This JSON file can be hosted in your GitHub repository or any accessible endpoint. +. Add the JSON Data source. The *QuickAccessCard* card on the homepage supports loading data from a JSON file. This JSON file can be hosted in your GitHub repository or any accessible endpoint. . Configure the Proxy in your {product-very-short} `{my-app-config-file}` file. +