✨ feat(sitemap): add XML styling

[welpo]

Summary

Enhances the XML sitemap view for humans, showing a table with two columns: the URL and its last updated date. Loads a small JavaScript file to allow sorting of the columns.

Related issue

Closes #217

Changes

Loads main.css. As the sitemap template has access to very little information, it can't do internationalisation or read any config.toml variable like the site name.

Furthermore, it cannot read the skins variable, so the colour of the headers will be teal (default skin).

Accessibility

• Semantic HTML: Structured HTML table with clear <thead> and <tbody> for screen reader navigation.
• ARIA Attributes: Utilised aria-live, aria-atomic, aria-hidden, and aria-sort for dynamic content accessibility.
• Keyboard Navigation: Enabled for sorting headers via Enter and Space keys, facilitating keyboard-only users.
• Screen Reader Compatibility: Off-screen text (.visually-hidden) describes sorting actions for screen reader users.
• Dynamic Content Updates: Live region with aria-live announces changes in sorting to screen reader users.

Screenshots

Type of change

• Bug fix (fixes an issue without altering functionality)
• New feature (adds non-breaking functionality)
• Breaking change (alters existing functionality)
• UI/UX improvement (enhances user interface without altering functionality)
• Refactor (improves code quality without altering functionality)
• Documentation update
• Other (please describe below)

---

Checklist

• I have verified the accessibility of my changes
• I have tested all possible scenarios for this change
• I have made corresponding changes to the documentation:
  • Updated README.md

---

Note: the sorting and accessibility features are achieved through JS (impossible otherwise). The sitemap works fine with JS disabled and all the sorting-related code is not shown (e.g. the arrows indicating current sorting).