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