RHIDP-9035: Update the QuickAccess card icons on the Homepage (#1513)

* Update the QuickAccess card icons on the Homepage

* Minor fix

* Minor fix

* Apply suggestions

* Apply suggestions

---------

Co-authored-by: GitHub Actions <[email protected]>

Author: jmagak

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]
+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]

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$': <path-to-your>.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*
+|`"<svg>...</svg>"`
+|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 `<svg>`).
+====
+
+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": "<svg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='2048' height='2048' style='shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:optimizeQuality;fill-rule:evenodd;clip-rule:evenodd'><defs><style>.fil0{fill:none}.fil4{fill:#bdbdbd;fill-rule:nonzero}</style></defs><g id='Layer_x0020_1'><path class='fil0' d='M0 0h2048v2048H0z'/><path class='fil0' d='M255.999 255.999h1536v1536h-1536z'/><path class='fil0' d='M256 256h1536v1536H256z'/><g id='_342647616'><path id='_342648000' style='fill:#e53935;fill-rule:nonzero' d='m273.04 666.226 737.28-367.843 13.68-6.824 13.68 6.824 737.28 367.843 17.04 8.503v234.834L993.281 1418.52 255.999 909.563V674.729z'/><path id='_342647880' style='fill:#fff' d='M609.28 711.961h829.439V1541.4H609.28z'/><path id='_342647808' style='fill:#c62828;fill-rule:nonzero' d='m1024 1279.73 723.6-361.079 44.4-22.156v859.945H255.999V896.495l44.402 22.156z'/><path id='_342647736' class='fil4' d='M1331.2 896.285H716.716v-61.442H1331.2z'/><path id='_342647688' class='fil4' d='M1203.22 1049.88H844.698v-61.439h358.522z'/></g></g></svg>",
+ "label": "Mailing List",
+ "url": "https://groups.google.com/g/xyz"
+ },
+ ]
+}
+]
+----