@@ -8,19 +8,30 @@ const re_url = /((https?):\/\/(([-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b)([-a
88function Hallway (sites) {
99 const feeds = {}
1010 this.sites = sites
11− this.el = document.createElement('div')
12− this.el.id = 'hallway'
11+ this._el = document.createElement('div')
12+ this._el.id = 'hallway'
1313 const filterAndPage = window.location.hash.split('^')
1414 this.finder = { filter: filterAndPage[0].trim().replace('#', ''), page: filterAndPage[1] || 1 }
1515 this.cache = null
1616
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+
1725 this.install = function (host) {
18− host.appendChild(this.el)
26+ this._el.appendChild(this._entries)
27+ this._el.appendChild(this._sidebar)
28+ this._el.appendChild(this._footer)
29+ host.appendChild(this._el)
1930 this.findFeeds()
2031 }
2132
2233 this.start = function () {
23− this.el.innerHTML = 'Loading..'
34+ this._entries.innerHTML = 'Loading..'
2435 this.fetchFeeds()
2536 }
2637
@@ -31,30 +42,26 @@ function Hallway (sites) {
3142 const tags = this.findTags(entries)
3243 const relevantEntries = entries.filter(val => !this.finder.filter || (val.author === this.finder.filter || val.channel === this.finder.filter || val.tags.includes(this.finder.filter)))
3344
34− this.el.innerHTML = `
35− <div id='entries'>
36− <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', '')}
38− </ul>
39− <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>`, '')}
41− </div>
42− </div>
43− <a id='showbar' onclick="toggleVisibility('sidebar');"></a>
44− <div id='sidebar'>
45− <a id='hidebar' onclick="toggleVisibility('sidebar');"></a>
46− <ul id='channels'>
47− <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`, '')}
49− </ul>
50− <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`, '')}
52− </ul>
53− <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`, '')}
55− </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>`
45+ this._entries.innerHTML = `
46+ <ul>
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', '')}
48+ </ul>
49+ <div id='pagination'>
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>`, '')}
51+ </div>`
52+
53+ this._sidebar.innerHTML = `
54+ <a id='hidebar' onclick="toggleVisibility('sidebar');"></a>
55+ <ul id='channels'>
56+ <li onclick='filter("")' class='${hallway.finder.filter === '' ? 'selected' : ''}'><a href='#'>hallway <span class='right'>${entries.length}</span></a></li>
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`, '')}
58+ </ul>
59+ <ul id='users'>
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`, '')}
61+ </ul>
62+ <ul id='tags'>
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`, '')}
64+ </ul>`
5865
5966 if (feeds) {
6067 this.cache = feeds