ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-20 03:35:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Re-levelization: move non-docs content, rename content→docs

Browse Source 
For better URLs, the content folder has been renamed 'docs' and all
other files have been moved up a level. Also, non-docs images have been
moved to the static folder at the top level where they belong.

Many relative paths had to be fixed to make this work.
This commit is contained in:
mDuo13
2024-01-31 17:53:52 -08:00
parent 971053ebcc
commit 7645140477
844 changed files with 3136 additions and 3458 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
resources/contribute-documentation/creating-diagrams.md
View File

@@ -8,14 +8,14 @@ seo:
The site contains code to automatically recolor SVG diagrams for light and dark mode. This is more than just inverting images. The recoloring keeps gradients going the same direction (so that things don't look bottom-lit) and replaces colors with equivalents that fit with the theme rather than their inverse. For example, "Ripple blue" gets recolored to XRPL green, not its inverse orange. Example:
![Comparison of invert and theme-aware recoloring](/img/theme-aware-recolor.png)
![Comparison of invert and theme-aware recoloring](/docs/img/theme-aware-recolor.png)
Theme-aware recoloring uses a single source file in SVG format for diagrams, and produces diagrams that are recolored to match the current theme (light/dark) using CSS. If the user changes their theme, the diagrams immediately change to match it.
To include a theme-aware diagram in a document, use the `include_svg` filter with syntax such as the following:
```jinja
[{% inline-svg file="/img/anatomy-of-a-ledger-complete.svg" /%}](/img/anatomy-of-a-ledger-complete.svg "Figure 1: XRP Ledger Elements")
[{% inline-svg file="/docs/img/anatomy-of-a-ledger-complete.svg" /%}](/docs/img/anatomy-of-a-ledger-complete.svg "Figure 1: XRP Ledger Elements")
```
Leave empty lines before and after this syntax. The SVG file in question should be in the [`img/`](https://github.com/XRPLF/xrpl-dev-portal/tree/master/img) folder at the top level of the repo, or a subfolder of it. The second argument is _title text_, which appears when the user hovers their mouse over the diagram, and can also be used by other software (such as screen readers) to caption the diagram.