webring-plusplus.github.io/index.html at main · webring-plusplus/webring-plusplus.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!doctype html>
<html>
<head>
<title>webring demo</title>
<meta charset="utf-8" />
<style type="text/css">
body {
  max-width: 70em;
  margin: 1em auto;
}
div {
  margin-left: 1em;
  line-height: 125%;
}
a {
  color: blue;
  text-decoration: none;
}
.center {
  text-align: center;
}
.big {
  font-size: 2em;
}
.clear {
  clear: both;
}
.left {
  float: left;
}
.tall {
  height: 12em;
  padding: 1em;
  width: 20em;
  overflow: auto;
}
.text {
  margin-bottom: 0.5em;
}
.flex-parent {
  display: flex;
}
.flex-child {
  flex: 0 1 33%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.5em;
  padding: 1em;
}
.highlight {
  background-color: rgba(255, 255, 0, 0.2);
}
</style>
</head>

<body>
<div>
  <div class="big center text">
    <a href="https://github.com/webring-plusplus">⌨ webring++</a>
  </div>

  <div class="left tall" id="root"></div>

  <div class="text">
    <code>webring++</code> is a logical extension of 1990s <a href="https://en.wikipedia.org/wiki/Webring">webring</a>.
  </div>

  <div class="text">
    In a traditional webring, websites in the collection form a linked list.
    In a <code>webring++</code>, there is no ring at all - we instead abstract the idea to a digraph.
    Each site in the <code>webring++</code> points to zero or more peer sites.
    As such, to join an existing <code>webring++</code>, you just need one of the other nodes to add your site to its
    forward set.
  </div>

  <div>
    Of course, you can also use <code>webring++</code> to point to your peers, whether or not others are linking back.
  </div>

  <div>
    If you want to join, you just have to host a <a href="https://github.com/webring-plusplus/spec">json
    file</a> on your site.
  </div>

  <div class="clear flex-parent">
    <div class="flex-child">
      <p class="center">Hosting <code>webring++.json</code><br />
      <span class="highlight">🔌as a static file</span></p>
      <p>
        You can use a simple <a href="https://github.com/webring-plusplus/server-static">bash script</a> to generate
        your peer list.
      </p>
    </div>

    <div class="flex-child">
      <p class="center">Hosting <code>webring++.json</code><br />
      <span class="highlight">⚙ with actix-web</span></p>
      <p>
        If your site is written in rust, you can use the
        <a href="https://crates.io/crates/webring-plusplus-server-actix">actix-web crate</a>.
      </p>
    </div>

    <div class="flex-child">
      <p class="center">Displaying <code>webring++</code> data on your site<br />
      <span class="highlight">𝒿 in javascript</span></p>
      <p>
        Try the <a href="https://github.com/webring-plusplus/client-js">flat javascript client</a> with no external
        dependencies!
      </p>
    </div>
  </div>
</div>
<script src="//webring-plusplus.github.io/client-js/webring.js" crossorigin="anonymous"></script>
<script>
const to_id = (from) => {
  return from.replaceAll(".", "").replaceAll("/", "");
};

const push = (where, what, prepend = "∟ ") => {
  if (document.querySelectorAll(`#${to_id(what)}`).length > 0) {
    return;
  }
  const new_el = document.createElement("div");
  new_el.id = to_id(what);
  new_el.textContent = `${prepend}${what}`;
  document.querySelectorAll(`#${where}`)[0].append(new_el);
};


const root = "webring-plusplus.github.io";
push("root", root, prepend="⬘ ");

webring(
  root,
  (uri, peers, depth) => {
    peers.forEach((peer) => {
      push(to_id(uri), peer);
    });
  },
  depth=3
);
</script>
</body>
</html>