Connect Your Site

Add the webring widget to your portfolio to link yourself with other Laurier CS students. Visitors can navigate between member sites using the ← Prev and Next → buttons. The embed below calls this ring at https://laurier.network.

Preview

This is what the widget looks like on your site:

How to Add It

Open a pull request to add yourself to data/members.json
Once merged, replace YOUR_ID in the snippet below with your member id
Paste the React/JSX component into your portfolio (e.g. footer) where you want the widget to appear

members.json entry (copy/paste)

Replace the placeholders with your info. Leave socials blank if you don't want the icons shown.

{
  "id": "your-id",
  "name": "Your Name",
  "url": "https://your-site.com",
  "tags": ["SWE", "Web"],
  "Role": "Your role / title (shown under your name)",
  "Year": "2027",
  "Github": "",
  "Linkedin": "",
  "X": ""
}

`Github`, `Linkedin`, and `X` must be full URLs (start with `https://`), not just usernames.

Embed Snippet

<!-- WLU WebRing Widget (React/JSX) — points to https://laurier.network -->
import React from "react";

const WEBRING_URL = "https://laurier.network"; // e.g. https://laurier.network

export function WluWebRingWidget({ memberId = "YOUR_ID" }) {
  const prevHref = `${WEBRING_URL}/api/prev?from=${encodeURIComponent(memberId)}`;
  const nextHref = `${WEBRING_URL}/api/next?from=${encodeURIComponent(memberId)}`;

  return (
    <div style={{ display: "flex", justifyContent: "center", padding: "16px 0" }}>
      <nav
        style={{
          display: "grid",
          width: "100%",
          maxWidth: 448,
          gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
          alignItems: "center",
          gap: 12,
          color: "#6B7280",
          fontSize: 16,
        }}
      >
        <a
          href={prevHref}
          style={{ justifySelf: "start", fontWeight: 500, textDecoration: "none", color: "#6B7280" }}
          aria-label="Previous member"
        >
          ←
        </a>

        <a
          href={WEBRING_URL}
          style={{ display: "flex", justifyContent: "center", textDecoration: "none" }}
          aria-label="WLU WebRing home"
        >
          <img
            src={`${WEBRING_URL}/laurier-goldenhawk.svg`}
            alt="Golden Hawk"
            width={32}
            height={32}
            style={{ height: 32, width: 32, filter: "grayscale(100%)" }}
          />
        </a>

        <a
          href={nextHref}
          style={{ justifySelf: "end", fontWeight: 500, textDecoration: "none", color: "#6B7280" }}
          aria-label="Next member"
        >
          →
        </a>
      </nav>
    </div>
  );
}

Copy/paste this React/JSX component. Replace YOUR_ID with your member id from `members.json`.