Rhidp 3835 home page document how users can customize the home page

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

@@ -0,0 +1,25 @@
+:_newdoc-version: 2.18.3
+:_template-generated: 2024-11-13
+
+ifdef::context[:parent-context-of-customizing-the-quick-access-card-in-rhdh: {context}]
+
+:_mod-docs-content-type: ASSEMBLY
+
+ifndef::context[]
+[id="customizing-the-quick-access-card-in-rhdh"]
+endif::[]
+ifdef::context[]
+[id="customizing-the-quick-access-card-in-rhdh_{context}"]
+endif::[]
+= Customizing the Quick access card in {product}
+
+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:
+
+* JSON files hosted on GitHub or GitLab.
+* A dedicated service that provides the Home page data in JSON format using an API.
+
+include::modules/getting-started/proc-using-hosted-json-files-to-provide-data-to-the-quick-access-card.adoc[leveloffset=+1]
+include::modules/getting-started/proc-using-a-dedicated-service-to-provide-data-to-the-quick-access-card.adoc[leveloffset=+1]
+
+
+

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

@@ -0,0 +1,20 @@
+[id='proc-customize-rhdh-homepage_{context}']
+= Customizing the Home page in {product}
+
+When using the `app-config`, you can do the following:
+
+* Customize and extend the default Home page layout with additional cards that appear based on the plugins you have installed and enabled.
+* Change quick access links.
+* Add, reorganize, and remove the following available cards:
++
+** Search bar
+** Quick access
+** Headline
+** Markdown
+** Placeholder
+** Catalog starred entities
+** Featured docs
+
+include::modules/getting-started/proc-customizing-the-home-page-cards.adoc[leveloffset=+1]
+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

@@ -0,0 +1,261 @@
+:_newdoc-version: 2.18.3
+:_template-generated: 2024-11-13
+:_mod-docs-content-type: PROCEDURE
+
+[id="customizing-the-home-page-cards_{context}"]
+= Customizing the Home page cards
+
+Administrators can change the fixed height of cards that are in a 12-column grid.
+
+The default Home page is as shown in the following `app-config` file configuration:
+
+[source,yaml]
+----
+dynamicPlugins:
+  frontend:
+    janus-idp.backstage-plugin-dynamic-home-page:
+      dynamicRoutes:
+        - path: /
+          importName: DynamicHomePage
+      mountPoints:
+        - mountPoint: home.page/cards
+          importName: SearchBar
+          config:
+            layouts:
+              xl: { w: 10, h: 1, x: 1 }
+              lg: { w: 10, h: 1, x: 1 }
+              md: { w: 10, h: 1, x: 1 }
+              sm: { w: 10, h: 1, x: 1 }
+              xs: { w: 12, h: 1 }
+              xxs: { w: 12, h: 1 }
+        - mountPoint: home.page/cards
+          importName: QuickAccessCard
+          config:
+            layouts:
+              xl: { w: 7, h: 8 }
+              lg: { w: 7, h: 8 }
+              md: { w: 7, h: 8 }
+              sm: { w: 12, h: 8 }
+              xs: { w: 12, h: 8 }
+              xxs: { w: 12, h: 8 }
+        - mountPoint: home.page/cards
+          importName: CatalogStarredEntitiesCard
+          config:
+            layouts:
+              xl: { w: 5, h: 4, x: 7 }
+              lg: { w: 5, h: 4, x: 7 }
+              md: { w: 5, h: 4, x: 7 }
+              sm: { w: 12, h: 4 }
+              xs: { w: 12, h: 4 }
+              xxs: { w: 12, h: 4 }
+----
+
+.Prerequisites
+* You have administrative access and can modify the `app-config.yaml` file for dynamic plugin configurations.
+
+.Procedure
+* Configure different cards for your Home page in {product} as follows:
+
+Search::
++
+--
+[source,yaml]
+----
+dynamicPlugins:
+  frontend:
+    janus-idp.backstage-plugin-dynamic-home-page:
+      mountPoints:
+        - mountPoint: home.page/cards
+          importName: SearchBar
+          config:
+            layouts:
+              xl: { w: 10, h: 1, x: 1 }
+              lg: { w: 10, h: 1, x: 1 }
+              md: { w: 10, h: 1, x: 1 }
+              sm: { w: 10, h: 1, x: 1 }
+              xs: { w: 12, h: 1 }
+              xxs: { w: 12, h: 1 }
+----
+
+.Available props
+|===
+| Prop | Default | Description
+
+| `path`
+| `/search`
+| Override the linked search path if needed
+
+| `queryParam`
+| `query`
+| Override the search query parameter name if needed
+|===
+--
+
+Quick access::
++
+--
+[source,yaml]
+----
+dynamicPlugins:
+  frontend:
+    janus-idp.backstage-plugin-dynamic-home-page:
+      mountPoints:
+        - mountPoint: home.page/cards
+          importName: QuickAccessCard
+          config:
+            layouts:
+              xl: { h: 8 }
+              lg: { h: 8 }
+              md: { h: 8 }
+              sm: { h: 8 }
+              xs: { h: 8 }
+              xxs: { h: 8 }
+----
+
+.Available props
+|===
+| Prop | Default | Description
+
+| `title`
+| `Quick Access`
+| Override the linked search path if needed
+
+| `path`
+| none
+| Override the search query parameter name if needed
+|===
+--
+
+Headline::
++
+--
+[source,yaml]
+----
+dynamicPlugins:
+  frontend:
+    janus-idp.backstage-plugin-dynamic-home-page:
+      mountPoints:
+        - mountPoint: home.page/cards
+          importName: Headline
+          config:
+            layouts:
+              xl: { h: 1 }
+              lg: { h: 1 }
+              md: { h: 1 }
+              sm: { h: 1 }
+              xs: { h: 1 }
+              xxs: { h: 1 }
+            props:
+              title: Important info
+----
+
+.Available props
+|===
+| Prop | Default | Description
+
+| `title`
+| none
+| Title
+|===
+--
+
+Markdown::
++
+--
+[source,yaml]
+----
+dynamicPlugins:
+  frontend:
+    janus-idp.backstage-plugin-dynamic-home-page:
+      mountPoints:
+        - mountPoint: home.page/cards
+          importName: MarkdownCard
+          config:
+            layouts:
+              xl: { w: 6, h: 4 }
+              lg: { w: 6, h: 4 }
+              md: { w: 6, h: 4 }
+              sm: { w: 6, h: 4 }
+              xs: { w: 6, h: 4 }
+              xxs: { w: 6, h: 4 }
+            props:
+              title: Company links
+              content: |
+                ### RHDH
+                * [Website](https://developers.redhat.com/rhdh/overview)
+                * [Documentation](https://docs.redhat.com/en/documentation/red_hat_developer_hub/)
+                * [GitHub Showcase](https://github.com/janus-idp/backstage-showcase)
+                * [GitHub Plugins](https://github.com/janus-idp/backstage-plugins)
+        - mountPoint: home.page/cards
+          importName: Markdown
+          config:
+            layouts:
+              xl: { w: 6, h: 4, x: 6 }
+              lg: { w: 6, h: 4, x: 6 }
+              md: { w: 6, h: 4, x: 6 }
+              sm: { w: 6, h: 4, x: 6 }
+              xs: { w: 6, h: 4, x: 6 }
+              xxs: { w: 6, h: 4, x: 6 }
+            props:
+              title: Important company links
+              content: |
+                ### RHDH
+                * [Website](https://developers.redhat.com/rhdh/overview)
+                * [Documentation](https://docs.redhat.com/en/documentation/red_hat_developer_hub/)
+                * [GitHub Showcase](https://github.com/janus-idp/backstage-showcase)
+                * [GitHub Plugins](https://github.com/janus-idp/backstage-plugins)
+----
+--
+
+Placeholder::
++
+--
+[source,yaml]
+----
+dynamicPlugins:
+  frontend:
+    janus-idp.backstage-plugin-dynamic-home-page:
+      mountPoints:
+        - mountPoint: home.page/cards
+          importName: Placeholder
+          config:
+            layouts:
+              xl: { w: 1, h: 1 }
+              lg: { w: 1, h: 1 }
+              md: { w: 1, h: 1 }
+              sm: { w: 1, h: 1 }
+              xs: { w: 1, h: 1 }
+              xxs: { w: 1, h: 1 }
+            props:
+              showBorder: true
+              debugContent: '1'
+----
+--
+
+Catalog starred entities::
++
+--
+[source,yaml]
+----
+dynamicPlugins:
+  frontend:
+    janus-idp.backstage-plugin-dynamic-home-page:
+      mountPoints:
+        - mountPoint: home.page/cards
+          importName: CatalogStarredEntitiesCard
+----
+--
+
+Featured docs::
++
+--
+[source,yaml]
+----
+dynamicPlugins:
+  frontend:
+    janus-idp.backstage-plugin-dynamic-home-page:
+      mountPoints:
+        - mountPoint: home.page/cards
+          importName: FeaturedDocsCard
+----
+--