Module:ElementHubNavigation: Difference between revisions

Line 1:

--[[

* Name: ElementHubNavigation

* Version: 2.0

* Author: Mark W. Datysgeld

* Description: Hub navigation module for Main Page with responsive design

* Notes: ~~Uses MediaWiki File references for~~ icons (~~24px mobile, 32px desktop~~)

* Notes: v2.0 uses CSS background icons (data URIs) instead of File references

* Pattern: MediaWiki table syntax + string concatenation (like ElementNavigation)

* Icon Data: CSS backgrounds defined in Hubs.css - see :root custom properties

]]

local p = {}

-- Hub configuration with icon ~~file mappings~~

-- Hub configuration with CSS background icon identifiers

-- Icon backgrounds defined in Hubs.css :root custom properties (--icon-*)

local hubs = {

{ label = 'Nations', url = 'Hub:Nations', icon = '~~Icon-Globe.svg~~' },

{ label = 'Nations', url = 'Hub:Nations', icon = 'globe' },

{ label = 'People', url = 'Hub:People', icon = '~~Icon-User.svg~~' },

{ label = 'People', url = 'Hub:People', icon = 'user' },

{ label = 'Organizations', url = 'Hub:Organizations', icon = '~~Icon-Building.svg~~' },

{ label = 'Organizations', url = 'Hub:Organizations', icon = 'building' },

{ label = 'Events', url = 'Hub:Events', icon = '~~Icon-Calendar.svg~~' },

{ label = 'Events', url = 'Hub:Events', icon = 'calendar' },

{ label = 'Topics', url = 'Hub:Topics', icon = '~~Icon-Layers.svg~~' }

{ label = 'Topics', url = 'Hub:Topics', icon = 'layers' }

}

-- Generate a single hub link item ~~using MediaWiki File reference~~

-- Generate a single hub link item with CSS background icon

local function generateHubLink(hub)

local iconHtml = string.format('~~[[File:%s|24px|link=|~~class=hub-icon]]', hub.icon)

-- Icon as CSS background via data-icon attribute

-- CSS: .hub-icon[data-icon="globe"] { background-image: var(--icon-globe); }

local iconHtml = string.format('<span class="hub-icon" data-icon="%s" aria-hidden="true"></span>', hub.icon)

return string.format(

@@ Line 1: / Line 1: @@
 --[[
 * Name: ElementHubNavigation
+* Version: 2.0
 * Author: Mark W. Datysgeld
 * Description: Hub navigation module for Main Page with responsive design
-* Notes: Uses MediaWiki File references for icons (24px mobile, 32px desktop)
+* Notes: v2.0 uses CSS background icons (data URIs) instead of File references
 * Pattern: MediaWiki table syntax + string concatenation (like ElementNavigation)
+* Icon Data: CSS backgrounds defined in Hubs.css - see :root custom properties
 ]]
 local p = {}
--- Hub configuration with icon file mappings
+-- Hub configuration with CSS background icon identifiers
+-- Icon backgrounds defined in Hubs.css :root custom properties (--icon-*)
 local hubs = {
-     { label = 'Nations', url = 'Hub:Nations', icon = 'Icon-Globe.svg' },
+     { label = 'Nations', url = 'Hub:Nations', icon = 'globe' },
-     { label = 'People', url = 'Hub:People', icon = 'Icon-User.svg' },
+     { label = 'People', url = 'Hub:People', icon = 'user' },
-     { label = 'Organizations', url = 'Hub:Organizations', icon = 'Icon-Building.svg' },
+     { label = 'Organizations', url = 'Hub:Organizations', icon = 'building' },
-     { label = 'Events', url = 'Hub:Events', icon = 'Icon-Calendar.svg' },
+     { label = 'Events', url = 'Hub:Events', icon = 'calendar' },
-     { label = 'Topics', url = 'Hub:Topics', icon = 'Icon-Layers.svg' }
+     { label = 'Topics', url = 'Hub:Topics', icon = 'layers' }
 }
--- Generate a single hub link item using MediaWiki File reference
+-- Generate a single hub link item with CSS background icon
 local function generateHubLink(hub)
-     local iconHtml = string.format('[[File:%s|24px|link=|class=hub-icon]]', hub.icon)
+    -- Icon as CSS background via data-icon attribute
+    -- CSS: .hub-icon[data-icon="globe"] { background-image: var(--icon-globe); }
+     local iconHtml = string.format('<span class="hub-icon" data-icon="%s" aria-hidden="true"></span>', hub.icon)
      return string.format(