diff --git a/docs/customization.md b/docs/customization.md index c7f864f081..534c1eaf90 100644 --- a/docs/customization.md +++ b/docs/customization.md @@ -400,3 +400,81 @@ When users change the language in the UI: 1. Change language using any language selector in the UI 2. Language setting will automatically be saved and restored + +## Customizing QuickAccess card icons on the Homepage + +1. Add the JSON Data source + +The QuickAccess Cards on the Homepage supports loading data from a JSON file. This JSON file in your GitHub repository or any accessible endpoint can be hosted. + +2. Configure the Proxy in `app-config.yaml` + +To allow Homepage to fetch data from the hosted JSON file, add the following proxy configuration to your `app-config.yaml`: + +``` +proxy: + endpoints: + # customize your backstage instance + '/developer-hub': + target: https://raw.githubusercontent.com/ # i.e https://raw.githubusercontent.com/ + pathRewrite: + '^/api/proxy/developer-hub$': .json # i.e /redhat-developer/rhdh/main/packages/app/public/homepage/data.json + changeOrigin: true + secure: true +``` + +3. Supported Icon types + +| 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’s public folder (if present) | + +**Note:** + +SVGs must be valid strings when stored inside JSON (use single quotes inside ). + +Example JSON file: + +``` + [ + { + "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" + }, + ] + } + ] +```