connection_groups supported

Client/.well-known/interverse

@@ -3,12 +3,21 @@
     "name": "My website",
     "image": "",
     "location": "https://my.website",
-    "resources": [{
-        "label": "RSS Feed",
-        "icon": "",
-        "location": "https://my.website.com/rss.xml",
-        "description": "<img src='example.com'>"
-    }],
+    "resource_groups": {
+        "Links": [{
+            "label": "RSS Feed",
+            "icon": "",
+            "location": "https://my.website.com/rss.xml",
+            "description": ""
+        }],
+        "Website content": [{
+            "label": "Articles",
+            "icon": "https://libresolutions.network/logo.png",
+            "location": "https:libresolutions.network/articles/",
+            "description": ""
+        }]
+    },
+    "resources": [],
     "connection_groups": {
         "Group1": [
             "https://libresolutions.network"

Client/index.html

@@ -23,18 +23,38 @@
                 </template>
             </div>
         </div>
-        <div id="interverse-resources">
-            <template x-for="resource in Alpine.store('data')['resources']">
+        <section id="interverse-resource-groups">
+            <template x-for="(group,name) in Alpine.store('data')['resource_groups']">
+                <div>
+                    <h1 x-text="name"></h1>
+                    <section class="interverse-group">
+                        <template x-for="resource in group">
+                            <a x-bind:href="resource['location']">
+                                <div class="interverse-resource">
+                                    <template x-if="resource['icon'] !=''">
+                                        <img class="interverse-resource-icon" x-bind:src="resource['icon']">
+                                        </template>
+            <h2 x-text="resource['label']"></h2>
+            <p x-text="resource['description']"></p>
+    </div>
+    </a>
+    </template>
+    </section>
+    </div>
+    </template>
+    </section>
+    <div id="interverse-resources">
+        <template x-for="resource in Alpine.store('data')['resources']">
                 <a x-bind:href="resource['location']">
                 <div class="interverse-resource">
                     <template x-if="resource['icon'] !=''">
                         <img class="interverse-resource-icon" x-bind:src="resource['icon']">
                     </template>
-            <h2 x-text="resource['label']"></h2>
-            <p x-text="resource['description']"></p>
-        </div>
-        </a>
-        </template>
+        <h2 x-text="resource['label']"></h2>
+        <p x-text="resource['description']"></p>
+    </div>
+    </a>
+    </template>
     </div>
     <div id="interverse-groups">
         <template x-for="(group,name) in Alpine.store('data')['connection_groups']">