git.iko.soy/webring
on master help sign in
First draft
commit39efe03e8d552389f3933396544b28702797ed82 authorDevine Lu Linvega <aliceffekt@gmail.com> dateTue 2 Jul 2019, 08:59 (7 years ago) parentdcbbc5f
3 files changed+80−17
compare with master
unifiedsplit
links/main.css+26−13 scripts/hallway.js+52−3 scripts/portal.js+2−1
links/main.css+26−13
@@ -2,28 +2,41 @@
22
33body { background:#f4f4f4; padding:0px; margin:0px; }
44body 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;}
5−body div #icon { display: block;width: 30px;height: 30px;background-image: url(../icon.white.svg);background-size: cover;background-repeat: no-repeat;position: absolute;bottom: 15px;right:15px;background-position: center;padding:0px }
5+body div ul { max-width: 800px; border-bottom: 2px solid white;padding-bottom: 15px;margin-bottom:15px; overflow: hidden;}
66body div p { display:block; padding:0px 5px; line-height: 20px}
77body div p a { text-decoration: underline;}
88body div p a:hover { text-decoration: underline; }
99body div p b { font-weight: normal; font-family: 'input_mono_medium' }
1010body div p.readme { max-width:500px; }
11−body div ul { max-width: 800px; border-bottom: 2px solid white;padding-bottom: 15px;margin-bottom:15px; overflow: hidden; columns:3;}
12−body div ul li { display:block; padding-left:5px; text-overflow: ellipsis; text-transform: lowercase;}
13−body div ul li.wiki::after { content:"<wiki>"; color:#555; }
14−body div ul li.blog::after { content:"<blog>"; color:#555; }
15−body div ul li a { line-height: 20px; padding:0px 5px; text-decoration: none;}
16−body div ul li a:visited { color:#ccc; text-decoration: none;}
17−body div ul li a:hover { text-decoration: underline; }
11+
12+/* Hallway */
13+
14+body #hallway .entry { line-height: 16px; display: block }
15+body #hallway .entry .date { color:#555; }
16+body #hallway .entry .date:after { content: ")" }
17+body #hallway .entry .author { font-family: 'input_mono_medium' }
18+body #hallway .entry .author:after { content:":"; }
19+body #hallway .entry .body { }
20+
21+/* Portal */
22+
23+body #portal #icon { display: block;width: 30px;height: 30px;background-image: url(../icon.white.svg);background-size: cover;background-repeat: no-repeat;position: absolute;bottom: 15px;right:15px;background-position: center;padding:0px }
24+body #portal ul { columns:3; }
25+body #portal ul li { display:block; padding-left:5px; text-overflow: ellipsis; text-transform: lowercase;}
26+body #portal ul li.wiki::after { content:"<wiki>"; color:#555; }
27+body #portal ul li.blog::after { content:"<blog>"; color:#555; }
28+body #portal ul li a { line-height: 20px; padding:0px 5px; text-decoration: none;}
29+body #portal ul li a:visited { color:#ccc; text-decoration: none;}
30+body #portal ul li a:hover { text-decoration: underline; }
1831
1932@media (max-width: 730px) {
20− body div ul li span.counter { display: none }
33+ body #portal ul li span.counter { display: none }
2134}
2235@media (max-width: 630px) {
23− body div ul { columns: 2 !important; }
24− body div ul li span.counter { display: none }
36+ body #portal ul { columns: 2 !important; }
37+ body #portal ul li span.counter { display: none }
2538}
2639@media (max-width: 530px) {
27− body div ul { columns: 1 !important; }
28− body div ul li span.counter { display: inline }
40+ body #portal ul { columns: 1 !important; }
41+ body #portal ul li span.counter { display: inline }
2942}
scripts/hallway.js+52−3
@@ -4,6 +4,7 @@ function Hallway (sites) {
44 const feeds = {}
55 this.sites = sites
66 this.el = document.createElement('div')
7+ this.el.id = 'hallway'
78
89 this.install = function (host) {
910 host.appendChild(this.el)
@@ -18,10 +19,38 @@ function Hallway (sites) {
1819 }
1920
2021 this.refresh = function () {
21− console.log('!!')
22+ const entries = this.sortEntries()
23+ let html = ''
24+ for (const id in entries) {
25+ html += `${this.templateEntry(entries[id])}\n`
26+ }
27+ this.el.innerHTML = `<ul>${html}</ul>${this._footer()}`
2228 }
2329
24− //
30+ // Entries
31+
32+ this.sortEntries = function () {
33+ const a = []
34+ for (const id in feeds) {
35+ const feed = feeds[id]
36+ for (const i in feed.content) {
37+ const entry = feed.content[i]
38+ a.push(entry)
39+ }
40+ }
41+ return a
42+ }
43+
44+ this.templateEntry = function (entry) {
45+ const now = new Date()
46+ const then = Date.parse(entry.date)
47+ const diff = (now - then)
48+ const date = Math.floor(diff / 86400000)
49+
50+ return `<li class='entry'><span class='date'>${date}</span> <span class='author'>${entry.author}</span> <span class='body'>${entry.body}</span></li>`
51+ }
52+
53+ // Feeds
2554
2655 this.findFeeds = function () {
2756 console.log('Finding feeds..')
@@ -44,8 +73,28 @@ function Hallway (sites) {
4473 this.fetchFeed = function (id, feed) {
4574 console.log(`Fetching ${id}(${feed.path})..`)
4675 Promise.all([ fetch(feed.path).then(x => x.text()) ]).then(([content]) => {
47− feeds[id].content = content
76+ feeds[id].content = parseFeed(id, content)
4877 this.refresh()
4978 })
5079 }
80+
81+ // Extras
82+
83+ this._footer = function () {
84+ return '<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 add it to your entry in the webring.</p>'
85+ }
86+
87+ // Utils
88+
89+ function parseFeed (author, feed) {
90+ const lines = feed.split('\n')
91+ const entries = []
92+ for (const id in lines) {
93+ const line = lines[id]
94+ const date = line.substr(0, 25).trim()
95+ const body = line.substr(26).trim()
96+ entries.push({ date, body, author })
97+ }
98+ return entries
99+ }
51100}
scripts/portal.js+2−1
@@ -2,6 +2,7 @@
22
33function Portal (sites) {
44 this.el = document.createElement('div')
5+ this.el.id = 'portal'
56 this.sites = sites
67
78 // Templates
@@ -11,7 +12,7 @@ function Portal (sites) {
1112 }
1213
1314 function _buttons () {
14− return `<p class='buttons'><a href='#random' onClick="portal.reload('random')">Random</a> | <a href='https://github.com/XXIIVV/webring'>Information</a> <a id='icon' href='#random' onClick="portal.reload('random')"></a> | <a id="opml">OPML</a></p>`
15+ return `<p class='buttons'><a href='#random' onClick="portal.reload('random')">Random</a> | <a href='https://github.com/XXIIVV/webring'>Information</a> <a id='icon' href='#random' onClick="portal.reload('random')"></a> | <a href="hallway.html">The Hallway</a> | <a id="opml">OPML</a></p>`
1516 }
1617
1718 function _directory (sites) {