From 8b59db8825fce7f233bfcd145053a877d2f3120c Mon Sep 17 00:00:00 2001
From: "D. Rimron-Soutter" <darran+github@xalior.com>
Date: Mon, 29 Dec 2025 18:05:44 +0000
Subject: [PATCH] First draft of working NBN theme for mediawiki

---
 i18n/en.json                                  |   4 +-
 includes/NextBestNetworkTemplate.php          |   2 +-
 resources/scripts/nextbestnetwork.js          |   1 +
 resources/scripts/nextbestnetwork/darkmode.js | 103 ++++++++----------
 .../nextbestnetwork/nextbestnetwork.js        |   3 +-
 resources/styles/nextbestnetwork.scss         |   2 +-
 skin.json                                     |  14 ++-
 webpack.mix.js                                |  13 ++-
 8 files changed, 78 insertions(+), 64 deletions(-)

diff --git a/i18n/en.json b/i18n/en.json
index bcde295..06c05f9 100644
--- a/i18n/en.json
+++ b/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": "",
diff --git a/includes/NextBestNetworkTemplate.php b/includes/NextBestNetworkTemplate.php
index 6f7e2f3..5a43774 100644
--- a/includes/NextBestNetworkTemplate.php
+++ b/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();
diff --git a/resources/scripts/nextbestnetwork.js b/resources/scripts/nextbestnetwork.js
index aa70484..d12da71 100644
--- a/resources/scripts/nextbestnetwork.js
+++ b/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'
diff --git a/resources/scripts/nextbestnetwork/darkmode.js b/resources/scripts/nextbestnetwork/darkmode.js
index c18f0b7..de61da3 100644
--- a/resources/scripts/nextbestnetwork/darkmode.js
+++ b/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");
 
-(() => {
-    'use strict'
-
-    const getStoredTheme = () => localStorage.getItem('theme')
-    const setStoredTheme = theme => localStorage.setItem('theme', theme)
+    const getStoredTheme = () => localStorage.getItem('theme');
+    const setStoredTheme = theme => localStorage.setItem('theme', theme);
 
     const getPreferredTheme = () => {
-        const storedTheme = getStoredTheme()
-
-        console.log("Found stored theme: ", storedTheme);
+        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')
-
-        if (!themeSwitcher) {
-            return
+        const themeSwitcher = $('#bd-theme');
+        if (!themeSwitcher.length) {
+            console.warn("Theme switcher (#bd-theme) not found in DOM.");
+            return;
         }
 
-        const themeSwitcherText = document.querySelector('#bd-theme-text')
-        const activeThemeIcon = document.querySelector('.theme-icon-active use')
-        const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
-        const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
+        const themeSwitcherText = $('#bd-theme-text');
+        const activeThemeIcon = $('.theme-icon-active use');
+        const btnToActive = $(`[data-bs-theme-value="${theme}"]`);
 
-        document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
-            element.classList.remove('active')
-            element.setAttribute('aria-pressed', 'false')
-        })
+        const svgOfActiveBtn = btnToActive.find('svg use').attr('href');
+        $('[data-bs-theme-value]').removeClass('active').attr('aria-pressed', 'false');
+        btnToActive.addClass('active').attr('aria-pressed', 'true');
+        activeThemeIcon.attr('href', svgOfActiveBtn);
 
-        btnToActive.classList.add('active')
-        btnToActive.setAttribute('aria-pressed', 'true')
-        activeThemeIcon.setAttribute('href', svgOfActiveBtn)
-        const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
-        themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
+        const themeSwitcherLabel = `${themeSwitcherText.text()} (${btnToActive.data('bs-theme-value')})`;
+        themeSwitcher.attr('aria-label', themeSwitcherLabel);
 
         if (focus) {
-            themeSwitcher.focus()
+            themeSwitcher.focus();
         }
-    }
+    };
 
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-        const storedTheme = getStoredTheme()
-        if (storedTheme !== 'light' && storedTheme !== 'dark') {
-            setTheme(getPreferredTheme())
+    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.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)
-                })
-            })
-    })
-})()
\ No newline at end of file
+    console.log("Theme toggler initialized!");
+});
\ No newline at end of file
diff --git a/resources/scripts/nextbestnetwork/nextbestnetwork.js b/resources/scripts/nextbestnetwork/nextbestnetwork.js
index 1b73230..5c17709 100644
--- a/resources/scripts/nextbestnetwork/nextbestnetwork.js
+++ b/resources/scripts/nextbestnetwork/nextbestnetwork.js
@@ -1,5 +1,6 @@
-jQuery(document).ready(function ($) {
+console.log("parse nextbestnetwork.js");
 
+jQuery(document).ready(function ($) {
   /**
    * TOOLTIPS
    */
diff --git a/resources/styles/nextbestnetwork.scss b/resources/styles/nextbestnetwork.scss
index af128ce..a37974d 100644
--- a/resources/styles/nextbestnetwork.scss
+++ b/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";
diff --git a/skin.json b/skin.json
index 098fae3..f17fb62 100644
--- a/skin.json
+++ b/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"
 			],
diff --git a/webpack.mix.js b/webpack.mix.js
index 7cdd0d2..3e3aac0 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -1,7 +1,18 @@
 const mix = require('laravel-mix');
 
 mix.webpackConfig({
-  externals: { 'jquery': 'jQuery' }
+    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' }
 });
 
 /*