|
|
| Line 2: |
Line 2: |
| * Name: ElementHubNavigation | | * Name: ElementHubNavigation |
| * Author: Mark W. Datysgeld | | * Author: Mark W. Datysgeld |
| * Description: Hub navigation module for Main Page with zero-CLS responsive design | | * Description: Hub navigation module for Main Page - MINIMAL TEXT-ONLY VERSION |
| * Notes: Single SSR block with data-URI icons; mobile sticky bottom bar; desktop inline grid | | * Notes: Phase 1 - Text links with layout only, no icons yet |
| * Uses MediaWiki table syntax + string concatenation (like ElementNavigation pattern) | | * Pattern: MediaWiki table syntax + string concatenation (like ElementNavigation) |
| ]] | | ]] |
|
| |
|
| local p = {} | | 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 | | -- Hub configuration |
| local hubs = { | | local hubs = { |
| { id = 'nations', label = 'Nations', url = 'Hub:Nations', icon = icons.nations }, | | { label = 'Nations', url = 'Hub:Nations' }, |
| { id = 'people', label = 'People', url = 'Hub:People', icon = icons.people }, | | { label = 'People', url = 'Hub:People' }, |
| { id = 'organizations', label = 'Organizations', url = 'Hub:Organizations', icon = icons.organizations }, | | { label = 'Organizations', url = 'Hub:Organizations' }, |
| { id = 'events', label = 'Events', url = 'Hub:Events', icon = icons.events }, | | { label = 'Events', url = 'Hub:Events' }, |
| { id = 'topics', label = 'Topics', url = 'Hub:Topics', icon = icons.topics } | | { label = 'Topics', url = 'Hub:Topics' } |
| } | | } |
|
| |
|
| -- Generate a single hub link item as HTML string | | -- Generate a single hub link item as plain text link |
| local function generateHubLink(hub) | | local function generateHubLink(hub) |
| return string.format( | | return string.format( |
| '<li class="cdx-hub__item"><a href="/wiki/%s" class="cdx-hub__link" data-hub="%s"><span class="cdx-hub__icon"><img src="%s" alt="" width="24" height="24" aria-hidden="true"></span><span class="cdx-hub__label">%s</span></a></li>', | | '<li class="cdx-hub__item"><a href="/wiki/%s" class="cdx-hub__link">%s</a></li>', |
| hub.url, | | hub.url, |
| hub.id,
| |
| hub.icon,
| |
| hub.label | | hub.label |
| ) | | ) |
| Line 55: |
Line 44: |
| ' ' .. table.concat(hubLinks, '\n '), | | ' ' .. table.concat(hubLinks, '\n '), |
| ' </ul>', | | ' </ul>', |
| ' <div class="cdx-hub__panel" aria-hidden="true"></div>',
| |
| '</div>', | | '</div>', |
| '<div id="hub-spacer" aria-hidden="true"></div>', | | '<div id="hub-spacer" aria-hidden="true"></div>', |