git.iko.soy/webring
on master help sign in
Standardized layouts across hallway/wiki a bit
9ca38efDevine Lu Linvega
links/main.css+1−1
compare with master
unifiedsplit
@@ -19,7 +19,7 @@ body #sidebar > * li span.right { color:#555; float:right; }
19body #sidebar > * li span.right:after { content: " msgs"; }
19body #sidebar > * li span.right:after { content: " msgs"; }
20body #sidebar #channels li:before, body #sidebar #categories li:before { content:'/'; }
20body #sidebar #channels li:before, body #sidebar #categories li:before { content:'/'; }
21body #sidebar #users li:before { content:'@'; }
21body #sidebar #users li:before { content:'@'; }
22−body #footer { padding-left: 60px;background-image: url(../icon.white.svg);background-size: 40px;background-repeat: no-repeat;background-position: 0px 15px;border-top: 2px solid white;padding-top: 15px; margin-top:15px; max-width: 100%}
22+body #footer { padding-left: 60px; background-image: url(../icon.white.svg); background-size: 40px; background-repeat: no-repeat; background-position: 0px 10px; border-top: 2px solid white; padding-top: 15px; margin-top: 15px; max-width: calc(100% - 300px); min-height: 45px; line-height: 15px;}
23
23
24@media only screen and (min-width:200px) and (max-width: 800px) {
24@media only screen and (min-width:200px) and (max-width: 800px) {
25 body #hallway #sidebar { position: absolute;top: 0px;right: 0px;padding: 15px;width: 200px;display: none;background-color: #000; }
25 body #hallway #sidebar { position: absolute;top: 0px;right: 0px;padding: 15px;width: 200px;display: none;background-color: #000; }
scripts/hallway.js+35−28
@@ -8,19 +8,30 @@ const re_url = /((https?):\/\/(([-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b)([-a
8function Hallway (sites) {
8function Hallway (sites) {
9 const feeds = {}
9 const feeds = {}
10 this.sites = sites
10 this.sites = sites
11− this.el = document.createElement('div')
11+ this._el = document.createElement('div')
12− this.el.id = 'hallway'
12+ this._el.id = 'hallway'
13 const filterAndPage = window.location.hash.split('^')
13 const filterAndPage = window.location.hash.split('^')
14 this.finder = { filter: filterAndPage[0].trim().replace('#', ''), page: filterAndPage[1] || 1 }
14 this.finder = { filter: filterAndPage[0].trim().replace('#', ''), page: filterAndPage[1] || 1 }
15 this.cache = null
15 this.cache = null
16
16
17+ this._entries = document.createElement('div')
18+ this._entries.id = 'entries'
19+ this._sidebar = document.createElement('div')
20+ this._sidebar.id = 'sidebar'
21+ this._footer = document.createElement('p')
22+ this._footer.id = 'footer'
23+ this._footer.innerHTML = `The <b>Wiki</b> is a decentralized forum, to join the conversation, add a <a href="https://github.com/XXIIVV/webring#joining-the-hallway">feed:</a> field to your entry in the <a href="https://github.com/XXIIVV/Webring/">webring</a>.`
24+
17 this.install = function (host) {
25 this.install = function (host) {
26+ this._el.appendChild(this._entries)
27+ this._el.appendChild(this._sidebar)
28+ this._el.appendChild(this._footer)
18− host.appendChild(this.el)
29+ host.appendChild(this._el)
19 this.findFeeds()
30 this.findFeeds()
20 }
31 }
21
32
22 this.start = function () {
33 this.start = function () {
23− this.el.innerHTML = 'Loading..'
34+ this._entries.innerHTML = 'Loading..'
24 this.fetchFeeds()
35 this.fetchFeeds()
25 }
36 }
26
37
@@ -31,30 +42,26 @@ function Hallway (sites) {
31 const tags = this.findTags(entries)
42 const tags = this.findTags(entries)
32 const relevantEntries = entries.filter(val => !this.finder.filter || (val.author === this.finder.filter || val.channel === this.finder.filter || val.tags.includes(this.finder.filter)))
43 const relevantEntries = entries.filter(val => !this.finder.filter || (val.author === this.finder.filter || val.channel === this.finder.filter || val.tags.includes(this.finder.filter)))
33
44
34− this.el.innerHTML = `
45+ this._entries.innerHTML = `
35− <div id='entries'>
36− <ul>
46+ <ul>
37− ${entries.filter((val) => !this.finder.filter || (val.author === this.finder.filter || val.channel === this.finder.filter || val.tags.includes(this.finder.filter))).filter((_, id) => id < Number(this.finder.page) * 20 && id >= (Number(this.finder.page) - 1) * 20).reduce((acc, val) => acc + this.templateEntry(val) + '\n', '')}
47+ ${entries.filter((val) => !this.finder.filter || (val.author === this.finder.filter || val.channel === this.finder.filter || val.tags.includes(this.finder.filter))).filter((_, id) => id < Number(this.finder.page) * 20 && id >= (Number(this.finder.page) - 1) * 20).reduce((acc, val) => acc + this.templateEntry(val) + '\n', '')}
38− </ul>
48+ </ul>
39− <div id='pagination'>
49+ <div id='pagination'>
40− ${[...Array(Math.ceil(relevantEntries.length / 20)).keys()].reduce((acc, num) => `${acc}<span class='${Number(hallway.finder.page) === num + 1 ? 'selected' : ''}' onclick='filter("${this.finder.filter}^${num + 1}")'>${num + 1}</span>`, '')}
50+ ${[...Array(Math.ceil(relevantEntries.length / 20)).keys()].reduce((acc, num) => `${acc}<span class='${Number(hallway.finder.page) === num + 1 ? 'selected' : ''}' onclick='filter("${this.finder.filter}^${num + 1}")'>${num + 1}</span>`, '')}
41− </div>
42− </div>
51+ </div>`
43− <a id='showbar' onclick="toggleVisibility('sidebar');"></a>
52+
44− <div id='sidebar'>
53+ this._sidebar.innerHTML = `
45− <a id='hidebar' onclick="toggleVisibility('sidebar');"></a>
54+ <a id='hidebar' onclick="toggleVisibility('sidebar');"></a>
46− <ul id='channels'>
55+ <ul id='channels'>
47− <li onclick='filter("")' class='${hallway.finder.filter === '' ? 'selected' : ''}'><a href='#'>hallway <span class='right'>${entries.length}</span></a></li>
56+ <li onclick='filter("")' class='${hallway.finder.filter === '' ? 'selected' : ''}'><a href='#'>hallway <span class='right'>${entries.length}</span></a></li>
48− ${Object.keys(channels).slice(0, 15).reduce((acc, val) => acc + `<li onclick='filter("${val}")' class='${hallway.finder.filter === val ? 'selected' : ''}'><a href='#${val}'>${val} <span class='right'>${channels[val]}</span></a></li>\n`, '')}
57+ ${Object.keys(channels).slice(0, 15).reduce((acc, val) => acc + `<li onclick='filter("${val}")' class='${hallway.finder.filter === val ? 'selected' : ''}'><a href='#${val}'>${val} <span class='right'>${channels[val]}</span></a></li>\n`, '')}
49− </ul>
58+ </ul>
50− <ul id='users'>
59+ <ul id='users'>
51− ${Object.keys(users).slice(0, 15).reduce((acc, val) => acc + `<li onclick='filter("${val}")' class='${hallway.finder.filter === val ? 'selected' : ''}' href='#${val}'>${val} <span class='right'>${users[val]}</span></li>\n`, '')}
60+ ${Object.keys(users).slice(0, 15).reduce((acc, val) => acc + `<li onclick='filter("${val}")' class='${hallway.finder.filter === val ? 'selected' : ''}' href='#${val}'>${val} <span class='right'>${users[val]}</span></li>\n`, '')}
52− </ul>
61+ </ul>
53− <ul id='tags'>
62+ <ul id='tags'>
54− ${Object.keys(tags).slice(0, 15).reduce((acc, val) => acc + `<li onclick='filter("${val}")' class='${hallway.finder.filter === val ? 'selected' : ''}' href='#${val}'>#${val} <span class='right'>${tags[val]}</span></li>\n`, '')}
63+ ${Object.keys(tags).slice(0, 15).reduce((acc, val) => acc + `<li onclick='filter("${val}")' class='${hallway.finder.filter === val ? 'selected' : ''}' href='#${val}'>#${val} <span class='right'>${tags[val]}</span></li>\n`, '')}
55− </ul>
64+ </ul>`
56− </div>
57− <p id='footer'>The <b>Hallway</b> is a decentralized forum, to join the conversation, simply create yourself a <a href="https://twtxt.readthedocs.io/en/stable/user/twtxtfile.html">twtxt</a> feed and <a href="https://github.com/XXIIVV/Webring/">add it</a> to your entry in the <a href="index.html">webring</a>.</p>`
58
65
59 if (feeds) {
66 if (feeds) {
60 this.cache = feeds
67 this.cache = feeds
scripts/wiki.js+8−8
@@ -12,23 +12,25 @@ function Wiki (sites) {
12 this._entry = document.createElement('div')
12 this._entry = document.createElement('div')
13 this._entry.id = 'entry'
13 this._entry.id = 'entry'
14
14
15+ this._footer = document.createElement('p')
16+ this._footer.id = 'footer'
17+ this._footer.innerHTML = `The <b>Wiki</b> is a decentralized encyclopedia, to join the conversation, add a <a href="https://github.com/XXIIVV/webring#joining-the-wiki">wiki:</a> field to your entry in the <a href="https://github.com/XXIIVV/Webring/">webring</a>.`
18+
15 this.loc = ''
19 this.loc = ''
16 this.byName = {}
20 this.byName = {}
17 this.byCat = {}
21 this.byCat = {}
18 this.byAuthor = {}
22 this.byAuthor = {}
19
23
20 this.install = (host) => {
24 this.install = (host) => {
21− console.log('Wiki', 'Installing..')
22− this.fetch()
23 this._el.appendChild(this._entry)
25 this._el.appendChild(this._entry)
24 this._sidebar.appendChild(this._categories)
26 this._sidebar.appendChild(this._categories)
25 this._el.appendChild(this._sidebar)
27 this._el.appendChild(this._sidebar)
28+ this._el.appendChild(this._footer)
26 host.appendChild(this._el)
29 host.appendChild(this._el)
30+ this.fetch()
27 }
31 }
28
32
29 this.start = () => {
33 this.start = () => {
30− console.log('Wiki', 'Starting..')
31− this.loc = window.location.hash.substr(1).replace(/\+/g, ' ').toUpperCase()
32 this._entry.innerHTML = 'Loading..'
34 this._entry.innerHTML = 'Loading..'
33 }
35 }
34
36
@@ -55,10 +57,9 @@ function Wiki (sites) {
55 }
57 }
56 // Sidebar
58 // Sidebar
57 this._categories.innerHTML = Object.keys(this.byCat).reduce((acc, id) => { return this.byCat[id].length > 5 ? `${acc}<li onclick='wiki.go("${id}")' class='${wiki.at(id) ? 'selected' : ''}'>${id.substr(0, 20)} <span class='right'>${this.byCat[id].length}</span></li>` : acc }, '')
59 this._categories.innerHTML = Object.keys(this.byCat).reduce((acc, id) => { return this.byCat[id].length > 5 ? `${acc}<li onclick='wiki.go("${id}")' class='${wiki.at(id) ? 'selected' : ''}'>${id.substr(0, 20)} <span class='right'>${this.byCat[id].length}</span></li>` : acc }, '')
58− this._entry.innerHTML += `<p id='footer'>The <b>Wiki</b> is a decentralized encyclopedia, to join the conversation, simply create yourself an <a href="https://wiki.xxiivv.com/Indental">twtxt</a> feed and <a href="https://github.com/XXIIVV/Webring/">add it</a> to your entry in the <a href="index.html">webring</a>.</p>`
59 }
60 }
60
61
61− this.go = (q = this.loc) => {
62+ this.go = (q = window.location.hash.substr(1).replace(/\+/g, ' ').toUpperCase()) => {
62 this.loc = q
63 this.loc = q
63 window.location.hash = q.toUrl()
64 window.location.hash = q.toUrl()
64 this.refresh()
65 this.refresh()
@@ -70,8 +71,7 @@ function Wiki (sites) {
70
71
71 this.random = () => {
72 this.random = () => {
72 const keys = Object.keys(this.byCat)
73 const keys = Object.keys(this.byCat)
73− const target = Math.floor(Math.random() * keys.length)
74+ return keys[Math.floor(Math.random() * keys.length)]
74− return keys[target]
75 }
75 }
76
76
77 this.related = (name) => {
77 this.related = (name) => {