git.iko.soy/webring
on fa75851 help sign in
webring/scripts/hallway.js
210 lines 8.2 kB history raw
1'use strict'
3const re_channel = /(\s|^)\/([a-zA-Z0-9]+)/g
4const re_user = /((\s|^)@<[a-zA-Z0-9./:\-_\+~#= ]*>)/g
5const re_tag = /([^&]|^)\#([a-zA-Z0-9]+)/g
6const re_url = /((https?):\/\/(([-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b)([-a-zA-Z0-9@:%_\+.~#?&//=]*)))/g
8function Hallway (sites) {
9 const feeds = {}
10 this.sites = sites
11 this.el = document.createElement('div')
12 this.el.id = 'hallway'
13 const filterAndPage = window.location.hash.split('^')
14 this.finder = { filter: filterAndPage[0].trim().replace('#', ''), page: filterAndPage[1] || 1 }
15 this.cache = null
17 this.install = function (host) {
18 host.appendChild(this.el)
19 this.findFeeds()
20 }
22 this.start = function () {
23 this.el.innerHTML = 'hello.'
24 this.fetchFeeds()
25 }
27 this.refresh = function (feeds = this.cache) {
28 const entries = this.findEntries(feeds)
29 const channels = this.findChannels(entries)
30 const users = this.findUsers(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)))
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 <div id='sidebar'>
44 <ul id='channels'>
45 <li onclick='filter("")' class='${hallway.finder.filter === '' ? 'selected' : ''}'><a href='#'>hallway <span class='right'>${entries.length}</span></a></li>
46 ${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`, '')}
47 </ul>
48 <ul id='users'>
49 ${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`, '')}
50 </ul>
51 <ul id='tags'>
52 ${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`, '')}
53 </ul>
54 </div>
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>`
57 if (feeds) {
58 this.cache = feeds
59 }
60 }
62 // Entries
64 this.findChannels = function (entries) {
65 const channels = {}
66 for (const id in entries) {
67 const entry = entries[id]
68 if (!entry.channel) { continue }
69 channels[entry.channel] = channels[entry.channel] ? channels[entry.channel] + 1 : 1
70 }
71 return channels
72 }
74 this.findUsers = function (entries) {
75 const users = {}
76 for (const id in entries) {
77 const entry = entries[id]
78 users[entry.author] = users[entry.author] ? users[entry.author] + 1 : 1
79 }
80 return users
81 }
83 this.findTags = function (entries) {
84 const tags = {}
85 for (const id in entries) {
86 const entry = entries[id]
87 entry.tags.map(tag => {
88 tags[tag] = tags[tag] ? tags[tag] + 1 : 1
89 })
90 }
91 return tags
92 }
94 this.findEntries = function (feeds) {
95 const a = []
96 for (const id in feeds) {
97 for (const i in feeds[id].content) {
98 a.push(feeds[id].content[i])
99 }
100 }
101 return a.sort((a, b) => a.offset - b.offset)
102 }
104 this.findMention = function (found) {
105 const mention = Object.keys(feeds).filter(user => found.indexOf(feeds[user].path) > -1)
106 return mention.length === 1
107 ? ` <span class='user'>@${mention[0]}</span>`
108 : ` <span class='user'>${found}</span>`
109 }
111 this.templateEntry = function (entry) {
112 entry.html = entry.body
113 .replace(re_channel, `$1<span class='channel'>/$2</span>`)
114 .replace(re_user, this.findMention)
115 .replace(re_tag, `$1<span class='tag'>#$2</span>`)
116 .replace(re_url, `<a target="_blank" href='$1'>$1</a>`)
118 const filter = window.location.hash.substr(1).replace(/\+/g, ' ').toLowerCase()
119 const highlight = filter === entry.author.toLowerCase()
120 const origin = feeds[entry.author].path
122 return `<li class='entry ${highlight ? 'highlight' : ''}'><span class='date'>${timeAgo(Date.parse(entry.date))}</span> <a class='author' href='${origin}' target='_blank'>${entry.author}</a> <span class='body'>${entry.html}</span></li>`
123 }
125 // Feeds
127 this.findFeeds = function () {
128 console.log('Finding feeds..')
129 for (const site of sites) {
130 if (site.feed && site.author) {
131 feeds[site.author] = { path: site.feed }
132 }
133 }
134 console.log(`Found ${Object.keys(feeds).length} feeds.`)
135 }
137 this.fetchFeeds = function () {
138 console.log(`Fetching ${Object.keys(feeds).length} feeds..`)
139 for (const id in feeds) {
140 this.fetchFeed(id, feeds[id])
141 }
142 }
144 this.fetchFeed = function (id, feed) {
145 console.log(`Fetching ${id}(${feed.path})..`)
146 fetch(feed.path, { cache: 'no-store' }).then(x => x.text()).then((content) => {
147 feeds[id].content = parseFeed(id, content)
148 this.refresh(feeds)
149 }).catch((err) => {
150 console.warn(`${id}`, err)
151 })
152 }
154 // Utils
156 function parseFeed (author, feed) {
157 const lines = feed.split('\n').filter((line) => line.substr(0, 1) !== '#')
158 const entries = []
159 for (const id in lines) {
160 const line = lines[id].trim()
161 if (line === '') { continue }
162 const parts = line.replace(' ', '\t').split('\t')
163 const date = parts[0].trim()
164 const body = escapeHtml(parts[1].trim()).trim()
165 const channel = body.substr(0, 1) === '/' ? body.split(' ')[0].substr(1).toLowerCase() : body.substr(0, 1) === '@' ? 'veranda' : 'lobby'
166 const tags = (body.match(re_tag) || []).map(a => a.substr(a.indexOf('#') + 1).toLowerCase())
167 const offset = new Date() - new Date(date)
168 entries.push({ date, body, author, offset, channel, tags })
169 }
170 return entries
171 }
173 function timeAgo (dateParam) {
174 const date = typeof dateParam === 'object' ? dateParam : new Date(dateParam)
175 const DAY_IN_MS = 86400000 // 24 * 60 * 60 * 1000
176 const today = new Date()
177 const yesterday = new Date(today - DAY_IN_MS)
178 const seconds = Math.round((today - date) / 1000)
179 const minutes = Math.round(seconds / 60)
180 const isToday = today.toDateString() === date.toDateString()
181 const isYesterday = yesterday.toDateString() === date.toDateString()
183 if (seconds < 5) {
184 return 'just now'
185 } else if (seconds < 60) {
186 return `${seconds} seconds ago`
187 } else if (seconds < 90) {
188 return 'a minute ago'
189 } else if (minutes < 60) {
190 return `${minutes} minutes ago`
191 } else if (isToday) {
192 return `${Math.floor(minutes / 60)} hours ago`
193 } else if (isYesterday) {
194 return 'yesterday'
195 }
197 return `${Math.floor(minutes / 1440)} days ago`
198 }
200 function escapeHtml (unsafe) {
201 return unsafe.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;')
202 }
205function filter (name) {
206 window.location.hash = name
207 const filterAndPage = window.location.hash.split('^')
208 hallway.finder = { filter: filterAndPage[0].trim().replace('#', ''), page: filterAndPage[1] || 1 }
209 hallway.refresh()