Modifies the customizing Home page

Author: jmagak

modules/getting-started/proc-customize-rhdh-homepage.adoc

@@ -10,9 +10,19 @@ To access the Home page in {product}, the base URL must include the `/developer-
 
 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. 
-* Add, reorganize, and remove the cards. 
 * Change quick access links.  
+* Add, reorganize, and remove the following available cards:
++
+* Search bar
+* Quick access
+* Headline
+* Markdown
+* Placeholder
+* Catalog starred entities
+* Featured docs
+
 
 .Prerequisites
 
@@ -68,6 +78,204 @@ dynamicPlugins:
               xxs: { w: 12, h: 4 }
 ----
 
+=== Example card configurations for your Home page in {product}
+
+You can 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: 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 }
+----
+--
+
+Placeholder::
++
+--
+[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 }
+----
+--
+
+Catalog starred entities::
++
+--
+[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 }
+----
+--
+
+Featured docs::
++
+--
+[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 }
+----
+--
+
 === Defining the layout of the {product} Home page
 
 To define the layout of your Home page, include the following optimal parameters in each of your breakpoints: