Add groups

main
Gabriel 2 years ago
parent f16a6bf12d
commit 5927ff19ca

@ -11,9 +11,16 @@
"description": "Stay up to date!"
}
],
"connection_groups":{
"Group1":[
"https://libresolutions.network"
],
"Group2":["https://retroedge.tech"],
"Group3":["https://small-web.org"]
},
"connections": [
"https://libresolutions.network",
"https://retroedge.tech"
"https://gabe.rocks",
"https://codeberg.org"
],
"contact": {
"e-mail": "contact@https://my.website",

@ -3,7 +3,8 @@
<head>
<link rel="stylesheet" href="/theme.css">
<title>Interverse</title>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="//unpkg.com/alpinejs" defer></script>
<! consider hosting on your site>
<script src="/helper.js"></script>
</head>
<body>
@ -26,6 +27,33 @@
</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>
<p x-text="link"></p>
</div>
</template>
</div>
</template>
</div>
</div>
</template>
</div>
<h2>Links</h2>
<div id="interverse-connections">
<template x-for="connection in Alpine.store('data')['connections']">
@ -76,8 +104,14 @@
Alpine.store("data",{});
fetchdata(url,function(e){
data = JSON.parse(e.target.response);
raw_data = JSON.parse(e.target.response);
Alpine.store("data",data);
connections = data['connections'];
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{

@ -47,6 +47,16 @@ img {
height:3rem;
width:3rem;
}
#interverse-groups{
display:flex;
flex-wrap: wrap;
flex-direction: row;
}
.interverse-group{
display:flex;
flex-direction: row;
flex-wrap: wrap;
}
#interverse-connections{
display:flex;
flex-wrap: wrap;
@ -59,6 +69,10 @@ img {
padding:1rem;
margin:0.25rem;
}
.interverse-connection-preview{
display:flex;
flex-direction: column;
}
.interverse-widget{
width:50vw;

Loading…
Cancel
Save