fix(tutorials): fix nav footers, restore image captions, add breadcrumb - #329
Merged
Merged
Conversation
petermuessig
force-pushed
the
fix/tutorial-rendering-consistency
branch
from
August 12, 2026 21:02
6a3a63b to
36c8549
Compare
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.
petermuessig
force-pushed
the
fix/tutorial-rendering-consistency
branch
from
August 13, 2026 05:15
36c8549 to
fdd4b9a
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Follow-up to #327 addressing a further batch of rendering and consistency issues found while reviewing the GitHub Pages site.
Navigation footers
Nexton step 9 andPreviouson step 10, and removed the bogusNexton the last step (11) that looped back to step 1.***rule in the navigation steps (the "two gray lines"), and reordered OData V4 so Next/Previous comes before Related Information (matching the other four tutorials).AGENTS.md.Image captions (restore Demo Kit behavior)
assets/js/custom.jsnow auto-renders a caption from each image'salttext (styled inassets/css/custom.css). Alt text was never removed from the repo — only the visible caption was lost in the Demo Kit → Pages migration.<sup>captions, folding their wording fixes back into thealt/titlefirst so nothing is lost.Broken OData V4 images
alt-text syntax in steps 2 and 4 (an image whose alt spans two lines doesn't render).Quickstart overview
Tutorial breadcrumb
tools/builder/prepare-gh-pages.jsfor GitHub Pages,tools/dev-serverfor local preview) so readers know which tutorial they're in and can return to its overview.Verification
npm run typecheckpasses;npm run buildsucceeds.