Skip to content

fix images and banners - #61

Merged
nschimme merged 10 commits into
MUME:masterfrom
nschimme:fix-about-images-and-banner-ux-6634694725130240734
Sep 20, 2026
Merged

nschimme merged 10 commits into
MUME:masterfrom
nschimme:fix-about-images-and-banner-ux-6634694725130240734

Conversation

@nschimme

@nschimme nschimme commented Sep 19, 2026 •

Copy link
Copy Markdown
Contributor

Summary by Sourcery

Fix documentation image paths and standardize banner presentation across the site.

Bug Fixes:

  • Fix image and banner asset paths so images load correctly across the documentation site and deployed base paths.

Enhancements:

  • Standardize page banner markup and styling across documentation pages.
  • Add responsive high-resolution image variants to homepage and project content.
  • Update tutorial navigation to link directly to the orientation step.
  • Correct the externally shared banner embed URL and normalize historical map links.

Documentation:

  • Refresh documentation page banners and image references throughout the site.

Localize remote mume.org images (including historical maps and High-DPI variants) so page rendering does not depend on external servers. Standardize top-page banners across landing pages with unified responsive CSS (.page-banner and .banner-img) and High-DPI support. Update homepage interactive tutorial link for subpath base compatibility.
…anner UX

Localize remote mume.org images (including historical maps and High-DPI variants) so page rendering does not depend on external servers. Consolidate image storage to docs/public/assets/images/ with root-relative paths (/assets/images/). Standardize top-page banners across landing pages with unified responsive CSS (.page-banner and .banner-img) and High-DPI support. Update homepage interactive tutorial link for subpath base compatibility.
@sourcery-ai

sourcery-ai Bot commented Sep 19, 2026 •

Copy link
Copy Markdown
Contributor

Reviewer's Guide

This PR fixes documentation asset resolution for deployed paths, standardizes page banner markup and styling, adds responsive high-resolution imagery, and updates homepage, resource, and embeddable-banner links.

File-Level Changes

Change Details Files
Correct asset URL handling for deployed documentation paths.
  • Use VitePress base-aware resolution for the 404-page image.
  • Update CSS and Markdown image references from relative or legacy URLs to the hosted assets location.
  • Align the embeddable banner snippet with the documentation site's hosted domain and asset path.
  • Update historical map links to local documentation assets.
docs/.vitepress/theme/Layout.vue
docs/.vitepress/theme/mume.css
docs/about/index.md
docs/community/interviews/index.md
docs/links.md
docs/opensource.md
docs/play/tutorial/15-journey.md
docs/index.md
Standardize page banner structure and responsive imagery across documentation pages.
  • Replace inline banner layout styles with the shared page-banner and banner-img classes.
  • Add 2x srcset variants to homepage, banner, and card imagery where high-resolution assets exist.
  • Preserve a narrower width override for the Resources illustration.
  • Add shared page-banner spacing styles alongside the existing center-image styling.
docs/.vitepress/theme/mume.css
docs/about/index.md
docs/index.md
docs/links.md
docs/news/index.md
docs/play/browser-legacy.md
docs/resources/boards/index.md
docs/resources/index.md
docs/resources/questionnaires/index.md
docs/opensource.md
Refine homepage and documentation navigation/content links.
  • Point the homepage Interactive Tutorial CTA directly to the first orientation lesson.
  • Reorder the News page heading after its standardized banner.
docs/index.md
docs/news/index.md

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey - I've found 2 issues

Prompt for AI Agents
Please address the comments from this code review:

## Individual Comments

### Comment 1
<location path="docs/.vitepress/theme/mume.css" line_range="276" />
<code_context>
     text-align: center;
     background: #0a0d15;
-    background-image: url(../../assets/images/play-now-banner.jpg);
+    background-image: url(/assets/images/play-now-banner.jpg);
     background-position: center;
     background-size: cover;
</code_context>
<issue_to_address>
**issue (bug_risk):** The new root-relative asset URLs ignore the VitePress `base` configured from `VITE_BASE`, so every image and CSS background resolves from the domain root instead of the deployed documentation subpath. A deployment such as `/mume/` therefore requests `/assets/images/...` rather than `/mume/assets/images/...` and renders broken images.

**Triggers:** When the documentation is built or hosted with a non-root `VITE_BASE`.

**Suggested fix:** Use VitePress-aware asset URLs, such as `withBase()` for component code or base-prefixed paths generated at build time, instead of hard-coded root-relative URLs.
</issue_to_address>

### Comment 2
<location path="docs/links.md" line_range="24" />
<code_context>
       <h3>Use this banner on your site</h3>
       <p>Help spread the word about MUME. Copy the code below to link to us:</p>
-      <pre><code>&lt;a href="https://mume.org"&gt;&lt;img src="https://mume.org/Images/mume_banner.gif" alt="MUME"&gt;&lt;/a&gt;</code></pre>
+      <pre><code>&lt;a href="https://docs.mume.org"&gt;&lt;img src="https://docs.mume.org/assets/images/mume_banner.gif" alt="MUME"&gt;&lt;/a&gt;</code></pre>
     </div>
   </div>
</code_context>
<issue_to_address>
**issue (bug_risk):** The copyable banner snippet now links visitors to `https://docs.mume.org` instead of the MUME website at `https://mume.org`, so third-party sites using the supplied snippet send users to the documentation site rather than the advertised main game/community site.

**Triggers:** When an external site copies the new snippet from the Community Links page.

**Suggested fix:** Keep the anchor target as `https://mume.org` unless redirecting banner traffic to the documentation site is explicitly intended.

```suggestion
      <pre><code>&lt;a href="https://mume.org"&gt;&lt;img src="https://docs.mume.org/assets/images/mume_banner.gif" alt="MUME"&gt;&lt;/a&gt;</code></pre>
```
</issue_to_address>

Sourcery assessment

Approval pending. 2 findings to address first.

Blocking findings: docs/.vitepress/theme/mume.css:276, docs/links.md:24


Sourcery is free for open source - if you like our reviews please consider sharing them ✨

text-align: center;
background: #0a0d15;
background-image: url(../../assets/images/play-now-banner.jpg);
background-image: url(/assets/images/play-now-banner.jpg);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue (bug_risk): The new root-relative asset URLs ignore the VitePress base configured from VITE_BASE, so every image and CSS background resolves from the domain root instead of the deployed documentation subpath. A deployment such as /mume/ therefore requests /assets/images/... rather than /mume/assets/images/... and renders broken images.

Triggers: When the documentation is built or hosted with a non-root VITE_BASE.

Suggested fix: Use VitePress-aware asset URLs, such as withBase() for component code or base-prefixed paths generated at build time, instead of hard-coded root-relative URLs.

Comment thread docs/links.md
Co-authored-by: sourcery-ai[bot] <58596630+sourcery-ai[bot]@users.noreply.github.com>
@nschimme

Copy link
Copy Markdown
Contributor Author

@sourcery-ai review

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey - I've found 2 issues

Prompt for AI Agents
Please address the comments from this code review:

## Individual Comments

### Comment 1
<location path="docs/.vitepress/theme/mume.css" line_range="276-279" />
<code_context>
     text-align: center;
     background: #0a0d15;
-    background-image: url(../../assets/images/play-now-banner.jpg);
+    background-image: url(../../public/assets/images/play-now-banner.jpg);
     background-position: center;
     background-size: cover;
</code_context>
<issue_to_address>
**issue (bug_risk):** The stylesheet points at files under `../../public/assets/images`, treating the Vite public directory as a URL-relative source path. Vite public assets are served from `/assets/...`, so these background URLs fail to resolve or cause the production build to reject the public-directory import, leaving every `.playnow` banner without its background.

**Triggers:** When the VitePress site is built or the `.playnow` component is rendered.

**Suggested fix:** Reference the public assets with root URLs such as `/assets/images/play-now-banner.jpg` and `/assets/images/play-now-banner@2x.jpg`, or import the files from a source asset directory.
</issue_to_address>

### Comment 2
<location path="docs/index.md" line_range="16-19" />
<code_context>
-<div class="center-img">
-<img src="./assets/images/fellowship_bw.jpg" alt="The Fellowship of the Ring" class="banner-img">
+<div class="page-banner">
+<img src="/assets/images/fellowship_bw.jpg" srcset="/assets/images/fellowship_bw.jpg 1x, /assets/images/fellowship_bw@2x.jpg 2x" alt="The Fellowship of the Ring" class="banner-img">
 </div>

</code_context>
<issue_to_address>
**issue (bug_risk):** The changed image URLs are root-relative (`/assets/images/...`) and therefore ignore VitePress's configured `base` path. When the site is deployed under a non-root base such as `/community/`, these images and their `srcset` variants request `/assets/...` from the domain root instead of `/community/assets/...`, so the localized assets are broken.

**Triggers:** When `VITE_BASE` configures deployment below the domain root.

**Suggested fix:** Generate asset URLs through the configured base path, use VitePress's base-aware helpers, or keep the references in a form that VitePress rewrites for the configured base.
</issue_to_address>

Sourcery assessment

Approval pending. 2 findings to address first.

Blocking findings: docs/.vitepress/theme/mume.css:279, docs/index.md:19


Sourcery is free for open source - if you like our reviews please consider sharing them ✨

Comment thread docs/.vitepress/theme/mume.css Outdated
Comment thread docs/index.md Outdated
Comment on lines 16 to 19
<img src="/assets/images/fellowship_bw.jpg" srcset="/assets/images/fellowship_bw.jpg 1x, /assets/images/fellowship_bw@2x.jpg 2x" alt="The Fellowship of the Ring" class="banner-img">
</div>

<div class="quote">

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue (bug_risk): The changed image URLs are root-relative (/assets/images/...) and therefore ignore VitePress's configured base path. When the site is deployed under a non-root base such as /community/, these images and their srcset variants request /assets/... from the domain root instead of /community/assets/..., so the localized assets are broken.

Triggers: When VITE_BASE configures deployment below the domain root.

Suggested fix: Generate asset URLs through the configured base path, use VitePress's base-aware helpers, or keep the references in a form that VitePress rewrites for the configured base.

@nschimme

Copy link
Copy Markdown
Contributor Author

@sourcery-ai review

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey - I've found 1 issue

Prompt for AI Agents
Please address the comments from this code review:

## Individual Comments

### Comment 1
<location path="docs/index.md" line_range="16" />
<code_context>
-<div class="center-img">
-<img src="./assets/images/fellowship_bw.jpg" alt="The Fellowship of the Ring" class="banner-img">
+<div class="page-banner">
+<img src="/assets/images/fellowship_bw.jpg" srcset="/assets/images/fellowship_bw.jpg 1x, /assets/images/fellowship_bw@2x.jpg 2x" alt="The Fellowship of the Ring" class="banner-img">
 </div>

</code_context>
<issue_to_address>
**issue (broader_impact):** The new root-relative image URLs ignore VitePress's configured `base`, so images resolve from the domain root instead of the deployed documentation subpath. In preview deployments and any deployment using a non-root `VITE_BASE`, these banners, cards, tutorial screenshots, and historical map links return 404.

**Triggers:** When the site is built with a non-root `VITE_BASE`, such as the pull-request preview configuration.

**Suggested fix:** Use base-aware asset URL generation or paths relative to each Markdown page instead of hard-coded `/assets/images/...` URLs.

```suggestion
<img src="./assets/images/fellowship_bw.jpg" srcset="./assets/images/fellowship_bw.jpg 1x, ./assets/images/fellowship_bw@2x.jpg 2x" alt="The Fellowship of the Ring" class="banner-img">
```
</issue_to_address>

Sourcery assessment

Approval pending. 1 finding to address first.

Blocking findings: docs/index.md:16


Sourcery is free for open source - if you like our reviews please consider sharing them ✨

Comment thread docs/index.md Outdated
<div class="center-img">
<img src="./assets/images/fellowship_bw.jpg" alt="The Fellowship of the Ring" class="banner-img">
<div class="page-banner">
<img src="/assets/images/fellowship_bw.jpg" srcset="/assets/images/fellowship_bw.jpg 1x, /assets/images/fellowship_bw@2x.jpg 2x" alt="The Fellowship of the Ring" class="banner-img">

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue (broader_impact): The new root-relative image URLs ignore VitePress's configured base, so images resolve from the domain root instead of the deployed documentation subpath. In preview deployments and any deployment using a non-root VITE_BASE, these banners, cards, tutorial screenshots, and historical map links return 404.

Triggers: When the site is built with a non-root VITE_BASE, such as the pull-request preview configuration.

Suggested fix: Use base-aware asset URL generation or paths relative to each Markdown page instead of hard-coded /assets/images/... URLs.

Suggested change
<img src="/assets/images/fellowship_bw.jpg" srcset="/assets/images/fellowship_bw.jpg 1x, /assets/images/fellowship_bw@2x.jpg 2x" alt="The Fellowship of the Ring" class="banner-img">
<img src="./assets/images/fellowship_bw.jpg" srcset="./assets/images/fellowship_bw.jpg 1x, ./assets/images/fellowship_bw@2x.jpg 2x" alt="The Fellowship of the Ring" class="banner-img">

@nschimme

Copy link
Copy Markdown
Contributor Author

@sourcery-ai review

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey - I've found 2 issues

Prompt for AI Agents
Please address the comments from this code review:

## Individual Comments

### Comment 1
<location path="docs/.vitepress/theme/mume.css" line_range="276" />
<code_context>
     text-align: center;
     background: #0a0d15;
-    background-image: url(../../assets/images/play-now-banner.jpg);
+    background-image: url(/assets/images/play-now-banner.jpg);
     background-position: center;
     background-size: cover;
</code_context>
<issue_to_address>
**issue (bug_risk):** These root-relative asset URLs ignore VitePress's configured `base`. When the site is built with a non-root `VITE_BASE` (as in the PR-preview and GitHub Pages workflows), browsers request `/assets/images/...` from the domain root instead of `<base>/assets/images/...`, so the changed images and play-now backgrounds return 404.

**Triggers:** When the site is deployed under a non-root base path such as a PR-preview prefix.

**Suggested fix:** Use VitePress base-aware asset URLs, such as `withBase(...)` for generated markup or base-prefixed paths injected at build time, rather than hard-coded leading-slash URLs.
</issue_to_address>

### Comment 2
<location path="docs/about/index.md" line_range="6" />
<code_context>

-<div style="text-align: center; margin-bottom: 2rem;">
-  <img src="/assets/images/fellowship_bw.jpg" srcset="/assets/images/fellowship_bw.jpg 1x, /assets/images/fellowship_bw@2x.jpg 2x" alt="A short explanation on what Multi-Users in Middle-earth is" style="width: 100%; max-width: 654px; height: auto;" />
+<div class="page-banner">
+  <img src="/assets/images/fellowship_bw.jpg" srcset="/assets/images/fellowship_bw.jpg 1x, /assets/images/fellowship_bw@2x.jpg 2x" alt="A short explanation on what Multi-Users in Middle-earth is" class="banner-img" />
 </div>

 # About MUME
</code_context>
<issue_to_address>
**issue (bug_risk):** The new `page-banner` wrapper has no corresponding CSS rule in `mume.css`; the existing `.center-img` rule that supplied centering and bottom spacing is removed from these banners. Consequently, these pages lose the shared banner layout spacing and centering behavior, so the claimed standardized presentation is not applied.

**Suggested fix:** Add a `.page-banner` rule carrying the former centering and spacing behavior, or retain the `center-img` class alongside the new class.

```suggestion
<div class="page-banner center-img">
```
</issue_to_address>

Sourcery assessment

Approval pending. 2 findings to address first.

Blocking findings: docs/.vitepress/theme/mume.css:276, docs/about/index.md:6


Sourcery is free for open source - if you like our reviews please consider sharing them ✨

text-align: center;
background: #0a0d15;
background-image: url(../../assets/images/play-now-banner.jpg);
background-image: url(/assets/images/play-now-banner.jpg);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue (bug_risk): These root-relative asset URLs ignore VitePress's configured base. When the site is built with a non-root VITE_BASE (as in the PR-preview and GitHub Pages workflows), browsers request /assets/images/... from the domain root instead of <base>/assets/images/..., so the changed images and play-now backgrounds return 404.

Triggers: When the site is deployed under a non-root base path such as a PR-preview prefix.

Suggested fix: Use VitePress base-aware asset URLs, such as withBase(...) for generated markup or base-prefixed paths injected at build time, rather than hard-coded leading-slash URLs.

Comment thread docs/about/index.md
@nschimme

Copy link
Copy Markdown
Contributor Author

@sourcery-ai review

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey - I've found 1 issue

Prompt for AI Agents
Please address the comments from this code review:

## Individual Comments

### Comment 1
<location path="docs/.vitepress/theme/mume.css" line_range="276" />
<code_context>
     text-align: center;
     background: #0a0d15;
-    background-image: url(../../assets/images/play-now-banner.jpg);
+    background-image: url(/assets/images/play-now-banner.jpg);
     background-position: center;
     background-size: cover;
</code_context>
<issue_to_address>
**issue (bug_risk):** The newly standardized image URLs are root-relative, so they request `/assets/images/...` instead of the configured VitePress base path. When the site is deployed with a non-root `VITE_BASE` such as `/community/`, banners, card artwork, tutorial images, and CSS background images return 404s.

**Triggers:** When the documentation is deployed under a subpath via `VITE_BASE`.

**Suggested fix:** Generate asset URLs with VitePress `withBase()` or use base-aware relative/imported asset paths instead of hard-coded root-relative URLs.
</issue_to_address>

Sourcery assessment

Approval pending. 1 finding to address first.

Blocking findings: docs/.vitepress/theme/mume.css:276


Sourcery is free for open source - if you like our reviews please consider sharing them ✨

text-align: center;
background: #0a0d15;
background-image: url(../../assets/images/play-now-banner.jpg);
background-image: url(/assets/images/play-now-banner.jpg);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue (bug_risk): The newly standardized image URLs are root-relative, so they request /assets/images/... instead of the configured VitePress base path. When the site is deployed with a non-root VITE_BASE such as /community/, banners, card artwork, tutorial images, and CSS background images return 404s.

Triggers: When the documentation is deployed under a subpath via VITE_BASE.

Suggested fix: Generate asset URLs with VitePress withBase() or use base-aware relative/imported asset paths instead of hard-coded root-relative URLs.

@nschimme

Copy link
Copy Markdown
Contributor Author

@sourcery-ai review

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey - I've reviewed your changes and they look great!

Sourcery assessment

Approved.


Sourcery is free for open source - if you like our reviews please consider sharing them ✨

@nschimme
nschimme merged commit a976307 into MUME:master Sep 20, 2026
3 checks passed

This branch was successfully deployed

1 active deployment
pr-61 — b8511759 Deployed Sep 20, 2026 by github-actions[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant