mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-27 23:25:51 +00:00
Migrate content syntax via script
The changes in this commit were auto-generated by running tool/migrate.sh Following this commit, the Dactyl build no longer works but the Redocly build (mostly) should.
This commit is contained in:
mDuo13
@@ -7,21 +7,23 @@ blurb: Create diagrams that interact properly with light and dark mode settings.
|
||||
|
||||
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:
|
||||
|
||||
|
||||
|
||||
|
||||
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
|
||||
{{ include_svg("img/anatomy-of-a-ledger-complete.svg", "Figure 1: XRP Ledger Elements") }}
|
||||
[{% inline-svg file="/img/anatomy-of-a-ledger-complete.svg" /%}](/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.
|
||||
|
||||
The resulting SVG file is inlined directly into the Markdown file. One limitation is that you can't use it inside other Markdown structures such as bulleted lists or tables.
|
||||
|
||||
> **Note:** The filter source code is [`tool/filter_include_svg.py`](https://github.com/XRPLF/xrpl-dev-portal/blob/master/tool/filter_include_svg.py). This is also the reason that `lxml` is one of the dependencies for building the site.
|
||||
{% admonition type="info" name="Note" %}
|
||||
The filter source code is [`tool/filter_include_svg.py`](https://github.com/XRPLF/xrpl-dev-portal/blob/master/tool/filter_include_svg.py). This is also the reason that `lxml` is one of the dependencies for building the site.
|
||||
{% /admonition %}
|
||||
|
||||
## Making Diagrams
|
||||
|
||||
@@ -30,4 +32,4 @@ You have to take care when creating diagrams so that the recoloring applies corr
|
||||
- Create diagrams for light mode by default. Use a transparent background color.
|
||||
- Only use colors that the theme-aware diagrams code has mappings for. The code for this, including the full list of colors, is in [`styles/_diagrams.scss`](https://github.com/XRPLF/xrpl-dev-portal/blob/master/styles/_diagrams.scss). If needed, you can add new colors by extending the SCSS code. (Don't forget to re-export the CSS when you're done. See the [styles README](https://github.com/XRPLF/xrpl-dev-portal/blob/master/styles/README.md).)
|
||||
- Use actual vector shapes instead of embedded icons/images whenever possible. If you need to put text on top of an image, add a solid background to the text element and use one of the colors the theme has mappings for.
|
||||
- Don't layer transparent elements containing text on top of elements with different background colors. Apply a background color directly to the element that contains the text.
|
||||
- Don't layer transparent elements containing text on top of elements with different background colors. Apply a background color directly to the element that contains the text.
|
||||
|
||||
@@ -70,7 +70,7 @@ Example entry for a page that isn't translated:
|
||||
|
||||
## Where to Start
|
||||
|
||||
If you want to translate the XRP Ledger Dev Portal into your native language of choice, start with the ["What is the XRP Ledger?" page]({{target.github_forkurl}}/blob/{{target.github_branch}}/content/concepts/introduction/what-is-the-xrp-ledger.md), which introduces the core concepts behind the XRP Ledger.
|
||||
If you want to translate the XRP Ledger Dev Portal into your native language of choice, start with the {% repo-link path="content/concepts/introduction/what-is-the-xrp-ledger.md" %}"What is the XRP Ledger?" page{% /repo-link %}, which introduces the core concepts behind the XRP Ledger.
|
||||
|
||||
Save the file as `what-is-the-xrp-ledger.{language code}.md`, where `{language code}` is the [IETF BCP47](https://tools.ietf.org/html/bcp47) language code. (For example, "es" for Spanish, "ja" for Japanese, "zh-CN" for Simplified Chinese, "zh-TW" for Traditional Chinese as used in Taiwan, and so on.) Then open a [pull request](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/about-pull-requests) adding your file to this repository. One of the repository's maintainers can help with the other necessary setup to add the language to the site.
|
||||
|
||||
|
||||
@@ -93,7 +93,8 @@ The Markdown file itself should start with a frontmatter stanza such as the foll
|
||||
---
|
||||
html: the-rippled-server.html
|
||||
parent: concepts.html
|
||||
template: pagetype-category.html.jinja
|
||||
metadata:
|
||||
indexPage: true
|
||||
blurb: rippled is the core peer-to-peer server that manages the XRP Ledger. This section covers concepts that help you learn the "what" and "why" behind fundamental aspects of the rippled server.
|
||||
---
|
||||
```
|
||||
@@ -167,3 +168,6 @@ The fronmatter for a Markdown file in this repo can contain arbitrary key-value
|
||||
| `filters` | Array of Strings | A list of additional filters to use on this page. [Filters](https://github.com/ripple/dactyl/blob/master/README.md#filters) are Python scripts that provide additional pre- or post-processing of page contents. |
|
||||
| `canonical_url` | String | Provides the canonical URL for a page that takes query parameters. Search engines and other tools may use this when linking to the page. |
|
||||
| `embed_xrpl_js` | Boolean | Use `true` to have the latest version of [xrpl.js](https://js.xrpl.org) loaded on the page. |
|
||||
|
||||
|
||||
{% child-pages /%}
|
||||
|
||||
@@ -17,19 +17,19 @@ Separate setup (prerequisites) from usage from code development. These are each
|
||||
|
||||
## Description
|
||||
|
||||
|
||||
|
||||
|
||||
List what the sample demonstrates. If possible, each example should describe the steps to accomplish specific related tasks. (For example, create a NFT Sell Offer, Accept a Sell Offer, Delete a Sell Offer.) There should be enough conceptual information to understand what the tutorial illustrates, with links to additional conceptual information, if needed.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
|
||||
|
||||
|
||||
Provide links to any required software and to all of the example code needed to run the tutorial. If necessary, give simple instructions for using third-party tools, but provide a link to the source website for the customer to do a deeper dive at their leisure.
|
||||
|
||||
## Usage Example
|
||||
|
||||
|
||||
|
||||
|
||||
Start by providing a finished, working example of the tutorial application. This is an opportunity for immediate success working with the software to solve a problem.
|
||||
|
||||
@@ -39,16 +39,16 @@ Describe the sunny day scenario. The application should run without problems if
|
||||
|
||||
## Code Walkthrough
|
||||
|
||||
|
||||
|
||||
|
||||
Walk through the code, one chunk at a time. Don’t belabor topics that have been discussed in earlier examples. Provide sample code, but don’t provide exhaustive explanations for how to program underlying platforms like HTML syntax unless there is something unique to the implementation.
|
||||
|
||||
An important thing to emphasize is that every interaction with the XRPL is either a transaction or a request, and that all transactions and requests are essentially the same. The sample code we provide shows how to prepare the transaction or request, and how to process the returned results. Knowing how to submit and respond to one transaction or request gives a pretty good idea for how to submit and respond to any transaction or request.
|
||||
|
||||
(Technically there is third category, similar to a request: a notification from a subscription stream. See [Subscription Methods](subscription-methods.html).)
|
||||
(Technically there is third category, similar to a request: a notification from a subscription stream. See [Subscription Methods](../../references/http-websocket-apis/public-api-methods/subscription-methods/index.md).)
|
||||
|
||||
## See Also
|
||||
|
||||
|
||||
|
||||
|
||||
At the end of the tutorial, provide links to additional resources, conceptual information, and any tutorials that would be a sensible next step in the learning journey.
|
||||
|
||||
Reference in New Issue
Block a user