Merge README of PR #81 into Wiki

Home.md

@@ -2,83 +2,110 @@
 
 ## Prerequisites
 
-You need to install these cards before using this strategy:
+Mushroom dashboard strategy and dependencies are available in [HACS][hacsUrl] (Home Assistant Community Store).  
+Install HACS if you don't have it already.
+For assistance, you can follow the [HACS Installation Guide](https://hacs.xyz/docs/setup/prerequisites).
+
+You need to install the following HACS integrations before you can use this strategy.  
+Open the links below and follow the installation instructions or use the badges to open the HACS repository at your Home
+Assistant instance directly.
 
 - [Mushroom cards][mushroomUrl]
-- [Mini graph card][mini-graphUrl]
 
-## HACs
+  [![Open in HACS at your Home Assistant instance.][hacsBadge]][hacsMushroomUrl]
 
-Mushroom dashboard strategy is available in [HACs][hacsUrl] (Home Assistant Community Store).
+- [Mini graph card][miniGraphUrl]
 
-1. Install HACs if you don't have it already.
-2. Open HACs in Home Assistant.
-3. Go to the "Frontend" section.
-4. Click the button with the "+" icon
-5. Search for "Mushroom dashboard" and install.
+  [![Open in HACS at your Home Assistant instance.][hacsBadge]][hacsMiniGraphUrl]
+
+## HACS
+
+Click the badge below.
+
+[![Open in HACS at your Home Assistant instance.][hacsBadge]][hacsStrategyUrl]
+
+or ...
+
+1. Open HACS in Home Assistant.
+2. Go to the "Frontend" section.
+3. Click the button with the `+` icon.
+4. Search for "Mushroom dashboard" and install.
 
 ## Manual
-
 1. Download `mushroom-strategy.js` file from
    the [`dist`](https://github.com/AalianKhan/mushroom-strategy/tree/main/dist) directory.
-2. Put `mushroom-strategy.js` file into your `config/www` folder.
+
+2. Save this file into your `config/www` folder.
+
 3. Add a reference to `mushroom-strategy.js` in Dashboard.
    There are two ways to do that:
-    - **Using UI:** _Settings_ → _Dashboards_ → _More Options icon_ → _Resources_ → _Add Resource_ → Set _Url_
-      as `/local/mushroom-strategy.js` → Set _Resource type_ as `JavaScript Module`.
-      **Note:** If you do not see the Resources menu, you will need to enable _Advanced Mode_ in your _User Profile_
-    - **Using YAML:** Add the following code to the `lovelace` section.
+
+>[!NOTE]
+>If you do not see the Resources menu, you will need to enable _Advanced Mode_ in your _User Profile_.
+
+   1. **Using UI:**: Click the badge...
+      
+      [![Open your Home Assistant instance and show your dashboard resources.][resourcesBadge]][resourcesUrl   ]
+
+      or...
+
+      - Go to _Settings_ → _Dashboards_ → _More Options icon_ → _Resources_ → _Add Resource_ → Set _Url_
+        to `/local/mushroom-strategy.js` → Set _Resource type_ to `JavaScript Module`.
+
+   2. **Using YAML:** Add the following code to the `lovelace` section.
       ```yaml
       resources:
         - url: /local/mushroom-strategy.js
           type: module
       ```
+
 # Basic Setup
+
 To add Mushroom Strategy to a dashboard: 
 
 1. In the UI of the dashboard, click the three dots in the top right corner.
 2. Click _Edit Dashboard_.
-3. Click 3 dots again
-4. Click `Raw configuration editor`
+3. Click 3 dots again.
+4. Click `Raw configuration editor`.
 5. Add the following lines:
-
-```yaml
-strategy:
+   ```yaml
+   strategy:
      type: custom:mushroom-strategy
-views: []
-```
+   views: []
+   ```
+
+>[!NOTE]
+>You may see the following error:
 
-> [!NOTE]
-> You may see the following error
 ```
-Error loading the dashboard strategy:
+ Error loading the dashboard strategy:
      Error: Timeout waiting for strategy
      element ||-strategy-mushroom-strategy to
      be registered
 ```
-This is mainly because of cache or HACs didn't create a reference.
-Try clearing the cache on your browser and redownloading from HACs.
 
-If it still doesn't work, you will have to add a reference to 
-mushroom-strategy.js in the Dashboard. There are two ways to do that:
+This is mainly because of cache or HACS didn't create a reference.
+Try clearing the cache on your browser and re-downloading from HACS.
 
-- Using UI:
-  Settings → Dashboards → More Options icon (3 dots) → Resources → Add Resource → 
-  Set Url to `/hacsfiles/mushroom-strategy/mushroom-strategy.js`
-  Set Resourcetype to `JavaScript-module`.
+If it still doesn't work, please consult guide
+[How to solve: Error loading the dashboard strategy](https://github.com/AalianKhan/mushroom-strategy/discussions/90).
 
-  Note: If you do not see the Resources menu, you will need to enable Advanced Mode in your User Profile
+<!-- References -->
 
-- Using YAML:
-  Add following code to lovelace section.
-```yaml
-    resources:
-        - url: /hacsfiles/mushroom-strategy/mushroom-strategy.js
-          type: module
-```
+[hacsUrl]: https://hacs.xyz
 
-Use `/local/mushroom-strategy.js` as url if you followed the manual installation instructions.
+[hacsBadge]: https://my.home-assistant.io/badges/hacs_repository.svg
+
+[resourcesBadge]: https://my.home-assistant.io/badges/lovelace_resources.svg
+
+[resourcesUrl]: https://my.home-assistant.io/redirect/lovelace_resources
 
 [mushroomUrl]: https://github.com/piitaya/lovelace-mushroom
-[mini-graphUrl]: https://github.com/kalkih/mini-graph-card
-[hacsUrl]: https://hacs.xyz
+
+[hacsMushroomUrl]: https://my.home-assistant.io/redirect/hacs_repository/?owner=piitaya&repository=lovelace-mushroom&category=frontend
+
+[miniGraphUrl]: https://github.com/kalkih/mini-graph-card
+
+[hacsMiniGraphUrl]: https://my.home-assistant.io/redirect/hacs_repository/?owner=kalkih&repository=mini-graph-card&category=frontend
+
+[hacsStrategyUrl]: https://my.home-assistant.io/redirect/hacs_repository/?owner=AalianKhan&repository=mushroom-strategy&category=frontend