4a0e867 · webring · git.iko.soy

links/main.css+6

@@ -74,6 +74,12 @@ body #wiki ul.term { margin-bottom: 15px; }

74body #wiki ul.term li.name { margin-bottom: 5px; }

75body #wiki #footer { padding-left: 60px; background-image: url(../icon.white.svg); background-size: 40px; background-repeat: no-repeat; background-position: 0px 10px; border-top: 2px solid white; padding-top: 22px; margin-top: 15px; max-width: calc(100% - 300px); min-height: 45px; line-height: 15px;}

76

77+/* progress indicator */

78+body #progress { color: #777; }

79+body #progress .busy { cursor: wait; }

80+body #progress progress { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #ccc; width: 100px; height: 5px; border: 1px solid #777; }

81+body #progress progress::-webkit-progress-bar, body progress::-moz-progress-bar { background: #777; }

82+

77@media (min-width: 630px) {

83@media (min-width: 630px) {

78 body aside { display: block; }

84 body aside { display: block; }

79 body #portal ul { columns: 3;}

85 body #portal ul { columns: 3;}

scripts/progress.jsnew file+47

@@ -0,0 +1,47 @@

1+'use strict'

2+

3+const Progress = keys => {

4+ const allKeys = new Set(keys.filter(key => key))

5+ const loadedKeys = new Set()

6+ const failedKeys = new Set()

7+

8+ const done = () => loadedKeys.size === allKeys.size

9+

10+ const className = () => done() ? 'done' : 'busy'

11+

12+ const formatPercentLoaded = () => `

13+ ${Math.round(100 * loadedKeys.size / Math.max(allKeys.size, 1))}% loaded

14+ `

15+

16+ const formatFailureCount = () => failedKeys.size === 0

17+ ? ''

18+ : `(${failedKeys.size} failed)`

19+

20+ const formatProgress = () => done()

21+ ? ''

22+ : `<p><progress value='${loadedKeys.size}' max='${allKeys.size}'></progress></p>`

23+

24+ const render = () => `

25+ <div class='${className()}'>

26+ <p>${formatPercentLoaded()} ${formatFailureCount()}</p>

27+ ${formatProgress()}

28+ </div>

29+ `

30+

31+ const didLoad = (key, success) => new Promise((resolve, reject) => {

32+ if (allKeys.has(key)) {

33+ loadedKeys.add(key)

34+ if (!success) failedKeys.add(key)

35+ return resolve()

36+ } else {

37+ return reject()

38+ }

39+ })

40+

41+ return {

42+ success: key => didLoad(key, true),

43+ failure: key => didLoad(key, false),

44+ done,

45+ render,

46+ }

47+}

scripts/wiki.js+9

@@ -4,6 +4,8 @@ const Wiki = sites => {

4 const entries = {}

5 const main = document.getElementById('main')

6 const aside = document.getElementById('aside')

7+ const progress = document.getElementById('progress')

8+ const progressCounter = Progress(sites.map(site => site.wiki))

7 const authors = new Set()

9 const authors = new Set()

8 const terms = new Set()

10 const terms = new Set()

9

11

@@ -115,15 +117,22 @@ const Wiki = sites => {

115 aside.innerHTML = `<ul>${cats}</ul>`

117 aside.innerHTML = `<ul>${cats}</ul>`

116 }

118 }

117

119

120+ const refreshProgress = () => {

121+ progress.innerHTML = progressCounter.render()

122+ }

123+

118 return {

124 return {

119 initialize: hash => {

125 initialize: hash => {

120 console.log('Wiki', 'Fetching...')

126 console.log('Wiki', 'Fetching...')

127+ refreshProgress()

121 sites.filter(site => site.wiki && site.author).forEach(site => {

128 sites.filter(site => site.wiki && site.author).forEach(site => {

122 fetch(site.wiki, { cache: 'no-store' }).then(x => x.text()).then(content => {

129 fetch(site.wiki, { cache: 'no-store' }).then(x => x.text()).then(content => {

123 parse(site, content)

130 parse(site, content)

124 refresh(stripHash(hash))

131 refresh(stripHash(hash))

132+ progressCounter.success(site.wiki).then(refreshProgress)

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

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

126 console.warn(`${site.wiki}`, err)

134 console.warn(`${site.wiki}`, err)

135+ progressCounter.failure(site.wiki).then(refreshProgress)

127 })

136 })

128 })

137 })

129 },

138 },

wiki.html+2

@@ -5,6 +5,7 @@

5 <meta name="viewport" content="width=device-width, initial-scale=1.0">

6 <link rel="stylesheet" type="text/css" href="links/fonts.css"/>

7 <link rel="stylesheet" type="text/css" href="links/main.css"/>

8+ <script src="scripts/progress.js"></script>

8 <script src="scripts/wiki.js"></script>

9 <script src="scripts/wiki.js"></script>

9 <script src="scripts/sites.js"></script>

10 <script src="scripts/sites.js"></script>

10 <script src="scripts/indental.js"></script>

11 <script src="scripts/indental.js"></script>

@@ -18,6 +19,7 @@

18 </main>

19 </main>

19 <footer id="footer">

20 <footer id="footer">

20 <p>The <strong>Wiki</strong> is a decentralized encyclopedia, to join the conversation, add a <a href="https://github.com/XXIIVV/webring#joining-the-wiki">wiki:</a> field to your entry in the <a href="https://github.com/XXIIVV/Webring/">webring</a>.</p>

21 <p>The <strong>Wiki</strong> is a decentralized encyclopedia, to join the conversation, add a <a href="https://github.com/XXIIVV/webring#joining-the-wiki">wiki:</a> field to your entry in the <a href="https://github.com/XXIIVV/Webring/">webring</a>.</p>

22+ <div id="progress"></div>

21 </footer>

23 </footer>

22 </div>

24 </div>

23 <script>

25 <script>