fix(tutorials): fix nav footers, restore image captions, add breadcrumb

Address a batch of rendering and consistency issues found reviewing the
GitHub Pages site.

Navigation footers:
- Correct Next/Previous labels that named the wrong step across the
  walkthrough (34, 35 and 9 more: 15, 16, 18, 19, 23, 24, 30, 32, 36);
  link targets were right, only the display text was wrong.
- OData V4: add the missing Next on step 9 and Previous on step 10,
  drop the bogus Next on the last step (11) that looped back to step 1.
- Normalize footer shape across tutorials: collapse the doubled `***`
  rule in the navigation steps, and reorder OData V4 so Next/Previous
  comes before Related Information (matching the other four tutorials).
- Document the canonical footer order in AGENTS.md.

Image captions (restore Demo Kit behavior):
- Auto-render a caption from each image's alt text in assets/js/custom.js
  (styled in assets/css/custom.css). Alt text was never removed; only
  the visible caption was lost in the migration.
- Remove the ~42 redundant hand-authored <sup> captions, folding their
  wording fixes back into the alt/title first so nothing is lost.

Broken OData V4 images:
- Fix multiline alt-text syntax in steps 2 and 4 (an image whose alt
  spans two lines does not render).
- Add the image files that were referenced but never committed:
  steps 9 and 11 from the SDK screenshots, steps 5 and 10 reuse the
  previous step's screenshot ("no visual change").

Quickstart overview:
- Replace the borrowed step-3 screenshot (which carried a copy-pasted
  Walkthrough alt text) with the correct SDK image, fix the alt text,
  and remove a stray trailing period.

Tutorial breadcrumb:
- Inject a "UI5 Tutorials > <Tutorial>" breadcrumb on every step page
  (tools/builder/prepare-gh-pages.js for GitHub Pages, tools/dev-server
  for local preview) so readers know which tutorial they are in and can
  return to its overview.

Author: petermuessig

AGENTS.md

@@ -76,7 +76,7 @@ Full author docs are in [CONTRIBUTING.md](CONTRIBUTING.md).
 Other conventions:
 
 - Callouts use `> :note:`, `> :tip:`, `> :info:` (custom syntax, not GitHub's `[!NOTE]` alerts).
-- Step navigation footer: `***` separator, then `**Next:** [Step N+1: <title>](../<NN+1>/README.md)` and `**Previous:** [Step N-1: <title>](../<NN-1>/README.md)`.
+- Step navigation footer: a single `***` separator, then `**Next:** [Step N+1: <title>](../<NN+1>/README.md)` and `**Previous:** [Step N-1: <title>](../<NN-1>/README.md)`. When a step also has a **Related Information** section, the order is Next/Previous first, then another `***`, then `**Related Information**` (matches all five tutorials). The first step has no `**Previous:**`; the last step has no `**Next:**`. The link display text must match the target step's actual title.
 - Preview images: descriptive `alt` text (no bare `![](…)`), optional `"title"` for the hover tooltip.
 - Do not add `<!-- loio… -->` markers or `<a name="loio…"/>` anchors — those are SAP-internal SDK artifacts.
 

assets/css/custom.css

@@ -165,4 +165,36 @@ li > section.ts-only, li > section.js-only {
 #__bs_notify__ {
     background-color: rgba(27, 32, 50, 0.3) !important;
     top: 40px !important;
+}
+
+/* Image captions rendered from each image's alt text (see renderImageCaptions
+   in assets/js/custom.js). Restores the SAP Demo Kit behavior of showing the
+   image description below the figure. */
+figure.img-figure {
+    margin: 16px 0;
+}
+
+figure.img-figure > .img-caption {
+    margin-top: 6px;
+    font-size: 90%;
+    font-style: italic;
+    color: var(--inactive-color);
+    text-align: center;
+}
+
+/* Breadcrumb shown at the top of each step page: "UI5 Tutorials › <Tutorial>".
+   Injected server-side (tools/builder/prepare-gh-pages.js for GitHub Pages,
+   tools/dev-server/server.js for local preview) so the reader knows which
+   tutorial they are in and can jump back to its overview. */
+.tutorial-breadcrumb {
+    margin-bottom: 16px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid var(--neutral-border);
+    font-size: 90%;
+    color: var(--inactive-color);
+}
+
+.tutorial-breadcrumb .tutorial-breadcrumb-sep {
+    margin: 0 6px;
+    color: var(--inactive-color);
 }

assets/js/custom.js

@@ -276,6 +276,60 @@ function updateAllCodeCouples(globalLang) {
 
 // initialization on startup
 
+/**
+ * Render each content image's `alt` text as a visible caption beneath it,
+ * mirroring the SAP Demo Kit behavior that was lost when the tutorials moved
+ * to GitHub Pages. The caption text lives only in the image's `alt` attribute
+ * (also used by screen readers and as the broken-image fallback), so there is
+ * a single source of truth.
+ *
+ * Idempotent: an image already wrapped in <figure class="img-figure"> is
+ * skipped, so re-running (e.g. after a language switch) does not duplicate.
+ */
+function renderImageCaptions() {
+	const images = document.querySelectorAll("img");
+	images.forEach((img) => {
+		const caption = (img.getAttribute("alt") || "").trim();
+		if (!caption) {
+			return; // no alt text -> no caption
+		}
+		if (img.closest("figure.img-figure")) {
+			return; // already processed
+		}
+
+		// A link-wrapped image is captioned via its anchor; otherwise the image
+		// itself is the wrap target.
+		const wrapTarget =
+			img.parentElement && img.parentElement.tagName === "A"
+				? img.parentElement
+				: img;
+		const host = wrapTarget.parentElement;
+		if (!host) {
+			return;
+		}
+
+		// Only caption block-level "preview" images — those that are the sole
+		// meaningful content of their containing block. This skips inline
+		// images sitting inside a line of prose (badges, inline icons), which
+		// should not get a centered caption. `host.textContent` is empty for a
+		// standalone image because the <img> contributes no text.
+		if (host.textContent.trim() !== "") {
+			return;
+		}
+
+		const figure = document.createElement("figure");
+		figure.classList.add("img-figure");
+
+		const figcaption = document.createElement("figcaption");
+		figcaption.classList.add("img-caption");
+		figcaption.textContent = caption;
+
+		wrapTarget.parentNode.insertBefore(figure, wrapTarget);
+		figure.appendChild(wrapTarget);
+		figure.appendChild(figcaption);
+	});
+}
+
 document.addEventListener("DOMContentLoaded", (event) => {
 	setTimeout(() => {
 		const lang = initializeLanguage();
@@ -285,5 +339,6 @@ document.addEventListener("DOMContentLoaded", (event) => {
 		addLanguageSwitchButtons();
 		updateAllCodeCouples(lang);
 		updatePrevNextLinks(lang);
+		renderImageCaptions();
 	});
 });

packages/navigation/steps/01/README.md

@@ -89,9 +89,6 @@ With the downloaded coding, you have an initial app with recommended settings th
 
 So far we have a basic app that does not really have any navigation or routing implemented. This will change in the next steps when we implement our first navigation features.
 
-***
-
-
 ***
 
 **Next:** [Step 2: Enable Routing](../02/README.md)

packages/navigation/steps/02/README.md

@@ -238,8 +238,6 @@ Create a file `Home.controller.ts` in the `webapp/controller` folder. The contro
 
 ***
 
-***
-
 **Next:** [Step 3: Catch Invalid Hashes](../03/README.md)
 
 **Previous:** [Step 1: Set Up the Initial App](../01/README.md)

packages/navigation/steps/03/README.md

@@ -160,8 +160,6 @@ Open the URL `index.html#/thisIsInvalid` in your browser. From now on the user w
 
 ***
 
-***
-
 **Next:** [Step 4: Add a *Back* Button to *Not Found* Page](../04/README.md)
 
 **Previous:** [Step 2: Enable Routing](../02/README.md)

packages/navigation/steps/04/README.md

@@ -231,8 +231,6 @@ The same applies to our `Home` controller, we now also inherit from the `BaseCon
 
 ***
 
-***
-
 **Next:** [Step 5: Display a Target Without Changing the Hash](../05/README.md)
 
 **Previous:** [Step 3: Catch Invalid Hashes](../03/README.md)

packages/navigation/steps/05/README.md

@@ -218,8 +218,6 @@ When we now click the *Back* button, it works as expected and brings us back to
 
 ***
 
-***
-
 **Next:** [Step 6: Navigate to Routes with Hard-Coded Patterns](../06/README.md)
 
 **Previous:** [Step 4: Add a *Back* Button to *Not Found* Page](../04/README.md)

packages/navigation/steps/06/README.md

@@ -265,8 +265,6 @@ Now you can open the app and press the *Show Employee List* button to navigate t
 
 ***
 
-***
-
 **Next:** [Step 7: Navigate to Routes with Mandatory Parameters](../07/README.md)
 
 **Previous:** [Step 5: Display a Target Without Changing the Hash](../05/README.md)

packages/navigation/steps/07/README.md

@@ -394,8 +394,6 @@ That’s it. You can go to `webapp/index.html#/employees` and click on any list
 
 ***
 
-***
-
 **Next:** [Step 8: Navigate with Flip Transition](../08/README.md)
 
 **Previous:** [Step 6: Navigate to Routes with Hard-Coded Patterns](../06/README.md)