First draft of working NBN theme for mediawiki

i18n/en.json

@@ -7,7 +7,7 @@
 	"userpage": "User Page",
 	"nextbestnetwork.css": "/* CSS placed here will affect users of the NextBestNetwork skin */",
 	"nextbestnetwork.js": "/* Any JavaScript here will be loaded for users using the NextBestNetwork skin */",
-	"nextbestnetwork-navbar-class": "navbar navbar-default navbar-fixed-top navbar-expand-lg fixed-top navbar-light bg-light",
+	"nextbestnetwork-navbar-class": "navbar navbar-fixed-top navbar-expand-lg navbar-light bg-primary fixed-top",
 	"nextbestnetwork-navbar-brand": "{{SITENAME}}",
 	"nextbestnetwork-navbar-left": "FAQ",
 	"nextbestnetwork-navbar-left-wrapper": "li",
@@ -32,7 +32,7 @@
 	"nextbestnetwork-sidebar-right-dropdownclass": "dropdown-menu-end",
 	"nextbestnetwork-footer": "FOOTER",
 	"nextbestnetwork-footer-custom": "LOGIN",
-	"nextbestnetwork-footer-class": "footer-sticky bg-light",
+	"nextbestnetwork-footer-class": "footer-sticky bg-primary",
 	"nextbestnetwork-footer-btnclass": "",
 	"nextbestnetwork-footer-wrapperclass": "dropup",
 	"nextbestnetwork-footer-standard-btnclass": "",

includes/NextBestNetworkTemplate.php

@@ -809,7 +809,7 @@ class NextBestNetworkTemplate extends BaseTemplate {
 		$navbar_class = $skin->getMsg( 'nextbestnetwork-navbar-class' );
 		if ( $skin->checkVisibility( 'navbar' ) ) { ?>
 			<header>
-				<nav id="mw-navigation" class="<?php echo $navbar_class; ?>">
+				<nav id="mw-navigation" data-bs-theme="dark" class="<?php echo $navbar_class; ?>">
 					<div class="<?php echo wfMessage( 'nextbestnetwork-container-class' )->plain(); ?>">
 <?php if ( $skin->checkVisibility( 'navbar-brand' ) ) {
 $skin->renderBrand();

resources/scripts/nextbestnetwork.js

@@ -2,5 +2,6 @@ import 'jquery';
 import 'bootstrap';
 import 'masonry-layout';
 
+console.log("NextBestNetwork skin loaded");
 import './nextbestnetwork/nextbestnetwork'
 import './nextbestnetwork/darkmode'

resources/scripts/nextbestnetwork/darkmode.js

@@ -1,82 +1,71 @@
 /*!
  * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
- * Copyright 2011-2025 The Bootstrap Authors
- * Licensed under the Creative Commons Attribution 3.0 Unported License.
  */
+$(document).ready(() => {
+    console.log("DOM fully loaded and parsed");
 
-(() => {
+    const getStoredTheme = () => localStorage.getItem('theme');
-    'use strict'
+    const setStoredTheme = theme => localStorage.setItem('theme', theme);
-
-    const getStoredTheme = () => localStorage.getItem('theme')
-    const setStoredTheme = theme => localStorage.setItem('theme', theme)
 
     const getPreferredTheme = () => {
-        const storedTheme = getStoredTheme()
+        const storedTheme = getStoredTheme();
-
         console.log("Found stored theme:", storedTheme);
         if (storedTheme) {
-            return storedTheme
+            return storedTheme;
-        }
-
-        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
         }
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    };
 
     const setTheme = theme => {
         if (theme === 'auto') {
-            document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
+            $('html').attr('data-bs-theme', window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
         } else {
-            document.documentElement.setAttribute('data-bs-theme', theme)
+            $('html').attr('data-bs-theme', theme);
         }
-    }
+    };
-
-    setTheme(getPreferredTheme())
 
     const showActiveTheme = (theme, focus = false) => {
-        const themeSwitcher = document.querySelector('#bd-theme')
+        const themeSwitcher = $('#bd-theme');
-
+        if (!themeSwitcher.length) {
-        if (!themeSwitcher) {
+            console.warn("Theme switcher (#bd-theme) not found in DOM.");
-            return
+            return;
         }
 
-        const themeSwitcherText = document.querySelector('#bd-theme-text')
+        const themeSwitcherText = $('#bd-theme-text');
-        const activeThemeIcon = document.querySelector('.theme-icon-active use')
+        const activeThemeIcon = $('.theme-icon-active use');
-        const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
+        const btnToActive = $(`[data-bs-theme-value="${theme}"]`);
-        const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
 
-        document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+        const svgOfActiveBtn = btnToActive.find('svg use').attr('href');
-            element.classList.remove('active')
+        $('[data-bs-theme-value]').removeClass('active').attr('aria-pressed', 'false');
-            element.setAttribute('aria-pressed', 'false')
+        btnToActive.addClass('active').attr('aria-pressed', 'true');
-        })
+        activeThemeIcon.attr('href', svgOfActiveBtn);
 
-        btnToActive.classList.add('active')
+        const themeSwitcherLabel = `${themeSwitcherText.text()} (${btnToActive.data('bs-theme-value')})`;
-        btnToActive.setAttribute('aria-pressed', 'true')
+        themeSwitcher.attr('aria-label', themeSwitcherLabel);
-        activeThemeIcon.setAttribute('href', svgOfActiveBtn)
-        const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
-        themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
 
         if (focus) {
-            themeSwitcher.focus()
+            themeSwitcher.focus();
         }
+    };
+
+    console.log("Setting initial theme...");
+    setTheme(getPreferredTheme());
+    showActiveTheme(getPreferredTheme());
+
+    $('[data-bs-theme-value]').on('click', function () {
+        const theme = $(this).data('bs-theme-value');
+        console.log("Theme changed to:", theme);
+        setStoredTheme(theme);
+        setTheme(theme);
+        showActiveTheme(theme, true);
+    });
+
+    window.matchMedia('(prefers-color-scheme: dark)').on('change', () => {
+        const storedTheme = getStoredTheme();
+        if (!storedTheme || storedTheme === 'auto') {
+            setTheme(getPreferredTheme());
         }
+    });
 
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    console.log("Theme toggler initialized!");
-        const storedTheme = getStoredTheme()
+});
-        if (storedTheme !== 'light' && storedTheme !== 'dark') {
-            setTheme(getPreferredTheme())
-        }
-    })
-
-    window.addEventListener('DOMContentLoaded', () => {
-        showActiveTheme(getPreferredTheme())
-
-        document.querySelectorAll('[data-bs-theme-value]')
-            .forEach(toggle => {
-                toggle.addEventListener('click', () => {
-                    const theme = toggle.getAttribute('data-bs-theme-value')
-                    setStoredTheme(theme)
-                    setTheme(theme)
-                    showActiveTheme(theme, true)
-                })
-            })
-    })
-})()

resources/scripts/nextbestnetwork/nextbestnetwork.js

@@ -1,5 +1,6 @@
-jQuery(document).ready(function ($) {
+console.log("parse nextbestnetwork.js");
 
+jQuery(document).ready(function ($) {
   /**
    * TOOLTIPS
    */

resources/styles/nextbestnetwork.scss

@@ -2,6 +2,6 @@
 
 @import "~bootstrap/scss/bootstrap";
 
-@import "~bootstrap-icons/font/bootstrap-icons";
+@import "~bootstrap-icons/font/bootstrap-icons.scss";
 
 @import "nextbestnetwork/index";

skin.json

@@ -45,6 +45,18 @@
 		"SelfLinkBegin" : "NextBestNetworkHooks::onSelfLinkBegin"
 	},
 	"ResourceModules": {
+        "skins.nextbestnetwork": {
+          "styles": {
+            "default/css/nextbestnetwork.css": {}
+          },
+          "scripts": {
+            "default/js/nextbestnetwork.js": {}
+          },
+          "messages": {},
+          "dependencies": [
+            "mediawiki.skinning.content"
+          ]
+        },
 		"skins.nextbestnetwork.messages": {
 			"messages": [
 				"nextbestnetwork-toc-top"
@@ -112,7 +124,7 @@
 			]
 		},
 		"skins.nextbestnetwork.custom.scripts": {
-			"position": "bottom",
+			"position": "top",
 			"scripts": [
 				"public/custom/js/custom.js"
 			],

webpack.mix.js

@@ -1,6 +1,17 @@
 const mix = require('laravel-mix');
 
 mix.webpackConfig({
+    module: {
+        rules: [
+            {
+                test: /\.(woff|woff2|eot|ttf|otf)$/, // Match all font file types
+                type: 'asset/resource', // Handle font files as assets
+                generator: {
+                    filename: 'fonts/[name][ext]', // Output to public/fonts/
+                },
+            },
+        ],
+    },
     externals: { 'jquery': 'jQuery' }
 });