<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="/theme.css"> <title>Interverse</title> <script src="//unpkg.com/alpinejs" defer></script> <! consider hosting on your site> <script src="/helper.js"></script> </head> <body> <div class="interverse" x-data x-if="Alpine.store('data')"> <div id="interverse-details"> <img x-bind:src="Alpine.store('data')['image']"> <h1 x-text="Alpine.store('data')['name']"></h1> </div> <h2>Content:</h2> <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> </div> <div id="interverse-groups"> <template x-for="(group,name) in Alpine.store('data')['connection_groups']"> <div> <h3 x-text="name"></h3> <div class="interverse-group"> <template x-for="link in group"> <div class="interverse-connection" x-data="{connected:false"> <template x-if="Alpine.store(link)['name'] !=''"> <div class='interverse-connection-preview' x-on:click="initialize(link+'/.well-known/interverse')"> <h3 x-text="Alpine.store(link)['name']"></h3> <img x-bind:src="Alpine.store(link)['image']"> <a x-bind:href="link" x-text="link"></a> </div> </template> <template x-if="Alpine.store(link) == undefined"> <div> <a x-bind:href="link" x-text="link"> </a> </div> </template> </div> </template> </div> </div> </template> </div> <h2>Links</h2> <div id="interverse-connections"> <template x-for="connection in Alpine.store('data')['connections']"> <div class="interverse-connection" > <template x-if="Alpine.store(connection)['version'] >=0"> <div x-on:click="initialize(connection+'/.well-known/interverse')"> <h3 x-text="Alpine.store(connection)['name']"></h3> <template x-if="Alpine.store(connection)['image']!=''"> <img x-bind:src="Alpine.store(connection)['image']"> </template> </div> </template> <template x-if="name == ''"> <a x-bind:href="connection" x-text="connection"></a> </template> </div>> </template> </div> <div id="interverse-contact"> <template x-for="contact in Alpine.store('data')['contact']"> <div class="interverse-contact"> </div> </template> </div> </div> <script> var main_url="/.well-known/interverse"; if (getUrlParameter('s') && getUrlParameter("url")){ var uri = ""; main_url=getUrlParameter('s')+"://"+getUrlParameter("url")+'/.well-known/interverse'; } else{ if (getUrlParameter('url')){ main_url = "https://" + getUrlParameter('url')+'/.well-known/interverse'; } } document.addEventListener('alpine:init',function(){ initialize(main_url); }); function initialize(url){ Alpine.store("data",{}); fetchdata(url,function(e){ data = JSON.parse(e.target.response); raw_data = JSON.parse(e.target.response); Alpine.store("data",data); var connections = raw_data['connections']; for (group in data['connection_groups']){ for (link in data['connection_groups'][group]){ connections.push(data['connection_groups'][group][link]); } } for (var i =0; i<connections.length; i++){ fetchdata(connections[i]+'/.well-known/interverse',function(e){ try{ dat = JSON.parse(e.target.response); console.log(dat); Alpine.store(dat['location'],dat); } catch{ console.log("Failed to parse connection JSON"); } }); } }); } </script> </body> </html>