fix: hide duplicate images generated by MobileFrontend

When a thumb is placed inside tabber under an article section, MobileFrontend duplicates
the image for some reason. So the hacky way to fix this is to hide the duplicated image.
Since it is an upstream issue, there are not much I can do.

Closes: #2

extension.json

@@ -84,6 +84,14 @@
 				"mobile"
 			]
 		},
+		"ext.tabberNeue.mobile.styles": {
+			"styles": [
+				"ext.tabberNeue.mobile.less"
+			],
+			"targets": [
+				"mobile"
+			]
+		},
 		"ext.tabberNeue.icons": {
 			"class": "ResourceLoaderImageModule",
 			"selector": ".tabber__header__{name}:after",
@@ -121,10 +129,11 @@
 		}
 	},
 	"Hooks": {
-		"ParserFirstCallInit": "parser"
+		"BeforePageDisplayMobile": "TabberHooks",
+		"ParserFirstCallInit": "TabberHooks"
 	},
 	"HookHandlers": {
-		"parser": {
+		"TabberHooks": {
 			"class": "TabberNeue\\Hooks"
 		}
 	},

includes/Hooks.php

@@ -5,9 +5,21 @@ declare( strict_types=1 );
 namespace TabberNeue;
 
 use MediaWiki\Hook\ParserFirstCallInitHook;
+use OutputPage;
 use Parser;
+use Skin;
 
 class Hooks implements ParserFirstCallInitHook {
+	/**
+	 * @see https://www.mediawiki.org/wiki/Extension:MobileFrontend/BeforePageDisplayMobile
+	 *
+	 * @param OutputPage $out
+	 * @param Skin $sk
+	 */
+	public static function onBeforePageDisplayMobile( OutputPage $out, Skin $sk ) {
+		$out->addModuleStyles( [ 'ext.tabberNeue.mobile.styles' ] );
+	}
+
 	/**
 	 * @see https://www.mediawiki.org/wiki/Manual:Hooks/ParserFirstCallInit
 	 *

modules/ext.tabberNeue.mobile.less

@@ -0,0 +1,15 @@
+/*
+ * This is a hacky way to hide the duplicated image generated by MobileFrontend
+ * See https://github.com/StarCitizenTools/mediawiki-extensions-TabberNeue/issues/2
+ */
+
+/* stylelint-disable selector-class-pattern */
+.tabber {
+	.thumb {
+		.image {
+			img + img {
+				display: none;
+			}
+		}
+	}
+}