├── Px437_TandyOld_TV.ttf ├── README.md ├── favicon.ico ├── favicon.png ├── functions.js ├── github.gif ├── index.html ├── join.html ├── links.html ├── links.json ├── next.html ├── prev.html ├── random.html ├── sites.js └── style.css /Px437_TandyOld_TV.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackmcdade/weird-wide-webring/8a965c0f80fb76bdeb367373de5b6e425ffa311c/Px437_TandyOld_TV.ttf -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Weird Wide Webring 2 | The web needs a little more weird. These sites are helping. 3 | 4 | > THIS PROJECT HAS BEEN RETIRED. CHECK OUT [MY DISCUSSION](https://github.com/jackmcdade/weird-wide-webring/discussions) TO LEARN WHY. THANKS FOR THE GOOD TIMES! 5 | 6 | ## Requirements for joining 7 | 8 | Your site must be unique and weird in some way. It can be the way it looks. It can be the way you write or what you write about. It can be the way it smells. It can be the way your footer is covered in feet, your sidebar has a sidebartender, or blog is spelled "blag". But there must be something. 9 | 10 | 11 | ## Important Note 12 | 13 | I reserve the right to remove or reorder links if I feel it will help the user experience. The weirdest ones will likely go to the top, encouraging the weird to be weirder! 14 | 15 | 16 | ## How to submit your site 17 | 18 | **Add the webring links to your site first**, then fork this repo, add your site's name and URL to the [sites.js](https://github.com/jackmcdade/weird-wide-webring/blob/master/sites.js) file, and send me a pull request with **why you want to join.** That's it. If you're weird enough and want it enough, I'll let you in. 19 | 20 | I hope you don't take offense if you don't get approved. Not everyone will make it. If at first you don't get in, tweak and try again! I simply must think of the people finding this webring and hope to give them a consistently weird experience in some way. 21 | 22 | ## How to add the webring to your site 23 | 24 | If you want in, you should display your webring links with pride. Rather than require scripts and injecting hard to override HTML into your beautifully wierd website, **you can style your links however you want.** Make them weird, beautiful, nostalgic, minimalistic, outrageous, whimsicle, mysterious, fragrant, terrifying, or covered in hot butter. Just make it yours. 25 | 26 | **All you need to do is add the following links to your site somewhere:** 27 | 28 | | Link Description | URL | 29 | |---|---| 30 | | Previous site | `https://weirdwidewebring.net/prev.html` | 31 | | Next site | `https://weirdwidewebring.net/next.html` | 32 | | Random site | `https://weirdwidewebring.net/random.html` | 33 | | List all sites | `https://weirdwidewebring.net` | 34 | | Join the ring | `https://weirdwidewebring.net/join.html` | 35 | 36 | The link will work out your position in the list and redirect visitors to the next site in the webring. 37 | 38 | ## Links API 39 | 40 | You can retrieve a list of the webring links (next/previous/random/list/join) as either an HTML unstyled-list partial or a JSON file from: 41 | 42 | * [HTML](https://weirdwidewebring.net/links.html) 43 | * [JSON](https://weirdwidewebring.net/links.json) 44 | 45 | ## Privacy First 46 | 47 | We don't collect or store any information beyond the list of sites themselves. This is for fun, not for profit. 48 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackmcdade/weird-wide-webring/8a965c0f80fb76bdeb367373de5b6e425ffa311c/favicon.ico -------------------------------------------------------------------------------- /favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackmcdade/weird-wide-webring/8a965c0f80fb76bdeb367373de5b6e425ffa311c/favicon.png -------------------------------------------------------------------------------- /functions.js: -------------------------------------------------------------------------------- 1 | let urlParams = new URLSearchParams(window.location.search) 2 | 3 | function getSites() { 4 | return sites 5 | } 6 | 7 | function getReferringSite() { 8 | if (urlParams.has('referrer')) { 9 | return 'https://' + urlParams.get('referrer'); 10 | } else if (document.referrer !== '') { 11 | return 'https://' + new URL(document.referrer).host 12 | } 13 | 14 | return getRandomSite() 15 | } 16 | 17 | function getNextSite() { 18 | var index = sites.findIndex(element => element.url === getReferringSite()) 19 | var site = sites[index + 1] || sites[0] 20 | 21 | return site.url 22 | } 23 | 24 | function getPreviousSite() { 25 | var index = sites.findIndex(element => element.url === getReferringSite()) 26 | var site = (index - 1) < 0 ? sites[sites.length - 1] : sites[index - 1] 27 | 28 | return site.url 29 | } 30 | 31 | function getRandomSite() { 32 | return sites[Math.floor(Math.random() * sites.length)].url 33 | } 34 | 35 | function getCounterStats() { 36 | fetch('https://app.usefathom.com/vip/jack-mcdade') 37 | .then(response => response.json()) 38 | .then(function(data) { 39 | document.querySelectorAll('#hit-counter')[0].innerHTML = zeroPad(data, 7); 40 | }) 41 | } 42 | 43 | getCounterStats() 44 | 45 | const zeroPad = (num, places) => String(num).padStart(places, '0') 46 | -------------------------------------------------------------------------------- /github.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackmcdade/weird-wide-webring/8a965c0f80fb76bdeb367373de5b6e425ffa311c/github.gif -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Weird Wide Webring 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

Weird Wide Webring

17 |

The web needs a little more weird. These sites are helping.

18 |
19 | 25 |
26 |

Want to join?

27 | 28 | Join the Weird Wide Webring on Github 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /join.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Join the Weird Wide Webring 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

Join the Weird Wide Webring

14 |
15 |

If you wish the web were simpler, more fun, and all around more weird, this might be for you. Head over to github for instructions on how to submit your site.

16 |

← Go back to the sites.

17 |
18 | 19 | Join the Weird Wide Webrin gon Github 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /links.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /links.json: -------------------------------------------------------------------------------- 1 | { 2 | "previous": "https://weirdwidewebring.net/prev.html", 3 | "next": "https://weirdwidewebring.net/next.html", 4 | "random": "https://weirdwidewebring.net/random.html", 5 | "list": "https://weirdwidewebring.net", 6 | "join": "https://weirdwidewebring.net/join.html" 7 | } -------------------------------------------------------------------------------- /next.html: -------------------------------------------------------------------------------- 1 | Next Site in the Weird Wide Webring 2 | 3 | 4 | 7 | -------------------------------------------------------------------------------- /prev.html: -------------------------------------------------------------------------------- 1 | Next Previous in the Weird Wide Webring 2 | 3 | 4 | 7 | -------------------------------------------------------------------------------- /random.html: -------------------------------------------------------------------------------- 1 | Random Site in the Weird Wide Webring 2 | 3 | 4 | 7 | -------------------------------------------------------------------------------- /sites.js: -------------------------------------------------------------------------------- 1 | let sites = [ 2 | { 3 | name: "Jack McDade", 4 | url: 'https://jackmcdade.com', 5 | because: "You'll know." 6 | }, 7 | { 8 | name: "Mighty Fine Copy", 9 | url: 'https://www.mightyfinecopy.com/', 10 | because: "Colors! Words! Ideas!" 11 | }, 12 | { 13 | name: "Paul Jarvis", 14 | url: 'https://pjrvs.com', 15 | because: "Articles with a powerfully unique perspective" 16 | }, 17 | { 18 | name: "Luigi Battaglioli", 19 | url: 'https://theluigi.com', 20 | because: "Writes about weirdness." 21 | }, 22 | { 23 | name: "Ross Wintle", 24 | url: 'https://rosswintle.uk/', 25 | because: "Unique design complete with fake terminal!" 26 | 27 | }, 28 | { 29 | name: "David A. Lindahl", 30 | url: 'https://davidalindahl.com', 31 | because: "Rad colors and unique side projects." 32 | }, 33 | { 34 | name: "Miguel Piedrafita", 35 | url: 'https://miguelpiedrafita.com', 36 | because: "Prolific teenager programmers are inspiring!" 37 | }, 38 | { 39 | name: "Teevio", 40 | url: 'https://teev.io', 41 | because: "Lots of unique content!" 42 | }, 43 | { 44 | name: "Matt Lantz", 45 | url: 'https://mattlantz.ca', 46 | because: "Says controversial things about tech stuff." 47 | }, 48 | { 49 | name: "Jamie Howard", 50 | url: 'https://jamiehoward.co', 51 | because: "Beautiful illustrations." 52 | }, 53 | { 54 | name: "David Llop", 55 | url: 'https://davidllop.com', 56 | because: "That font! Those colors!" 57 | }, 58 | { 59 | name: "Jesse Leite", 60 | url: 'https://jesseleite.com', 61 | because: "Master of puns." 62 | }, 63 | { 64 | name: "Colin Dismuke", 65 | url: 'https://www.colindismuke.com', 66 | because: "Lots of unique content." 67 | }, 68 | { 69 | name: "Aaron Francis", 70 | url: 'https://aaronfrancis.com/', 71 | because: "Has a wierd list of things that work when broken." 72 | }, 73 | { 74 | name: "Scott Zirkel", 75 | url: 'https://scottzirkel.com', 76 | because: "He-Man parodies. Obviously." 77 | }, 78 | { 79 | name: "Ben Leivian", 80 | url: 'https://benleivian.com/', 81 | because: "Five all-beef patties, special sauce, lettuce, chee—" 82 | }, 83 | { 84 | name: "Dave Smyth", 85 | url: 'https://davesmyth.com', 86 | because: "Font switcher. Colours. Side projects." 87 | }, 88 | { 89 | name: "Danny de Vries", 90 | url: 'https://dandevri.es', 91 | because: "ASCII art rocks." 92 | }, 93 | { 94 | name: "Blain Smith", 95 | url: 'https://blainsmith.com', 96 | because: "Text only for life." 97 | }, 98 | { 99 | name: "Greg McVerry", 100 | url: 'https://jgregorymcverry.com/mypoetry', 101 | because: "Weird MultiMedia Poetry" 102 | }, 103 | { 104 | name: "Nathaniel Houk", 105 | url: 'http://linuxdeveloper.io', 106 | because: "Unique programming projects from decades ago." 107 | }, 108 | { 109 | name: "Gregory Hammond", 110 | url: 'https://gregoryhammond.ca', 111 | because: "Canadian geek who is trying to be unbiased, yet still talk about tech." 112 | }, 113 | { 114 | name: "Lorenzo Bersano", 115 | url: 'https://lorenzobersano.com', 116 | because: "Defying the fixed nature of the Web" 117 | }, 118 | { 119 | name: "Rings around the Internet", 120 | url: 'https://fanlistings.nickifaulk.com/webrings/', 121 | because: "Because I'm a weirdo who loves webrings and this is a fansite dedicated to them." 122 | }, 123 | { 124 | name: "Badly Drawn Ben", 125 | url: 'https://badlydrawnben.com/', 126 | because: "Unstable web design. Unnecessary animation. Unsafe box-cutting implements." 127 | }, 128 | { 129 | name: "Wyatt Castaneda", 130 | url: 'https://wyattblogs.com/', 131 | because: "Blogs are like trail mix, little of this, little of that." 132 | }, 133 | { 134 | name: "Vern's World", 135 | url: 'https://verns.world/', 136 | because: "I love the old internet and want it to go back that way ever so much. Also because my website kicks ass." 137 | }, 138 | { 139 | name: "Biebersoft", 140 | url: 'http://biebersoft.tk/', 141 | because: "I bring back the videogame spoofs like its 1999 - Website recreated like webrings never went out of style." 142 | }, 143 | { 144 | name: "Dennis Mai", 145 | url: 'https://www.dennismai.dev', 146 | because: "Shamelessly Strange. Embarassingly Authentic." 147 | }, 148 | { 149 | name: "erick david", 150 | url: 'https://erickdavid.net', 151 | because: "Too young to miss Geocities." 152 | }, 153 | { 154 | name: "Sadness", 155 | url: 'https://sadgrl.online', 156 | because: "The internet is too boring nowadays." 157 | }, 158 | { 159 | name: "Biebersoft.net", 160 | url: 'https://biebersoft.net/', 161 | because: "I bring back the videogame spoofs like its 1999 - Now with BETA HTML5 arcade!" 162 | }, 163 | { 164 | name: "Kev Quirk", 165 | url: 'https://kevq.uk', 166 | because: "A very blue site, like a deep ocean of meandering thought; but also a cool avatar (try hovering over it)." 167 | }, 168 | { 169 | name: "leihu", 170 | url: "https://leihu.com", 171 | because: "Been weird for 21 years over 67 redesigns. Weird drawings, and stories!" 172 | }, 173 | { 174 | name: "chovy", 175 | url: "https://chovy.neocities.org", 176 | because: "Adventures in boondocking and overlanding" 177 | }, 178 | { 179 | name: "Tommi’s space", 180 | url: "https://tommi.space", 181 | because: "A messy representation of an even messier mind!" 182 | }, 183 | { 184 | name: "fLaMEdFury", 185 | url: "https://flamedfury.com", 186 | because: "My personal homepage, full of stuff that means everything to me, and nothing to you. fLaMEdFury draws inspiration from a web that existed 20 years ago!" 187 | } 188 | ] 189 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Tandy'; 3 | src: url('/Px437_TandyOld_TV.ttf') format('truetype'); 4 | } 5 | 6 | * { 7 | box-sizing: border-box; 8 | -webkit-font-smoothing: none; 9 | font-family: 'Tandy', Arial, Helvetica, sans-serif; 10 | } 11 | 12 | body { 13 | background: #c0c0c0; 14 | padding: 32px; 15 | text-align: center; 16 | image-rendering: pixelated; 17 | } 18 | 19 | h1 { 20 | font-size: 48px; 21 | } 22 | 23 | p { 24 | margin-bottom: 2em; 25 | } 26 | 27 | .list { 28 | align-items: center; 29 | max-width: 640px; 30 | margin: 0 auto; 31 | padding: 64px 0; 32 | } 33 | 34 | .content { 35 | max-width: 800px; 36 | margin: 0 auto; 37 | padding: 64px 0; 38 | line-height: 1.25; 39 | } 40 | 41 | .box { 42 | background: silver; 43 | box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; 44 | display: flex; 45 | flex-direction: column; 46 | padding: 12px 24px; 47 | min-height: 23px; 48 | text-align: left; 49 | text-decoration: none; 50 | width: 100%; 51 | } 52 | 53 | .box:active { 54 | box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey; 55 | padding: 18px 22px 0 6px 16px; 56 | } 57 | 58 | .box:focus { 59 | outline: 1px dotted #000; 60 | outline-offset: -6px; 61 | } 62 | 63 | .box .name { 64 | color: teal; 65 | display: block; 66 | font-size: 16px; 67 | margin-bottom: 8px; 68 | } 69 | 70 | .box .because { 71 | display: block; 72 | font-size: 11px; 73 | line-height: 1.5; 74 | color: #222; 75 | } 76 | 77 | .github { 78 | position: absolute; 79 | top: 0; 80 | right: 0; 81 | } 82 | 83 | #hit-counter { 84 | background: black; 85 | color: red; 86 | font-family: Orbitron, sans-serif; 87 | font-size: 18px; 88 | display: inline-block; 89 | padding: 2px 20px 3px; 90 | letter-spacing: 5px; 91 | text-decoration: none; 92 | text-shadow: 0 0 10px red; 93 | margin-top: 32px; 94 | } 95 | 96 | #hit-counter:hover { 97 | color: greenyellow; 98 | text-shadow: 0 0 10px greenyellow; 99 | } 100 | 101 | ::-webkit-scrollbar { 102 | width: 16px; 103 | } 104 | 105 | ::-webkit-scrollbar-corner { 106 | background: #dfdfdf; 107 | } 108 | ::-webkit-scrollbar-thumb { 109 | background-color: #dfdfdf; 110 | box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; 111 | } 112 | 113 | ::-webkit-scrollbar-track { 114 | background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg width='2' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 0H0v1h1v1h1V1H1V0z' fill='silver'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 0H1v1H0v1h1V1h1V0z' fill='%23fff'/%3E%3C/svg%3E); 115 | } 116 | --------------------------------------------------------------------------------