interverse/Client/index.html

<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-init="fetchback(link+'/.well-known/interverse',function(data){
                            Alpine.store(data['location'],data);
                        });">
                            <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" x-init="fetchback(connection+'/.well-known/interverse',function(data){
                Alpine.store(data['location'],data);
            });">
                <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("http://"+url.replace("https://",'').replace('http://','').replace('/','')+'/.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>