git.iko.soy/webring
on master help sign in
Displaying categories in the sidebar
e9834eeDevine Lu Linvega
links/main.css+19−12
compare with master
unifiedsplit
@@ -9,24 +9,29 @@ body div p a:hover { text-decoration: underline; }
9body div p b { font-weight: normal; font-family: 'input_mono_medium' }
9body div p b { font-weight: normal; font-family: 'input_mono_medium' }
10body div p.readme { max-width:500px; }
10body div p.readme { max-width:500px; }
11
11
12+body #sidebar { position: absolute;top: 0px;right: 0px;padding: 15px;width: 200px; overflow: hidden; height: calc(100vh - 75px);}
13+body #sidebar > * { border-bottom: 0px; line-height: 16px; padding-bottom: 0px }
14+body #sidebar > * li { text-transform: lowercase; }
15+body #sidebar > * li.selected { background: white; color:black; }
16+body #sidebar > * li:hover { cursor: pointer; }
17+body #sidebar > * li span.right { color:#555; float:right; }
18+body #sidebar > * li span.right:after { content: " msgs"; }
19+body #sidebar #channels li:before, body #sidebar #categories li:before { content:'/'; }
20+body #sidebar #users li:before { content:'@'; }
21+
22+@media only screen and (min-width:200px) and (max-width: 800px) {
23+ body #hallway #sidebar { position: absolute;top: 0px;right: 0px;padding: 15px;width: 200px;display: none;background-color: #000; }
24+ body #hallway #sidebar #channels { margin-top: 30px; }
25+}
26+
12/* Hallway */
27/* Hallway */
13
28
14body #hallway #entries { width: calc(100vw - 300px) !important; }
29body #hallway #entries { width: calc(100vw - 300px) !important; }
15−body #hallway #sidebar { position: absolute;top: 0px;right: 0px;padding: 15px;width: 200px; }
16
30
17body #hallway #pagination { margin: 10px; text-align: center; }
31body #hallway #pagination { margin: 10px; text-align: center; }
18body #hallway #pagination span { padding: 3px; margin: 2px; cursor: pointer; }
32body #hallway #pagination span { padding: 3px; margin: 2px; cursor: pointer; }
19body #hallway #pagination span.selected { background: white; color:black; }
33body #hallway #pagination span.selected { background: white; color:black; }
20
34
21−body #hallway #sidebar > * { border-bottom: 0px; line-height: 16px; padding-bottom: 0px }
22−body #hallway #sidebar > * li { text-transform: lowercase; }
23−body #hallway #sidebar > * li.selected { background: white; color:black; }
24−body #hallway #sidebar > * li:hover { cursor: pointer; }
25−body #hallway #sidebar > * li span.right { color:#555; float:right; }
26−body #hallway #sidebar > * li span.right:after { content: " msgs"; }
27−body #hallway #sidebar #channels li:before { content:'/'; }
28−body #hallway #sidebar #users li:before { content:'@'; }
29−
30body #hallway .entry { line-height: 16px; display: block; position: relative; padding-left:100px; }
35body #hallway .entry { line-height: 16px; display: block; position: relative; padding-left:100px; }
31body #hallway .entry .date { color: #555;display: block;float:right; margin-left:20px; padding-bottom: 16px;}
36body #hallway .entry .date { color: #555;display: block;float:right; margin-left:20px; padding-bottom: 16px;}
32body #hallway .entry .author { font-family: 'input_mono_medium'; position: absolute;left: 0px; }
37body #hallway .entry .author { font-family: 'input_mono_medium'; position: absolute;left: 0px; }
@@ -45,10 +50,8 @@ body #hallway ul li:last-child { border-bottom:0px; }
45
50
46@media only screen and (min-width:200px) and (max-width: 800px) {
51@media only screen and (min-width:200px) and (max-width: 800px) {
47 body #hallway #entries { width: 100% !important;margin-top: 30px; }
52 body #hallway #entries { width: 100% !important;margin-top: 30px; }
48− body #hallway #sidebar { position: absolute;top: 0px;right: 0px;padding: 15px;width: 200px;display: none;background-color: #000; }
49 body #hallway #showbar { position: absolute;top: 0px;width: 92%;height: 50px; background-image: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22'><path d='M11,4 L11,18 M4,4 L 4,18 M18,4 L18,18' stroke='%23555' fill='none' stroke-width='2' stroke-linecap='round'/></svg>");background-repeat: no-repeat;background-position: right;background-size: 25px; }
53 body #hallway #showbar { position: absolute;top: 0px;width: 92%;height: 50px; background-image: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22'><path d='M11,4 L11,18 M4,4 L 4,18 M18,4 L18,18' stroke='%23555' fill='none' stroke-width='2' stroke-linecap='round'/></svg>");background-repeat: no-repeat;background-position: right;background-size: 25px; }
50 body #hallway #hidebar { position: absolute;top: 0px;width: 100%;height: 50px;background-image: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22'><path d='M5,5 L17,17 M17,5 L5,17' stroke='%23555' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat: no-repeat;background-position: left;background-size: 25px; }
54 body #hallway #hidebar { position: absolute;top: 0px;width: 100%;height: 50px;background-image: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22'><path d='M5,5 L17,17 M17,5 L5,17' stroke='%23555' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat: no-repeat;background-position: left;background-size: 25px; }
51− body #hallway #sidebar #channels { margin-top: 30px; }
52}
55}
53
56
54/* Portal */
57/* Portal */
@@ -73,3 +76,7 @@ body #portal ul li a:hover { text-decoration: underline; }
73 body #portal ul { columns: 1 !important; }
76 body #portal ul { columns: 1 !important; }
74 body #portal ul li span.counter { display: inline }
77 body #portal ul li span.counter { display: inline }
75}
78}
79+
80+/* Wiki */
81+
82+
scripts/wiki.js+30−8
@@ -3,20 +3,42 @@
3function Wiki (sites) {
3function Wiki (sites) {
4 const feeds = {}
4 const feeds = {}
5 this.sites = sites
5 this.sites = sites
6− this.el = document.createElement('div')
6+ this._el = document.createElement('div')
7− this.el.id = 'wiki'
7+ this._el.id = 'wiki'
8+ this._sidebar = document.createElement('div')
9+ this._sidebar.id = 'sidebar'
10+ this._categories = document.createElement('ul')
11+ this._categories.id = 'categories'
12+ this._names = document.createElement('div')
13+ this._names.id = 'names'
8
14
9 this.index = {}
15 this.index = {}
16+ this.categories = {}
10
17
11 this.install = (host) => {
18 this.install = (host) => {
12 console.log('Wiki', 'Installing..')
19 console.log('Wiki', 'Installing..')
13 this.fetch()
20 this.fetch()
21+ this._el.appendChild(this._names)
22+ this._sidebar.appendChild(this._categories)
23+ this._el.appendChild(this._sidebar)
14− host.appendChild(this.el)
24+ host.appendChild(this._el)
15 }
25 }
16
26
17 this.start = () => {
27 this.start = () => {
18 console.log('Wiki', 'Starting..')
28 console.log('Wiki', 'Starting..')
19− this.el.innerHTML = 'hello.'
29+ // this.el.innerHTML = 'hello.'
30+ }
31+
32+ this.refresh = () => {
33+ console.log(Object.keys(this.index).length + ' terms')
34+
35+ // Cats
36+
37+ let html = ''
38+ for (const id in this.categories) {
39+ html += `<li>${id} <span class='right'>${this.categories[id].length}</span></li>`
40+ }
41+ this._categories.innerHTML = `${html}`
20 }
42 }
21
43
22 this.fetch = () => {
44 this.fetch = () => {
@@ -32,15 +54,15 @@ function Wiki (sites) {
32 }
54 }
33 }
55 }
34
56
35− this.refresh = () => {
36− console.log(Object.keys(this.index).length + ' terms')
37− }
38−
39 this.add = (name, value, cat, origin) => {
57 this.add = (name, value, cat, origin) => {
40 if (!this.index[name]) {
58 if (!this.index[name]) {
41 this.index[name] = []
59 this.index[name] = []
42 }
60 }
43 this.index[name].push({ value, cat, origin })
61 this.index[name].push({ value, cat, origin })
62+ if (!this.categories[cat]) {
63+ this.categories[cat] = []
64+ }
65+ this.categories[cat].push({ value, cat, origin })
44 }
66 }
45
67
46 this.parse = (site, content) => {
68 this.parse = (site, content) => {