feat(examples): make long multi-file examples collapsible for better readability #206
Conversation
…ter UX on multi-file pages - Introduced a reusable Hugo shortcode: layouts/shortcodes/details.html - Wrapped long example-file blocks in collapsible <details> sections on: - community-provisioners/service - community-provisioners/dns - Applied consistent styling in assets/scss/examples.scss: - Light/dark mode support - Soft borders, spacing, and hover effects - Improved code block readability inside collapses Closes score-spec#201 Signed-off-by: Victor Ikeme <cloudikeme@gmail.com>
victor-ikeme
force-pushed
the
fix/collapsible-code-sections
branch
from
387e8e6 to
0666dc2
Compare
There was a problem hiding this comment.
Thanks for this, @victor-ikeme, this sounds promising!
2 feedback:
- The
...should be removed - Also, around the new expandable section, we should not have the "code highlight" surrounding it:
I'll let you check this, but by removing anything related to border and background in the details's CSS, we can land to something like this instead:
One these are fixed, we'll discussed if we need to include this in the script importing the content or if we need to manually set this up.
| {{% /details %}} | ||
|
|
||
| --- | ||
| ... |
There was a problem hiding this comment.
| ... |
| {{% /details %}} | ||
|
|
||
| --- | ||
| ... |
There was a problem hiding this comment.
| ... |
| details { | ||
| margin: 1.2rem 0; | ||
| padding: 0.6rem 1rem; | ||
| border: 1px solid #ccc; |
There was a problem hiding this comment.
| border: 1px solid #ccc; |
| padding: 0.6rem 1rem; | ||
| border: 1px solid #ccc; | ||
| border-radius: 6px; | ||
| background-color: #f9f9f9; |
There was a problem hiding this comment.
| background-color: #f9f9f9; |
| cursor: pointer; | ||
| margin: -0.4rem -1rem 0.6rem -1rem; | ||
| padding: 0.6rem 1rem; | ||
| background-color: #ececec; |
There was a problem hiding this comment.
| background-color: #ececec; |
| padding: 0.6rem 1rem; | ||
| background-color: #ececec; | ||
| border-radius: 6px 6px 0 0; | ||
| transition: background-color 0.2s ease; |
There was a problem hiding this comment.
| transition: background-color 0.2s ease; |
Oh ok got it , |
|
Hi @victor-ikeme, any updates on this one? Thanks. |
I should get on it this week |
2 participants
Summary
This pull request enhances the usability of multi-file examples in the Score.dev documentation hub by wrapping lengthy
example-fileblocks inside collapsible<details>sections.Changes Introduced
layouts/shortcodes/details.htmlexamples/score/resources/community-provisioners/service.mdexamples/score/resources/community-provisioners/dns.mdexample-fileblock using:{{% details "filename.yaml" %}} ```yaml {{% /details %}} ...content...Style Improvements
Updated
assets/scss/examples.scsswith design-consistent styling for collapsible sections:Motivation
Long pages containing multiple back-to-back code examples are hard to scan. This update allows readers to easily browse files by collapsing sections by default and expanding only what’s relevant to them.
Notes for Reviewers
<summary>titleRelated Issue
Fixes #201
What is your testing strategy?
Ran hugo server locally and tested both pages extensively, also in mobile view.
Have you read the Contributing Guidelines?