scripts/hallway.js · webring · git.iko.soy

git.iko.soy/webring

on 26680f2 help sign in

webring/scripts/hallway.js

199 lines 7.9 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.find(entries, 'channel')

30 const users = this.find(entries, 'author')

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.find = function (entries, p) {

65 const h = {}

66 for (const id in entries) {

67 if (entries[id] && entries[id][p]) { h[entries[id][p]] = h[entries[id][p]] ? h[entries[id][p]] + 1 : 1 }

68 }

69 return h

70 }

72 this.findTags = function (entries) {

73 const tags = {}

74 for (const id in entries) {

75 const entry = entries[id]

76 entry.tags.map(tag => {

77 tags[tag] = tags[tag] ? tags[tag] + 1 : 1

78 })

79 }

80 return tags

81 }

83 this.findEntries = function (feeds) {

84 const a = []

85 for (const id in feeds) {

86 for (const i in feeds[id].content) {

87 a.push(feeds[id].content[i])

88 }

89 }

90 return a.sort((a, b) => a.offset - b.offset)

91 }

93 this.findMention = function (found) {

94 const mention = Object.keys(feeds).filter(user => found.indexOf(feeds[user].path) > -1)

95 return mention.length === 1

96 ? ` <span class='user'>@${mention[0]}</span>`

97 : ` <span class='user'>${found}</span>`

98 }

100 this.templateEntry = function (entry) {

101 entry.html = entry.body

102 .replace(re_channel, `$1<span class='channel'>/$2</span>`)

103 .replace(re_user, this.findMention)

104 .replace(re_tag, `$1<span class='tag'>#$2</span>`)

105 .replace(re_url, `<a target="_blank" href='$1'>$1</a>`)

107 const filter = window.location.hash.substr(1).replace(/\+/g, ' ').toLowerCase()

108 const highlight = filter === entry.author.toLowerCase()

109 const origin = feeds[entry.author].path

111 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>`

112 }

114 // Feeds

116 this.findFeeds = function () {

117 console.log('Finding feeds..')

118 for (const site of sites) {

119 if (site.feed && site.author) {

120 feeds[site.author] = { path: site.feed }

121 }

122 }

123 console.log(`Found ${Object.keys(feeds).length} feeds.`)

124 }

126 this.fetchFeeds = function () {

127 console.log(`Fetching ${Object.keys(feeds).length} feeds..`)

128 for (const id in feeds) {

129 this.fetchFeed(id, feeds[id])

130 }

131 }

133 this.fetchFeed = function (id, feed) {

134 console.log(`Fetching ${id}(${feed.path})..`)

135 fetch(feed.path, { cache: 'no-store' }).then(x => x.text()).then((content) => {

136 feeds[id].content = parseFeed(id, content)

137 this.refresh(feeds)

138 }).catch((err) => {

139 console.warn(`${id}`, err)

140 })

141 }

143 // Utils

145 function parseFeed (author, feed) {

146 const lines = feed.split('\n').filter((line) => line.substr(0, 1) !== '#')

147 const entries = []

148 for (const id in lines) {

149 const line = lines[id].trim()

150 if (line === '') { continue }

151 const parts = line.replace(' ', '\t').split('\t')

152 const date = parts[0].trim()

153 const body = escapeHtml(parts[1].trim()).trim()

154 const channel = body.substr(0, 1) === '/' ? body.split(' ')[0].substr(1).toLowerCase() : body.substr(0, 1) === '@' ? 'veranda' : 'lobby'

155 const tags = (body.match(re_tag) || []).map(a => a.substr(a.indexOf('#') + 1).toLowerCase())

156 const offset = new Date() - new Date(date)

157 entries.push({ date, body, author, offset, channel, tags })

158 }

159 return entries

160 }

162 function timeAgo (dateParam) {

163 const date = typeof dateParam === 'object' ? dateParam : new Date(dateParam)

164 const DAY_IN_MS = 86400000 // 24 * 60 * 60 * 1000

165 const today = new Date()

166 const yesterday = new Date(today - DAY_IN_MS)

167 const seconds = Math.round((today - date) / 1000)

168 const minutes = Math.round(seconds / 60)

169 const isToday = today.toDateString() === date.toDateString()

170 const isYesterday = yesterday.toDateString() === date.toDateString()

172 if (seconds < 5) {

173 return 'just now'

174 } else if (seconds < 60) {

175 return `${seconds} seconds ago`

176 } else if (seconds < 90) {

177 return 'a minute ago'

178 } else if (minutes < 60) {

179 return `${minutes} minutes ago`

180 } else if (isToday) {

181 return `${Math.floor(minutes / 60)} hours ago`

182 } else if (isYesterday) {

183 return 'yesterday'

184 }

186 return `${Math.floor(minutes / 1440)} days ago`

187 }

189 function escapeHtml (unsafe) {

190 return unsafe.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, ''')

191 }

194function filter (name) {

195 window.location.hash = name

196 const filterAndPage = window.location.hash.split('^')

197 hallway.finder = { filter: filterAndPage[0].trim().replace('#', ''), page: filterAndPage[1] || 1 }

198 hallway.refresh()