Add groups

main
Gabriel 2 years ago
parent f16a6bf12d
commit 5927ff19ca

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

@ -3,7 +3,8 @@
<head> <head>
<link rel="stylesheet" href="/theme.css"> <link rel="stylesheet" href="/theme.css">
<title>Interverse</title> <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> <script src="/helper.js"></script>
</head> </head>
<body> <body>
@ -26,6 +27,33 @@
</a> </a>
</template> </template>
</div> </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> <h2>Links</h2>
<div id="interverse-connections"> <div id="interverse-connections">
<template x-for="connection in Alpine.store('data')['connections']"> <template x-for="connection in Alpine.store('data')['connections']">
@ -76,8 +104,14 @@
Alpine.store("data",{}); Alpine.store("data",{});
fetchdata(url,function(e){ fetchdata(url,function(e){
data = JSON.parse(e.target.response); data = JSON.parse(e.target.response);
raw_data = JSON.parse(e.target.response);
Alpine.store("data",data); 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++){ for (var i =0; i<connections.length; i++){
fetchdata(connections[i]+'/.well-known/interverse',function(e){ fetchdata(connections[i]+'/.well-known/interverse',function(e){
try{ try{

@ -47,6 +47,16 @@ img {
height:3rem; height:3rem;
width: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{ #interverse-connections{
display:flex; display:flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -59,6 +69,10 @@ img {
padding:1rem; padding:1rem;
margin:0.25rem; margin:0.25rem;
} }
.interverse-connection-preview{
display:flex;
flex-direction: column;
}
.interverse-widget{ .interverse-widget{
width:50vw; width:50vw;

Loading…
Cancel
Save