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 with zero-CLS responsive design
* Notes: Single SSR block with data-URI icons; mobile sticky bottom bar; desktop inline grid
]]

local p = {}

-- Icon data URIs (URL-encoded SVGs with currentColor for CSS theming)
local icons = {
    nations = 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 aria-hidden=%22true%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M3 12h18%22/%3E%3Cpath d=%22M12 3c3.5 3.5 3.5 14.5 0 18M12 3c-3.5 3.5-3.5 14.5 0 18%22/%3E%3C/svg%3E',
    people = 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 aria-hidden=%22true%22%3E%3Cpath d=%22M20 21a8 8 0 0 0-16 0%22/%3E%3Ccircle cx=%2212%22 cy=%227%22 r=%224%22/%3E%3C/svg%3E',
    organizations = 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 aria-hidden=%22true%22%3E%3Crect x=%224%22 y=%223%22 width=%2216%22 height=%2218%22 rx=%221%22/%3E%3Cpath d=%22M9 7h6M9 11h6M9 15h6M12 21v-4%22/%3E%3C/svg%3E',
    events = 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 aria-hidden=%22true%22%3E%3Crect x=%223%22 y=%225%22 width=%2218%22 height=%2216%22 rx=%222%22/%3E%3Cpath d=%22M16 3v4M8 3v4M3 9h18%22/%3E%3C/svg%3E',
    topics = 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 aria-hidden=%22true%22%3E%3Cpath d=%22M12 3 3 8l9 5 9-5-9-5z%22/%3E%3Cpath d=%22m3 13 9 5 9-5%22/%3E%3C/svg%3E'
}

-- Hub configuration
local hubs = {
    { id = 'nations', label = 'Nations', url = 'Hub:Nations', icon = icons.nations },
    { id = 'people', label = 'People', url = 'Hub:People', icon = icons.people },
    { id = 'organizations', label = 'Organizations', url = 'Hub:Organizations', icon = icons.organizations },
    { id = 'events', label = 'Events', url = 'Hub:Events', icon = icons.events },
    { id = 'topics', label = 'Topics', url = 'Hub:Topics', icon = icons.topics }
}

-- Generate a single hub link item
local function generateHubLink(hub)
    local parts = {
        '<li class="cdx-hub__item">',
        string.format('<a href="/wiki/%s" class="cdx-hub__link" data-hub="%s">', hub.url, hub.id),
        '<span class="cdx-hub__icon">',
        string.format('<img src="%s" alt="" width="24" height="24" aria-hidden="true">', hub.icon),
        '</span>',
        string.format('<span class="cdx-hub__label">%s</span>', hub.label),
        '</a>',
        '</li>'
    }
    return table.concat(parts)
end

-- Main render function
function p.render(frame)
    -- Build hub links
    local hubLinks = {}
    for i, hub in ipairs(hubs) do
        hubLinks[i] = generateHubLink(hub)
    end
    
    -- Construct the complete hub navigation markup
    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 class="cdx-hub__panel" aria-hidden="true"></div>',
        '</div>',
        '<div id="hub-spacer" aria-hidden="true"></div>',
        '|}'
    }
    
    return table.concat(output, '\n')
end

return p