e4cf4b5..master · webring

git.iko.soy/webring

README.md+8−8

@@ -1,6 +1,6 @@

1# Webring

3−This [webring](https://wiki.xxiivv.com/webring) is an attempt to inspire artists & developers to create and maintain their own website and share traffic among each other. The webring's aim is to share hand-crafted websites such as **diaries, wikis & portfolios**. To add yourself to the ring, submit an [edit](https://github.com/XXIIVV/webring/edit/master/scripts/sites.js) to this repository.

3+This [webring](https://wiki.xxiivv.com/webring) is an attempt to inspire artists & developers to create and maintain their own website and share traffic among each other. The webring's aim is to share hand-crafted websites such as **diaries, wikis & portfolios**, single pagers with nothing but outgoing links to social platforms will be rejected. To add yourself to the ring, submit an [edit](https://github.com/XXIIVV/webring/edit/master/scripts/sites.js) to this repository.

5## Join the webring

@@ -9,25 +9,25 @@ This [webring](https://wiki.xxiivv.com/webring) is an attempt to inspire artists

9```

11- Add the webring icon to your website html.

12−- Add your website information to the [sites.js](https://github.com/XXIIVV/webring/edit/master/scripts/sites.js) file. The `url` key is required, but you can also include `title`, `type`, `author`, `contact`, and `rss`.

12+- Add your website url to the [sites.js](https://github.com/XXIIVV/webring/edit/master/scripts/sites.js) file.

13−- Submit a Pull Request with **the location of the webring icon** on your site.

13+- Submit a Pull Request with the location of the webring icon on your site.

15−Alternatively, if you your website has a dark background, use `icon.white.svg`. If your website is complaining about *https*, go ahead and host the icon yourself. **Single page websites, and websites acting only as portals to other social platforms, will be rejected**.

15+Alternatively, if you your website has a dark background, use `icon.white.svg`. If your website is complaning about *https*, go ahead and host the icon yourself.

17### Circular Linking

19Instead of linking to the directory, you can also link to the next link in the ring by adding parts of your site or domain in the hash of the request url:

21```

22−<a href='https://webring.xxiivv.com/#wiki.xxiivv' target='_blank' rel="noopener noreferrer"><img src='https://webring.xxiivv.com/icon.black.svg'/></a>

22+<a href='https://webring.xxiivv.com/#wiki.xxiivv' target='_blank'><img src='https://webring.xxiivv.com/icon.black.svg'/></a>

23```

25## API

27−This repository does not contain mature API capabilities, but there are a couple ways to request a list of sites and other information currently in the webring.

27+This repository does not contain mature API capabilities, but there is one way to request list of sites currently in the webring.

29−- Request [sites.js on xxiivv](https://webring.xxiivv.com/scripts/sites.js) or [sites.js on github](https://raw.githubusercontent.com/XXIIVV/webring/master/scripts/sites.js) and parse it. An example can be seen [here](https://gist.github.com/ckipp01/2ab7ac42e2837b4359efeb76eb49bb54).

29+- Request [sites.js on xxiivv](https://webring.xxiivv.com/scripts/sites.js) or [sites.js on github](https://raw.githubusercontent.com/XXIIVV/webring/master/scripts/sites.js)

30−- If you'd like a already parsed list, [webring-checker.now.sh/sites](https://webring-checker.now.sh/sites) will return an json array of the site objects in the webring. See [webring-checker.now.sh](https://webring-checker.now.sh) for more info on what else is available.

30+- Parse it as text from `[` to `]`, split by `,` and then trim all whitespace and `"` in resulting array.

32## Need Help?

hallway.htmldeleted−19

@@ -1,19 +0,0 @@

1−<!DOCTYPE html>

2−<html lang="en">

3−<head>

4− <meta charset="utf-8">

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/hallway.js"></script>

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

10− <title>Hallway</title>

11−</head>

12−<body>

13− <script>

14− const hallway = new Hallway(sites);

15− hallway.install(document.body);

16− hallway.start();

17− </script>

18−</body>

19−</html>

index.html−1

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

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

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

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

10− <script src="scripts/opml.js"></script>

11 <title>Webring</title>

10 <title>Webring</title>

12</head>

11</head>

13<body>

12<body>

links/main.css+11−34

@@ -1,42 +1,19 @@

1* { margin:0;padding:0;border:0;outline:0;text-decoration:none;font-weight:inherit;font-style:inherit;color:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;list-style:none;border-collapse:collapse;border-spacing:0; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}

3body { background:#f4f4f4; padding:0px; margin:0px; }

4−body 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;}

4+body div { display:block; background: #ddd;min-height: calc(100vh - 60px);width: calc(100vw - 60px);margin: 15px;color: #555;padding: 15px;font-family:'input_mono_regular', 'Monospaced','Courier New',courier;font-size:11px; position: relative; border-radius: 2px }

5−body div ul { max-width: 800px; border-bottom: 2px solid white;padding-bottom: 15px;margin-bottom:15px; overflow: hidden;}

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: 10px;right:10px;background-position: center;padding:0px }

6body div p { display:block; padding:0px 5px; line-height: 20px}

7−body div p a { text-decoration: underline;}

7+body div p a { color:black; text-decoration: none; text-decoration: underline;}

8body div p a:hover { text-decoration: underline; }

9−body div p b { font-weight: normal; font-family: 'input_mono_medium' }

9+body div p b { font-weight: normal; color:#000; font-family: 'input_mono_medium' }

10body div p.readme { max-width:500px; }

11+body div ul { display:block; max-width: 800px; columns:3; border-bottom: 2px solid white;padding-bottom: 15px;margin-bottom:15px; overflow: hidden;}

12+body div ul li { width: 22em; display:block; padding-left:5px; overflow: hidden; text-overflow: ellipsis; }

13+body div ul li a { line-height: 20px; display: inline-block; color:#000; padding:0px 5px; text-decoration: none;}

14+body div ul li a:visited { color:#999; text-decoration: none;}

15+body div ul li a:hover { background:#ccc; color:#000; text-decoration: none; border-radius: 2px }

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; }

31−

32−@media (max-width: 730px) {

17+@media (max-width: 950px){

33− body #portal ul li span.counter { display: none }

34−}

35−@media (max-width: 630px) {

36− body #portal ul { columns: 2 !important; }

18+ body div ul { columns: 2 }

37− body #portal ul li span.counter { display: none }

38}

19}

39−@media (max-width: 530px) {

40− body #portal ul { columns: 1 !important; }

41− body #portal ul li span.counter { display: inline }

42−}

scripts/hallway.jsdeleted−110

@@ -1,110 +0,0 @@

1−'use strict'

2−

3−function Hallway (sites) {

4− const feeds = {}

5− this.sites = sites

6− this.el = document.createElement('div')

7− this.el.id = 'hallway'

8−

9− this.install = function (host) {

10− host.appendChild(this.el)

11− // Find feeds

12− this.findFeeds()

13− }

14−

15− this.start = function () {

16− this.el.innerHTML = 'hello'

17− this.fetchFeeds()

18− // this.fetch('https://wiki.xxiivv.com/twtxt.txt')

19− }

20−

21− this.refresh = function () {

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()}`

28− }

29−

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'>${ago(date)}</span> <span class='author'>${entry.author}</span> <span class='body'>${entry.body}</span></li>`

51− }

52−

53− // Feeds

54−

55− this.findFeeds = function () {

56− console.log('Finding feeds..')

57− for (const id in sites) {

58− const site = sites[id]

59− if (site.feed && site.author) {

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

61− }

62− }

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

64− }

65−

66− this.fetchFeeds = function () {

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

68− for (const id in feeds) {

69− this.fetchFeed(id, feeds[id])

70− }

71− }

72−

73− this.fetchFeed = function (id, feed) {

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

75− Promise.all([ fetch(feed.path, { cache: 'no-store' }).then(x => x.text()) ]).then(([content]) => {

76− feeds[id].content = parseFeed(id, content)

77− this.refresh()

78− })

79− }

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− }

100−

101− function ago (days, cap = 9999) {

102− if (-days > cap) { return `${this.toString(true)}` }

103− if (days === -1) { return `yesterday` }

104− if (days === 1) { return 'tomorrow' }

105− if (days === 0) { return 'today' }

106− if (days < -365) { return `${Math.floor(days / -365)} years ago` }

107− if (days < 1) { return `${days * -1} days ago` }

108− return `in ${days} days`

109− }

110−}

scripts/opml.jsdeleted−11

@@ -1,11 +0,0 @@

1−let outlines = sites.filter((site) => !!site.rss).map((site) => {

2− return `<outline type="rss" xmlUrl="${site.rss}" title="${site.title}"/>`

3−})

4−

5−let template = `<?xml version="1.0" encoding="UTF-8"?><opml version="1.1"><head></head><body>${outlines.join('')}</body></opml>`

6−

7−window.onload = function () {

8− let a = document.getElementById('opml')

9− a.setAttribute('href', 'data:text/plain;charset=utf-8,' + window.encodeURIComponent(template))

10− a.setAttribute('download', 'webring.opml')

11−}

scripts/portal.js+6−12

@@ -2,7 +2,6 @@

3function Portal (sites) {

4 this.el = document.createElement('div')

5− this.el.id = 'portal'

6 this.sites = sites

5 this.sites = sites

8 // Templates

7 // Templates

@@ -12,21 +11,17 @@ function Portal (sites) {

12 }

11 }

14 function _buttons () {

13 function _buttons () {

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

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></p>`

16 }

15 }

18 function _directory (sites) {

17 function _directory (sites) {

19 return `

18 return `

20− <ul>${sites.reduce((acc, site, id) => { return `${acc}<li class='${site.type}'><span class='counter'>${id})</span><a href='${site.url}'>${_name(site)}</a></li>` }, '')}</ul>\n${_readme()}${_buttons()}`

19+ <ul>${sites.reduce((acc, val, id) => { return `${acc}<li>${id}) <a href='${val}'>${val.split('//')[1]}</a></li>` }, '')}</ul>\n${_readme()}${_buttons()}`

21 }

20 }

23− function _name (site) {

22+ function _redirect (target) {

24− return site.title ? site.title : `${site.url.split('//')[1]}`

25− }

26−

27− function _redirect (site) {

28− return `<p>Redirecting to <a href="${site.url}">${site.url}</a></p><meta http-equiv="refresh" content="3; url=${site.url}">

23+ return `<p>Redirecting to <b>${target}</b></p><meta http-equiv="refresh" content="3; url=${target}">

29− <p class='buttons'><a href='#' onClick="portal.reload('')">Directory</a> | <a href='#${site.url}' onClick="portal.reload('random')">Skip</a> | <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></p>`

24+ <p class='buttons'><a href='#' onClick="portal.reload('')">Directory</a> | <a href='#${target}' onClick="portal.reload('random')">Skip</a> | <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></p>`

30 }

25 }

32 //

27 //

@@ -55,8 +50,7 @@ function Portal (sites) {

55 }

50 }

57 for (const id in this.sites) {

52 for (const id in this.sites) {

58− const site = this.sites[id]

59− if (site.url.indexOf(hash) > -1) {

53+ if (this.sites[id].indexOf(hash) > -1) {

60 return parseInt(id)

54 return parseInt(id)

61 }

55 }

62 }

56 }

scripts/sites.js+66−86

@@ -1,90 +1,70 @@

1−'use strict'

1+'use strict';

3// Don't forget the comma! No trailing slashes

4−// protocol://url.domain.ext

4+// protocole://url.domain.ext

6const sites = [

7− { url: 'https://wiki.xxiivv.com', title: 'xxiivv', type: 'wiki', author: 'Devine Lu Linvega', contact: 'aliceffekt@gmail.com', rss: 'https://wiki.xxiivv.com/links/rss.xml', feed: 'https://wiki.xxiivv.com/twtxt.txt' },

7+ "https://wiki.xxiivv.com"

8− { url: 'http://estevancarlos.com' },

8+ , "http://estevancarlos.com"

9− { url: 'https://electro.pizza', title: 'electro pizza', type: 'blog', rss: 'https://electro.pizza/feed.xml' },

9+ , "https://electro.pizza"

10− { url: 'https://ianjbattaglia.co' },

10+ , "https://monochromatic.co"

11− { url: 'https://avanier.now.sh/wiki', title: 'Ath', type: 'wiki', author: 'Josh Avanier', contact: 'joshavanier@protonmail.com' },

11+ , "https://joshavanier.github.io"

12− { url: 'http://kaemura.com' },

12+ , "http://kaemura.com"

13− { url: 'https://liamcooke.com' },

13+ , "https://liamcooke.com"

14− { url: 'https://electricgecko.de' },

14+ , "https://electricgecko.de"

15− { url: 'https://wichniow.ski' },

15+ , "https://wichniow.ski"

16− { url: 'https://hraew.autophagy.io' },

16+ , "https://hraew.autophagy.io"

17− { url: 'http://evenunto.net' },

17+ , "https://evenunto.net"

18− { url: 'https://anxl.faith' },

18+ , "https://anxl.faith"

19− { url: 'https://xvw.github.io', title: 'xvw.github.io', type: 'blog', author: 'Xavier Van de Woestyne', contact: 'xaviervdw@gmail.com', rss: 'https://xvw.github.io/atom.xml' },

19+ , "https://xvw.github.io"

20− { url: 'https://heracl.es' },

20+ , "https://heracl.es"

21− { url: 'https://felipecortez.net' },

21+ , "https://felipecortez.net"

22− { url: 'http://luminghao.com' },

22+ , "http://luminghao.com"

23+ , "https://theiceshelf.com"

23− { url: 'https://turelio.github.io' },

24+ , "https://turelio.github.io"

24− { url: 'https://spaceshipsin.space', title: 'spaceshipsin.space', type: 'hybrid', author: 'Gaeel Bradshaw-Rodriguez', contact: 'gaeel@spaceshipsin.space' },

25+ , "https://spaceshipsin.space"

25− { url: 'https://log.lectronice.com', title: 'lectrolog.', type: 'blog', author: 'lectronice', contact: 'i.love.spam@lectronice.com' },

26+ , "http://log.lectronice.com"

26− { url: 'https://craze.co.uk' },

27+ , "https://craze.co.uk"

27− { url: 'https://shaneckel.com' },

28+ , "https://shaneckel.com"

28− { url: 'https://cblgh.org' },

29+ , "https://cblgh.org"

29− { url: 'https://ellugar.co', title: 'ellugar', type: 'wiki', author: 'afk', contact: 'afk@ellugar.co', rss: 'http://feeds.ellugar.co/ellugar-logs' },

30+ , "https://ellugar.co"

30− { url: 'http://hur.bet' },

31+ , "http://hur.bet"

31− { url: 'http://chigby.org' },

32+ , "http://chigby.org"

32− { url: 'https://longest.voyage' },

33+ , "https://longest.voyage"

33− { url: 'https://palomakop.tv' },

34+ , "https://palomakop.tv"

34− { url: 'https://travisshears.com' },

35+ , "https://travisshears.com"

35− { url: 'https://v-os.ca' },

36+ , "https://v-os.ca"

36− { url: 'http://secretinternet.club' },

37+ , "http://secretinternet.club"

37− { url: 'https://jmandel.xyz' },

38+ , "https://jmandel.xyz"

38− { url: 'https://systems.ws' },

39+ , "https://systems.ws"

39− { url: 'https://jamesin.space' },

40+ , "https://jamesin.space"

40− { url: 'https://nathanwentworth.co' },

41+ , "https://nathanwentworth.co"

41− { url: 'https://eswat.ca' },

42+ , "https://eswat.ca"

42− { url: 'https://uonai.space' },

43+ , "https://uonai.space"

43− { url: 'http://controls.ee' },

44+ , "http://controls.ee"

44− { url: 'https://wasin.io' },

45+ , "https://wasin.io"

45− { url: 'https://inns.studio' },

46+ , "https://inns.studio"

46− { url: 'http://kokorobot.ca' },

47+ , "http://kokorobot.ca"

47− { url: 'https://ameyama.com', title: '雨山', type: 'blog', author: 'jrc03c', contact: 'josh@ameyama.com', rss: 'https://ameyama.com/blog/rss.xml' },

48+ , "https://ameyama.com"

48− { url: 'https://wake.st' },

49+ , "https://wake.st"

49− { url: 'https://xarene.la' },

50+ , "https://xarene.la"

50− { url: 'https://alex.zyzhang.me' },

51+ , "https://alex.zyzhang.me"

51− { url: 'http://bildwissenschaft.vortok.info' },

52+ , "http://bildwissenschaft.vortok.info"

52− { url: 'https://jakofranko.github.com' },

53+ , "https://jakofranko.github.com"

53− { url: 'https://aeriform.io' },

54+ , "https://aeriform.io"

54− { url: 'http://blog.lucasdidthis.com' },

55+ , "http://blog.lucasdidthis.com"

55− { url: 'http://npisanti.com', title: 'npisanti.com', author: 'Nicola Pisanti', contact: 'nicola@npisanti.com', rss: 'http://npisanti.com/journal/rss.xml' },

56+ , "http://npisanti.com"

56− { url: 'https://underscorediscovery.ca' },

57+ , "https://underscorediscovery.ca"

57− { url: 'https://drisc.io', title: 'drisc.io', type: 'wiki', author: 'Cory Driscoll', contact: 'cory@drisc.io' },

58+ , "https://drisc.io"

58− { url: 'https://neufv.website' },

59+ , "https://neufv.website"

60+ , "https://simbolo.xyz"

59− { url: 'https://ricky.codes' },

61+ , "https://ricky.codes"

60− { url: 'https://maxdeviant.com' },

62+ , "https://maxdeviant.com"

61− { url: 'https://tynandebold.com' },

63+ , "https://tynandebold.com"

62− { url: 'http://gytis.co' },

64+ , "http://gytis.co"

63− { url: 'https://nomand.co' },

65+ , "https://nomand.co"

64− { url: 'http://memoriata.com' },

66+ , "http://memoriata.com"

65− { url: 'https://mmm.s-ol.nu' },

67+ , "https://mmm.s-ol.nu"

66− { url: 'https://chad.is' },

68+ , "https://chad.is"

67− { url: 'https://smidgeo.com/bots' },

69+ , "https://smidgeo.com/bots"

68− { url: 'https://iko.soy' },

69− { url: 'http://atelieroilandsugar.com' },

70− { url: 'https://magoz.is' },

71− { url: 'https://szymonkaliski.com' },

72− { url: 'https://phse.net', title: 'phse.net', type: 'blog', author: 'Stephen Lindberg', rss: 'https://phse.net/post/index.xml' },

73− { url: 'https://rosano.ca' },

74− { url: 'https://soyboysky.github.io' },

75− { url: 'https://gndclouds.cc' },

76− { url: 'https://xuv.be' },

77− { url: 'https://dsdshcym.github.io' },

78− { url: 'https://wiki.chronica.xyz', title: 'chronica', type: 'wiki', author: 'Chris Kipp', contact: 'ckipp@pm.me' },

79− { url: 'https://boffosocko.com' },

80− { url: 'https://hex22.org' },

81− { url: 'https://patrikarvidsson.com' },

82− { url: 'https://sophieleetmaa.com' },

83− { url: 'https://xinniw.github.io' },

84− { url: 'https://mboxed.github.io/forida' },

85− { url: 'https://letters.vexingworkshop.com' },

86− { url: 'https://tom.org.nz/about' },

87− { url: 'https://teknari.com' },

88− { url: 'https://colectivo-de-livecoders.gitlab.io/', title: 'Colectivo de Livecoders', type: 'blog', author: 'CLiC', contact: 'https://t.me/clic_laplata' },

89− { url: 'https://www.madewithtea.com', title: 'madewithtea.com', type: 'blog' }

90−]

70+];