Skip to content

fix images and banners #61

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nschimme merged 10 commits into from
Sep 20, 2026
Merged

fix images and banners #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
8a50a30
Fix about page images and standardize banner UX
nschimme Sep 19, 2026
2e3d528
Localize remote images, consolidate asset location, and standardize b…
nschimme Sep 19, 2026
e70c27c
Update docs/links.md
nschimme Sep 19, 2026
df91be8
Localize mume.org images and standardize page banners across site
nschimme Sep 19, 2026
0e0d388
Localize mume.org images and standardize page banners across site
nschimme Sep 19, 2026
ec79bc1
Localize mume.org images and standardize page banners across site
nschimme Sep 20, 2026
899bf15
Localize mume.org images and standardize page banners across site
nschimme Sep 20, 2026
69992aa
Localize mume.org images and standardize page banners across site
nschimme Sep 20, 2026
7cf22f5
Localize mume.org images and standardize page banners across site
nschimme Sep 20, 2026
b851175
Localize remote images and standardize page banner UX
nschimme Sep 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/.vitepress/theme/Layout.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ onUnmounted(() => {
<img alt="Durin's Bane - a Balrog within the Mines of Moria"
class="center"
style="width: 160px; max-width: 100%; padding: 50px;"
src="/assets/images/balrog.png">
:src="withBase('/assets/images/balrog.png')">
<p class="center">"You cannot pass," he said.</p>
<p class="center"><a :href="withBase('/')">Return to the Shire (Home)</a></p>
</div>
Expand Down
8 changes: 4 additions & 4 deletions docs/.vitepress/theme/mume.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -273,7 +273,7 @@ nav ul li a:hover .caret.right {
margin-top: 0.75em;
text-align: center;
background: #0a0d15;
background-image: url(../../assets/images/play-now-banner.jpg);
background-image: url(/assets/images/play-now-banner.jpg);

@sourcery-ai sourcery-ai Bot Sep 20, 2026

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.

background-position: center;
background-size: cover;
border-radius: 0.3em;
Expand All @@ -285,7 +285,7 @@ nav ul li a:hover .caret.right {
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx) {
.content .playnow {
background-image: url(../../assets/images/play-now-banner@2x.jpg);
background-image: url(/assets/images/play-now-banner@2x.jpg);
}
}
.content .readytoexplore {
Expand Down Expand Up @@ -534,7 +534,7 @@ footer {
font-size: 0.8em;
}
.content .playnow {
background-image: url(../../assets/images/play-now-banner@2x.jpg);
background-image: url(/assets/images/play-now-banner@2x.jpg);
}

:target::before {
Expand Down Expand Up @@ -991,7 +991,7 @@ a:hover {
margin-bottom: 0.5rem;
}

.center-img {
.center-img, .page-banner {
text-align: center;
margin-bottom: 2rem;
}
Expand Down
6 changes: 3 additions & 3 deletions docs/about/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ title: About MUME
description: A short explanation on what Multi-Users in Middle-earth is.
---

<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
Expand Down Expand Up @@ -62,4 +62,4 @@ Below is a snapshot of the Middle-earth outdoor areas that are available on MUME
<img src="/assets/images/map_public_small.jpg" alt="Map of Arda" style="width: 100%; max-width: 790px; height: auto;" />
</div>

For the record, here is how Arda looked like in [2001](https://mume.org/Images/map_public_small_200109.jpg), [2006](/about/building), and [2009](https://mume.org/Images/map_public_small_200907.jpg).
For the record, here is how Arda looked like in [2001](/assets/images/map_public_small_200109.jpg), [2006](/about/building), and [2009](/assets/images/map_public_small_200907.jpg).
Binary file removed docs/assets/images/balrog.png
View file
Open in desktop
Binary file not shown.
Binary file removed docs/assets/images/doors-of-durin.png
View file
Open in desktop
Binary file not shown.
Binary file removed docs/assets/images/fellowship_bw.jpg
View file
Open in desktop
Binary file not shown.
Binary file removed docs/assets/images/mume_banner.gif
View file
Open in desktop
Binary file not shown.
2 changes: 1 addition & 1 deletion docs/community/interviews/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: Player Interviews

<div class="interviews">
<div class="center-img">
<img src="../../assets/images/gandalf.jpg" alt="Gandalf" class="banner-img" />
<img src="/assets/images/gandalf.jpg" alt="Gandalf" class="banner-img" />
</div>

<h1>Player Interviews</h1>
Expand Down
14 changes: 7 additions & 7 deletions docs/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ head:
---

<div class="home">
<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>

<div class="quote">
Expand All @@ -30,7 +30,7 @@ You can trust us to stick to you through thick and thin&mdash;to the bitter end.
<div class="readytoexplore">Ready to explore Middle-earth?</div>
<div class="playnow-buttons">
<a href="./play/"><i class="fa fa-gamepad" aria-hidden="true"></i> Play Now</a>
<a href="./play/tutorial/" class="btn-secondary-playnow"><i class="fa fa-compass" aria-hidden="true"></i> Interactive Tutorial</a>
<a href="./play/tutorial/1-orientation" class="btn-secondary-playnow"><i class="fa fa-compass" aria-hidden="true"></i> Interactive Tutorial</a>
</div>
</div>

Expand All @@ -55,7 +55,7 @@ You can trust us to stick to you through thick and thin&mdash;to the bitter end.
<section class="community-section">
<h2><i class="fa fa-book" aria-hidden="true"></i> MUME Wiki</h2>
<div class="card">
<img src="./assets/images/doors-of-durin.png" alt="MUME Wiki">
<img src="/assets/images/doors-of-durin.png" srcset="/assets/images/doors-of-durin.png 1x, /assets/images/doors-of-durin@2x.png 2x" alt="MUME Wiki">
<div>
<h3>Knowledge Base</h3>
<p>
Expand Down Expand Up @@ -86,7 +86,7 @@ Check out the community YouTube channel for combat logs, guides, and Middle-eart
<section class="community-section">
<h2><i class="fa fa-history" aria-hidden="true"></i> Elvenrunes</h2>
<div class="card">
<img src="./assets/images/mume-classes.png" alt="Elvenrunes">
<img src="/assets/images/mume-classes.png" srcset="/assets/images/mume-classes.png 1x, /assets/images/mume-classes@2x.png 2x" alt="Elvenrunes">
<div>
<h3>Combat Logs & Discussion</h3>
<p>
Expand All @@ -102,7 +102,7 @@ A long-standing pillar of the community, Elvenrunes features combat logs, forums
<section class="community-section">
<h2><i class="fa fa-users" aria-hidden="true"></i> Player Interviews</h2>
<div class="card">
<img src="./assets/images/fellowship_bw.jpg" alt="Interviews">
<img src="/assets/images/fellowship_bw.jpg" srcset="/assets/images/fellowship_bw.jpg 1x, /assets/images/fellowship_bw@2x.jpg 2x" alt="Interviews">
<div>
<h3>Legends of MUME</h3>
<p>
Expand All @@ -118,7 +118,7 @@ Read interviews with legendary players and developers. Learn about the history a
<section class="community-section">
<h2><i class="fa fa-code" aria-hidden="true"></i> Open Source</h2>
<div class="card">
<img src="./assets/images/mume_logo.jpg" alt="MMapper Logo">
<img src="/assets/images/mume_logo.jpg" srcset="/assets/images/mume_logo.jpg 1x, /assets/images/mume_logo@2x.jpg 2x" alt="MMapper Logo">
<div>
<h3>Community Projects</h3>
<p>
Expand Down
6 changes: 3 additions & 3 deletions docs/links.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ title: Community Links
---

<div class="links">
<div class="center-img">
<img src="/assets/images/fellowship_bw.jpg" alt="The Fellowship" 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" class="banner-img">
</div>

<h1>Related Links</h1>
Expand All @@ -21,7 +21,7 @@ title: Community Links
<div class="banner-code">
<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>

Expand Down
8 changes: 4 additions & 4 deletions docs/news/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@ title: News
description: Latest developments, changes, war updates, and traffic plots for Multi-Users in Middle-earth.
---

# News

<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="The Fellowship of the Ring" 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="The Fellowship of the Ring" class="banner-img" />
</div>

# News

<dl>
<dt><a href="https://mume.org/news/war" target="_self" rel="external">State of the War</a></dt>
<dd>State of the epic war between the forces of the Dark Lord and the armies of the West.</dd>
Expand Down
12 changes: 6 additions & 6 deletions docs/opensource.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: Open Source Projects

<div class="opensource">
<div class="center-img">
<img src="./assets/images/horsemannight.jpg" alt="Open Source" class="banner-img">
<img src="/assets/images/horsemannight.jpg" alt="Open Source" class="banner-img">
</div>

<h1>MUME Open Source</h1>
Expand All @@ -21,7 +21,7 @@ The MUME ecosystem is powered by its community. Many of the tools, clients, and
<h2>Featured Projects</h2>

<div class="card">
<img src="./assets/images/mume_logo.jpg" alt="MMapper Logo">
<img src="/assets/images/mume_logo.jpg" srcset="/assets/images/mume_logo.jpg 1x, /assets/images/mume_logo@2x.jpg 2x" alt="MMapper Logo">
<div>
<h3>MMapper</h3>
<p>
Expand All @@ -32,7 +32,7 @@ A graphical mapper for MUME. It helps you navigate the vast world of Middle-eart
</div>

<div class="card">
<img src="./assets/images/boromir-horn.png" alt="Powwow Logo">
<img src="/assets/images/boromir-horn.png" srcset="/assets/images/boromir-horn.png 1x, /assets/images/boromir-horn@2x.png 2x" alt="Powwow Logo">
<div>
<h3>Powwow</h3>
<p>
Expand All @@ -43,7 +43,7 @@ A powerful, extensible client for MUME. It features a robust scripting engine, c
</div>

<div class="card">
<img src="./assets/images/shield-gondor.png" alt="PowTTY Logo">
<img src="/assets/images/shield-gondor.png" srcset="/assets/images/shield-gondor.png 1x, /assets/images/shield-gondor@2x.png 2x" alt="PowTTY Logo">
<div>
<h3>PowTTY</h3>
<p>
Expand All @@ -54,7 +54,7 @@ A terminal-based client for MUME, optimized for speed and reliability. It's a gr
</div>

<div class="card">
<img src="./assets/images/balrog.png" alt="Play MUME Logo">
<img src="/assets/images/balrog.png" alt="Play MUME Logo">
<div>
<h3>Play MUME</h3>
<p>
Expand All @@ -65,7 +65,7 @@ A modern web-based client for MUME using DecafMUD. Perfect for new players or th
</div>

<div class="card">
<img src="./assets/images/shield-mordor.png" alt="MUSHclient-MUME Logo">
<img src="/assets/images/shield-mordor.png" srcset="/assets/images/shield-mordor.png 1x, /assets/images/shield-mordor@2x.png 2x" alt="MUSHclient-MUME Logo">
<div>
<h3>MUSHclient-MUME</h3>
<p>
Expand Down
4 changes: 2 additions & 2 deletions docs/play/browser-legacy.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ title: Play (Legacy)
description: Play MUME in your web browser using legacy web clients like DecafMUD, MUMEjc, and MUDjc.
---

<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="Play MUME for free using legacy web clients" 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="Play MUME for free using legacy web clients" class="banner-img" />
</div>

# Play MUME in your web browser! (Legacy)
Expand Down
4 changes: 2 additions & 2 deletions docs/play/tutorial/15-journey.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,8 @@ Congratulations on guiding Fuor through the Black Hills walkthrough! You have ma
When you launch into MUME using the Web Client, you'll see an integrated live mapper (**MMapper**) and character stats panel:

<div style="display: flex; gap: 12px; margin: 12px 0; flex-wrap: wrap;">
<img src="../../assets/images/tutorial-desc.png" alt="Web Client Interface" style="max-width: 48%; border-radius: 6px; border: 1px solid rgba(215,166,63,0.3);" />
<img src="../../assets/images/tutorial-map.png" alt="MMapper Live Map" style="max-width: 48%; border-radius: 6px; border: 1px solid rgba(215,166,63,0.3);" />
<img src="/assets/images/tutorial-desc.png" alt="Web Client Interface" style="max-width: 48%; border-radius: 6px; border: 1px solid rgba(215,166,63,0.3);" />
<img src="/assets/images/tutorial-map.png" alt="MMapper Live Map" style="max-width: 48%; border-radius: 6px; border: 1px solid rgba(215,166,63,0.3);" />
</div>

Follow the interactive quest prompts below to complete your graduation!
0 docs/assets/images/boromir-horn.png → docs/public/assets/images/boromir-horn.png
View file
Open in desktop
File renamed without changes
Binary file added docs/public/assets/images/boromir-horn@2x.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 docs/assets/images/gandalf.jpg → docs/public/assets/images/gandalf.jpg
View file
Open in desktop
File renamed without changes
0 docs/assets/images/horsemannight.jpg → docs/public/assets/images/horsemannight.jpg
View file
Open in desktop
File renamed without changes
Binary file added docs/public/assets/images/map_public_small_200109.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/public/assets/images/map_public_small_200907.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 docs/assets/images/mume-classes.png → docs/public/assets/images/mume-classes.png
View file
Open in desktop
File renamed without changes
Binary file added docs/public/assets/images/mume-classes@2x.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 docs/assets/images/mume_logo.jpg → docs/public/assets/images/mume_logo.jpg
View file
Open in desktop
File renamed without changes
0 docs/assets/images/mume_logo@2x.jpg → docs/public/assets/images/mume_logo@2x.jpg
View file
Open in desktop
File renamed without changes
0 docs/assets/images/play-now-banner.jpg → .../public/assets/images/play-now-banner.jpg
View file
Open in desktop
File renamed without changes
0 docs/assets/images/play-now-banner@2x.jpg → ...blic/assets/images/play-now-banner@2x.jpg
View file
Open in desktop
File renamed without changes
0 docs/assets/images/shield-gondor.png → docs/public/assets/images/shield-gondor.png
View file
Open in desktop
File renamed without changes
Binary file added docs/public/assets/images/shield-gondor@2x.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 docs/assets/images/shield-mordor.png → docs/public/assets/images/shield-mordor.png
View file
Open in desktop
File renamed without changes
Binary file added docs/public/assets/images/shield-mordor@2x.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/public/assets/images/stateofthewar@2x.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 docs/assets/images/tutorial-desc.png → docs/public/assets/images/tutorial-desc.png
View file
Open in desktop
File renamed without changes
0 docs/assets/images/tutorial-map.png → docs/public/assets/images/tutorial-map.png
View file
Open in desktop
File renamed without changes
4 changes: 2 additions & 2 deletions docs/resources/boards/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ title: Boards
description: Multi-Users in Middle-earth message boards including Game News, Starter's, FAQ, Tales, Free People Chronicles, and Orkish Drumlore.
---

<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="Boards" 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="Boards" class="banner-img" />
</div>

# Boards
Expand Down
4 changes: 2 additions & 2 deletions docs/resources/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ title: Resources
description: Contents of the Multi-Users in Middle-earth Website.
---

<div style="text-align: center; margin-bottom: 2rem;">
<img src="/assets/images/contents.jpg" srcset="/assets/images/contents.jpg 1x, /assets/images/contents@2x.jpg 2x" alt="Contents" style="width: 100%; max-width: 300px; height: auto;" />
<div class="page-banner">
<img src="/assets/images/contents.jpg" srcset="/assets/images/contents.jpg 1x, /assets/images/contents@2x.jpg 2x" alt="Contents" class="banner-img" style="max-width: 320px;" />
</div>

# Resources
Expand Down
4 changes: 2 additions & 2 deletions docs/resources/questionnaires/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ title: Player Questionnaires & Polls
description: Results and reporting from MUME player demographics and opinion questionnaires (1995–2023).
---

<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="Questionnaires" 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="Questionnaires" class="banner-img" />
</div>

# Player Questionnaires & Polls
Expand Down
Loading