PegasusXI Wiki - User contributions [en]

MediaWiki:Timeless.css

2026-08-30T00:35:56Z

PegasusAdmin: PegasusXI theme (generated by scripts/build-wiki-css.mjs)

/* PegasusXI Wiki - Timeless chrome and dark theme
*
* Generated by scripts/build-wiki-css.mjs from site/public/pegasus-theme.css and
* site/public/pegasus-dark.css. Do not edit here; regenerate instead.
*
* Dark is the default. The original files keyed off html.skin-theme-clientpref-night, a class real
* Timeless never emits, so the selectors are rewritten to html:not(.pg-day): the dark theme applies
* with no script involvement and light mode is opted into by adding .pg-day to <html>. Doing it the
* other way round would flash a light page on every load before the script ran.
*
* The article body is inverted rather than restyled. Content carries light backgrounds from hundreds
* of rules in MediaWiki:Common.css plus inline styles on template tables; inverting flips background
* and text together, so BG-Wiki's colour coding survives and contrast cannot collapse to
* light-on-light. Images are inverted a second time so they render true to colour.
*/

/* PegasusXI theme over Timeless — layout stays BG-Wiki, chrome uses Pegasus colors */

/* Carried as a mask rather than an <img> so it takes the button's own text colour. Held in a
variable because MediaWiki:Timeless.css is generated, and a data URI is easier to find and
replace in one place than inline in a rule. */
:root {
--pg-discord-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.317 4.369a19.79 19.79 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128c.126-.094.252-.192.372-.291a.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.009c.12.099.246.198.373.292a.077.077 0 01-.006.127 12.3 12.3 0 01-1.873.891.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.331c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.418 2.157-2.418 1.21 0 2.176 1.095 2.157 2.418 0 1.334-.956 2.419-2.157 2.419zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.418 2.157-2.418 1.21 0 2.176 1.095 2.157 2.418 0 1.334-.946 2.419-2.157 2.419z'/%3E%3C/svg%3E");
}

#mw-header-container {
background: #080b14 !important;
color: #e4e8f0 !important;
}
#p-logo-text {
max-width: 14em !important;
min-width: 14em !important;
width: 14em;
padding-right: 0 !important;
text-align: center !important;
}
#p-logo-text a,
#p-logo-text a.long {
color: #c9a032 !important;
font-family: Cinzel, Georgia, serif !important;
font-variant: normal !important;
font-weight: 700;
letter-spacing: 0.03em;
white-space: normal !important;
font-size: 1.5em !important;
line-height: 0.85 !important;
height: 100% !important;
width: 100%;
justify-content: center;
text-align: center;
}
#personal h2 span { color: #e4e8f0; }
#simpleSearch { background: #0c1020; border-color: rgba(140, 170, 220, 0.25); }
#searchInput { color: #e4e8f0; }
#searchButton, #mw-searchButton { filter: invert(1) brightness(1.35); }
#personal h2 { color: #e4e8f0 !important; }
#p-logo {
width: calc(100% + 1em);
box-sizing: border-box;
text-align: center;
}
.mw-wiki-logo.timeless-logo img {
width: 135px;
height: auto;
object-fit: contain;
display: block;
margin: 0.75em auto 0.5em;
border-radius: 0;
box-shadow: none;
background: transparent;
}
#p-search h3 { color: #e4e8f0; }
#searchInput::placeholder { color: #8a92a8; }
.color-left { background: #c9a032 !important; }
.color-middle { background: #4a7ec2 !important; }
.color-right { background: #7cc5e8 !important; }
#mw-content-container {
background: #0c1020 !important;
border-bottom-color: #c9a032 !important;
background-image: none !important;
}
html.pg-day #mw-content {
background: #fff !important;
}
#mw-site-navigation .sidebar-chunk > h2,
#mw-related-navigation .sidebar-chunk > h2 {
color: #e4e8f0;
}
.mw-body h1.firstHeading {
border-bottom-color: #c9a032 !important;
}
#mw-footer-container {
background: #080b14 !important;
border-top-color: rgba(140, 170, 220, 0.15) !important;
color: #8a92a8 !important;
}
#mw-footer-container a { color: #7cc5e8 !important; }
#mw-site-navigation .sidebar-chunk h3,
#mw-related-navigation .sidebar-chunk h3 {
border-bottom-color: #c9a032 !important;
}
a { color: #4a7ec2; }
a:hover { color: #6498da; }
.tools-inline li.selected { border-bottom-color: #c9a032 !important; }
#localNotice { background: #0c1020; }
.sitenotice { background: #111628 !important; color: #e4e8f0; }
.sitenotice td { border-color: rgba(74, 126, 194, 0.45) !important; }
.sitenotice a { color: #7cc5e8 !important; }
/* #mw-header is a flex row and Timeless assigns explicit orders: #p-logo-text 1, #p-search 2,
#user-tools 3. Without an order of its own this button defaults to 0 and jumps ahead of all
three, which is why it first rendered at the far left of the header. Order 4 puts it at the
right-hand end, past the personal menu.

Hidden below 851px, where Timeless turns the user menu into an absolutely positioned icon that
this would collide with. */
#p-discord-signin {
display: none;
order: 4;
flex: 0 0 auto;
margin-left: 1em;
align-self: center;
}
@media screen and (min-width: 851px) {
#p-discord-signin {
display: inline-block;
}
}
.pg-discord-signin {
display: inline-flex;
align-items: center;
gap: 0.45em;
background: #5865f2;
color: #fff !important;
font-size: 0.85em;
font-weight: 600;
padding: 0.4em 0.9em;
border-radius: 4px;
text-decoration: none;
white-space: nowrap;
}
.pg-discord-signin:hover {
background: #4752c4;
color: #fff !important;
}
/* Held while the login form is fetched. That is one same-origin request, so this is usually a single
frame, but without it a slow connection looks like a dead button. */
.pg-discord-signin-busy {
opacity: 0.65;
pointer-events: none;
}
/* The Discord mark, so the button reads as Discord at a glance rather than relying on the word. */
.pg-discord-signin-mark {
width: 1.15em;
height: 1.15em;
flex: 0 0 auto;
background-color: currentColor;
-webkit-mask: var(--pg-discord-mark) center / contain no-repeat;
mask: var(--pg-discord-mark) center / contain no-repeat;
}
#discord-panel {
display: none;
}

/* ---- Fluid three-column layout ----
Stock Timeless only builds three columns at >=1340px. Below that it snaps into other layouts:
1100-1339px stacks the right sidebar (#mw-content-wrapper goes float:right;width:100%), and
851-1099px turns both sidebars into absolutely positioned dropdown toggles. On a display with
Windows scaling at 125% even a maximized 1920px screen reports only ~1536px, so those bands are
easy to land in. These overrides start the flex layout at 1000px and let the sidebars shrink
with the window, so the columns track the window instead of snapping between fixed sizes. */
@media screen and (min-width: 1000px) {
#mw-content-block {
display: flex !important;
clear: both !important;
}
#mw-site-navigation,
#mw-related-navigation {
position: relative !important;
display: block !important;
top: auto !important;
right: auto !important;
width: auto !important;
box-sizing: border-box;
}
#mw-site-navigation {
order: 1;
flex: 0 1 14em;
min-width: 10.5em;
padding-left: 0 !important;
padding-right: 1em !important;
}
#mw-content-wrapper {
order: 2;
flex: 1 1 0%;
float: none !important;
width: auto !important;
min-width: 0;
}
#mw-related-navigation {
order: 3;
flex: 0 1 16em;
min-width: 11em;
padding-left: 1em !important;
padding-right: 0 !important;
}
#mw-content {
margin-top: 0 !important;
}

/* In column mode the sidebar panels are always open, not collapsible dropdowns. */
#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk,
#mw-site-navigation .sidebar-inner,
#mw-related-navigation .sidebar-inner {
display: block !important;
position: static !important;
min-width: 0 !important;
margin-left: 0 !important;
}
#mw-site-navigation .sidebar-chunk > h2,
#mw-related-navigation .sidebar-chunk > h2 {
cursor: default;
}
#mw-site-navigation .sidebar-chunk > h2::after,
#mw-related-navigation .sidebar-chunk > h2::after,
#mw-site-navigation .sidebar-chunk h2 span::before,
#mw-site-navigation .sidebar-chunk h2 span::after,
#mw-site-navigation .sidebar-inner::before,
#mw-site-navigation .sidebar-inner::after,
#mw-related-navigation .sidebar-inner::before,
#mw-related-navigation .sidebar-inner::after {
display: none !important;
}

/* The secondary color bar is a white block used only by the narrow layouts. */
#mw-header-nav-hack {
display: none !important;
}
#p-logo {
display: block !important;
}
#discord-panel {
display: block;
margin: 0 0 1em;
border-radius: 4px;
overflow: hidden;
}
}
/* ---- Discord presence panel ----
The member list is fetched from widget.json and rendered by MediaWiki:Gadget-pegasus.js rather
than embedded as Discord's own iframe, because that iframe is cross-origin and stuck on Discord's
blurple. Rendering it ourselves means it takes this wiki's palette; only the join button keeps
Discord's colour, where the brand cue is the point. */
.pg-discord {
background: #111628;
border: 1px solid rgba(140, 170, 220, 0.25);
border-radius: 4px;
padding: 0.75em;
text-align: center;
}
.pg-discord-head {
margin-bottom: 0.6em;
}
.pg-discord-title {
display: block;
font-family: Cinzel, Georgia, serif;
font-weight: 700;
letter-spacing: 0.03em;
color: #c9a032;
}
.pg-discord-count {
display: block;
font-size: 0.85em;
color: #98a1b9;
}
.pg-discord-members {
list-style: none;
margin: 0 0 0.7em;
padding: 0;
text-align: left;
/* Roughly ten rows before scrolling, so a busy server cannot push the join button out of view. */
max-height: 17em;
overflow-y: auto;
}
.pg-discord-members::-webkit-scrollbar {
width: 6px;
}
.pg-discord-members::-webkit-scrollbar-thumb {
background: rgba(140, 170, 220, 0.3);
border-radius: 3px;
}
.pg-discord-member {
display: flex;
align-items: center;
gap: 0.45em;
padding: 0.15em 0;
font-size: 0.85em;
color: #c8cee0;
}
.pg-discord-avatar {
width: 20px;
height: 20px;
flex: 0 0 auto;
border-radius: 50%;
background: #0c1020;
}
.pg-discord-member-name {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* Discord's own status colours: recognisable, and the only place they are used. A ring around the
avatar rather than a separate dot, so a long name keeps the full width. */
.pg-discord-member[data-status="online"] .pg-discord-avatar {
box-shadow: 0 0 0 2px #23a55a;
}
.pg-discord-member[data-status="idle"] .pg-discord-avatar {
box-shadow: 0 0 0 2px #f0b232;
}
.pg-discord-member[data-status="dnd"] .pg-discord-avatar {
box-shadow: 0 0 0 2px #f23f43;
}
.pg-discord-member[data-status="offline"] .pg-discord-avatar {
box-shadow: 0 0 0 2px rgba(140, 170, 220, 0.35);
}
/* If the server widget is switched off, widget.json 403s and the panel falls back to a plain join
box -- the empty list would otherwise leave a gap under the heading. */
.pg-discord[data-state="unavailable"] .pg-discord-members {
display: none;
}
.pg-discord-join {
display: inline-block;
background: #5865f2;
color: #fff !important;
font-weight: 600;
padding: 0.45em 1.1em;
border-radius: 4px;
text-decoration: none;
}
.pg-discord-join:hover {
background: #4752c4;
color: #fff !important;
}
img[usemap],
.noresize img[usemap],
figure.noresize img {
max-width: none !important;
}
.noresize { overflow-x: auto; }
.imageMapHighlighter figure,
figure.mw-ext-imagemap-desc-bottom-right {
display: inline-block;
position: relative;
}
map area { cursor: pointer; }

/* ---- Vana'diel Time panel ----
Lives in a normal Timeless portlet list item, so the list styling has to be undone. Weekday
colors are the elemental colors used by the other Vana'diel clocks; pegasus-dark.css lightens
them for the night theme, where the darker ones (Watersday, Darksday) would be unreadable. */
#n-vanatime {
list-style: none;
margin: 0;
padding: 0;
}
#n-vanatime::before {
content: none;
}
.pg-vana {
display: flex;
flex-direction: column;
gap: 0.3em;
padding: 0.15em 0 0.25em;
line-height: 1.35;
}
.pg-vana-line {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.35em;
}
.pg-vana-clock {
font-size: 1.05em;
font-variant-numeric: tabular-nums;
}
.pg-vana-tilde {
opacity: 0.5;
}
.pg-vana-day {
font-weight: 700;
}
.pg-vana-moon {
display: inline-flex;
align-items: baseline;
gap: 0.3em;
}
.pg-vana-moon-icon {
font-size: 1.05em;
}
.pg-vana-dot {
flex: 0 0 auto;
width: 0.55em;
height: 0.55em;
border-radius: 50%;
background: #9aa0ac;
}
.pg-vana-server[data-state="online"] .pg-vana-dot {
background: #35c46a;
}
.pg-vana-server[data-state="offline"] .pg-vana-dot {
background: #e04747;
}
/* Hidden when there is no player count to show, so "Online" doesn't trail a stray gap. */
.pg-vana-server-count:empty {
display: none;
}
.pg-vana-day-0 { color: #ff0000; }
.pg-vana-day-1 { color: #aaaa00; }
.pg-vana-day-2 { color: #0000dd; }
.pg-vana-day-3 { color: #00aa22; }
.pg-vana-day-4 { color: #7799ff; }
.pg-vana-day-5 { color: #aa00aa; }
.pg-vana-day-6 { color: #aaaaaa; }
.pg-vana-day-7 { color: #333333; }

/* PegasusXI night theme — dark wiki over the Timeless layout.
Scoped to html:not(.pg-day) (the default) so day mode keeps BG-Wiki's original look.
Class names follow MediaWiki 1.43 / Extension:DarkMode so the markup matches HorizonXI's wiki.

Two different techniques, on purpose:
- The chrome (header, sidebar, footer) is styled directly, because we own that markup.
- The article body is inverted, because we don't. BG-Wiki's content carries light backgrounds
from ~281 declarations in site-styles.css (.category-header, table.item td, .altrowgrey-*)
plus inline styles on template tables. Restyling those by hand means guessing at each
matching text color; inverting flips background and text together, so BG-Wiki's color
coding survives and contrast can never collapse to light-on-light. */

html:not(.pg-day) {
--pg-bg: #0c1020;
--pg-panel: #111628;
--pg-panel-alt: #161c31;
--pg-text: #e4e8f0;
--pg-muted: #98a1b9;
--pg-line: rgba(140, 170, 220, 0.22);
--pg-gold: #c9a032;
--pg-link: #7cc5e8;
color-scheme: dark;
}

html:not(.pg-day) body {
background: var(--pg-bg);
color: var(--pg-text);
}

/* ---- Chrome: styled directly, never inverted ---- */

html:not(.pg-day) #mw-content,
html:not(.pg-day) #mw-content-wrapper,
html:not(.pg-day) .mw-body {
background: var(--pg-panel) !important;
color: var(--pg-text);
border-color: var(--pg-line) !important;
}
html:not(.pg-day) .mw-body h1.firstHeading {
color: #f1f3f9;
}
html:not(.pg-day) #siteSub,
html:not(.pg-day) #contentSub,
html:not(.pg-day) #mw-content-subtitle,
html:not(.pg-day) .printfooter,
html:not(.pg-day) #mw-page-header-links h3 {
color: var(--pg-muted);
}
html:not(.pg-day) .printfooter a {
color: var(--pg-link);
}

/* Sidebar and dropdown panels.
Timeless paints BOTH the outer .sidebar-chunk and the inner .sidebar-inner, so the chunk needs
the dark treatment too or its light background shows through around the panel.

These selectors are deliberately ID-scoped. BG-Wiki's site-styles.css ships this at all widths:
#mw-site-navigation .sidebar-chunk,#mw-related-navigation .sidebar-chunk
{ background:#f8f9fa !important; border:solid #eaecf0 !important }
When two declarations are both !important the cascade falls back to specificity, so a
class-only selector loses to their ID and the sidebar renders light. Adding the ID here wins.
Their `border` shorthand also resets border-width to medium (3px), hence border-width below. */
html:not(.pg-day) .sidebar-chunk,
html:not(.pg-day) .sidebar-inner,
html:not(.pg-day) .dropdown,
html:not(.pg-day) #mw-site-navigation .sidebar-chunk,
html:not(.pg-day) #mw-site-navigation .sidebar-inner,
html:not(.pg-day) #mw-related-navigation .sidebar-chunk,
html:not(.pg-day) #mw-related-navigation .sidebar-inner {
background: var(--pg-panel) !important;
border-color: var(--pg-line) !important;
border-width: 1px !important;
box-shadow: none !important;
}
html:not(.pg-day) .sidebar-chunk h3,
html:not(.pg-day) .sidebar-chunk label,
html:not(.pg-day) .sidebar-inner h3,
html:not(.pg-day) .sidebar-inner label,
html:not(.pg-day) .dropdown h3,
html:not(.pg-day) #mw-site-navigation .sidebar-chunk h3,
html:not(.pg-day) #mw-site-navigation .sidebar-inner h3,
html:not(.pg-day) #mw-related-navigation .sidebar-chunk h3,
html:not(.pg-day) #mw-related-navigation .sidebar-inner h3 {
color: var(--pg-gold) !important;
border-bottom-color: var(--pg-line) !important;
}

/* The little pointer triangles above the dropdown panels are light-colored borders. */
html:not(.pg-day) .sidebar-inner::before,
html:not(.pg-day) .sidebar-inner::after,
html:not(.pg-day) .sidebar-chunk h2 span::before,
html:not(.pg-day) .sidebar-chunk h2 span::after {
border-bottom-color: var(--pg-panel) !important;
}
/* Also ID-scoped: Timeless colors these as "#mw-site-navigation .sidebar-inner a", which outranks
a class-only selector even though it isn't !important. */
html:not(.pg-day) .sidebar-inner a,
html:not(.pg-day) .dropdown a,
html:not(.pg-day) #mw-site-navigation .sidebar-inner a,
html:not(.pg-day) #mw-related-navigation .sidebar-inner a {
color: var(--pg-link) !important;
}
html:not(.pg-day) #mw-site-navigation .sidebar-inner a.new,
html:not(.pg-day) #mw-related-navigation .sidebar-inner a.new {
color: #e88a8a !important;
}

/* Page action tabs and category bar */
html:not(.pg-day) #mw-page-header-links .tools-inline li a {
color: var(--pg-link);
}
html:not(.pg-day) .tools-inline li.selected a {
color: var(--pg-text);
}
html:not(.pg-day) #catlinks,
html:not(.pg-day) .catlinks {
background: var(--pg-panel-alt) !important;
border-color: var(--pg-line) !important;
color: var(--pg-text);
}
html:not(.pg-day) #catlinks a {
color: var(--pg-link);
}

/* Form controls on special pages */
html:not(.pg-day) input[type="text"],
html:not(.pg-day) input[type="search"],
html:not(.pg-day) textarea,
html:not(.pg-day) select {
background: var(--pg-panel-alt);
color: var(--pg-text);
border: 1px solid var(--pg-line);
}

/* ---- Article body: inverted ----
Colors below are the pre-inversion (light-mode) values, chosen so that inverting
them lands on readable light text. #mw-content-text has no background of its own,
so the dark panel behind it shows through without being inverted. */

html:not(.pg-day) #mw-content-text {
color: #202122;
filter: invert(1) hue-rotate(180deg);
}
html:not(.pg-day) #mw-content-text a {
color: #0645ad;
}
html:not(.pg-day) #mw-content-text a:visited {
color: #0b0080;
}
html:not(.pg-day) #mw-content-text a.new {
color: #d73333;
}

/* Media is re-inverted so icons, maps and screenshots render true to color. */
html:not(.pg-day) #mw-content-text img,
html:not(.pg-day) #mw-content-text svg,
html:not(.pg-day) #mw-content-text video {
filter: invert(1) hue-rotate(180deg);
}

/* ---- Theme toggle, styled after Extension:DarkMode's moon/sun affordance ---- */
.ext-darkmode-link { cursor: pointer; }
.ext-darkmode-link::before {
content: "\263E";
display: inline-block;
margin-right: 0.4em;
}
html:not(.pg-day) .ext-darkmode-link::before { content: "\263C"; }

/* ---- Vana'diel Time panel ----
The elemental weekday colors are chosen for a white sidebar, so Watersday (#0000dd) and
Darksday (#333) are nearly invisible on the dark panel. These keep each element's hue but lift
it to a readable lightness. ID-scoped for the same reason as the sidebar rules above. */
html:not(.pg-day) #mw-site-navigation .pg-vana-day-0 { color: #ff6b6b; }
html:not(.pg-day) #mw-site-navigation .pg-vana-day-1 { color: #d8c34a; }
html:not(.pg-day) #mw-site-navigation .pg-vana-day-2 { color: #6ea8ff; }
html:not(.pg-day) #mw-site-navigation .pg-vana-day-3 { color: #4fd07a; }
html:not(.pg-day) #mw-site-navigation .pg-vana-day-4 { color: #a9c7ff; }
html:not(.pg-day) #mw-site-navigation .pg-vana-day-5 { color: #d98ada; }
html:not(.pg-day) #mw-site-navigation .pg-vana-day-6 { color: #ececec; }
html:not(.pg-day) #mw-site-navigation .pg-vana-day-7 { color: #99a3ba; }
html:not(.pg-day) #mw-site-navigation .pg-vana-clock { color: var(--pg-text); }
html:not(.pg-day) #mw-site-navigation .pg-vana-date,
html:not(.pg-day) #mw-site-navigation .pg-vana-server-text {
color: var(--pg-muted);
}
html:not(.pg-day) #mw-site-navigation .pg-vana-server-count { color: var(--pg-text); }

MediaWiki:Gadget-pegasus.js

2026-08-30T00:35:55Z

PegasusAdmin: Header button starts Discord sign-in instead of linking to the invite

/* PegasusXI Wiki sidebar additions: Vana'diel clock, theme toggle, Discord panel.
*
* The Node renderer this wiki replaced built all three server-side, so they were correct on first
* paint and worked without JavaScript. MediaWiki has no hook for injecting arbitrary markup into a
* Timeless sidebar chunk without a skin or extension, so they are built client-side here instead.
* The trade-off is a brief gap before the panel appears; in exchange nothing about the wiki has to be
* patched on disk, and every piece is editable on-wiki.
*
* Markup deliberately mirrors Timeless's own nesting -- .sidebar-chunk > h2 > span, then
* .sidebar-inner > .mw-portlet > h3 + .mw-portlet-body -- because both the skin's collapse behaviour
* at narrow widths and MediaWiki:Timeless.css key off that exact structure.
*/
( function () {
'use strict';

/* ---------------------------------------------------------------- Vana'diel clock math
*
* Time runs 25x Earth time. The anchor is Vana'diel's birthday: Earth 2002-06-23T15:00:00Z
* corresponds to Vana'diel 0898-02-01 00:00, which is (898 * 360) + 30 days after the epoch.
* The calendar has no leap years and no short months -- 360-day years, 30-day months, 8-day
* weeks -- so everything else is modulo arithmetic on Vana'diel minutes.
*
* The moon runs a separate 84-day cycle offset 26 days from the epoch. Phase comes from the
* percentage *and* the direction of travel, because each percentage occurs twice per cycle.
*
* Kept identical to site/public/vanadiel.mjs, which was cross-checked against HorizonXI's
* MediaWiki:VanaTime.js over a full moon cycle.
*/
var EARTH_ANCHOR_MS = 1024844400000;
var VANA_ANCHOR_DAYS = 898 * 360 + 30;
var RATE = 25;

var MIN_PER_HOUR = 60;
var MIN_PER_DAY = 1440;
var MIN_PER_WEEK = 8 * MIN_PER_DAY;
var MIN_PER_MONTH = 30 * MIN_PER_DAY;
var MIN_PER_YEAR = 360 * MIN_PER_DAY;

var MOON_CYCLE_DAYS = 84;
var MOON_OFFSET_DAYS = 26;

var WEEKDAYS = [
'Firesday', 'Earthsday', 'Watersday', 'Windsday',
'Iceday', 'Lightningday', 'Lightsday', 'Darksday'
];
var MOON_PHASES = [
'New Moon', 'Waxing Crescent', 'First Quarter', 'Waxing Gibbous',
'Full Moon', 'Waning Gibbous', 'Last Quarter', 'Waning Crescent'
];
var MOON_ICONS = [ '\uD83C\uDF11', '\uD83C\uDF12', '\uD83C\uDF13', '\uD83C\uDF14',
'\uD83C\uDF15', '\uD83C\uDF16', '\uD83C\uDF17', '\uD83C\uDF18' ];

function moonPhaseIndex( percent, direction ) {
// direction: 0 = turning point, 1 = falling toward new, 2 = rising toward full.
if ( percent <= 5 || ( percent <= 10 && direction === 1 ) ) { return 0; }
if ( percent >= 7 && percent <= 38 && direction === 2 ) { return 1; }
if ( percent >= 40 && percent <= 55 && direction === 2 ) { return 2; }
if ( percent >= 57 && percent <= 88 && direction === 2 ) { return 3; }
if ( percent >= 95 || ( percent >= 90 && direction === 2 ) ) { return 4; }
if ( percent >= 62 && percent <= 93 && direction === 1 ) { return 5; }
if ( percent >= 45 && percent <= 60 && direction === 1 ) { return 6; }
return 7;
}

function vanadiel() {
var minutes = VANA_ANCHOR_DAYS * MIN_PER_DAY +
( ( Date.now() - EARTH_ANCHOR_MS ) * RATE ) / 60000;

var moonDay = Math.floor( ( ( minutes / MIN_PER_DAY ) + MOON_OFFSET_DAYS ) % MOON_CYCLE_DAYS );
var moonPercent = Math.abs( Math.round( ( ( 42 - moonDay ) / 42 ) * 100 ) );
var moonDirection = moonDay === 0 || moonDay === 42 ? 0 : ( moonDay < 42 ? 1 : 2 );
var moonIndex = moonPhaseIndex( moonPercent, moonDirection );
var weekdayIndex = Math.floor( ( minutes % MIN_PER_WEEK ) / MIN_PER_DAY );

return {
year: Math.floor( minutes / MIN_PER_YEAR ),
month: Math.floor( ( minutes / MIN_PER_MONTH ) % 12 ) + 1,
day: Math.floor( ( minutes / MIN_PER_DAY ) % 30 ) + 1,
hour: Math.floor( ( minutes % MIN_PER_DAY ) / MIN_PER_HOUR ),
minute: Math.floor( minutes % MIN_PER_HOUR ),
weekdayIndex: weekdayIndex,
weekday: WEEKDAYS[ weekdayIndex ],
moonPercent: moonPercent,
moonPhase: MOON_PHASES[ moonIndex ],
moonIcon: MOON_ICONS[ moonIndex ]
};
}

function pad2( n ) {
return ( n < 10 ? '0' : '' ) + n;
}

/* ---------------------------------------------------------------- markup helpers */

function el( tag, attrs, children ) {
var node = document.createElement( tag );
var key;
for ( key in attrs || {} ) {
if ( key === 'text' ) {
node.textContent = attrs[ key ];
} else {
node.setAttribute( key, attrs[ key ] );
}
}
( children || [] ).forEach( function ( child ) {
node.appendChild( child );
} );
return node;
}

/** A Timeless portlet: heading plus body, ready to drop into a .sidebar-inner. */
function portlet( id, label, body ) {
return el( 'div', { role: 'navigation', 'class': 'mw-portlet', id: 'p-' + id,
'aria-labelledby': 'p-' + id + '-label' }, [
el( 'h3', { id: 'p-' + id + '-label', text: label } ),
el( 'div', { 'class': 'mw-portlet-body' }, [ body ] )
] );
}

/** A Timeless sidebar chunk: the collapsible outer container. */
function chunk( id, heading, body ) {
return el( 'div', { id: id, 'class': 'sidebar-chunk' }, [
el( 'h2', {}, [ el( 'span', { text: heading } ) ] ),
el( 'div', { 'class': 'sidebar-inner' }, [ body ] )
] );
}

/* ---------------------------------------------------------------- Vana'diel panel */

function buildClockPanel() {
var clock = el( 'b', { 'class': 'pg-vana-clock' } );
var date = el( 'span', { 'class': 'pg-vana-date' } );
var day = el( 'span', { 'class': 'pg-vana-day' } );
var moonIcon = el( 'span', { 'class': 'pg-vana-moon-icon' } );
var moonPct = el( 'span', { 'class': 'pg-vana-moon-pct' } );
var serverText = el( 'span', { 'class': 'pg-vana-server-text', text: 'Checking status' } );
var serverCount = el( 'b', { 'class': 'pg-vana-server-count' } );
var server = el( 'div', { 'class': 'pg-vana-line pg-vana-server', 'data-state': 'unknown' }, [
el( 'span', { 'class': 'pg-vana-dot', 'aria-hidden': 'true' } ),
serverText,
serverCount
] );

var panel = el( 'div', { 'class': 'pg-vana' }, [
el( 'div', { 'class': 'pg-vana-line' }, [
clock, el( 'span', { 'class': 'pg-vana-tilde', text: '~' } ), date
] ),
el( 'div', { 'class': 'pg-vana-line' }, [
day,
el( 'span', { 'class': 'pg-vana-tilde', text: '~' } ),
el( 'span', { 'class': 'pg-vana-moon' }, [ moonIcon, moonPct ] )
] ),
server
] );

var list = el( 'ul', {}, [
el( 'li', { id: 'n-vanatime', 'class': 'mw-list-item' }, [ panel ] )
] );

// A Vana'diel minute is 2.4 Earth seconds, so a one-second tick looks smooth without
// doing redundant work.
function tick() {
var v = vanadiel();
clock.textContent = pad2( v.hour ) + ':' + pad2( v.minute );
date.textContent = v.year + '-' + v.month + '-' + v.day;
day.textContent = v.weekday;
day.className = 'pg-vana-day pg-vana-day-' + v.weekdayIndex;
moonIcon.textContent = v.moonIcon;
moonIcon.setAttribute( 'title', v.moonPhase );
moonPct.textContent = v.moonPercent + '%';
}

// Same origin as the wiki, so no CORS involved and no proxy needed.
function poll() {
fetch( '/api/status', { headers: { Accept: 'application/json' } } )
.then( function ( res ) {
if ( !res.ok ) {
throw new Error( 'HTTP ' + res.status );
}
return res.json();
} )
.then( function ( data ) {
var online = String( data && data.status || '' ).toLowerCase() === 'online';
var players = Number( data && data.playerCount );
server.setAttribute( 'data-state', online ? 'online' : 'offline' );
serverText.textContent = online ? 'Online' : 'Offline';
// A count of 0 is indistinguishable from "not published", and "Online 0" next
// to a green dot reads as a bug, so only show a positive count.
serverCount.textContent = online && players > 0 ? String( players ) : '';
} )
.catch( function () {
// Keep whatever is on screen; the next poll may succeed.
if ( server.getAttribute( 'data-state' ) === 'unknown' ) {
serverText.textContent = 'Status unavailable';
}
} );
}

tick();
poll();
setInterval( tick, 1000 );
setInterval( poll, 60000 );

return portlet( 'vanatime', "Vana'diel Time", list );
}

/* ---------------------------------------------------------------- theme toggle
*
* Dark is the default and needs no class, so light mode is the opt-in state: MediaWiki:Timeless.css
* scopes every dark rule to html:not(.pg-day). That ordering means a reader on the default theme
* never sees a flash of light before this script runs.
*/
var THEME_KEY = 'pg-theme';

function applyTheme( theme ) {
document.documentElement.classList.toggle( 'pg-day', theme === 'day' );
}

function buildThemeToggle() {
var link = el( 'a', { 'class': 'ext-darkmode-link', href: '#', role: 'button' } );
var label = el( 'span', {} );
link.appendChild( label );

function refresh() {
var isDay = document.documentElement.classList.contains( 'pg-day' );
label.textContent = isDay ? 'Dark mode' : 'Light mode';
}

link.addEventListener( 'click', function ( e ) {
e.preventDefault();
var next = document.documentElement.classList.contains( 'pg-day' ) ? 'night' : 'day';
applyTheme( next );
try {
localStorage.setItem( THEME_KEY, next );
} catch ( err ) {
// Private browsing or a full quota; the choice just will not persist.
}
refresh();
} );

refresh();

return portlet( 'theme', 'Appearance', el( 'ul', {}, [
el( 'li', { id: 't-darkmode', 'class': 'mw-list-item' }, [ link ] )
] ) );
}

/* ---------------------------------------------------------------- Discord panel
*
* Discord's own embed (discord.com/widget) is a cross-origin iframe locked to Discord's blurple
* palette, so it cannot be themed to match this wiki. The member list is therefore fetched and
* rendered here instead: widget.json sends Access-Control-Allow-Origin for this host, so no proxy
* is involved and the markup is ours to style.
*
* That endpoint answers 403 whenever "Enable Server Widget" is switched off in Discord's server
* settings, which is why the static join panel is still kept as a fallback rather than deleted.
*/
var DISCORD_INVITE = 'https://discord.gg/M3NFvpm75E';
var DISCORD_GUILD = '1473308284349059126';
var DISCORD_WIDGET = 'https://discord.com/api/guilds/' + DISCORD_GUILD + '/widget.json';

// Online first, then idle, then do-not-disturb, alphabetically within each.
var STATUS_RANK = { online: 0, idle: 1, dnd: 2, offline: 3 };

function statusRank( status ) {
return STATUS_RANK[ status ] === undefined ? STATUS_RANK.offline : STATUS_RANK[ status ];
}

function discordMember( member ) {
var status = STATUS_RANK[ member.status ] === undefined ? 'offline' : member.status;
var children = [];

if ( member.avatar_url ) {
children.push( el( 'img', { 'class': 'pg-discord-avatar', src: member.avatar_url,
alt: '', width: '20', height: '20', loading: 'lazy' } ) );
} else {
children.push( el( 'span', { 'class': 'pg-discord-avatar pg-discord-avatar-blank',
'aria-hidden': 'true' } ) );
}

children.push( el( 'span', { 'class': 'pg-discord-member-name', text: member.username } ) );

var li = el( 'li', { 'class': 'pg-discord-member', 'data-status': status }, children );
// The status is conveyed by a colour swatch, so name it for anyone not seeing colour.
li.setAttribute( 'title', member.game && member.game.name ?
member.username + ' - ' + status + ' - playing ' + member.game.name :
member.username + ' - ' + status );
return li;
}

function buildDiscordPanel() {
var count = el( 'span', { 'class': 'pg-discord-count', text: 'Loading' } );
var list = el( 'ul', { 'class': 'pg-discord-members' } );

var panel = el( 'div', { 'class': 'pg-discord' }, [
el( 'div', { 'class': 'pg-discord-head' }, [
el( 'span', { 'class': 'pg-discord-title', text: 'PegasusXI' } ),
count
] ),
list,
el( 'a', { 'class': 'pg-discord-join', href: DISCORD_INVITE,
target: '_blank', rel: 'noopener', text: 'Join Discord' } )
] );

fetch( DISCORD_WIDGET, { headers: { Accept: 'application/json' } } )
.then( function ( res ) {
if ( !res.ok ) {
throw new Error( 'HTTP ' + res.status );
}
return res.json();
} )
.then( function ( data ) {
var members = ( ( data && data.members ) || [] ).slice();
members.sort( function ( a, b ) {
return statusRank( a.status ) - statusRank( b.status ) ||
String( a.username ).localeCompare( String( b.username ) );
} );

// presence_count counts everyone online; the members array is capped by Discord.
var online = Number( data && data.presence_count );
if ( !isFinite( online ) ) {
online = members.length;
}
count.textContent = online + ( online === 1 ? ' member online' : ' members online' );

members.forEach( function ( member ) {
list.appendChild( discordMember( member ) );
} );

panel.setAttribute( 'data-state', 'ready' );
} )
.catch( function () {
// Most likely the server widget was switched off again. Fall back to the plain join
// panel rather than leaving "Loading" on screen for good.
panel.setAttribute( 'data-state', 'unavailable' );
count.textContent = 'Chat, support and server announcements';
} );

return el( 'div', { id: 'discord-panel' }, [ panel ] );
}

/* ---------------------------------------------------------------- header button
*
* #mw-header is a flex row and Timeless assigns explicit orders: #p-logo-text 1, #p-search 2,
* #user-tools 3. A new child with no order defaults to 0 and jumps ahead of all of them, which is
* why this button first appeared at the far left of the header. MediaWiki:Timeless.css gives it
* order 4 so it sits at the right-hand end.
*
* This starts a sign-in rather than handing out an invite: the Discord invite is already on the
* sidebar panel, and a reader who wants an account is better served by the thing that makes one.
*/

/* Getting from this button to Discord in one click takes some care.
*
* The flow cannot be started by a link: it begins with a POST of MediaWiki's login form carrying a
* login token, and Special:PluggableAuthLogin on its own has no plugin recorded in the session, so
* it errors. The obvious alternative -- send the reader to the login page and have the gadget press
* the button there -- cannot work either, because MediaWiki blocks gadgets and site scripts on
* login pages so that a compromised script cannot read a password out of the form. Nothing of ours
* runs there at all.
*
* So the work happens here, on an ordinary page where the gadget is allowed: fetch the login form,
* copy its hidden fields, and submit it with the Discord button's field set. Every token is one
* MediaWiki issued to this session; nothing is forged and no password is involved. If any of it
* fails the link is simply followed as-is, landing the reader on the login page with the Discord
* button waiting -- which is also what happens with JavaScript disabled.
*/

function loginUrl( returnTo ) {
var articlePath = mw.config.get( 'wgArticlePath' ) || '/wiki/$1';
return articlePath.replace( '$1', 'Special:UserLogin' ) +
'?returnto=' + encodeURIComponent( returnTo );
}

function hidden( name, value ) {
var input = document.createElement( 'input' );
input.type = 'hidden';
input.name = name;
input.value = value;
return input;
}

function startDiscordLogin( returnTo ) {
return fetch( loginUrl( returnTo ), { credentials: 'same-origin' } )
.then( function ( res ) {
if ( !res.ok ) {
throw new Error( 'HTTP ' + res.status );
}
return res.text();
} )
.then( function ( html ) {
var doc = new DOMParser().parseFromString( html, 'text/html' );
var form = doc.querySelector( 'form[name="userlogin"]' );
// Matched by name prefix rather than index: the suffix is the plugin's position in
// $wgPluggableAuth_Config, which would shift if a second provider were added.
var button = form && form.querySelector( '[name^="pluggableauthlogin"]' );
if ( !button ) {
throw new Error( 'no Discord button on the login form' );
}

var post = document.createElement( 'form' );
post.method = 'post';
post.action = form.getAttribute( 'action' );
post.style.display = 'none';

Array.prototype.forEach.call(
form.querySelectorAll( 'input[type="hidden"]' ),
function ( input ) {
post.appendChild( hidden( input.name, input.value ) );
}
);

// returnto travels in the query string, not as a hidden field, so it has to be
// restated or the reader is dropped on the Main Page after signing in.
post.appendChild( hidden( 'returnto', returnTo ) );
post.appendChild(
hidden( button.getAttribute( 'name' ), button.getAttribute( 'value' ) || '1' )
);

document.body.appendChild( post );
post.submit();
} );
}

function buildHeaderButton() {
// Logged-in readers have the personal menu instead; a sign-in button would be noise.
if ( mw.config.get( 'wgUserName' ) ) {
return null;
}

var returnTo = mw.config.get( 'wgPageName' ) || 'Main_Page';
var link = el( 'a', { 'class': 'pg-discord-signin', href: loginUrl( returnTo ) }, [
el( 'span', { 'class': 'pg-discord-signin-mark', 'aria-hidden': 'true' } ),
el( 'span', { text: 'Sign in with Discord' } )
] );

var busy = false;
link.addEventListener( 'click', function ( e ) {
// Let modified clicks open the login page in a tab as the reader asked.
if ( e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0 ) {
return;
}
e.preventDefault();
if ( busy ) {
return;
}
busy = true;
link.classList.add( 'pg-discord-signin-busy' );

startDiscordLogin( returnTo ).catch( function () {
// Fall back to the plain login page rather than stranding the reader here.
window.location.href = loginUrl( returnTo );
} );
} );

return el( 'div', { id: 'p-discord-signin' }, [ link ] );
}

/* ---------------------------------------------------------------- wire it up */

function init() {
// Restore the saved theme first so the toggle's label starts out correct.
try {
if ( localStorage.getItem( THEME_KEY ) === 'day' ) {
applyTheme( 'day' );
}
} catch ( err ) {}

var siteNav = document.getElementById( 'mw-site-navigation' );
var navChunk = document.getElementById( 'site-navigation' );

if ( navChunk ) {
var inner = navChunk.querySelector( '.sidebar-inner' );
if ( inner ) {
inner.insertBefore( buildClockPanel(), inner.firstChild );
}
}

if ( siteNav && !document.getElementById( 'theme-tools' ) ) {
siteNav.appendChild( chunk( 'theme-tools', 'Appearance', buildThemeToggle() ) );
}

var related = document.getElementById( 'mw-related-navigation' );
if ( related && !document.getElementById( 'discord-panel' ) ) {
related.insertBefore( buildDiscordPanel(), related.firstChild );
}

var userTools = document.getElementById( 'user-tools' );
if ( userTools && userTools.parentNode && !document.getElementById( 'p-discord-signin' ) ) {
var button = buildHeaderButton();
if ( button ) {
userTools.parentNode.insertBefore( button, userTools );
}
}
}

if ( document.readyState === 'loading' ) {
document.addEventListener( 'DOMContentLoaded', init );
} else {
init();
}
}() );

MediaWiki:Gadget-pegasus.js

2026-08-30T00:33:28Z

PegasusAdmin: Header button starts Discord sign-in instead of linking to the invite

/* PegasusXI Wiki sidebar additions: Vana'diel clock, theme toggle, Discord panel.
*
* The Node renderer this wiki replaced built all three server-side, so they were correct on first
* paint and worked without JavaScript. MediaWiki has no hook for injecting arbitrary markup into a
* Timeless sidebar chunk without a skin or extension, so they are built client-side here instead.
* The trade-off is a brief gap before the panel appears; in exchange nothing about the wiki has to be
* patched on disk, and every piece is editable on-wiki.
*
* Markup deliberately mirrors Timeless's own nesting -- .sidebar-chunk > h2 > span, then
* .sidebar-inner > .mw-portlet > h3 + .mw-portlet-body -- because both the skin's collapse behaviour
* at narrow widths and MediaWiki:Timeless.css key off that exact structure.
*/
( function () {
'use strict';

/* ---------------------------------------------------------------- Vana'diel clock math
*
* Time runs 25x Earth time. The anchor is Vana'diel's birthday: Earth 2002-06-23T15:00:00Z
* corresponds to Vana'diel 0898-02-01 00:00, which is (898 * 360) + 30 days after the epoch.
* The calendar has no leap years and no short months -- 360-day years, 30-day months, 8-day
* weeks -- so everything else is modulo arithmetic on Vana'diel minutes.
*
* The moon runs a separate 84-day cycle offset 26 days from the epoch. Phase comes from the
* percentage *and* the direction of travel, because each percentage occurs twice per cycle.
*
* Kept identical to site/public/vanadiel.mjs, which was cross-checked against HorizonXI's
* MediaWiki:VanaTime.js over a full moon cycle.
*/
var EARTH_ANCHOR_MS = 1024844400000;
var VANA_ANCHOR_DAYS = 898 * 360 + 30;
var RATE = 25;

var MIN_PER_HOUR = 60;
var MIN_PER_DAY = 1440;
var MIN_PER_WEEK = 8 * MIN_PER_DAY;
var MIN_PER_MONTH = 30 * MIN_PER_DAY;
var MIN_PER_YEAR = 360 * MIN_PER_DAY;

var MOON_CYCLE_DAYS = 84;
var MOON_OFFSET_DAYS = 26;

var WEEKDAYS = [
'Firesday', 'Earthsday', 'Watersday', 'Windsday',
'Iceday', 'Lightningday', 'Lightsday', 'Darksday'
];
var MOON_PHASES = [
'New Moon', 'Waxing Crescent', 'First Quarter', 'Waxing Gibbous',
'Full Moon', 'Waning Gibbous', 'Last Quarter', 'Waning Crescent'
];
var MOON_ICONS = [ '\uD83C\uDF11', '\uD83C\uDF12', '\uD83C\uDF13', '\uD83C\uDF14',
'\uD83C\uDF15', '\uD83C\uDF16', '\uD83C\uDF17', '\uD83C\uDF18' ];

function moonPhaseIndex( percent, direction ) {
// direction: 0 = turning point, 1 = falling toward new, 2 = rising toward full.
if ( percent <= 5 || ( percent <= 10 && direction === 1 ) ) { return 0; }
if ( percent >= 7 && percent <= 38 && direction === 2 ) { return 1; }
if ( percent >= 40 && percent <= 55 && direction === 2 ) { return 2; }
if ( percent >= 57 && percent <= 88 && direction === 2 ) { return 3; }
if ( percent >= 95 || ( percent >= 90 && direction === 2 ) ) { return 4; }
if ( percent >= 62 && percent <= 93 && direction === 1 ) { return 5; }
if ( percent >= 45 && percent <= 60 && direction === 1 ) { return 6; }
return 7;
}

function vanadiel() {
var minutes = VANA_ANCHOR_DAYS * MIN_PER_DAY +
( ( Date.now() - EARTH_ANCHOR_MS ) * RATE ) / 60000;

var moonDay = Math.floor( ( ( minutes / MIN_PER_DAY ) + MOON_OFFSET_DAYS ) % MOON_CYCLE_DAYS );
var moonPercent = Math.abs( Math.round( ( ( 42 - moonDay ) / 42 ) * 100 ) );
var moonDirection = moonDay === 0 || moonDay === 42 ? 0 : ( moonDay < 42 ? 1 : 2 );
var moonIndex = moonPhaseIndex( moonPercent, moonDirection );
var weekdayIndex = Math.floor( ( minutes % MIN_PER_WEEK ) / MIN_PER_DAY );

return {
year: Math.floor( minutes / MIN_PER_YEAR ),
month: Math.floor( ( minutes / MIN_PER_MONTH ) % 12 ) + 1,
day: Math.floor( ( minutes / MIN_PER_DAY ) % 30 ) + 1,
hour: Math.floor( ( minutes % MIN_PER_DAY ) / MIN_PER_HOUR ),
minute: Math.floor( minutes % MIN_PER_HOUR ),
weekdayIndex: weekdayIndex,
weekday: WEEKDAYS[ weekdayIndex ],
moonPercent: moonPercent,
moonPhase: MOON_PHASES[ moonIndex ],
moonIcon: MOON_ICONS[ moonIndex ]
};
}

function pad2( n ) {
return ( n < 10 ? '0' : '' ) + n;
}

/* ---------------------------------------------------------------- markup helpers */

function el( tag, attrs, children ) {
var node = document.createElement( tag );
var key;
for ( key in attrs || {} ) {
if ( key === 'text' ) {
node.textContent = attrs[ key ];
} else {
node.setAttribute( key, attrs[ key ] );
}
}
( children || [] ).forEach( function ( child ) {
node.appendChild( child );
} );
return node;
}

/** A Timeless portlet: heading plus body, ready to drop into a .sidebar-inner. */
function portlet( id, label, body ) {
return el( 'div', { role: 'navigation', 'class': 'mw-portlet', id: 'p-' + id,
'aria-labelledby': 'p-' + id + '-label' }, [
el( 'h3', { id: 'p-' + id + '-label', text: label } ),
el( 'div', { 'class': 'mw-portlet-body' }, [ body ] )
] );
}

/** A Timeless sidebar chunk: the collapsible outer container. */
function chunk( id, heading, body ) {
return el( 'div', { id: id, 'class': 'sidebar-chunk' }, [
el( 'h2', {}, [ el( 'span', { text: heading } ) ] ),
el( 'div', { 'class': 'sidebar-inner' }, [ body ] )
] );
}

/* ---------------------------------------------------------------- Vana'diel panel */

function buildClockPanel() {
var clock = el( 'b', { 'class': 'pg-vana-clock' } );
var date = el( 'span', { 'class': 'pg-vana-date' } );
var day = el( 'span', { 'class': 'pg-vana-day' } );
var moonIcon = el( 'span', { 'class': 'pg-vana-moon-icon' } );
var moonPct = el( 'span', { 'class': 'pg-vana-moon-pct' } );
var serverText = el( 'span', { 'class': 'pg-vana-server-text', text: 'Checking status' } );
var serverCount = el( 'b', { 'class': 'pg-vana-server-count' } );
var server = el( 'div', { 'class': 'pg-vana-line pg-vana-server', 'data-state': 'unknown' }, [
el( 'span', { 'class': 'pg-vana-dot', 'aria-hidden': 'true' } ),
serverText,
serverCount
] );

var panel = el( 'div', { 'class': 'pg-vana' }, [
el( 'div', { 'class': 'pg-vana-line' }, [
clock, el( 'span', { 'class': 'pg-vana-tilde', text: '~' } ), date
] ),
el( 'div', { 'class': 'pg-vana-line' }, [
day,
el( 'span', { 'class': 'pg-vana-tilde', text: '~' } ),
el( 'span', { 'class': 'pg-vana-moon' }, [ moonIcon, moonPct ] )
] ),
server
] );

var list = el( 'ul', {}, [
el( 'li', { id: 'n-vanatime', 'class': 'mw-list-item' }, [ panel ] )
] );

// A Vana'diel minute is 2.4 Earth seconds, so a one-second tick looks smooth without
// doing redundant work.
function tick() {
var v = vanadiel();
clock.textContent = pad2( v.hour ) + ':' + pad2( v.minute );
date.textContent = v.year + '-' + v.month + '-' + v.day;
day.textContent = v.weekday;
day.className = 'pg-vana-day pg-vana-day-' + v.weekdayIndex;
moonIcon.textContent = v.moonIcon;
moonIcon.setAttribute( 'title', v.moonPhase );
moonPct.textContent = v.moonPercent + '%';
}

// Same origin as the wiki, so no CORS involved and no proxy needed.
function poll() {
fetch( '/api/status', { headers: { Accept: 'application/json' } } )
.then( function ( res ) {
if ( !res.ok ) {
throw new Error( 'HTTP ' + res.status );
}
return res.json();
} )
.then( function ( data ) {
var online = String( data && data.status || '' ).toLowerCase() === 'online';
var players = Number( data && data.playerCount );
server.setAttribute( 'data-state', online ? 'online' : 'offline' );
serverText.textContent = online ? 'Online' : 'Offline';
// A count of 0 is indistinguishable from "not published", and "Online 0" next
// to a green dot reads as a bug, so only show a positive count.
serverCount.textContent = online && players > 0 ? String( players ) : '';
} )
.catch( function () {
// Keep whatever is on screen; the next poll may succeed.
if ( server.getAttribute( 'data-state' ) === 'unknown' ) {
serverText.textContent = 'Status unavailable';
}
} );
}

tick();
poll();
setInterval( tick, 1000 );
setInterval( poll, 60000 );

return portlet( 'vanatime', "Vana'diel Time", list );
}

/* ---------------------------------------------------------------- theme toggle
*
* Dark is the default and needs no class, so light mode is the opt-in state: MediaWiki:Timeless.css
* scopes every dark rule to html:not(.pg-day). That ordering means a reader on the default theme
* never sees a flash of light before this script runs.
*/
var THEME_KEY = 'pg-theme';

function applyTheme( theme ) {
document.documentElement.classList.toggle( 'pg-day', theme === 'day' );
}

function buildThemeToggle() {
var link = el( 'a', { 'class': 'ext-darkmode-link', href: '#', role: 'button' } );
var label = el( 'span', {} );
link.appendChild( label );

function refresh() {
var isDay = document.documentElement.classList.contains( 'pg-day' );
label.textContent = isDay ? 'Dark mode' : 'Light mode';
}

link.addEventListener( 'click', function ( e ) {
e.preventDefault();
var next = document.documentElement.classList.contains( 'pg-day' ) ? 'night' : 'day';
applyTheme( next );
try {
localStorage.setItem( THEME_KEY, next );
} catch ( err ) {
// Private browsing or a full quota; the choice just will not persist.
}
refresh();
} );

refresh();

return portlet( 'theme', 'Appearance', el( 'ul', {}, [
el( 'li', { id: 't-darkmode', 'class': 'mw-list-item' }, [ link ] )
] ) );
}

/* ---------------------------------------------------------------- Discord panel
*
* Discord's own embed (discord.com/widget) is a cross-origin iframe locked to Discord's blurple
* palette, so it cannot be themed to match this wiki. The member list is therefore fetched and
* rendered here instead: widget.json sends Access-Control-Allow-Origin for this host, so no proxy
* is involved and the markup is ours to style.
*
* That endpoint answers 403 whenever "Enable Server Widget" is switched off in Discord's server
* settings, which is why the static join panel is still kept as a fallback rather than deleted.
*/
var DISCORD_INVITE = 'https://discord.gg/M3NFvpm75E';
var DISCORD_GUILD = '1473308284349059126';
var DISCORD_WIDGET = 'https://discord.com/api/guilds/' + DISCORD_GUILD + '/widget.json';

// Online first, then idle, then do-not-disturb, alphabetically within each.
var STATUS_RANK = { online: 0, idle: 1, dnd: 2, offline: 3 };

function statusRank( status ) {
return STATUS_RANK[ status ] === undefined ? STATUS_RANK.offline : STATUS_RANK[ status ];
}

function discordMember( member ) {
var status = STATUS_RANK[ member.status ] === undefined ? 'offline' : member.status;
var children = [];

if ( member.avatar_url ) {
children.push( el( 'img', { 'class': 'pg-discord-avatar', src: member.avatar_url,
alt: '', width: '20', height: '20', loading: 'lazy' } ) );
} else {
children.push( el( 'span', { 'class': 'pg-discord-avatar pg-discord-avatar-blank',
'aria-hidden': 'true' } ) );
}

children.push( el( 'span', { 'class': 'pg-discord-member-name', text: member.username } ) );

var li = el( 'li', { 'class': 'pg-discord-member', 'data-status': status }, children );
// The status is conveyed by a colour swatch, so name it for anyone not seeing colour.
li.setAttribute( 'title', member.game && member.game.name ?
member.username + ' - ' + status + ' - playing ' + member.game.name :
member.username + ' - ' + status );
return li;
}

function buildDiscordPanel() {
var count = el( 'span', { 'class': 'pg-discord-count', text: 'Loading' } );
var list = el( 'ul', { 'class': 'pg-discord-members' } );

var panel = el( 'div', { 'class': 'pg-discord' }, [
el( 'div', { 'class': 'pg-discord-head' }, [
el( 'span', { 'class': 'pg-discord-title', text: 'PegasusXI' } ),
count
] ),
list,
el( 'a', { 'class': 'pg-discord-join', href: DISCORD_INVITE,
target: '_blank', rel: 'noopener', text: 'Join Discord' } )
] );

fetch( DISCORD_WIDGET, { headers: { Accept: 'application/json' } } )
.then( function ( res ) {
if ( !res.ok ) {
throw new Error( 'HTTP ' + res.status );
}
return res.json();
} )
.then( function ( data ) {
var members = ( ( data && data.members ) || [] ).slice();
members.sort( function ( a, b ) {
return statusRank( a.status ) - statusRank( b.status ) ||
String( a.username ).localeCompare( String( b.username ) );
} );

// presence_count counts everyone online; the members array is capped by Discord.
var online = Number( data && data.presence_count );
if ( !isFinite( online ) ) {
online = members.length;
}
count.textContent = online + ( online === 1 ? ' member online' : ' members online' );

members.forEach( function ( member ) {
list.appendChild( discordMember( member ) );
} );

panel.setAttribute( 'data-state', 'ready' );
} )
.catch( function () {
// Most likely the server widget was switched off again. Fall back to the plain join
// panel rather than leaving "Loading" on screen for good.
panel.setAttribute( 'data-state', 'unavailable' );
count.textContent = 'Chat, support and server announcements';
} );

return el( 'div', { id: 'discord-panel' }, [ panel ] );
}

/* ---------------------------------------------------------------- header button
*
* #mw-header is a flex row and Timeless assigns explicit orders: #p-logo-text 1, #p-search 2,
* #user-tools 3. A new child with no order defaults to 0 and jumps ahead of all of them, which is
* why this button first appeared at the far left of the header. MediaWiki:Timeless.css gives it
* order 4 so it sits at the right-hand end.
*
* This starts a sign-in rather than handing out an invite: the Discord invite is already on the
* sidebar panel, and a reader who wants an account is better served by the thing that makes one.
*/

/* The flow cannot be started by a link. It begins with a POST of MediaWiki's login form carrying
* a login token, and Special:PluggableAuthLogin on its own has no plugin recorded in the session,
* so it just errors. Rather than leave the reader on the login page to press a second button, the
* header link carries this marker and the gadget presses the real button on arrival. The form and
* token are MediaWiki's own, so nothing is forged, and with JavaScript off the reader simply sees
* the login page with the Discord button waiting.
*/
var AUTOSTART_PARAM = 'pgdiscord';

function buildHeaderButton() {
// Logged-in readers have the personal menu instead; a sign-in button would be noise.
if ( mw.config.get( 'wgUserName' ) ) {
return null;
}

var articlePath = mw.config.get( 'wgArticlePath' ) || '/wiki/$1';
var params = new URLSearchParams();
params.set( 'returnto', mw.config.get( 'wgPageName' ) || 'Main_Page' );
params.set( AUTOSTART_PARAM, '1' );
var href = articlePath.replace( '$1', 'Special:UserLogin' ) + '?' + params.toString();

return el( 'div', { id: 'p-discord-signin' }, [
el( 'a', { 'class': 'pg-discord-signin', href: href }, [
el( 'span', { 'class': 'pg-discord-signin-mark', 'aria-hidden': 'true' } ),
el( 'span', { text: 'Sign in with Discord' } )
] )
] );
}

/** On the login page, press the Discord button if we were sent there to do exactly that. */
function maybeAutostart() {
if ( mw.config.get( 'wgCanonicalSpecialPageName' ) !== 'Userlogin' ) {
return;
}

var query = new URLSearchParams( location.search );
if ( query.get( AUTOSTART_PARAM ) !== '1' ) {
return;
}

// A refused or failed attempt comes back here with a message. Pressing the button again
// would bounce the reader straight back out and hide the reason from them.
if ( query.has( 'error' ) || query.has( 'warning' ) ) {
return;
}
if ( document.querySelector(
'.cdx-message--error, .errorbox, .mw-message-box-error, .error'
) ) {
return;
}

// Matched by name prefix rather than index: the suffix is the plugin's position in
// $wgPluggableAuth_Config, which would shift if a second provider were ever added.
var button = document.querySelector(
'button[name^="pluggableauthlogin"], input[name^="pluggableauthlogin"]'
);
if ( button ) {
button.click();
}
}

/* ---------------------------------------------------------------- wire it up */

function init() {
// Restore the saved theme first so the toggle's label starts out correct.
try {
if ( localStorage.getItem( THEME_KEY ) === 'day' ) {
applyTheme( 'day' );
}
} catch ( err ) {}

// Before building anything else: if this is a hand-off to Discord the page is about to be
// replaced, so there is no point populating a sidebar nobody will see.
maybeAutostart();

var siteNav = document.getElementById( 'mw-site-navigation' );
var navChunk = document.getElementById( 'site-navigation' );

if ( navChunk ) {
var inner = navChunk.querySelector( '.sidebar-inner' );
if ( inner ) {
inner.insertBefore( buildClockPanel(), inner.firstChild );
}
}

if ( siteNav && !document.getElementById( 'theme-tools' ) ) {
siteNav.appendChild( chunk( 'theme-tools', 'Appearance', buildThemeToggle() ) );
}

var related = document.getElementById( 'mw-related-navigation' );
if ( related && !document.getElementById( 'discord-panel' ) ) {
related.insertBefore( buildDiscordPanel(), related.firstChild );
}

var userTools = document.getElementById( 'user-tools' );
if ( userTools && userTools.parentNode && !document.getElementById( 'p-discord-signin' ) ) {
var button = buildHeaderButton();
if ( button ) {
userTools.parentNode.insertBefore( button, userTools );
}
}
}

if ( document.readyState === 'loading' ) {
document.addEventListener( 'DOMContentLoaded', init );
} else {
init();
}
}() );

MediaWiki:Gadget-pegasus.js

2026-08-30T00:28:35Z

PegasusAdmin: Header button starts Discord sign-in instead of linking to the invite

/* PegasusXI Wiki sidebar additions: Vana'diel clock, theme toggle, Discord panel.
*
* The Node renderer this wiki replaced built all three server-side, so they were correct on first
* paint and worked without JavaScript. MediaWiki has no hook for injecting arbitrary markup into a
* Timeless sidebar chunk without a skin or extension, so they are built client-side here instead.
* The trade-off is a brief gap before the panel appears; in exchange nothing about the wiki has to be
* patched on disk, and every piece is editable on-wiki.
*
* Markup deliberately mirrors Timeless's own nesting -- .sidebar-chunk > h2 > span, then
* .sidebar-inner > .mw-portlet > h3 + .mw-portlet-body -- because both the skin's collapse behaviour
* at narrow widths and MediaWiki:Timeless.css key off that exact structure.
*/
( function () {
'use strict';

/* ---------------------------------------------------------------- Vana'diel clock math
*
* Time runs 25x Earth time. The anchor is Vana'diel's birthday: Earth 2002-06-23T15:00:00Z
* corresponds to Vana'diel 0898-02-01 00:00, which is (898 * 360) + 30 days after the epoch.
* The calendar has no leap years and no short months -- 360-day years, 30-day months, 8-day
* weeks -- so everything else is modulo arithmetic on Vana'diel minutes.
*
* The moon runs a separate 84-day cycle offset 26 days from the epoch. Phase comes from the
* percentage *and* the direction of travel, because each percentage occurs twice per cycle.
*
* Kept identical to site/public/vanadiel.mjs, which was cross-checked against HorizonXI's
* MediaWiki:VanaTime.js over a full moon cycle.
*/
var EARTH_ANCHOR_MS = 1024844400000;
var VANA_ANCHOR_DAYS = 898 * 360 + 30;
var RATE = 25;

var MIN_PER_HOUR = 60;
var MIN_PER_DAY = 1440;
var MIN_PER_WEEK = 8 * MIN_PER_DAY;
var MIN_PER_MONTH = 30 * MIN_PER_DAY;
var MIN_PER_YEAR = 360 * MIN_PER_DAY;

var MOON_CYCLE_DAYS = 84;
var MOON_OFFSET_DAYS = 26;

var WEEKDAYS = [
'Firesday', 'Earthsday', 'Watersday', 'Windsday',
'Iceday', 'Lightningday', 'Lightsday', 'Darksday'
];
var MOON_PHASES = [
'New Moon', 'Waxing Crescent', 'First Quarter', 'Waxing Gibbous',
'Full Moon', 'Waning Gibbous', 'Last Quarter', 'Waning Crescent'
];
var MOON_ICONS = [ '\uD83C\uDF11', '\uD83C\uDF12', '\uD83C\uDF13', '\uD83C\uDF14',
'\uD83C\uDF15', '\uD83C\uDF16', '\uD83C\uDF17', '\uD83C\uDF18' ];

function moonPhaseIndex( percent, direction ) {
// direction: 0 = turning point, 1 = falling toward new, 2 = rising toward full.
if ( percent <= 5 || ( percent <= 10 && direction === 1 ) ) { return 0; }
if ( percent >= 7 && percent <= 38 && direction === 2 ) { return 1; }
if ( percent >= 40 && percent <= 55 && direction === 2 ) { return 2; }
if ( percent >= 57 && percent <= 88 && direction === 2 ) { return 3; }
if ( percent >= 95 || ( percent >= 90 && direction === 2 ) ) { return 4; }
if ( percent >= 62 && percent <= 93 && direction === 1 ) { return 5; }
if ( percent >= 45 && percent <= 60 && direction === 1 ) { return 6; }
return 7;
}

function vanadiel() {
var minutes = VANA_ANCHOR_DAYS * MIN_PER_DAY +
( ( Date.now() - EARTH_ANCHOR_MS ) * RATE ) / 60000;

var moonDay = Math.floor( ( ( minutes / MIN_PER_DAY ) + MOON_OFFSET_DAYS ) % MOON_CYCLE_DAYS );
var moonPercent = Math.abs( Math.round( ( ( 42 - moonDay ) / 42 ) * 100 ) );
var moonDirection = moonDay === 0 || moonDay === 42 ? 0 : ( moonDay < 42 ? 1 : 2 );
var moonIndex = moonPhaseIndex( moonPercent, moonDirection );
var weekdayIndex = Math.floor( ( minutes % MIN_PER_WEEK ) / MIN_PER_DAY );

return {
year: Math.floor( minutes / MIN_PER_YEAR ),
month: Math.floor( ( minutes / MIN_PER_MONTH ) % 12 ) + 1,
day: Math.floor( ( minutes / MIN_PER_DAY ) % 30 ) + 1,
hour: Math.floor( ( minutes % MIN_PER_DAY ) / MIN_PER_HOUR ),
minute: Math.floor( minutes % MIN_PER_HOUR ),
weekdayIndex: weekdayIndex,
weekday: WEEKDAYS[ weekdayIndex ],
moonPercent: moonPercent,
moonPhase: MOON_PHASES[ moonIndex ],
moonIcon: MOON_ICONS[ moonIndex ]
};
}

function pad2( n ) {
return ( n < 10 ? '0' : '' ) + n;
}

/* ---------------------------------------------------------------- markup helpers */

function el( tag, attrs, children ) {
var node = document.createElement( tag );
var key;
for ( key in attrs || {} ) {
if ( key === 'text' ) {
node.textContent = attrs[ key ];
} else {
node.setAttribute( key, attrs[ key ] );
}
}
( children || [] ).forEach( function ( child ) {
node.appendChild( child );
} );
return node;
}

/** A Timeless portlet: heading plus body, ready to drop into a .sidebar-inner. */
function portlet( id, label, body ) {
return el( 'div', { role: 'navigation', 'class': 'mw-portlet', id: 'p-' + id,
'aria-labelledby': 'p-' + id + '-label' }, [
el( 'h3', { id: 'p-' + id + '-label', text: label } ),
el( 'div', { 'class': 'mw-portlet-body' }, [ body ] )
] );
}

/** A Timeless sidebar chunk: the collapsible outer container. */
function chunk( id, heading, body ) {
return el( 'div', { id: id, 'class': 'sidebar-chunk' }, [
el( 'h2', {}, [ el( 'span', { text: heading } ) ] ),
el( 'div', { 'class': 'sidebar-inner' }, [ body ] )
] );
}

/* ---------------------------------------------------------------- Vana'diel panel */

function buildClockPanel() {
var clock = el( 'b', { 'class': 'pg-vana-clock' } );
var date = el( 'span', { 'class': 'pg-vana-date' } );
var day = el( 'span', { 'class': 'pg-vana-day' } );
var moonIcon = el( 'span', { 'class': 'pg-vana-moon-icon' } );
var moonPct = el( 'span', { 'class': 'pg-vana-moon-pct' } );
var serverText = el( 'span', { 'class': 'pg-vana-server-text', text: 'Checking status' } );
var serverCount = el( 'b', { 'class': 'pg-vana-server-count' } );
var server = el( 'div', { 'class': 'pg-vana-line pg-vana-server', 'data-state': 'unknown' }, [
el( 'span', { 'class': 'pg-vana-dot', 'aria-hidden': 'true' } ),
serverText,
serverCount
] );

var panel = el( 'div', { 'class': 'pg-vana' }, [
el( 'div', { 'class': 'pg-vana-line' }, [
clock, el( 'span', { 'class': 'pg-vana-tilde', text: '~' } ), date
] ),
el( 'div', { 'class': 'pg-vana-line' }, [
day,
el( 'span', { 'class': 'pg-vana-tilde', text: '~' } ),
el( 'span', { 'class': 'pg-vana-moon' }, [ moonIcon, moonPct ] )
] ),
server
] );

var list = el( 'ul', {}, [
el( 'li', { id: 'n-vanatime', 'class': 'mw-list-item' }, [ panel ] )
] );

// A Vana'diel minute is 2.4 Earth seconds, so a one-second tick looks smooth without
// doing redundant work.
function tick() {
var v = vanadiel();
clock.textContent = pad2( v.hour ) + ':' + pad2( v.minute );
date.textContent = v.year + '-' + v.month + '-' + v.day;
day.textContent = v.weekday;
day.className = 'pg-vana-day pg-vana-day-' + v.weekdayIndex;
moonIcon.textContent = v.moonIcon;
moonIcon.setAttribute( 'title', v.moonPhase );
moonPct.textContent = v.moonPercent + '%';
}

// Same origin as the wiki, so no CORS involved and no proxy needed.
function poll() {
fetch( '/api/status', { headers: { Accept: 'application/json' } } )
.then( function ( res ) {
if ( !res.ok ) {
throw new Error( 'HTTP ' + res.status );
}
return res.json();
} )
.then( function ( data ) {
var online = String( data && data.status || '' ).toLowerCase() === 'online';
var players = Number( data && data.playerCount );
server.setAttribute( 'data-state', online ? 'online' : 'offline' );
serverText.textContent = online ? 'Online' : 'Offline';
// A count of 0 is indistinguishable from "not published", and "Online 0" next
// to a green dot reads as a bug, so only show a positive count.
serverCount.textContent = online && players > 0 ? String( players ) : '';
} )
.catch( function () {
// Keep whatever is on screen; the next poll may succeed.
if ( server.getAttribute( 'data-state' ) === 'unknown' ) {
serverText.textContent = 'Status unavailable';
}
} );
}

tick();
poll();
setInterval( tick, 1000 );
setInterval( poll, 60000 );

return portlet( 'vanatime', "Vana'diel Time", list );
}

/* ---------------------------------------------------------------- theme toggle
*
* Dark is the default and needs no class, so light mode is the opt-in state: MediaWiki:Timeless.css
* scopes every dark rule to html:not(.pg-day). That ordering means a reader on the default theme
* never sees a flash of light before this script runs.
*/
var THEME_KEY = 'pg-theme';

function applyTheme( theme ) {
document.documentElement.classList.toggle( 'pg-day', theme === 'day' );
}

function buildThemeToggle() {
var link = el( 'a', { 'class': 'ext-darkmode-link', href: '#', role: 'button' } );
var label = el( 'span', {} );
link.appendChild( label );

function refresh() {
var isDay = document.documentElement.classList.contains( 'pg-day' );
label.textContent = isDay ? 'Dark mode' : 'Light mode';
}

link.addEventListener( 'click', function ( e ) {
e.preventDefault();
var next = document.documentElement.classList.contains( 'pg-day' ) ? 'night' : 'day';
applyTheme( next );
try {
localStorage.setItem( THEME_KEY, next );
} catch ( err ) {
// Private browsing or a full quota; the choice just will not persist.
}
refresh();
} );

refresh();

return portlet( 'theme', 'Appearance', el( 'ul', {}, [
el( 'li', { id: 't-darkmode', 'class': 'mw-list-item' }, [ link ] )
] ) );
}

/* ---------------------------------------------------------------- Discord panel
*
* Discord's own embed (discord.com/widget) is a cross-origin iframe locked to Discord's blurple
* palette, so it cannot be themed to match this wiki. The member list is therefore fetched and
* rendered here instead: widget.json sends Access-Control-Allow-Origin for this host, so no proxy
* is involved and the markup is ours to style.
*
* That endpoint answers 403 whenever "Enable Server Widget" is switched off in Discord's server
* settings, which is why the static join panel is still kept as a fallback rather than deleted.
*/
var DISCORD_INVITE = 'https://discord.gg/M3NFvpm75E';
var DISCORD_GUILD = '1473308284349059126';
var DISCORD_WIDGET = 'https://discord.com/api/guilds/' + DISCORD_GUILD + '/widget.json';

// Online first, then idle, then do-not-disturb, alphabetically within each.
var STATUS_RANK = { online: 0, idle: 1, dnd: 2, offline: 3 };

function statusRank( status ) {
return STATUS_RANK[ status ] === undefined ? STATUS_RANK.offline : STATUS_RANK[ status ];
}

function discordMember( member ) {
var status = STATUS_RANK[ member.status ] === undefined ? 'offline' : member.status;
var children = [];

if ( member.avatar_url ) {
children.push( el( 'img', { 'class': 'pg-discord-avatar', src: member.avatar_url,
alt: '', width: '20', height: '20', loading: 'lazy' } ) );
} else {
children.push( el( 'span', { 'class': 'pg-discord-avatar pg-discord-avatar-blank',
'aria-hidden': 'true' } ) );
}

children.push( el( 'span', { 'class': 'pg-discord-member-name', text: member.username } ) );

var li = el( 'li', { 'class': 'pg-discord-member', 'data-status': status }, children );
// The status is conveyed by a colour swatch, so name it for anyone not seeing colour.
li.setAttribute( 'title', member.game && member.game.name ?
member.username + ' - ' + status + ' - playing ' + member.game.name :
member.username + ' - ' + status );
return li;
}

function buildDiscordPanel() {
var count = el( 'span', { 'class': 'pg-discord-count', text: 'Loading' } );
var list = el( 'ul', { 'class': 'pg-discord-members' } );

var panel = el( 'div', { 'class': 'pg-discord' }, [
el( 'div', { 'class': 'pg-discord-head' }, [
el( 'span', { 'class': 'pg-discord-title', text: 'PegasusXI' } ),
count
] ),
list,
el( 'a', { 'class': 'pg-discord-join', href: DISCORD_INVITE,
target: '_blank', rel: 'noopener', text: 'Join Discord' } )
] );

fetch( DISCORD_WIDGET, { headers: { Accept: 'application/json' } } )
.then( function ( res ) {
if ( !res.ok ) {
throw new Error( 'HTTP ' + res.status );
}
return res.json();
} )
.then( function ( data ) {
var members = ( ( data && data.members ) || [] ).slice();
members.sort( function ( a, b ) {
return statusRank( a.status ) - statusRank( b.status ) ||
String( a.username ).localeCompare( String( b.username ) );
} );

// presence_count counts everyone online; the members array is capped by Discord.
var online = Number( data && data.presence_count );
if ( !isFinite( online ) ) {
online = members.length;
}
count.textContent = online + ( online === 1 ? ' member online' : ' members online' );

members.forEach( function ( member ) {
list.appendChild( discordMember( member ) );
} );

panel.setAttribute( 'data-state', 'ready' );
} )
.catch( function () {
// Most likely the server widget was switched off again. Fall back to the plain join
// panel rather than leaving "Loading" on screen for good.
panel.setAttribute( 'data-state', 'unavailable' );
count.textContent = 'Chat, support and server announcements';
} );

return el( 'div', { id: 'discord-panel' }, [ panel ] );
}

/* ---------------------------------------------------------------- header button
*
* #mw-header is a flex row and Timeless assigns explicit orders: #p-logo-text 1, #p-search 2,
* #user-tools 3. A new child with no order defaults to 0 and jumps ahead of all of them, which is
* why this button first appeared at the far left of the header. MediaWiki:Timeless.css gives it
* order 4 so it sits at the right-hand end.
*
* This starts a sign-in rather than handing out an invite: the Discord invite is already on the
* sidebar panel, and a reader who wants an account is better served by the thing that makes one.
* It points at Special:UserLogin rather than straight at Discord because PluggableAuth's button is
* a form POST carrying a login token, so a plain link cannot trigger it -- Special:PluggableAuthLogin
* on its own has no plugin selected in the session and errors out.
*/

function buildHeaderButton() {
// Logged-in readers have the personal menu instead; a sign-in button would be noise.
if ( mw.config.get( 'wgUserName' ) ) {
return null;
}

var articlePath = mw.config.get( 'wgArticlePath' ) || '/wiki/$1';
var href = articlePath.replace( '$1', 'Special:UserLogin' ) +
'?returnto=' + encodeURIComponent( mw.config.get( 'wgPageName' ) || '' );

return el( 'div', { id: 'p-discord-signin' }, [
el( 'a', { 'class': 'pg-discord-signin', href: href }, [
el( 'span', { 'class': 'pg-discord-signin-mark', 'aria-hidden': 'true' } ),
el( 'span', { text: 'Sign in with Discord' } )
] )
] );
}

/* ---------------------------------------------------------------- wire it up */

function init() {
// Restore the saved theme first so the toggle's label starts out correct.
try {
if ( localStorage.getItem( THEME_KEY ) === 'day' ) {
applyTheme( 'day' );
}
} catch ( err ) {}

var siteNav = document.getElementById( 'mw-site-navigation' );
var navChunk = document.getElementById( 'site-navigation' );

if ( navChunk ) {
var inner = navChunk.querySelector( '.sidebar-inner' );
if ( inner ) {
inner.insertBefore( buildClockPanel(), inner.firstChild );
}
}

if ( siteNav && !document.getElementById( 'theme-tools' ) ) {
siteNav.appendChild( chunk( 'theme-tools', 'Appearance', buildThemeToggle() ) );
}

var related = document.getElementById( 'mw-related-navigation' );
if ( related && !document.getElementById( 'discord-panel' ) ) {
related.insertBefore( buildDiscordPanel(), related.firstChild );
}

var userTools = document.getElementById( 'user-tools' );
if ( userTools && userTools.parentNode && !document.getElementById( 'p-discord-signin' ) ) {
var button = buildHeaderButton();
if ( button ) {
userTools.parentNode.insertBefore( button, userTools );
}
}
}

if ( document.readyState === 'loading' ) {
document.addEventListener( 'DOMContentLoaded', init );
} else {
init();
}
}() );

File:Cab. Gauntlets +4 description.png

2026-08-30T00:04:48Z

PegasusAdmin: == Summary == Imported from the BG-Wiki archive (CC BY-NC-SA 3.0)