@@ -14,24 +14,21 @@ function Hallway (sites) {
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')
17+ this._main = document.createElement('main')
18+ this._main.id = 'entries'
19+ this._footer = document.createElement('footer')
2220 this._footer.id = 'footer'
23− this._footer.innerHTML = `The <strong>Hallway</strong> 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>.`
21+ this._footer.innerHTML = `<p>The <strong>Hallway</strong> 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>.</p>`
2422
2523 this.install = function (host) {
26− this._el.appendChild(this._entries)
27− this._el.appendChild(this._sidebar)
24+ this._el.appendChild(this._main)
2825 this._el.appendChild(this._footer)
2926 host.appendChild(this._el)
3027 this.findFeeds()
3128 }
3229
3330 this.start = function () {
34− this._entries.innerHTML = 'Loading..'
31+ this._main.innerHTML = 'Loading..'
3532 this.fetchFeeds()
3633 }
3734
@@ -43,27 +40,31 @@ function Hallway (sites) {
4340 const tags = this.findTags(localEntries)
4441 const relevantEntries = localEntries.filter(val => !this.finder.filter || (val.author === this.finder.filter || val.channel === this.finder.filter || val.tags.includes(this.finder.filter)))
4542
46− this._entries.innerHTML = `
47− <ul>
48− ${localEntries.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', '')}
49− </ul>
50− <div id='pagination'>
51− ${[...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>`, '')}
52− </div>
53− <a id='showbar' onclick="toggleVisibility('sidebar');"></a>`
54−
55− this._sidebar.innerHTML = `
56− <a id='hidebar' onclick="toggleVisibility('sidebar');"></a>
57− <ul id='channels'>
58− <li onclick='filter("")' class='${hallway.finder.filter === '' ? 'selected' : ''}'><a href='#'>hallway <span class='right'>${localEntries.length}</span></a></li>
59− ${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`, '')}
60− </ul>
61− <ul id='users'>
62− ${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`, '')}
63− </ul>
64− <ul id='tags'>
65− ${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`, '')}
66− </ul>`
43+ const mainHtml = `
44+ <div><ul>
45+ ${localEntries.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', '')}
46+ </ul>
47+ <div id='pagination'>
48+ ${[...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>`, '')}
49+ </div>
50+ <a id='showbar' onclick="toggleVisibility('aside');"></a></div>`
51+
52+ const aside = `
53+ <aside id='aside'>
54+ <a id='hidebar' onclick="toggleVisibility('aside');"></a>
55+ <ul id='channels'>
56+ <li onclick='filter("")' class='${hallway.finder.filter === '' ? 'selected' : ''}'><a href='#'>hallway <span class='right'>${localEntries.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>
65+ </aside>`
66+
67+ this._main.innerHTML = `${mainHtml}${aside}`
6768
6869 if (feeds) {
6970 this.cache = feeds