Module:ElementHubNavigation

Documentation for this module may be created at Module:ElementHubNavigation/doc

--[[
* Name: ElementHubNavigation
* Version: 2.0
* Author: Mark W. Datysgeld
* Description: Hub navigation module for Main Page with responsive design
* 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 CSS background icon identifiers
-- Icon backgrounds defined in Hubs.css :root custom properties (--icon-*)
local hubs = {
    { label = 'Nations', url = 'Hub:Nations', icon = 'globe' },
    { label = 'People', url = 'Hub:People', icon = 'user' },
    { label = 'Organizations', url = 'Hub:Organizations', icon = 'building' },
    { label = 'Events', url = 'Hub:Events', icon = 'calendar' },
    { label = 'Topics', url = 'Hub:Topics', icon = 'layers' }
}

-- Generate a single hub link item with CSS background icon
local function generateHubLink(hub)
    -- 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(
        '<li class="cdx-hub__item"><span class="cdx-hub__link">%s[[%s|%s]]</span></li>',
        iconHtml,
        hub.url,
        hub.label
    )
end

-- Main render function
function p.render(frame)
    -- Generate all hub links
    local hubLinks = {}
    for i, hub in ipairs(hubs) do
        hubLinks[i] = generateHubLink(hub)
    end
    
    -- Build complete output using MediaWiki table syntax + HTML
    local output = {
        '{| class="hub-nav-table"',
        '|- class="hub-nav-row"',
        '| colspan="2" |',
        '<div id="hub" class="cdx-hub" role="navigation" aria-label="Hub Navigation">',
        '  <ul class="cdx-hub__list">',
        '    ' .. table.concat(hubLinks, '\n    '),
        '  </ul>',
        '</div>',
        '<div id="hub-spacer" aria-hidden="true"></div>',
        '|}'
    }
    
    return table.concat(output, '\n')
end

return p