Commit 883d964a authored by Jae's avatar Jae
Browse files

Better webring

parent a5727bba
......@@ -2,102 +2,6 @@
This is how to implement the Ftech webring.
In your HTML page, add the following and replace `site` with your website URL.
```html
<webring-css site="https://example.com">
Please activate JavaScript to enable the webring widget.
</webring-css>
```
Now, add a Javascript script to your webpage containing:
```javascript
const template = document.createElement("template");
template.innerHTML = `
<style>
.webring {
border: 15px solid #fff;
padding: 1rem;
display: grid;
grid-template-columns: 1fr 4fr 1fr;
grid-gap: 1rem;
text-align: center;
font: 100% system-ui, sans-serif;
}
.icon {
font-size: 100px;
}
.webring a {
color: #f5a500;
}
</style>
<div class="webring">
<div class="icon">></div>
<div id="copy">
</div>
<div class="icon"><</div>
</div>`;
const RING_MEMBERS = "https://jae.fi/webring/members"
class WebRing extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: "open" });
this.shadowRoot.appendChild(template.content.cloneNode(true));
const thisSite = this.getAttribute("site");
fetch(RING_MEMBERS)
.then((response) => response.json())
.then((sites) => {
// Find the current site in the data
const matchedSiteIndex = sites.findIndex(
(site) => site.url === thisSite
);
const matchedSite = sites[matchedSiteIndex];
let prevSiteIndex = matchedSiteIndex - 1;
if (prevSiteIndex === -1) prevSiteIndex = sites.length - 1;
let nextSiteIndex = matchedSiteIndex + 1;
if (nextSiteIndex > sites.length) nextSiteIndex = 0;
const randomSiteIndex = this.getRandomInt(0, sites.length - 1);
const cp = `
<h1>Ftech webring</h1>
<p>
This is <a href="${matchedSite.url}">${matchedSite.name}</a>, owned by ${matchedSite.owner}
</p>
<p>
<a href="${sites[prevSiteIndex].url}">[Prev]</a>
<a href="${sites[nextSiteIndex].url}">[Next]</a>
<a href="${sites[randomSiteIndex].url}">[Random]</a>
</p>
`;
this.shadowRoot
.querySelector("#copy")
.insertAdjacentHTML("afterbegin", cp);
});
}
getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
}
window.customElements.define("webring-css", WebRing);
```
See [this source file](https://code.jae.fi/jae/go-jae.fi/-/blob/beep/main.go).
Now, you should be able to see the webring widget and get random members.
package main
import (
"encoding/json"
"fmt"
"html/template"
"io/ioutil"
"log"
"math/rand"
"net/http"
"os"
"github.com/gin-gonic/gin"
"github.com/russross/blackfriday/v2"
......@@ -74,8 +77,49 @@ func main() {
r.Static("/assets", "./static")
r.GET("/", func(c *gin.Context) {
jsonfile, err := os.Open("./webring/members.json")
if err != nil {
fmt.Println(err)
}
var members Members
byteValue, _ := ioutil.ReadAll(jsonfile)
defer jsonfile.Close()
json.Unmarshal(byteValue, &members)
previousSite := ""
currentSite := "https://jae.fi"
nextSite := ""
randomsite := ""
randSite := rand.Intn(len(members.Members) - 1)
for i := 0; i < len(members.Members); i++ {
if members.Members[i].Url == currentSite {
if i-1 < 0 {
previousSite = members.Members[len(members.Members)-1].Url
} else {
previousSite = members.Members[i-1].Url
}
if i+1 > len(members.Members) {
nextSite = members.Members[i-1].Url
} else {
nextSite = members.Members[i+1].Url
}
randomsite = members.Members[randSite].Url
}
}
c.HTML(http.StatusOK, "home/index.tmpl", gin.H{
"title": "Main page",
"title": "Main page",
"currentsite": "Jae's Website",
"currentowner": "Jae Lo Presti",
"prevsite": previousSite,
"nextsite": nextSite,
"randomsite": randomsite,
})
})
......
......@@ -108,8 +108,29 @@ th {
color: #c7eeb5;
}
webring-css {
.ring {
display: block;
max-width: 600px;
margin: 1rem auto;
}
.webring {
border: 15px solid #fff;
padding: 1rem;
display: grid;
grid-template-columns: 1fr 4fr 1fr;
grid-gap: 1rem;
text-align: center;
font: 100% system-ui, sans-serif;
}
.icon {
font-size: 100px;
}
.webring a {
color: #f5a500;
}
\ No newline at end of file
......@@ -10,8 +10,6 @@
<a href="https://code.jae.fi/jae/go-jae.fi" >This website is Open-Source</a>; <a href="https://bm.jae.fi/web/tor.txt">Tor URLs</a> and <a href="https://bm.jae.fi/web/tor.txt.minisig">Minisign signature</a>.
</small>
</footer>
<script src="/assets/js/main.js"></script>
</body>
</html>
......
......@@ -27,9 +27,26 @@
<a class="info" rel="noreferrer" href="https://matrix.to/&#35;/&#35;home:jae.fi?via=jae.fi">My Matrix room</a>; in order to chat with me.
</li>
</ul>
<webring-css site="https://jae.fi">
Please activate JavaScript to enable the webring widget.
</webring-css>
<div class="ring">
<div class="webring">
<div class="icon">></div>
<div id="copy">
<h1>Ftech webring</h1>
<p>
This is {{ .currentsite }}, owned by {{ .currentowner }}
</p>
<p>
<a href="{{ .prevsite }}">[Prev]</a>
<a href="{{ .nextsite }}">[Next]</a>
<a href="{{ .randomsite }}">[Random]</a>
</p>
</div>
<div class="icon"><</div>
</div>
</div>
</div>
{{ template "globals/footer.tmpl" .}}
{{ end }}
\ No newline at end of file
[
{
"name": "Jae's Website",
"url": "https://jae.fi",
"owner": "Jae Lo Presti"
},
{
"name": "Minteck's space",
"url": "https://minteck.ro.lt",
"owner": "Minteck"
}
]
\ No newline at end of file
{
"members": [
{
"name": "Jae's Website",
"url": "https://jae.fi",
"owner": "Jae Lo Presti"
},
{
"name": "Minteck's space",
"url": "https://minteck.ro.lt",
"owner": "Minteck"
}
]
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment