Module:ElementHubNavigation

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

--[[
* Name: ElementHubNavigation
* Author: Mark W. Datysgeld
* Description: Hub navigation module for Main Page - MINIMAL TEXT-ONLY VERSION
* Notes: Phase 1 - Text links with layout only, no icons yet
* Pattern: MediaWiki table syntax + string concatenation (like ElementNavigation)
]]

local p = {}

-- Hub configuration with icon test methods
local hubs = {
    { label = 'Nations', url = 'Hub:Nations', method = 'inline_svg' },
    { label = 'People', url = 'Hub:People', method = 'css_bg' },
    { label = 'Organizations', url = 'Hub:Organizations', method = 'mw_file' },
    { label = 'Events', url = 'Hub:Events', method = 'direct_url' },
    { label = 'Topics', url = 'Hub:Topics', method = 'text_only' }
}

-- Inline SVG code for Icon-User.svg
local inlineSVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="hub-icon"><path d="M20 21a8 8 0 0 0-16 0"/><circle cx="12" cy="7" r="4"/></svg>'

-- Generate a single hub link item with specified icon method
local function generateHubLink(hub)
    local iconHtml = ''
    local wrapperClass = 'cdx-hub__link'
    
    if hub.method == 'inline_svg' then
        -- Method 1: Inline SVG (baked in HTML)
        iconHtml = inlineSVG
        
    elseif hub.method == 'css_bg' then
        -- Method 2: CSS background-image (add class for CSS to target)
        wrapperClass = 'cdx-hub__link hub-icon-css'
        
    elseif hub.method == 'mw_file' then
        -- Method 3: MediaWiki File reference
        iconHtml = '[[File:Icon-User.svg|24px|link=|class=hub-icon]]'
        
    elseif hub.method == 'direct_url' then
        -- Method 4: Direct image URL
        iconHtml = '<img src="https://icannwiki.org/images/9/9c/Icon-User.svg" width="24" height="24" class="hub-icon" alt="">'
        
    -- else: text_only - no icon
    end
    
    return string.format(
        '<li class="cdx-hub__item"><span class="%s">%s[[%s|%s]]</span></li>',
        wrapperClass,
        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