MediaWiki:Citizen.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* All JavaScript here will be loaded for users of the Citizen skin */

mw.loader.using( 'mediawiki.util' ).then( function () {
  $( function () {
    var $start = $( '.citizen-header__start' );
    if ( !$start.length ) return;

    var $btn = $( '<a>', {
      id: 'discord-header-btn',
      class: 'citizen-header__button',
      href: 'https://discord.com/',
      title: 'Join our Discord',
      'aria-label': 'Join our Discord',
      target: '_blank',
      rel: 'noopener noreferrer'
    });

	var svg =
	  '<svg viewBox="-2 -1 28 26" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false" class="discord-icon" xmlns="http://www.w3.org/2000/svg">' +
	  '  <path fill-rule="evenodd" clip-rule="evenodd" d="M21.525 2.11C19.348.791 16.924.12 14.39.006A.076.076 0 0 0 14.312 0a.076.076 0 0 0-.076.076c-.19 2.488-.99 6.84-2.22 10.232C9.565 7.64 5.86 5.61 2.302 3.998a.076.076 0 0 0-.094.04C.802 6.3 0 9.07 0 11.95c0 6.32 4.02 11.69 9.38 12.03a.076.076 0 0 0 .084-.065c.34-1.63.79-3.2 1.3-4.66a.076.076 0 0 0-.05-.09c-.9-.28-1.75-.62-2.55-.99a.076.076 0 0 1-.01-.13c.12-.1.23-.2.35-.3A.076.076 0 0 1 8.6 17.6c3.4 1.58 7.2 1.58 10.6 0a.076.076 0 0 1 .07.02c.12.1.23.2.35.3a.076.076 0 0 1-.01.13c-.8.37-1.64.7-2.55.99a.076.076 0 0 0-.05.09c.5 1.47.95 3.03 1.3 4.66a.076.076 0 0 0 .08.06c5.37-.34 9.39-5.7 9.39-12.02 0-2.88-.8-5.65-2.2-7.92a.076.076 0 0 0-.09-.04c-3.56 1.6-7.26 3.63-9.7 6.23-1.23-3.4-2.03-7.75-2.22-10.23a.076.076 0 0 0-.07-.07Zm-4.63 11.41a1.71 1.71 0 0 1-1.71-1.71 1.71 1.71 0 0 1 1.7-1.71 1.71 1.71 0 0 1 1.72 1.7 1.71 1.71 0 0 1-1.72 1.72Zm4.63 0a1.71 1.71 0 0 1-1.71-1.71 1.71 1.71 0 0 1 1.7-1.71 1.71 1.71 0 0 1 1.72 1.7 1.71 1.71 0 0 1-1.72 1.72Z"/>' +
	  '</svg>';

    $btn.append( svg );

    var $hamburger = $start.find( 'button, a' ).first();
    ( $hamburger.length ? $btn.insertAfter( $hamburger ) : $start.prepend( $btn ) );
  } );
} );