Add groups
This commit is contained in:
parent
f16a6bf12d
commit
5927ff19ca
4 changed files with 59 additions and 4 deletions
Client
|
@ -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…
Reference in a new issue