WebHost, Multiple Worlds: fix images not showing in guides (#5576)

* Multiple: resize FR RA network commands screenshot

This is now more in line with the text (and the english version).

* Multiple: optimize EN RA network commands screenshot

The URL has changed, so it's a good time to optimize.

* WebHost, Worlds: fix retroarch images not showing

Implements a src/url replacement for relative paths.
Moves the RA screenshots to worlds/generic since they are shared.
Also now uses the FR version in ffmq.
Also fixes the formatting that resultet in the list breaking.
Also moves imports in render_markdown.

Guides now also properly render on Github.

* Factorio: optimize screenshots

The URL has changed, so it's a good time to optimize.

* Factorio: change guide screenshots to use relative URL

* Test: markdown: fix tests on Windows

We also can't use delete=True, delete_on_close=False
because that's not supported in Py3.11.

* Test: markdown: fix typo

I hope that's it now. *sigh*

* Landstalker: fix doc images not showing

Change to relative img urls.

* Landstalker: optimize doc PNGs

The URL has changed, so it's a good time to optimize.

WebHostLib/markdown.py

@@ -0,0 +1,90 @@
+import re
+from collections import Counter
+
+import mistune
+from werkzeug.utils import secure_filename
+
+
+__all__ = [
+    "ImgUrlRewriteInlineParser",
+    'render_markdown',
+]
+
+
+class ImgUrlRewriteInlineParser(mistune.InlineParser):
+    relative_url_base: str
+
+    def __init__(self, relative_url_base: str, hard_wrap: bool = False) -> None:
+        super().__init__(hard_wrap)
+        self.relative_url_base = relative_url_base
+
+    @staticmethod
+    def _find_game_name_by_folder_name(name: str) -> str | None:
+        from worlds.AutoWorld import AutoWorldRegister
+
+        for world_name, world_type in AutoWorldRegister.world_types.items():
+            if world_type.__module__ == f"worlds.{name}":
+                return world_name
+        return None
+
+    def parse_link(self, m: re.Match[str], state: mistune.InlineState) -> int | None:
+        res = super().parse_link(m, state)
+        if res is not None and state.tokens and state.tokens[-1]["type"] == "image":
+            image_token = state.tokens[-1]
+            url: str = image_token["attrs"]["url"]
+            if not url.startswith("/") and not "://" in url:
+                # replace relative URL to another world's doc folder with the webhost folder layout
+                if url.startswith("../../") and "/docs/" in self.relative_url_base:
+                    parts = url.split("/", 4)
+                    if parts[2] != ".." and parts[3] == "docs":
+                        game_name = self._find_game_name_by_folder_name(parts[2])
+                        if game_name is not None:
+                            url = "/".join(parts[1:2] + [secure_filename(game_name)] + parts[4:])
+                # change relative URL to point to deployment folder
+                url = f"{self.relative_url_base}/{url}"
+                image_token['attrs']['url'] = url
+        return res
+
+
+def render_markdown(path: str, img_url_base: str | None = None) -> str:
+    markdown = mistune.create_markdown(
+        escape=False,
+        plugins=[
+            "strikethrough",
+            "footnotes",
+            "table",
+            "speedup",
+        ],
+    )
+
+    heading_id_count: Counter[str] = Counter()
+
+    def heading_id(text: str) -> str:
+        nonlocal heading_id_count
+
+        # there is no good way to do this without regex
+        s = re.sub(r"[^\w\- ]", "", text.lower()).replace(" ", "-").strip("-")
+        n = heading_id_count[s]
+        heading_id_count[s] += 1
+        if n > 0:
+            s += f"-{n}"
+        return s
+
+    def id_hook(_: mistune.Markdown, state: mistune.BlockState) -> None:
+        for tok in state.tokens:
+            if tok["type"] == "heading" and tok["attrs"]["level"] < 4:
+                text = tok["text"]
+                assert isinstance(text, str)
+                unique_id = heading_id(text)
+                tok["attrs"]["id"] = unique_id
+                tok["text"] = f"<a href=\"#{unique_id}\">{text}</a>"  # make header link to itself
+
+    markdown.before_render_hooks.append(id_hook)
+    if img_url_base:
+        markdown.inline = ImgUrlRewriteInlineParser(img_url_base)
+
+    with open(path, encoding="utf-8-sig") as f:
+        document = f.read()
+    html = markdown(document)
+    assert isinstance(html, str), "Unexpected mistune renderer in render_markdown"
+    return html

WebHostLib/misc.py

@@ -9,6 +9,7 @@ from werkzeug.utils import secure_filename
 
 from worlds.AutoWorld import AutoWorldRegister, World
 from . import app, cache
+from .markdown import render_markdown
 from .models import Seed, Room, Command, UUID, uuid4
 from Utils import title_sorted
 
@@ -27,49 +28,6 @@ def get_visible_worlds() -> dict[str, type(World)]:
     return worlds
 
 
-def render_markdown(path: str) -> str:
-    import mistune
-    from collections import Counter
-
-    markdown = mistune.create_markdown(
-        escape=False,
-        plugins=[
-            "strikethrough",
-            "footnotes",
-            "table",
-            "speedup",
-        ],
-    )
-
-    heading_id_count: Counter[str] = Counter()
-
-    def heading_id(text: str) -> str:
-        nonlocal heading_id_count
-        import re  # there is no good way to do this without regex
-
-        s = re.sub(r"[^\w\- ]", "", text.lower()).replace(" ", "-").strip("-")
-        n = heading_id_count[s]
-        heading_id_count[s] += 1
-        if n > 0:
-            s += f"-{n}"
-        return s
-
-    def id_hook(_: mistune.Markdown, state: mistune.BlockState) -> None:
-        for tok in state.tokens:
-            if tok["type"] == "heading" and tok["attrs"]["level"] < 4:
-                text = tok["text"]
-                assert isinstance(text, str)
-                unique_id = heading_id(text)
-                tok["attrs"]["id"] = unique_id
-                tok["text"] = f"<a href=\"#{unique_id}\">{text}</a>"  # make header link to itself
-
-    markdown.before_render_hooks.append(id_hook)
-
-    with open(path, encoding="utf-8-sig") as f:
-        document = f.read()
-    return markdown(document)
-
-
 @app.errorhandler(404)
 @app.errorhandler(jinja2.exceptions.TemplateNotFound)
 def page_not_found(err):
@@ -91,10 +49,9 @@ def game_info(game, lang):
         theme = get_world_theme(game)
         secure_game_name = secure_filename(game)
         lang = secure_filename(lang)
-        document = render_markdown(os.path.join(
+        file_dir = os.path.join(app.static_folder, "generated", "docs", secure_game_name)
-            app.static_folder, "generated", "docs",
+        file_dir_url = url_for("static", filename=f"generated/docs/{secure_game_name}")
-            secure_game_name, f"{lang}_{secure_game_name}.md"
+        document = render_markdown(os.path.join(file_dir, f"{lang}_{secure_game_name}.md"), file_dir_url)
-        ))
         return render_template(
             "markdown_document.html",
             title=f"{game} Guide",
@@ -119,10 +76,9 @@ def tutorial(game: str, file: str):
         theme = get_world_theme(game)
         secure_game_name = secure_filename(game)
         file = secure_filename(file)
-        document = render_markdown(os.path.join(
+        file_dir = os.path.join(app.static_folder, "generated", "docs", secure_game_name)
-            app.static_folder, "generated", "docs",
+        file_dir_url = url_for("static", filename=f"generated/docs/{secure_game_name}")
-            secure_game_name, file+".md"
+        document = render_markdown(os.path.join(file_dir, f"{file}.md"), file_dir_url)
-        ))
         return render_template(
             "markdown_document.html",
             title=f"{game} Guide",

test/webhost/test_markdown.py

@@ -0,0 +1,78 @@
+import os
+import unittest
+from tempfile import NamedTemporaryFile
+
+from mistune import HTMLRenderer, Markdown
+
+from WebHostLib.markdown import ImgUrlRewriteInlineParser, render_markdown
+
+
+class ImgUrlRewriteTest(unittest.TestCase):
+    markdown: Markdown
+    base_url = "/static/generated/docs/some_game"
+
+    def setUp(self) -> None:
+        self.markdown = Markdown(
+            renderer=HTMLRenderer(escape=False),
+            inline=ImgUrlRewriteInlineParser(self.base_url),
+        )
+
+    def test_relative_img_rewrite(self) -> None:
+        html = self.markdown("![Image](image.png)")
+        self.assertIn(f'src="{self.base_url}/image.png"', html)
+
+    def test_absolute_img_no_rewrite(self) -> None:
+        html = self.markdown("![Image](/image.png)")
+        self.assertIn(f'src="/image.png"', html)
+        self.assertNotIn(self.base_url, html)
+
+    def test_remote_img_no_rewrite(self) -> None:
+        html = self.markdown("![Image](https://example.com/image.png)")
+        self.assertIn(f'src="https://example.com/image.png"', html)
+        self.assertNotIn(self.base_url, html)
+
+    def test_relative_link_no_rewrite(self) -> None:
+        # The parser is only supposed to update images, not links.
+        html = self.markdown("[Link](image.png)")
+        self.assertIn(f'href="image.png"', html)
+        self.assertNotIn(self.base_url, html)
+
+    def test_absolute_link_no_rewrite(self) -> None:
+        html = self.markdown("[Link](/image.png)")
+        self.assertIn(f'href="/image.png"', html)
+        self.assertNotIn(self.base_url, html)
+
+    def test_auto_link_no_rewrite(self) -> None:
+        html = self.markdown("<https://example.com/image.png>")
+        self.assertIn(f'href="https://example.com/image.png"', html)
+        self.assertNotIn(self.base_url, html)
+
+    def test_relative_img_to_other_game(self) -> None:
+        html = self.markdown("![Image](../../generic/docs/image.png)")
+        self.assertIn(f'src="{self.base_url}/../Archipelago/image.png"', html)
+
+
+class RenderMarkdownTest(unittest.TestCase):
+    """Tests that render_markdown does the right thing."""
+    base_url = "/static/generated/docs/some_game"
+
+    def test_relative_img_rewrite(self) -> None:
+        f = NamedTemporaryFile(delete=False)
+        try:
+            f.write("![Image](image.png)".encode("utf-8"))
+            f.close()
+            html = render_markdown(f.name, self.base_url)
+            self.assertIn(f'src="{self.base_url}/image.png"', html)
+        finally:
+            os.unlink(f.name)
+
+    def test_no_img_rewrite(self) -> None:
+        f = NamedTemporaryFile(delete=False)
+        try:
+            f.write("![Image](image.png)".encode("utf-8"))
+            f.close()
+            html = render_markdown(f.name)
+            self.assertIn(f'src="image.png"', html)
+            self.assertNotIn(self.base_url, html)
+        finally:
+            os.unlink(f.name)

worlds/alttp/docs/multiworld_en.md

@@ -88,9 +88,8 @@ You only have to do these steps once.
 1. Enter the RetroArch main menu screen.
 2. Go to Settings --> User Interface. Set "Show Advanced Settings" to ON.
 3. Go to Settings --> Network. Set "Network Commands" to ON. (It is found below Request Device 16.) Leave the default
-   Network Command Port at 55355.
+   Network Command Port at 55355. \
-
+   ![Screenshot of Network Commands setting](../../generic/docs/retroarch-network-commands-en.png)
-![Screenshot of Network Commands setting](/static/generated/docs/A%20Link%20to%20the%20Past/retroarch-network-commands-en.png)
 4. Go to Main Menu --> Online Updater --> Core Downloader. Scroll down and select "Nintendo - SNES / SFC (bsnes-mercury
    Performance)".
 

worlds/alttp/docs/multiworld_es.md

@@ -88,9 +88,8 @@ Sólo hay que seguir estos pasos una vez.
 1. Comienza en la pantalla del menú principal de RetroArch.
 2. Ve a Ajustes --> Interfaz de usario. Configura "Mostrar ajustes avanzados" en ON.
 3. Ve a Ajustes --> Red. Pon "Comandos de red" en ON. (Se encuentra bajo Request Device 16.) Deja en 55355 el valor por defecto,
- el Puerto de comandos de red.
+   el Puerto de comandos de red. \
-
+   ![Captura de pantalla del ajuste Comandos de red](../../generic/docs/retroarch-network-commands-en.png)
-![Captura de pantalla del ajuste Comandos de red](/static/generated/docs/A%20Link%20to%20the%20Past/retroarch-network-commands-en.png)
 4. Ve a Menú principal --> Actualizador en línea --> Descargador de núcleos. Desplázate y selecciona "Nintendo - SNES /
    SFC (bsnes-mercury Performance)".
 

worlds/alttp/docs/multiworld_fr.md

@@ -89,9 +89,8 @@ Vous n'avez qu'à faire ces étapes qu'une fois.
 1. Entrez dans le menu principal RetroArch
 2. Allez dans Réglages --> Interface utilisateur. Mettez "Afficher les réglages avancés" sur ON.
 3. Allez dans Réglages --> Réseau. Mettez "Commandes Réseau" sur ON. (trouvé sous Request Device 16.) Laissez le 
-Port des commandes réseau à 555355.
+   Port des commandes réseau à 555355. \
-
+   ![Screenshot of Network Commands setting](../../generic/docs/retroarch-network-commands-fr.png)
-![Screenshot of Network Commands setting](/static/generated/docs/A%20Link%20to%20the%20Past/retroarch-network-commands-fr.png)
 4. Allez dans Menu Principal --> Mise à jour en ligne --> Téléchargement de cœurs. Descendez jusqu'a"Nintendo - SNES / SFC (bsnes-mercury Performance)" et 
    sélectionnez le.
 

worlds/dkc3/docs/setup_en.md

@@ -111,9 +111,8 @@ You only have to do these steps once. Note, RetroArch 1.9.x will not work as it
 1. Enter the RetroArch main menu screen.
 2. Go to Settings --> User Interface. Set "Show Advanced Settings" to ON.
 3. Go to Settings --> Network. Set "Network Commands" to ON. (It is found below Request Device 16.) Leave the default
-   Network Command Port at 55355.
+   Network Command Port at 55355. \
-
+  ![Screenshot of Network Commands setting](../../generic/docs/retroarch-network-commands-en.png)
-![Screenshot of Network Commands setting](/static/generated/docs/A%20Link%20to%20the%20Past/retroarch-network-commands-en.png)
 4. Go to Main Menu --> Online Updater --> Core Downloader. Scroll down and select "Nintendo - SNES / SFC (bsnes-mercury
    Performance)".
 

worlds/factorio/docs/setup_en.md

@@ -92,7 +92,7 @@ appropriate to your operating system, and extract the folder to a convenient loc
 Archipelago is to place the extracted game folder into the `Archipelago` directory and rename it to just be "Factorio".
 
 
-![Factorio Download Options](/static/generated/docs/Factorio/factorio-download.png)
+![Factorio Download Options](factorio-download.png)
 
 Next, you should launch your Factorio Server by running `factorio.exe`, which is located at: `bin/x64/factorio.exe`. You
 will be asked to log in to your Factorio account using the same credentials you used on Factorio's website. After you
@@ -122,7 +122,7 @@ This allows you to host your own Factorio game.
    Archipelago if you chose to include it during the installation process.
 6. Enter `/connect [server-address]` into the input box at the bottom of the Archipelago Client and press "Enter"
 
-![Factorio Client for Archipelago Connection Command](/static/generated/docs/Factorio/connect-to-ap-server.png)
+![Factorio Client for Archipelago Connection Command](connect-to-ap-server.png)
 
 7. Launch your Factorio Client
 8. Click on "Multiplayer" in the main menu

worlds/ffmq/docs/setup_en.md

@@ -115,9 +115,8 @@ You only have to do these steps once. Note, RetroArch 1.9.x will not work as it
 1. Enter the RetroArch main menu screen.
 2. Go to Settings --> User Interface. Set "Show Advanced Settings" to ON.
 3. Go to Settings --> Network. Set "Network Commands" to ON. (It is found below Request Device 16.) Leave the default
-   Network Command Port at 55355.
+   Network Command Port at 55355. \
-
+  ![Screenshot of Network Commands setting](../../generic/docs/retroarch-network-commands-en.png)
-![Screenshot of Network Commands setting](/static/generated/docs/A%20Link%20to%20the%20Past/retroarch-network-commands-en.png)
 4. Go to Main Menu --> Online Updater --> Core Downloader. Scroll down and select "Nintendo - SNES / SFC (bsnes-mercury
    Performance)".
 

worlds/ffmq/docs/setup_fr.md

@@ -123,10 +123,8 @@ Vous ne devez faire ces étapes qu'une fois. À noter que RetroArch 1.9.x ne fon
 1. Entrez dans le menu principal de RetroArch.
 2. Allez dans Settings --> User Interface. Activez l'option "Show Advanced Settings".
 3. Allez dans Settings --> Network. Activez l'option "Network Commands", qui se trouve sous "Request Device 16". 
-   Laissez le "Network Command Port" à sa valeur par defaut, qui devrait être 55355.
+   Laissez le "Network Command Port" à sa valeur par defaut, qui devrait être 55355. \
-
+   ![Capture d'écran du menu Network Commands setting](../../generic/docs/retroarch-network-commands-fr.png)
-
-![Capture d'écran du menu Network Commands setting](/static/generated/docs/A%20Link%20to%20the%20Past/retroarch-network-commands-en.png)
 4. Allez dans le Menu Principal --> Online Updater --> Core Downloader. Trouvez et sélectionnez "Nintendo - SNES / SFC (bsnes-mercury
    Performance)".
 

worlds/ladx/docs/setup_en.md

@@ -73,9 +73,8 @@ You only have to do these steps once. Note, RetroArch 1.9.x will not work as it
 1. Enter the RetroArch main menu screen.
 2. Go to Settings --> User Interface. Set "Show Advanced Settings" to ON.
 3. Go to Settings --> Network. Set "Network Commands" to ON. (It is found below Request Device 16.) Leave the default
-   Network Command Port at 55355.
+   Network Command Port at 55355. \
-
+   ![Screenshot of Network Commands setting](../../generic/docs/retroarch-network-commands-en.png)
-![Screenshot of Network Commands setting](/static/generated/docs/A%20Link%20to%20the%20Past/retroarch-network-commands-en.png)
 4. Go to Main Menu --> Online Updater --> Core Downloader. Scroll down and select "Nintendo - Gameboy / Color (SameBoy)".
 
 #### BizHawk 2.8 or newer (older versions untested)

worlds/landstalker/docs/landstalker_setup_en.md

@@ -48,7 +48,7 @@ A window will open with a few settings to enter:
 - **Slot name**: Put the player name you specified in your YAML config file in this field.
 - **Password**: If the server has a password, put it there.
 
-![Landstalker Archipelago Client user interface](/static/generated/docs/Landstalker%20-%20The%20Treasures%20of%20King%20Nole/ls_guide_ap.png)
+![Landstalker Archipelago Client user interface](ls_guide_ap.png)
 
 Once all those fields were filled appropriately, click on the `Connect to Archipelago` button below to try connecting to
 the Archipelago server.
@@ -67,7 +67,7 @@ You should see a window with settings to fill:
 - **Output ROM directory**: This is where the randomized ROMs will be put. No need to change this unless you want them 
   to be created in a very specific folder.
 
-![Landstalker Archipelago Client user interface](/static/generated/docs/Landstalker%20-%20The%20Treasures%20of%20King%20Nole/ls_guide_rom.png)
+![Landstalker Archipelago Client user interface](ls_guide_rom.png)
 
 There also a few cosmetic options you can fill before clicking the `Build ROM` button which should create your 
 randomized seed if everything went right.
@@ -83,7 +83,7 @@ the items you have received from other players.
 
 You should see the following window:
 
-![Landstalker Archipelago Client user interface](/static/generated/docs/Landstalker%20-%20The%20Treasures%20of%20King%20Nole/ls_guide_emu.png)
+![Landstalker Archipelago Client user interface](ls_guide_emu.png)
 
 As written, you have to open the newly generated ROM inside either Retroarch or Bizhawk using the Genesis Plus GX core. 
 Be careful to select that core, because any other core (e.g. BlastEm) won't work.
@@ -116,6 +116,6 @@ The client is packaged with both an **automatic item tracker** and an **automati
 If you don't know all checks in the game, don't be afraid: you can click the `Where is it?` button that will show 
 you a screenshot of where the location actually is.
 
-![Landstalker Archipelago Client user interface](/static/generated/docs/Landstalker%20-%20The%20Treasures%20of%20King%20Nole/ls_guide_client.png)
+![Landstalker Archipelago Client user interface](ls_guide_client.png)
 
-Have fun!
+Have fun!

worlds/lufia2ac/docs/setup_en.md

@@ -106,9 +106,8 @@ You only have to do these steps once. Note, RetroArch 1.9.x will not work as it
 1. Enter the RetroArch main menu screen.
 2. Go to Settings --> User Interface. Set "Show Advanced Settings" to ON.
 3. Go to Settings --> Network. Set "Network Commands" to ON. (It is found below Request Device 16.) Leave the default
-   Network Command Port at 55355.
+   Network Command Port at 55355. \
-
+   ![Screenshot of Network Commands setting](../../generic/docs/retroarch-network-commands-en.png)
-![Screenshot of Network Commands setting](/static/generated/docs/A%20Link%20to%20the%20Past/retroarch-network-commands-en.png)
 4. Go to Main Menu --> Online Updater --> Core Downloader. Scroll down and select "Nintendo - SNES / SFC (bsnes-mercury
    Performance)".
 

worlds/oot/docs/setup_de.md

@@ -84,7 +84,7 @@ Wenn du einer Multiworld beitrittst, wirst du gefordert eine YAML-Datei bei dem
 erhälst du (in der Regel) einen Link vom Host der Multiworld. Dieser führt dich zu einem Raum, in dem alle
 teilnehmenden Spieler (bzw. Welten) aufgelistet sind. Du solltest dich dann auf **deine** Welt konzentrieren
 und klicke dann auf `Download APZ5 File...`.
-![Screenshot of a Multiworld Room with an Ocarina of Time Player](/static/generated/docs/Ocarina%20of%20Time/MultiWorld-room_oot.png)
+![Screenshot of a Multiworld Room with an Ocarina of Time Player](MultiWorld-Room_oot.png)
 
 Führe die `.apz5`-Datei mit einem Doppelklick aus, um deinen Ocarina Of Time-Client zu starten, sowie das patchen
 deiner ROM. Ist dieser Prozess fertig (kann etwas dauern), startet sich der Client und der Emulator automatisch

worlds/sm/docs/multiworld_en.md

@@ -124,9 +124,8 @@ You only have to do these steps once. Note, RetroArch 1.9.x will not work as it
 1. Enter the RetroArch main menu screen.
 2. Go to Settings --> User Interface. Set "Show Advanced Settings" to ON.
 3. Go to Settings --> Network. Set "Network Commands" to ON. (It is found below Request Device 16.) Leave the default
-   Network Command Port at 55355.
+   Network Command Port at 55355. \
-
+  ![Screenshot of Network Commands setting](../../generic/docs/retroarch-network-commands-en.png)
-![Screenshot of Network Commands setting](/static/generated/docs/A%20Link%20to%20the%20Past/retroarch-network-commands-en.png)
 4. Go to Main Menu --> Online Updater --> Core Downloader. Scroll down and select "Nintendo - SNES / SFC (bsnes-mercury
    Performance)".
 

worlds/smw/docs/setup_en.md

@@ -100,9 +100,8 @@ You only have to do these steps once. Note, RetroArch 1.9.x will not work as it
 1. Enter the RetroArch main menu screen.
 2. Go to Settings --> User Interface. Set "Show Advanced Settings" to ON.
 3. Go to Settings --> Network. Set "Network Commands" to ON. (It is found below Request Device 16.) Leave the default
-   Network Command Port at 55355.
+   Network Command Port at 55355. \
-
+   ![Screenshot of Network Commands setting](../../generic/docs/retroarch-network-commands-en.png)
-![Screenshot of Network Commands setting](/static/generated/docs/A%20Link%20to%20the%20Past/retroarch-network-commands-en.png)
 4. Go to Main Menu --> Online Updater --> Core Downloader. Scroll down and select "Nintendo - SNES / SFC (bsnes-mercury
    Performance)".
 

worlds/smz3/docs/multiworld_en.md

@@ -120,9 +120,8 @@ You only have to do these steps once. Note, RetroArch 1.9.x will not work as it
 1. Enter the RetroArch main menu screen.
 2. Go to Settings --> User Interface. Set "Show Advanced Settings" to ON.
 3. Go to Settings --> Network. Set "Network Commands" to ON. (It is found below Request Device 16.) Leave the default
-   Network Command Port at 55355.
+   Network Command Port at 55355. \
-
+   ![Screenshot of Network Commands setting](../../generic/docs/retroarch-network-commands-en.png)
-![Screenshot of Network Commands setting](/static/generated/docs/A%20Link%20to%20the%20Past/retroarch-network-commands-en.png)
 4. Go to Main Menu --> Online Updater --> Core Downloader. Scroll down and select "Nintendo - SNES / SFC (bsnes-mercury
    Performance)".
 

worlds/soe/docs/multiworld_en.md

@@ -108,8 +108,8 @@ You only have to do these steps once.
 1. Enter the RetroArch main menu screen.
 2. Go to Settings --> User Interface. Set "Show Advanced Settings" to ON.
 3. Go to Settings --> Network. Set "Network Commands" to ON. (It is found below Request Device 16.) Leave the default
-   Network Command Port at 55355.
+   Network Command Port at 55355. \
-![Screenshot of Network Commands setting](/static/generated/docs/A%20Link%20to%20the%20Past/retroarch-network-commands-en.png)
+   ![Screenshot of Network Commands setting](../../generic/docs/retroarch-network-commands-en.png)
 4. Go to Main Menu --> Online Updater --> Core Downloader. Scroll down and select "Nintendo - SNES / SFC (bsnes-mercury
    Performance)".
 

worlds/zillion/docs/setup_en.md

@@ -20,9 +20,8 @@ RetroArch 1.9.x will not work, as it is older than 1.10.3.
    - "Sega - MS/GG/MD/CD (Genesis Plus GX)
 3. Go to Settings --> User Interface. Set "Show Advanced Settings" to ON.
 4. Go to Settings --> Network. Set "Network Commands" to ON. (It is found below Request Device 16.) Leave the default
-   Network Command Port at 55355.
+   Network Command Port at 55355. \
-
+   ![Screenshot of Network Commands setting](../../generic/docs/retroarch-network-commands-en.png)
-![Screenshot of Network Commands setting](/static/generated/docs/A%20Link%20to%20the%20Past/retroarch-network-commands-en.png)
 
 ### Linux Setup