feat(MonthNav): add years nav + convert to luau

Author: wlft

…dules/obbywiki.com/MonthNav/MonthNav.lua …ules/obbywiki.com/MonthNav/MonthNav.luaumodules/obbywiki.com/MonthNav/MonthNav.lua renamed to modules/obbywiki.com/MonthNav/MonthNav.luau modules/obbywiki.com/MonthNav/MonthNav.lua renamed to modules/obbywiki.com/MonthNav/MonthNav.luau

@@ -55,7 +55,21 @@ function p.draw(frame)
             :wikitext('[[:Category:' .. month .. '_' .. target_year .. ' ]]')
     end
 
-    return frame:extensionTag('templatestyles', '', { src = 'Template:MonthNav/styles.css' }) .. frame:preprocess(meta) .. precontent .. tostring(container)
+    local years_container = html.create('div')
+        :addClass('ow-month-nav-years')
+
+    for _, v in pairs({'2026','2025','2024','2023','2022','2021','2020'}) do
+        local card = years_container:tag('div')
+
+        card:addClass('ow-year-card')
+            :wikitext(v)
+
+        card:tag('span')
+            :addClass('ow-month-card__link')
+            :wikitext('[[:Category:' .. current_month_name .. '_' .. v .. ' ]]')
+    end
+
+    return frame:extensionTag('templatestyles', '', { src = 'Template:MonthNav/styles.css' }) .. frame:preprocess(meta) .. precontent .. tostring(container) .. '\n' .. tostring(years_container)
 end
 
 return p

modules/obbywiki.com/MonthNav/styles.css

@@ -50,6 +50,29 @@
     color: var(--color-base, #54595d);
 }
 
+.ow-month-nav-years {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    margin: 1.5rem 0;
+    justify-content: center;
+}
+
+.ow-year-card {
+    position: relative;
+    flex: 1 1 calc(16% - 12px);
+    min-width: 16px;
+    padding: 5px 4px;
+    background-color: var(--background-color-interactive-subtle, #f8f9fa);
+    border: 1px solid var(--border-color-base, #a2a9b1);
+    border-radius: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    transition: all 0.2s ease-in-out;
+    text-align: center;
+}
+
 .ow-month-card__link a {
     position: absolute;
     top: 0;