mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-19 19:25:51 +00:00
72002fd773
- SVG diagrams can adapt to the visual theme of the site through CSS. - Use the include_svg filter to include a diagram that adapts to the theme. - The styles/_diagrams.scss file controls the color mappings for theme-aware digrams. - Theme-aware diagrams are limited to specific colors and diagram styles. Use UMLet or Google Draw and confirm that the diagram is still legible when you build it. - This commit updates existing diagrams in most places to be theme-aware.
22 lines
1.6 KiB
Markdown
22 lines
1.6 KiB
Markdown
# Image Sources
|
|
|
|
This folder has the source files for diagrams used in the dev portal, where possible. `.txt` files contain hyperlinks to diagrams created with Google Draw or other cloud software.
|
|
|
|
## Diagram Tech
|
|
|
|
This repo uses a custom `include_svg` Dactyl filter to include SVG diagram files inline in the generated HTML. Among other things, this lets us recolor the diagrams to match the site's theme (so diagrams could, for example, automatically get recolored to be compatible with both light and dark themes).
|
|
|
|
Some tips to using it correctly:
|
|
|
|
- Use either [UMLet](http://umlet.com/) or Google Draw to make the diagrams, then export them as SVG.
|
|
- Put the SVG in the `img/` folder so the stand-alone file also gets copied to the output. The filter makes the diagram a link to its original file so people can click it to see a zoomed-in version.
|
|
- The [`_diagrams.scss` file](../../styles/_diagrams.scss) defines the remapped colorings for the diagrams. If you use a color that isn't remapped, and it looks bad, you need to edit this file and [re-build the CSS](../../styles/README.md).
|
|
- The recoloring may not be capable of handling text on top of several different background colors, because it doesn't have a way of recognizing what text is on top of what else. Use with care.
|
|
|
|
|
|
This error happens if you try to include a file that isn't text-based (for example, if you try to `include_svg()` on a PNG file instead of SVG):
|
|
|
|
```
|
|
Preprocessor error in page <Page 'Transaction Queue' (transaction-queue.html)>: 'utf-8' codec can't decode byte 0x89 in position 0: invalid start byte.
|
|
```
|