Skip to content

Commit 0b7c758

Browse files
jmagakjmagak
authored
Rhidp 3835 home page document how users can customize the home page (#529)
* Modifies the customizing home page * Modifies the customizing home page * Modifies the customizing home page * Modify the customization home page * Modifies the Customizing Home Page * Modifies the Customizing Home Page * Modifies the customizing Home page * Modifies the customizing Home page * Modifies the customizing Home page * Modifies the customizing Home page * Updates the customizing rhdh homepage * Updates the customizing rhdh homepage
1 parent 11175b8 commit 0b7c758

7 files changed

+462
-39
lines changed

‎assemblies/assembly-customizing-the-quick-access-card-in-rhdh.adoc‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
:_mod-docs-content-type: ASSEMBLY
2+
3+
[id="customizing-the-quick-access-card-in-rhdh"]
4+
= Customizing the Quick access card in {product}
5+
6+
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:
7+
8+
* JSON files hosted on GitHub or GitLab.
9+
* A dedicated service that provides the Home page data in JSON format using an API.
10+
11+
include::modules/getting-started/proc-using-hosted-json-files-to-provide-data-to-the-quick-access-card.adoc[leveloffset=+1]
12+
include::modules/getting-started/proc-using-a-dedicated-service-to-provide-data-to-the-quick-access-card.adoc[leveloffset=+1]
13+
14+
15+

‎assemblies/assembly-customizing-the-rhdh-homepage.adoc‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
[id='proc-customize-rhdh-homepage_{context}']
2+
= Customizing the Home page in {product}
3+
4+
When using the `app-config`, you can do the following:
5+
6+
* Customize and extend the default Home page layout with additional cards that appear based on the plugins you have installed and enabled.
7+
* Change quick access links.
8+
* Add, reorganize, and remove the following available cards:
9+
+
10+
** Search bar
11+
** Quick access
12+
** Headline
13+
** Markdown
14+
** Placeholder
15+
** Catalog starred entities
16+
** Featured docs
17+
18+
include::modules/getting-started/proc-customizing-the-home-page-cards.adoc[leveloffset=+1]
19+
include::modules/getting-started/proc-defining-the-layout-of-the-product-home-page.adoc[leveloffset=+1]

‎modules/getting-started/proc-customizing-the-home-page-cards.adoc‎

Lines changed: 261 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,261 @@
1+
:_newdoc-version: 2.18.3
2+
:_template-generated: 2024-11-13
3+
:_mod-docs-content-type: PROCEDURE
4+
5+
[id="customizing-the-home-page-cards_{context}"]
6+
= Customizing the Home page cards
7+
8+
Administrators can change the fixed height of cards that are in a 12-column grid.
9+
10+
The default Home page is as shown in the following `app-config` file configuration:
11+
12+
[source,yaml]
13+
----
14+
dynamicPlugins:
15+
frontend:
16+
janus-idp.backstage-plugin-dynamic-home-page:
17+
dynamicRoutes:
18+
- path: /
19+
importName: DynamicHomePage
20+
mountPoints:
21+
- mountPoint: home.page/cards
22+
importName: SearchBar
23+
config:
24+
layouts:
25+
xl: { w: 10, h: 1, x: 1 }
26+
lg: { w: 10, h: 1, x: 1 }
27+
md: { w: 10, h: 1, x: 1 }
28+
sm: { w: 10, h: 1, x: 1 }
29+
xs: { w: 12, h: 1 }
30+
xxs: { w: 12, h: 1 }
31+
- mountPoint: home.page/cards
32+
importName: QuickAccessCard
33+
config:
34+
layouts:
35+
xl: { w: 7, h: 8 }
36+
lg: { w: 7, h: 8 }
37+
md: { w: 7, h: 8 }
38+
sm: { w: 12, h: 8 }
39+
xs: { w: 12, h: 8 }
40+
xxs: { w: 12, h: 8 }
41+
- mountPoint: home.page/cards
42+
importName: CatalogStarredEntitiesCard
43+
config:
44+
layouts:
45+
xl: { w: 5, h: 4, x: 7 }
46+
lg: { w: 5, h: 4, x: 7 }
47+
md: { w: 5, h: 4, x: 7 }
48+
sm: { w: 12, h: 4 }
49+
xs: { w: 12, h: 4 }
50+
xxs: { w: 12, h: 4 }
51+
----
52+
53+
.Prerequisites
54+
* You have administrative access and can modify the `app-config.yaml` file for dynamic plugin configurations.
55+
56+
.Procedure
57+
* Configure different cards for your Home page in {product} as follows:
58+
59+
Search::
60+
+
61+
--
62+
[source,yaml]
63+
----
64+
dynamicPlugins:
65+
frontend:
66+
janus-idp.backstage-plugin-dynamic-home-page:
67+
mountPoints:
68+
- mountPoint: home.page/cards
69+
importName: SearchBar
70+
config:
71+
layouts:
72+
xl: { w: 10, h: 1, x: 1 }
73+
lg: { w: 10, h: 1, x: 1 }
74+
md: { w: 10, h: 1, x: 1 }
75+
sm: { w: 10, h: 1, x: 1 }
76+
xs: { w: 12, h: 1 }
77+
xxs: { w: 12, h: 1 }
78+
----
79+
80+
.Available props
81+
|===
82+
| Prop | Default | Description
83+
84+
| `path`
85+
| `/search`
86+
| Override the linked search path if needed
87+
88+
| `queryParam`
89+
| `query`
90+
| Override the search query parameter name if needed
91+
|===
92+
--
93+
94+
Quick access::
95+
+
96+
--
97+
[source,yaml]
98+
----
99+
dynamicPlugins:
100+
frontend:
101+
janus-idp.backstage-plugin-dynamic-home-page:
102+
mountPoints:
103+
- mountPoint: home.page/cards
104+
importName: QuickAccessCard
105+
config:
106+
layouts:
107+
xl: { h: 8 }
108+
lg: { h: 8 }
109+
md: { h: 8 }
110+
sm: { h: 8 }
111+
xs: { h: 8 }
112+
xxs: { h: 8 }
113+
----
114+
115+
.Available props
116+
|===
117+
| Prop | Default | Description
118+
119+
| `title`
120+
| `Quick Access`
121+
| Override the linked search path if needed
122+
123+
| `path`
124+
| none
125+
| Override the search query parameter name if needed
126+
|===
127+
--
128+
129+
Headline::
130+
+
131+
--
132+
[source,yaml]
133+
----
134+
dynamicPlugins:
135+
frontend:
136+
janus-idp.backstage-plugin-dynamic-home-page:
137+
mountPoints:
138+
- mountPoint: home.page/cards
139+
importName: Headline
140+
config:
141+
layouts:
142+
xl: { h: 1 }
143+
lg: { h: 1 }
144+
md: { h: 1 }
145+
sm: { h: 1 }
146+
xs: { h: 1 }
147+
xxs: { h: 1 }
148+
props:
149+
title: Important info
150+
----
151+
152+
.Available props
153+
|===
154+
| Prop | Default | Description
155+
156+
| `title`
157+
| none
158+
| Title
159+
|===
160+
--
161+
162+
Markdown::
163+
+
164+
--
165+
[source,yaml]
166+
----
167+
dynamicPlugins:
168+
frontend:
169+
janus-idp.backstage-plugin-dynamic-home-page:
170+
mountPoints:
171+
- mountPoint: home.page/cards
172+
importName: MarkdownCard
173+
config:
174+
layouts:
175+
xl: { w: 6, h: 4 }
176+
lg: { w: 6, h: 4 }
177+
md: { w: 6, h: 4 }
178+
sm: { w: 6, h: 4 }
179+
xs: { w: 6, h: 4 }
180+
xxs: { w: 6, h: 4 }
181+
props:
182+
title: Company links
183+
content: |
184+
### RHDH
185+
* [Website](https://developers.redhat.com/rhdh/overview)
186+
* [Documentation](https://docs.redhat.com/en/documentation/red_hat_developer_hub/)
187+
* [GitHub Showcase](https://github.com/janus-idp/backstage-showcase)
188+
* [GitHub Plugins](https://github.com/janus-idp/backstage-plugins)
189+
- mountPoint: home.page/cards
190+
importName: Markdown
191+
config:
192+
layouts:
193+
xl: { w: 6, h: 4, x: 6 }
194+
lg: { w: 6, h: 4, x: 6 }
195+
md: { w: 6, h: 4, x: 6 }
196+
sm: { w: 6, h: 4, x: 6 }
197+
xs: { w: 6, h: 4, x: 6 }
198+
xxs: { w: 6, h: 4, x: 6 }
199+
props:
200+
title: Important company links
201+
content: |
202+
### RHDH
203+
* [Website](https://developers.redhat.com/rhdh/overview)
204+
* [Documentation](https://docs.redhat.com/en/documentation/red_hat_developer_hub/)
205+
* [GitHub Showcase](https://github.com/janus-idp/backstage-showcase)
206+
* [GitHub Plugins](https://github.com/janus-idp/backstage-plugins)
207+
----
208+
--
209+
210+
Placeholder::
211+
+
212+
--
213+
[source,yaml]
214+
----
215+
dynamicPlugins:
216+
frontend:
217+
janus-idp.backstage-plugin-dynamic-home-page:
218+
mountPoints:
219+
- mountPoint: home.page/cards
220+
importName: Placeholder
221+
config:
222+
layouts:
223+
xl: { w: 1, h: 1 }
224+
lg: { w: 1, h: 1 }
225+
md: { w: 1, h: 1 }
226+
sm: { w: 1, h: 1 }
227+
xs: { w: 1, h: 1 }
228+
xxs: { w: 1, h: 1 }
229+
props:
230+
showBorder: true
231+
debugContent: '1'
232+
----
233+
--
234+
235+
Catalog starred entities::
236+
+
237+
--
238+
[source,yaml]
239+
----
240+
dynamicPlugins:
241+
frontend:
242+
janus-idp.backstage-plugin-dynamic-home-page:
243+
mountPoints:
244+
- mountPoint: home.page/cards
245+
importName: CatalogStarredEntitiesCard
246+
----
247+
--
248+
249+
Featured docs::
250+
+
251+
--
252+
[source,yaml]
253+
----
254+
dynamicPlugins:
255+
frontend:
256+
janus-idp.backstage-plugin-dynamic-home-page:
257+
mountPoints:
258+
- mountPoint: home.page/cards
259+
importName: FeaturedDocsCard
260+
----
261+
--

0 commit comments

Comments
 (0)