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..22f8060f0f --- /dev/null +++ b/modules/customizing-the-home-page/proc-customizing-quickaccess-card-icons-on-the-rhdh-homepage.adoc @@ -0,0 +1,101 @@ +:_mod-docs-content-type: PROCEDURE + +[id="customizing-quickaccess-card-icons-on-the-rhdh-homepage_{context}"] += Customizing QuickAccessCard card icons on the {product} homepage + +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 *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. ++ +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: ++ +[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 + +|*{product-custom-resource-type} system icon* +|`"catalog"` +|Uses {product-custom-resource-type} 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 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"` +|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