Reorganize "Get MMapper" section and update navigation (#229)

* docs: Reorganize "Get MMapper" section and update navigation

- Renamed "Download MMapper" section to "Get MMapper" in `index.md`.
- Added "Web" (PWA) as the first link in the platform list.
- Updated instructional text to be platform-neutral.
- Removed redundant "Demo" link from navigation in `default.html`.
- Renamed "Download" navigation link to "Get" and updated anchor to `#get-mmapper`.
- Updated CSS/layout is already responsive and handles the 4th link gracefully.

* docs: Reorganize "Get MMapper" and enhance accessibility

- Renamed "Download MMapper" to "Get MMapper" and updated navigation links.
- Moved Web/PWA link to the primary position in the platform list.
- Added a "Skip to content" link for better keyboard navigation.
- Enhanced accessibility with ARIA labels and hidden decorative icons.
- Improved semantic structure with `<main id="main-content">`.

* docs: Reorganize "Get MMapper" and significantly enhance accessibility

- Renamed "Download" to "Get" across the site for better inclusion of the Web version.
- Moved the "Web" (PWA) link to the primary position in the platform list.
- Improved header accessibility by ensuring the site name "MMapper" is always reachable and correctly announced.
- Added a "Skip to content" link for keyboard and screen reader efficiency.
- Unified page heading structure by moving `page.title` into the global layout as an `<h2>`.
- Enhanced accessibility with ARIA labels for navigation and platform links.
- Marked decorative icons and logos as hidden from assistive technologies.
- Cleaned up redundant headings across all documentation pages.

* docs: Finalize "Get MMapper" reorganization and accessibility improvements

- Renamed "Download MMapper" to "Get MMapper" and updated navigation.
- Elevated "Web" (PWA) to the primary platform option.
- Restored semantic heading hierarchy (H1 for brand, H2 for page titles).
- Enhanced accessibility with a skip-link (now supporting :focus-visible).
- Added ARIA labels and roles for improved screen reader support.
- Cleaned up redundant headings across documentation pages.

* docs: Comprehensive "Get MMapper" reorganization and accessibility overhaul

- Renamed "Download" to "Get" across the site to encompass Web/PWA and native versions.
- Prioritized the Web (PWA) version as the first platform option on the homepage.
- Added detailed, platform-specific installation instructions for Windows, macOS, and Linux.
- Overhauled the document outline for SEO and accessibility:
    - Wrapped site branding in a semantic `<h1>`.
    - Automated page title rendering as `<h2>` within the global layout.
    - Cleaned up redundant headings across all markdown files.
- Significant accessibility enhancements:
    - Added a "Skip to content" link with `:focus-visible` support.
    - Applied `aria-label` to main navigation and platform links.
    - Marked decorative assets (icons, logo) with `aria-hidden="true"`.
- Refined macOS download page with architecture labels (Intel vs. Apple Silicon) and updated Sequoia-specific security instructions.
- Ensured functional consistency by verifying all internal anchors and highlighting scripts.

* docs: Final reorganization of "Get MMapper" and accessibility improvements

- Renamed "Download" to "Get" and prioritized Web/PWA as the first option.
- Added platform-specific introductory instructions for Windows, macOS, and Linux.
- Enhanced site accessibility: Skip to content, ARIA labels, and semantic H1/H2 hierarchy.
- Updated recommendation logic to prioritize PWA on ChromeOS and improved badge layout.
- Strictly preserved original notice-box content and full Linux asset options.
- Cleaned up redundant headers across all documentation pages.

* docs: Reorganize "Get MMapper" and significantly enhance accessibility/UX

- Renamed "Download" to "Get" across the site to include Web/PWA and native versions.
- Prioritized the Web (PWA) version as the primary platform option on the homepage.
- Added platform-specific introductory instructions for Windows, macOS, and Linux.
- Overhauled site accessibility:
    - Added a "Skip to content" link with :focus-visible support.
    - Established a semantic H1/H2 heading hierarchy for better SEO and navigation.
    - Applied ARIA labels to main navigation and platform links.
    - Marked decorative icons and logos as hidden from screen readers.
- Refined recommendation logic in download-highlight.js:
    - Recommends the Web version for ChromeOS users.
    - Ensures "Recommended" badges are always placed inside anchor tags for consistent interaction.
    - Improved badge styling for buttons and homepage icons.
- Strictly preserved original notice-box content and full Linux download options.
- Restored macOS architecture labels (Intel vs. Apple Silicon).
- Cleaned up redundant headings across documentation pages.

* docs: Comprehensive "Get MMapper" reorganization and accessibility overhaul

- Renamed "Download" to "Get" across the site to embrace Web/PWA and native versions.
- Prioritized the Web (PWA) version as the primary platform option on the homepage.
- Added detailed, platform-specific installation instructions for Windows, macOS, and Linux.
- Overhauled the document heading hierarchy for optimal SEO and accessibility:
    - Single <h1> per page (Site title on home, Page title on subpages).
    - Automated title rendering via layout to ensure consistency.
- Major accessibility enhancements:
    - Added a "Skip to content" link with :focus-visible support.
    - Used robust `data-platform` attributes for dynamic recommendation logic.
    - Unified Recommendation badge placement (always inside the link) for consistent semantics.
    - Applied ARIA labels and marked decorative elements as hidden.
- Refined recommendation logic in `download-highlight.js`:
    - Recommends only the Web version for ChromeOS users.
    - Suppresses binary recommendations on ChromeOS.
- Improved CSS maintainability by removing `!important` flags and using specific selectors.
- Strictly preserved original security notice content and full Linux download options.
- Restored macOS architecture labels (Intel vs. Apple Silicon).
- Cleaned up redundant headings across all markdown files.

---------

Co-authored-by: nschimme <5505185+nschimme@users.noreply.github.com>

Author: nschimme

docs/_layouts/default.html

@@ -18,25 +18,40 @@
     <script src="{{ '/assets/js/download-highlight.js' | relative_url }}"></script>
 </head>
 <body>
+    <a href="#main-content" class="skip-link">Skip to content</a>
     <div class="content-wrapper">
         <div style="display: flex; justify-content: space-between; align-items: center;">
             <header style="display: flex; flex-direction: column; align-items: center;">
                 <div style="display: flex; align-items: center;">
-			<img src="{{ '/assets/img/logo.svg' | relative_url }}" alt="MMapper" style="height: 50px; margin-right: 10px;">
-                    <h1><a href="{{ '/' | relative_url }}">{{ page.title | default: site.title }}</a></h1>
+                    <img src="{{ '/assets/img/logo.svg' | relative_url }}" alt="" aria-hidden="true" style="height: 50px; margin-right: 10px;">
+                    {% if page.url == "/" or page.url == "/index.html" %}
+                    <h1 style="font-size: 2em; font-family: 'Trebuchet MS', sans-serif; margin: 0; border: none; padding: 0;">
+                        <a href="{{ '/' | relative_url }}" style="color: #eee; font-weight: bold; text-decoration: none;">MMapper</a>
+                    </h1>
+                    {% else %}
+                    <div style="font-size: 2em; font-family: 'Trebuchet MS', sans-serif; margin: 0; border: none; padding: 0; font-weight: bold;">
+                        <a href="{{ '/' | relative_url }}" style="color: #eee; text-decoration: none;">MMapper</a>
+                    </div>
+                    {% endif %}
                 </div>
             </header>
-            <nav>
+            <nav aria-label="Main Navigation">
                 <ul style="list-style: none; padding: 0; margin: 0;">
-                    <li style="display: inline; margin-left: 10px;"><a href="{{ '/demo/' | relative_url }}">Demo</a></li>
-                    <li style="display: inline; margin-left: 10px;"><a href="{{ '/#download-mmapper' | relative_url }}">Download</a></li>
+                    <li style="display: inline; margin-left: 10px;"><a href="{{ '/#get-mmapper' | relative_url }}">Get</a></li>
                     <li style="display: inline; margin-left: 10px;"><a href="{{ '/changelog.html' | relative_url }}">Changelog</a></li>
                     <li style="display: inline; margin-left: 10px;"><a href="{{ '/about.html' | relative_url }}">About</a></li>
                 </ul>
             </nav>
         </div>
 
-        <main>
+        <main id="main-content">
+            {% if page.title %}
+                {% if page.url == "/" or page.url == "/index.html" %}
+                <h2>{{ page.title }}</h2>
+                {% else %}
+                <h1>{{ page.title }}</h1>
+                {% endif %}
+            {% endif %}
             {{ content }}
         </main>
 

docs/about.md

@@ -5,8 +5,6 @@ title: About MMapper
 
 <img src="{{ site.screenshot }}" alt="MMapper Screenshot" style="display: block; margin: 0 auto; width: 100%; max-width: auto; height: auto; margin-bottom: 1em;">
 
-## About MMapper
-
 MMapper is a client and graphical mapping tool that enhances the MUME (Multi-Users in Middle Earth) experience by providing a **dynamic, interactive map** of the game world. Tired of memorizing directions? MMapper acts as a bridge between the MUME server and your game client, analyzing real-time game data and visually displaying your character’s position on the map. Visualize your world, navigate easily with terrain highlighting, and enjoy enhanced gameplay with features like terrain detection, pseudo-3D views, and group map sharing. MMapper automatically maps rooms, terrain, and exits, updating the map in real time as you explore, so you always have an accurate view of your surroundings.
 
 ## Why Use MMapper?

docs/assets/css/style.css

@@ -1,6 +1,22 @@
 /* Minimal MMapper Website Styles */
 
 /* Basic Reset & Body */
+.skip-link {
+    position: absolute;
+    top: -40px;
+    left: 0;
+    background: #cc9933;
+    color: #1a1a1a;
+    padding: 8px;
+    z-index: 100;
+    transition: top 0.3s;
+}
+
+.skip-link:focus,
+.skip-link:focus-visible {
+    top: 0;
+}
+
 body {
     margin: 0;
     padding: 0;
@@ -131,7 +147,8 @@ hr {
 
 /* Download Buttons/Links (on platform pages) */
 .download-link {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
     background-color: #cc9933;
     color: #1a1a1a; /* Dark text on button */
     padding: 0.8em 1.5em;
@@ -158,6 +175,25 @@ hr {
     color: #5cb85c;
     font-weight: bold;
     margin-left: 0.5em;
+    vertical-align: middle;
+    display: inline-block;
+}
+
+/* Ensure recommendation is readable when inside a button */
+.download-link .recommendation-text {
+    color: #1a1a1a;
+    background: #5cb85c;
+    padding: 0.2em 0.5em;
+    border-radius: 3px;
+    font-size: 0.8em;
+    text-transform: uppercase;
+}
+
+.platform-link .platform-recommendation {
+    display: block;
+    margin-left: 0;
+    margin-top: 0.5em;
+    font-size: 0.9em;
 }
 
 

docs/assets/js/download-highlight.js

@@ -1,7 +1,7 @@
 document.addEventListener('DOMContentLoaded', function() {
     let detectedArch = null;
     let isChromeOS = false;
-    const downloadLinks = document.querySelectorAll('.download-link');
+    const downloadLinks = document.querySelectorAll('.download-link, .platform-link');
 
     // --- Architecture Detection (Best Effort) ---
     if (navigator.userAgentData && navigator.userAgentData.architecture) {
@@ -23,17 +23,34 @@ document.addEventListener('DOMContentLoaded', function() {
     }
 
     // --- Highlight Download Link ---
+    function addRecommendation(link) {
+        link.classList.add('recommended-download');
+        const recommendation = document.createElement('span');
+        recommendation.textContent = ' Recommended';
+        recommendation.classList.add('recommendation-text');
+
+        // Always place recommendation inside the link for consistent semantics and focus behavior
+        if (link.classList.contains('platform-link')) {
+            recommendation.classList.add('platform-recommendation');
+        }
+        link.appendChild(recommendation);
+    }
+
     downloadLinks.forEach(link => {
         const href = link.href.toLowerCase();
+        const platform = link.getAttribute('data-platform');
 
         // Do not recommend Windows .exe installers
         if (href.includes('.exe')) {
             return;
         }
 
-        // Only recommend .deb for ChromeOS
-        if (isChromeOS && (href.includes('appimage') || href.includes('flatpak'))) {
-            return;
+        // For ChromeOS, only recommend the Web version
+        if (isChromeOS) {
+            if (platform === 'web') {
+                addRecommendation(link);
+            }
+            return; // Don't recommend anything else on ChromeOS
         }
 
         let linkArch = null;
@@ -44,11 +61,7 @@ document.addEventListener('DOMContentLoaded', function() {
         }
 
         if (detectedArch && linkArch === detectedArch) {
-            link.classList.add('recommended-download');
-            const recommendation = document.createElement('span');
-            recommendation.textContent = ' Recommended';
-            recommendation.classList.add('recommendation-text');
-            link.parentNode.insertBefore(recommendation, link.nextSibling);
+            addRecommendation(link);
         }
     });
 });

docs/index.md

@@ -8,21 +8,28 @@ title: Play MUME with MMapper
     MMapper is a game client and graphical mapping tool that enhances the MUME (Multi-Users in Middle Earth) experience. It acts as a bridge between the MUME server and your mud client, analyzing real-time game data and visually displaying your character’s position on the map.
 </div>
 
-## Download MMapper
+MMapper is now available directly in your browser! The Web version works as a Progressive Web App (PWA), providing a near-native experience without needing to download any files.
 
-Choose your operating system to download the latest version {{ site.github.latest_release.tag_name }}:
+## Get MMapper
+{: #get-mmapper}
+
+Choose your preferred platform to start using MMapper {{ site.github.latest_release.tag_name }}:
 
 <div class="platform-links">
-    <a href="{{ '/windows.html' | relative_url }}" class="platform-link">
-        <i class="fab fa-windows"></i>
+    <a href="{{ '/demo/' | relative_url }}" class="platform-link" aria-label="Use MMapper in your Web Browser" data-platform="web">
+        <i class="fas fa-globe" aria-hidden="true"></i>
+        <span>Web</span>
+    </a>
+    <a href="{{ '/windows.html' | relative_url }}" class="platform-link" aria-label="Get MMapper for Windows">
+        <i class="fab fa-windows" aria-hidden="true"></i>
         <span>Windows</span>
     </a>
-    <a href="{{ '/macos.html' | relative_url }}" class="platform-link">
-        <i class="fab fa-apple"></i>
+    <a href="{{ '/macos.html' | relative_url }}" class="platform-link" aria-label="Get MMapper for macOS">
+        <i class="fab fa-apple" aria-hidden="true"></i>
         <span>macOS</span>
     </a>
-    <a href="{{ '/linux.html' | relative_url }}" class="platform-link">
-        <i class="fab fa-linux"></i>
+    <a href="{{ '/linux.html' | relative_url }}" class="platform-link" aria-label="Get MMapper for Linux">
+        <i class="fab fa-linux" aria-hidden="true"></i>
         <span>Linux</span>
     </a>
 </div>

docs/linux.md

@@ -1,9 +1,9 @@
 ---
 layout: default
-title: Download MMapper for Linux
+title: Get MMapper for Linux
 ---
 
-## Download MMapper for Linux
+Choose your preferred distribution method below. We recommend using Flathub for a sandboxed environment and easy updates across most Linux distributions.
 
 <a href='https://flathub.org/apps/org.mume.MMapper'>
     <img width='200' alt='Get it on Flathub' src='https://flathub.org/api/badge?locale=en' style="vertical-align: middle;"/>

docs/macos.md

@@ -1,9 +1,10 @@
 ---
 layout: default
-title: Download MMapper for macOS
+title: Get MMapper for macOS
 ---
 
-## Download MMapper for macOS
+To install MMapper on macOS, download the Disk Image (DMG) file provided below. MMapper is compatible with both Intel and Apple Silicon (M1/M2/M3) processors.
+
 {% for asset in site.github.latest_release.assets %}
 {% if asset.name contains 'sha256' %}
 {% elsif asset.name contains 'dmg' %}

docs/windows.md

@@ -1,13 +1,14 @@
 ---
 layout: default
-title: Download MMapper for Windows
+title: Get MMapper for Windows
 ---
 
-## Download MMapper for Windows
+MMapper can be installed from the Microsoft Store for a seamless experience, including automatic updates. Alternatively, you can download the standalone installer below.
 
-<a href="https://apps.microsoft.com/detail/9p6f2b68rf7g?referrer=appbadge&mode=direct">
+<a href="https://apps.microsoft.com/detail/9p6f2b68rf7g?referrer=appbadge&mode=direct" style="display: inline-flex; align-items: center; text-decoration: none;">
      <img src="https://get.microsoft.com/images/en-us%20dark.svg" width="200" style="vertical-align: middle;"/>
-</a><span class="recommendation-text"> Recommended</span>
+     <span class="recommendation-text"> Recommended</span>
+</a>
 
 {% for asset in site.github.latest_release.assets %}
 {% if asset.name contains 'sha256' %}