Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/retrowin/llms.txt

Use this file to discover all available pages before exploring further.

Webring is a decorative and functional homage to the late-1990s webring — a concept where independent personal sites linked together in a ring so visitors could discover related content. The component renders a compact dashed-border panel with the title * The Developer Webring * and three hyperlinks: [Previous], [Random], and [Next]. All three links currently point to # as placeholders and are designed to be swapped for real webring URLs when the site joins an actual ring or ring service. Webring accepts no props.

Usage

import { Webring } from './components/y2k/Webring';

function Footer() {
  return (
    <div className="mt-8">
      <Webring />
    </div>
  );
}

Styling

The component is laid out as a centred block with the following visual properties:
PropertyValue
Border2 px dashed border-win-gray
Backgroundbg-win-silver
Paddingp-4
Title fontfont-pixel, text-sm
Link fontSans-serif, text-xs
Link colourtext-blue-800 with underline
Link hoverhover:text-win-pink
The three links ([Previous], [Random], [Next]) are arranged in a horizontal row with gap-4 between them, centred under the title.

Wiring up real URLs

Replace the placeholder href="#" values with real webring navigation URLs. Most webring services generate per-member URLs of the form:
<a href="https://webring.example.com/previous?id=my-site">[Previous]</a>
<a href="https://webring.example.com/random?id=my-site">[Random]</a>
<a href="https://webring.example.com/next?id=my-site">[Next]</a>
Because Webring has no props, the simplest way to customise the links is to fork the component and replace the href values directly in the source.
All three links use standard <a> anchor tags, so they open in the same tab by default. If your webring URLs navigate away from the portfolio entirely, consider adding target="_blank" rel="noopener noreferrer" to each link so visitors can continue browsing the portfolio when they return.
Webring pairs naturally with HitCounter and Marquee as a retro-web footer trio. Stack them in a column at the bottom of a RetroWindow for the full 1999 personal-homepage experience.

Build docs developers (and LLMs) love