<style> .interverse{ display: flex; flex-direction: column; align-items: center; max-width: 90vw; } #interverse-details{ display: flex; flex-direction: row; align-items: center; } #interverse-details>*{ margin:1rem; } #interverse-details img{ max-width:20vw; max-height:50vh; } #interverse-resource-groups{ display: flex; flex-direction: row; flex-wrap: wrap; max-width: 100%; justify-content: center; } #interverse-resource-groups>*{ margin:1rem; } #interverse-groups h3{ text-align: center; font-size:2rem; } #interverse-resource-groups img{ max-height:5rem; max-width: 5rem; } #interverse-resources{ display: flex; flex-direction: row; max-width: 100%; justify-content: center; } #interverse-resources>*{ margin:1rem; } #interverse-resources img{ max-height:5rem; max-width: 5rem; } #interverse-groups{ display: flex; flex-direction: column; align-items: center; } .interverse-connection-group{ display:flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } #interverse-connections{ display: flex; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; } #interverse-connections>*{ margin:5px; } @keyframes glow{ from {box-shadow: 0rem 0rem 0.25rem transparent;} to {box-shadow: 0rem 0rem 1.5rem rgb(7, 129, 229);} } .interverse-connection-preview{ animation: glow 2s alternate; animation-iteration-count: infinite; border-radius:1.5rem; } .interverse-connection-preview,.interverse-connection{ display:flex; flex-direction: column; align-items: center; margin:1rem; } .interverse-connection-preview>*{ margin:1rem; } a{ font-weight: bolder; } .interverse-connection-preview img{ max-height:15rem; max-width: 15rem; } </style> <script src="https://unpkg.com/alpinejs" defer></script> <script> function fetchback(url,cback){ fetch(url).then((request)=>request.json()).then((data)=>cback(data)); } function interverse_data(url,cback){ url = interverse_proxy+"/initial?url="+url fetch(url).then((response)=> { if (!response.ok){ return {} } return response.json(); }).then((data)=>cback(data)) } // https://davidwalsh.name/query-string-javascript function getUrlParameter(name) { name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]'); var regex = new RegExp('[\\?&]' + name + '=([^&#]*)'); var results = regex.exec(location.search); return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' ')); }; </script> <div class="interverse" x-data x-if="Alpine.store('data')"> <section id="interverse-details"> <img x-bind:src="Alpine.store('data')['image']"> <div id="interverse-contact"> <h1 x-text="Alpine.store('data')['name']"></h1> <a x-bind:href="Alpine.store('data')['location']" x-text="Alpine.store('data')['location']"></a> <template x-for="key in Object.keys(Alpine.store('data')['contact'])"> <p> <strong x-text="key"></strong> <span x-text="Alpine.store('data')['contact'][key]"></span> </p> </template> </div> </section> <section id="interverse-resource-groups"> <template x-for="(group,name) in Alpine.store('data')['resource_groups']"> <div class="interverse-resource"> <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> </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-connection-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)"> <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> <div id="interverse-connections"> <template x-for="connection in Alpine.store('data')['connections']"> <div class="interverse-connection"> <template x-if="Alpine.store(connection)['name']"> <div x-on:click="initialize(connection)" class='interverse-connection-preview'> <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="Alpine.store(link) == undefined"> <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 t = new Date(); var timestamp = t.getTime(); var main_url = window.location.host; var interverse_proxy="http://localhost:5000" if (getUrlParameter("url")) { main_url = getUrlParameter("url") } document.addEventListener('alpine:init', function () { initialize(main_url); }); /* Alpine.store('data',data['main']) for (c in data['connections']){ Alpine.store(c,data['connections'][c]) } */ function initialize(url) { Alpine.store("data", {}); fetchback(url+'/.well-known/interverse',function(data){ if (data['name']){ Alpine.store('data',data); } }); interverse_data(url.replace("https://",'').replace('http://','').replace('/',''), function (data) { console.log("Initializing interverse...") Alpine.store('data',data); }); fetchback(interverse_proxy+'/complete?url='+url.replace("https://",'').replace('http://','').replace('/',''),function(data){ for (c in data['connections']){ Alpine.store(c,data['connections'][c]) } }); } </script>