git.iko.soy/webring
on master help sign in
add in pagination
83aeeb6ckipp01
links/main.css+6−2
compare with master
unifiedsplit
@@ -1,7 +1,7 @@
1* { margin:0;padding:0;border:0;outline:0;text-decoration:none;font-weight:inherit;font-style:inherit;color:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;list-style:none;border-collapse:collapse;border-spacing:0; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
1* { margin:0;padding:0;border:0;outline:0;text-decoration:none;font-weight:inherit;font-style:inherit;color:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;list-style:none;border-collapse:collapse;border-spacing:0; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
2
2
3body { background:#f4f4f4; padding:0px; margin:0px; }
3body { background:#f4f4f4; padding:0px; margin:0px; }
4−body div { display:block; background: #111;min-height: calc(100vh - 60px);width: calc(100vw - 60px);margin: 15px;color: #333;padding: 15px;font-family:'input_mono_regular', 'Monospaced','Courier New',courier;font-size:11px; position: relative; border-radius: 2px; color:white;}
4+body > div { display:block; background: #111;min-height: calc(100vh - 60px);width: calc(100vw - 60px);margin: 15px;color: #333;padding: 15px;font-family:'input_mono_regular', 'Monospaced','Courier New',courier;font-size:11px; position: relative; border-radius: 2px; color:white;}
5body div ul { max-width: 800px; border-bottom: 2px solid white;padding-bottom: 15px;margin-bottom:15px; overflow: hidden;}
5body div ul { max-width: 800px; border-bottom: 2px solid white;padding-bottom: 15px;margin-bottom:15px; overflow: hidden;}
6body div p { display:block; padding:0px 5px; line-height: 20px; max-width: 600px}
6body div p { display:block; padding:0px 5px; line-height: 20px; max-width: 600px}
7body div p a { text-decoration: underline;}
7body div p a { text-decoration: underline;}
@@ -12,7 +12,11 @@ body div p.readme { max-width:500px; }
12/* Hallway */
12/* Hallway */
13
13
14body #hallway #entries { width: calc(100vw - 300px) !important; }
14body #hallway #entries { width: calc(100vw - 300px) !important; }
15−body #hallway #sidebar { position: absolute;top: 0px;right: 0px;padding: 0px 15px;width: 200px; }
15+body #hallway #sidebar { position: absolute;top: 0px;right: 0px;padding: 15px;width: 200px; }
16+
17+body #hallway #pagination { margin: 10px; text-align: center; }
18+body #hallway #pagination span { padding: 3px; margin: 2px; cursor: pointer; }
19+body #hallway #pagination span.selected { background: white; color:black; }
16
20
17body #hallway #sidebar > * { border-bottom: 0px; line-height: 16px; padding-bottom: 0px }
21body #hallway #sidebar > * { border-bottom: 0px; line-height: 16px; padding-bottom: 0px }
18body #hallway #sidebar > * li { text-transform: lowercase; }
22body #hallway #sidebar > * li { text-transform: lowercase; }
scripts/hallway.js+19−12
@@ -10,7 +10,8 @@ function Hallway (sites) {
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− this.filter = window.location.hash.replace('#', '').trim()
13+ const filterAndPage = window.location.hash.split('^')
14+ this.finder = { filter: filterAndPage[0].trim().replace('#', ''), page: filterAndPage[1] || 1 }
14 this.cache = null
15 this.cache = null
15
16
16 this.install = function (host) {
17 this.install = function (host) {
@@ -28,21 +29,27 @@ function Hallway (sites) {
28 const channels = this.findChannels(entries)
29 const channels = this.findChannels(entries)
29 const users = this.findUsers(entries)
30 const users = this.findUsers(entries)
30 const tags = this.findTags(entries)
31 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)))
31
33
32 this.el.innerHTML = `
34 this.el.innerHTML = `
33− <ul id='entries'>
35+ <div id='entries'>
36+ <ul>
34− ${entries.filter((val) => { return !this.filter || (val.author === this.filter || val.channel === this.filter || val.tags.includes(this.filter)) }).filter((_, id) => { return id < 50 }).reduce((acc, val) => { return acc + this.templateEntry(val) + '\n' }, '')}
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', '')}
35− </ul>
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>
36 <div id='sidebar'>
43 <div id='sidebar'>
37 <ul id='channels'>
44 <ul id='channels'>
38− <li onclick='filter("")' class='${hallway.filter === '' ? 'selected' : ''}'><a href='#'>hallway <span class='right'>${entries.length}</span></a></li>
45+ <li onclick='filter("")' class='${hallway.finder.filter === '' ? 'selected' : ''}'><a href='#'>hallway <span class='right'>${entries.length}</span></a></li>
39− ${Object.keys(channels).reduce((acc, val) => { return acc + `<li onclick='filter("${val}")' class='${hallway.filter === val ? 'selected' : ''}'><a href='#${val}'>${val} <span class='right'>${channels[val]}</span></a></li>\n` }, '')}
46+ ${Object.keys(channels).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`, '')}
40 </ul>
47 </ul>
41 <ul id='users'>
48 <ul id='users'>
42− ${Object.keys(users).reduce((acc, val) => { return acc + `<li onclick='filter("${val}")' class='${hallway.filter === val ? 'selected' : ''}' href='#${val}'>${val} <span class='right'>${users[val]}</span></li>\n` }, '')}
49+ ${Object.keys(users).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`, '')}
43 </ul>
50 </ul>
44 <ul id='tags'>
51 <ul id='tags'>
45− ${Object.keys(tags).reduce((acc, val) => { return acc + `<li onclick='filter("${val}")' class='${hallway.filter === val ? 'selected' : ''}' href='#${val}'>#${val} <span class='right'>${tags[val]}</span></li>\n` }, '')}
52+ ${Object.keys(tags).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`, '')}
46 </ul>
53 </ul>
47 </div>
54 </div>
48 <p>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>`
55 <p>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>`
@@ -119,8 +126,7 @@ function Hallway (sites) {
119
126
120 this.findFeeds = function () {
127 this.findFeeds = function () {
121 console.log('Finding feeds..')
128 console.log('Finding feeds..')
122− for (const id in sites) {
129+ for (const site of sites) {
123− const site = sites[id]
124 if (site.feed && site.author) {
130 if (site.feed && site.author) {
125 feeds[site.author] = { path: site.feed }
131 feeds[site.author] = { path: site.feed }
126 }
132 }
@@ -148,7 +154,7 @@ function Hallway (sites) {
148 // Utils
154 // Utils
149
155
150 function parseFeed (author, feed) {
156 function parseFeed (author, feed) {
151− const lines = feed.split('\n').filter((line) => { return line.substr(0,1) !== '#' })
157+ const lines = feed.split('\n').filter((line) => line.substr(0,1) !== '#')
152 const entries = []
158 const entries = []
153 for (const id in lines) {
159 for (const id in lines) {
154 const line = lines[id].trim()
160 const line = lines[id].trim()
@@ -198,6 +204,7 @@ function Hallway (sites) {
198
204
199function filter (name) {
205function filter (name) {
200 window.location.hash = name
206 window.location.hash = name
201− hallway.filter = window.location.hash.replace('#', '').trim()
207+ const filterAndPage = window.location.hash.split('^')
208+ hallway.finder = { filter: filterAndPage[0].trim().replace('#', ''), page: filterAndPage[1] || 1 }
202 hallway.refresh()
209 hallway.refresh()
203}
210}