problem-specifications
problem-specifications copied to clipboard
exercism
[binary-search-tree] Four SVG graphs
Hello. Thanks for opening a PR on Exercism. We are currently in a phase of our journey where we have paused community contributions to allow us to take a breather and redesign our community model. You can learn more in this blog post. As such, all issues and PRs in this repository are being automatically closed.
That doesn't mean we're not interested in your ideas, or that if you're stuck on something we don't want to help. The best place to discuss things is with our community on the Exercism Community Forum. You can use this link to copy this into a new topic there.
Note: If this PR has been pre-approved, please link back to this PR on the forum thread and a maintainer or staff member will reopen it.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Are these image urls auto-signed @iHiD because right now they don't work.
This replaces ASCII art with links. Is this intentional? I expected images instead of links.
Well spottted @MatthijsBlom ! I have moved them inline. 👍
GitHub Preview ( and Gmail ) will still not show them due to site-wide SVG scrubbing due to the potential of JavaScript embedding within SVG. A separation of concern between data and executable seems difficult to maintain : see the historical sagas with Microsoft Word Documents, and also PDFs.
An interesting related read on SVG delineation at mime-type.
GitHub Preview ( and Gmail ) will still not show them
They do show up for me:
Thanks -- they didn't show up in dark mode as the background is transparent and the image was not inverted with dark mode. ( They didn't work at all in the past. )
The image not sticking out against dark background sounds like a potential problem for the website as well.
Happy to adjust. Are image backgrounds meant to be a solid colour or transparent ? I don't see any documentation for exercism-images .
Is the page CSS inaccessible to the SVG? It seems near-ideal to have these images have the same color as the surrounding text.
Next best thing, I guess, would be to have the drawing color be the background inverted, or something like that.
Is the page CSS inaccessible to the SVG?
No and that's why I set the background transparent. You only have a single resource then which can be automatically adjusted on light/dark mode preference.
@dem4ron : Does an Exercism CSS class exist for labelling an image as suitable for inversion in dark mode ? It seems they are not all inverted automatically in dark mode since some are not suitable for inversion.
So it seems the transparent background is correctly inverted on change of light/dark theme. It is the foreground SVG that is not inverted. If our markdown flavour supports pandoc attribute syntax, we could label the image as fully invertible :
{.invertible}
A compromise approach is to make the stroke on the image a middle gray which should retain enough contrast with the background switching but the foreground not.
If our markdown flavour supports pandoc attribute synta
We don't support that IIRC
I wonder if we should keep some ASCII text. Might be better for accessibility.
Yeah, I don't think we want to lose the ascii text in the local (CLI) instructions. But it would be nice to have them on the website. I don't know how we do that :)
Can we put HTML into our Markdown ?
I couldn't seem to get an image fallback that is not an image ( ie ASCII Art ).
The closest I could get to a negotiated content/semantic approach was to hide the ASCII Art inside of the details of a figcaption . This seems to give the shell the ASCII Art, while not cluttering the online version with two representations ( unless you ask for it ).
Interesting @MatthijsBlom -- thanks ! 😀
Mermaid leans in a more declarative and semantic way if we're looking towards that approach.
The SVG images have landed:
https://github.com/exercism/images/pull/31
This original ASCII art has been kept for the shell and mirrors what we did with Euclid's Eggs:
https://github.com/exercism/problem-specifications/blob/main/exercises/eliuds-eggs/introduction.md?plain=1