Skip to content

feat(examples): make multi-file examples collapsible - #326

Open
Akash3121 wants to merge 2 commits into
score-spec:mainfrom
Akash3121:akash3121-fix/collapsible-code-sections
Open

Akash3121 wants to merge 2 commits into
score-spec:mainfrom
Akash3121:akash3121-fix/collapsible-code-sections

Conversation

@Akash3121

Copy link
Copy Markdown

What is the motivation?

Some pages in the Score example hub display several large example files consecutively. This makes the pages long and difficult to scan when readers only need to inspect one particular file.

This change builds on the original approach proposed by @victor-ikeme in #206 and incorporates the maintainer feedback left on that pull request. As the original pull request has not been updated for some time, this follow-up brings the work onto the current main branch and carries it through to completion.

The implementation has been updated for the current generated content and moved into the example-page generator so that future content regeneration preserves the behavior.

Is this related to any issues?

Fixes #201.

Supersedes #206, originally opened by victor. This pull request retains the original idea, applies the requested review changes, updates it for the current content, and implements the behavior in the content generator so it remains consistent after regeneration.

What does this change do?

  • Adds a reusable details shortcode using native HTML <details> and <summary> elements, with no JavaScript dependency.
  • Updates the example-page generator to wrap each example file in a collapsed section when two or more files are displayed together.
  • Uses the filename as the expandable section title.
  • Leaves single-file sections expanded and unchanged.
  • Explicitly leaves the score/specification/files example inline because fileA.txt and score.yaml are easier to understand together.
  • Adds minimal styling for spacing, pointer behavior, and summary text weight.
  • Does not add borders, backgrounds, hover backgrounds, or transitions, following the review feedback on feat(examples): make long multi-file examples collapsible for better readability #206.
  • Regenerates the affected example pages from the updated generator.

This is an adaptation rather than a direct copy of #206. The shortcode concept and filename-based summaries come from the original contribution, while the generator integration, current generated output, conditional multi-file behavior, specification-page exception, and revised styling are new.

What is your testing strategy?

  • Regenerated the example pages using Node.js 20.
  • Ran dprint against all changed files.
  • Built the complete site using the repository-pinned Hugo Extended 0.123.8.
  • Verified all affected pages return successfully from the local Hugo server.
  • Confirmed collapsible sections are closed by default and reopen correctly when selected.
  • Confirmed filenames are displayed as summary titles and expanded sections retain their code and GitHub source links.
  • Confirmed the Service page renders eight collapsible files and the DNS page renders six.
  • Confirmed score/specification/files contains no collapsible sections and continues to display fileA.txt and score.yaml inline.
  • Confirmed no literal ... placeholders or new border/background styling are present.
  • Checked the affected pages in both tabs, light/dark mode, and a narrow mobile viewport.

Local verification: ran hugo.exe server

Primary pages checked:

Have you read the Contributing Guidelines?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Place example code file in collapsible sections

1 participant