MediaWiki:Common.js: Difference between revisions

(4 intermediate revisions by one other user not shown)

Line 1:

/* ~~Any JavaScript here will be~~ loaded ~~for all users~~ on every page ~~load~~. */

/* Site JS — loaded on every page (MediaWiki:Common.js). */

// ~~Discord link~~

/* SEO fixes (Lighthouse "meta description" + "image alt"). Citizen renders

$(~~document~~).~~ready~~(~~function~~() {

og:description but not <meta name="description">, and MediaWiki renders inline

var ~~discordElement~~ = $(`

images with no alt attribute, so we backfill both client-side. */

~~<div class~~="~~g-discord citizen-header__item citizen-dropdown~~" ~~style~~=~~"display: flex~~; ~~justify-~~content~~: center~~; ~~align-items: center~~;">

( function () {

~~<a href="https:~~//~~discord~~.gg/~~gscripts" target~~=~~"_blank">~~

// 1. Mirror og:description into a real meta description if missing.

<img src=~~"https:~~/~~/wiki~~.~~gscripts~~.co/~~images~~/4/~~4b/Discord_30_30~~.~~png" alt="Discord" width="30" height="30">~~

if ( !document.querySelector( 'meta[name="description"]' ) ) {

</a>

var og = document.querySelector( 'meta[property="og:description"]' );

</~~div>~~

if ( og && og.content ) {

`);

var m = document.createElement( 'meta' );

$(~~".citizen~~-~~header~~ .~~citizen-header__logo"~~).~~after~~(~~discordElement~~);

m.setAttribute( 'name', 'description' );

});

m.setAttribute( 'content', og.content );

document.head.appendChild( m );

}

// 2. Give every image an alt attribute if it lacks one, derived from the

// wrapping link's title (page/script name) or the file name.

document.querySelectorAll( 'img:not([alt])' ).forEach( function ( img ) {

var link = img.closest( 'a' );

var alt = ( link && link.getAttribute( 'title' ) ) || '';

if ( !alt ) {

var src = img.getAttribute( 'src' ) || '';

alt = decodeURIComponent( src.split( '/' ).pop() || '' )

.replace( /^\d+px-/, '' )

.replace( /\.[a-z0-9]+$/i, '' )

.replace( /[_-]+/g, ' ' )

.trim();

}

img.setAttribute( 'alt', alt );

} );

}() );

@@ Line 1: / Line 1: @@
-/* Any JavaScript here will be loaded for all users on every page load. */
+/* Site JS — loaded on every page (MediaWiki:Common.js). */
-// Discord link
+/* SEO fixes (Lighthouse "meta description" + "image alt"). Citizen renders
-$(document).ready(function() {
+   og:description but not <meta name="description">, and MediaWiki renders inline
-    var discordElement = $(`
+   images with no alt attribute, so we backfill both client-side. */
-        <div class="g-discord citizen-header__item citizen-dropdown" style="display: flex; justify-content: center; align-items: center;">
+( function () {
-            <a href="https://discord.gg/gscripts" target="_blank">
+	// 1. Mirror og:description into a real meta description if missing.
-                <img src="https://wiki.gscripts.co/images/4/4b/Discord_30_30.png" alt="Discord" width="30" height="30">
+	if ( !document.querySelector( 'meta[name="description"]' ) ) {
-            </a>
+		var og = document.querySelector( 'meta[property="og:description"]' );
-        </div>
+		if ( og && og.content ) {
-    `);
+			var m = document.createElement( 'meta' );
-    $(".citizen-header .citizen-header__logo").after(discordElement);
+			m.setAttribute( 'name', 'description' );
-});
+			m.setAttribute( 'content', og.content );
+			document.head.appendChild( m );
+		}
+	}
+	// 2. Give every image an alt attribute if it lacks one, derived from the
+	//    wrapping link's title (page/script name) or the file name.
+	document.querySelectorAll( 'img:not([alt])' ).forEach( function ( img ) {
+		var link = img.closest( 'a' );
+		var alt = ( link && link.getAttribute( 'title' ) ) || '';
+		if ( !alt ) {
+			var src = img.getAttribute( 'src' ) || '';
+			alt = decodeURIComponent( src.split( '/' ).pop() || '' )
+				.replace( /^\d+px-/, '' )
+				.replace( /\.[a-z0-9]+$/i, '' )
+				.replace( /[_-]+/g, ' ' )
+				.trim();
+		}
+		img.setAttribute( 'alt', alt );
+	} );
+}() );