. PluralKit Front

A small javascript script that displays a PluralKit system's current fronters, using PluralKit's api. Useful for if you want to display your current front on a website.

The first one sets the text of an element with the id #front to a comma separated string of the current fronters. Make sure to change the sysid variable to the id of the system you want!

The second one sets the text of the element with the same id as before (#front again), but also checks if a certain member is fronting, and displays different text based on that.

The second is the code used in Radian's card at the moment. Also change the memberid variable to the correct member id, as well as the system id.

No need to credit us for this, these scripts are free for you to use or edit.

(The examples use a modified version of both scripts which basically combines them into one, in order to avoid making two api calls at once.)

Code #1 - list

Example's front: ...
let sysid = "exmpl";
let element = document.getElementById("front");

fetch(`https://api.pluralkit.me/v2/systems/${sysid}/fronters`)
.then(response => {
    if (response.ok) return response.json();
    else if (response.status === 403) { 
      element.innerHTML = "front is private";
      element.style.color = "orange";
      return response.json();
    }
    else if (response.status === 500) {
      element.innerHTML = "500: internal server error";
      element.style.color = "red";
      return response.json();
    }
    else if (response.status === 404) {
      element.innerHTML = "404: system not found";
      element.style.color = "red";
      return response.json();
    }
    else throw new Error(response.status + ': ' +  response.statusText);
  })
.then(data => {
    console.log(data);
    if (data.members.length > 0) {
      element.innerHTML = data.members.map(m => m.name).join(", ");
    } else {
      element.innerHTML = "(no fronters)";
    }
  })
.catch((error) => {
  console.log(error);
    element.innerHTML = error.message;
    element.style.color = "red";
  });

Code #2 - member check

Myriad: ...
let sysid = "exmpl";
let memberid = "loxqc";
let element = document.getElementById("front");

fetch(`https://api.pluralkit.me/v2/systems/${sysid}/fronters`)
.then(response => {
    if (response.ok) return response.json();
    else if (response.status === 403) { 
      element.innerHTML = "front is private";
      element.style.color = "orange";
      return response.json();
    }
    else if (response.status === 500) {
      element.innerHTML = "500: internal server error";
      element.style.color = "red";
      return response.json();
    }
    else if (response.status === 404) {
      element.innerHTML = "404: system not found";
      element.style.color = "red";
      return response.json();
    }
    else throw new Error(response.status + ': ' +  response.statusText);
  })
.then(data => {
    console.log(data);
    if (data.members.some(m => m.id === memberid)) {
      element.innerHTML = "Currently fronting!";
    } else {
      element.innerHTML = "Not fronting.";
    }
  })
.catch((error) => {
  console.log(error);
    element.innerHTML = error.message;
    element.style.color = "red";
  });