[BUG] 1.1 Software development steps page does not finish rendering\loading on github.io

[MrPikeTLCC]

Summary

Content breaks in 1.1 Software development steps after\during the example Solution Design Example.
The index.md seems fine when viewing on github.com - but using github.io, the rest of the page does not load after the Solution Design example (and the example appears blank, even when enlarged), though the content list includes everything.

Location

Page URL:
/Year11/ProgrammingFundamentals/Chapter-01-Software-Development/01-01-Software-Development-Steps/

Content Section:
Solution Design

Steps to reproduce

1. Go to Year11/ProgrammingFundamentals/Chapter-01-Software-Development/01-01-Software-Development-Steps on github.io via navigation or direct link
2. Scroll down the page
3. Note that the content stops at the Solution Design example, and the example is blank.

Expected result

Expecting to see the solution design example and the rest of the page all the way down to recap \ was this page useful.

Actual result

Solution design example is blank. Page content ends at that point. No errors, see screenshot below.

Relevant log output (optional)

Screenshots / recordings (optional)

Operating system

Windows

Browser

Microsoft Edge

Device

Laptop

Component

Docs content

Additional context (optional)

I've tested this on Chrome and Edge.

Checklist

• I searched existing issues and didn’t find a duplicate
• I’ve provided steps to reproduce or a minimal example
• I’ve removed sensitive data from logs/screenshots

[MrPikeTLCC]

It occured to me that I was viewing the page in a narrow viewport as it was only occupying half my screen. I've tried and found it is still an issue when using full screen layout:

[Eatham532]

Hi thanks for reporting. I am reproduced the issue on chrome. However firefox seems to not be affected. Can you reproduce a similar result?

[MrPikeTLCC]

Yes, I had to install firefox to test, but it does work there. The page renders to the end and there is content in the Grade Calculator Example.

[MrPikeTLCC]

Take this with a grain of salt, but I put the output HTML into ChatGPT to ask if it could see where the break was occurring, and it suggested that mixing rendered Markdown with Kroki/Blockdiag output was creating invalid SVG in the example.

I tried to fork and test removing that block to see if I could get the page to render, but I'm not experienced with publishing to GitHub Pages and quickly realised that the default theme on my attempt doesn't render any of your fancy expanding panels or examples at all, so it wasn't a helpful test for you.

[Eatham532]

Ok appreciate your help. I will have a look at it soon when I have the time.

if you want help to test a deployment. I have create a github action script to help. Just select the deploy docs action. And make sure to set the settings to what ive got in the image to make sure to just deploy and do nothing else. Looks like there is a typo that i wasnt bothered to fix... oops.