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="0 0 245 240" aria-hidden="true" focusable="false" class="discord-icon" xmlns="http://www.w3.org/2000/svg">' +
      '  <path d="M104.4 103.9c-5.7 0-10.2 5-10.2 11.1 0 6.1 4.6 11.1 10.2 11.1 5.7 0 10.3-5 10.2-11.1 0-6.1-4.6-11.1-10.2-11.1zm36.2 0c-5.7 0-10.2 5-10.2 11.1 0 6.1 4.6 11.1 10.2 11.1 5.7 0 10.2-5 10.2-11.1 0-6.1-4.5-11.1-10.2-11.1z"/>' +
      '  <path d="M189.5 20h-134C38.5 20 25 33.6 25 50.3v139.3C25 206.4 38.5 220 55.5 220h113.2l-5.3-18.4 12.8 11.9 12.1 11.2 21.4 19V50.3C209.7 33.6 196.2 20 179.2 20zm-39.1 130s-3.7-4.4-6.8-8.3c13.5-3.8 18.7-12.2 18.7-12.2-4.2 2.8-8.2 4.7-11.7 6-5.1 2.1-10 3.4-14.8 4.2-9.8 1.8-18.8 1.3-26.6-.1-5.8-1.1-10.8-2.7-15-4.2-2.3-.9-4.9-2-7.4-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.2-.8-.4-1.2-.7-1.2-.7s4.9 8.1 17.8 12c-3.1 3.9-6.9 8.5-6.9 8.5-22.7-.7-31.3-15.6-31.3-15.6 0-33 14.8-59.7 14.8-59.7 14.8-11.1 28.9-10.8 28.9-10.8l1 1.2c-18.6 5.3-27.1 13.3-27.1 13.3s2.3-1.3 6.1-3c11.1-4.9 19.9-6.2 23.6-6.6.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.6 0 0-8.1-7.7-25.7-13l1.4-1.6s14.1-.3 28.9 10.8c0 0 14.8 26.7 14.8 59.7 0 0-8.6 14.8-31.3 15.6z"/>' +
      '</svg>';

    $btn.append( svg );

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