{
"#title": "WDR Basic Render",
"subtitle": "Web Data Render",
"name": "WDR",
"menu": "[Home](/wdr/) [Get Started](/wdr/start.html) [Updates](/wdr/updates.html)",
"title": "Basic Render",
"description": [
"This is a basic render to build the HTML page from JSON.",
"If you didn't already, follow the instructions on [Get Started](/wdr/start.html) before following this guide",
"It is easy to use and created for a fast start. Just create the JSON data with the instructions below and render the page using the script.",
"Although limited, this render is very powerful and can render a great variety of elements, including headers, paragraphs, images, links, and sections. You can customize the style with CSS and use basic formatting.",
"This website uses the basic render.✨"
],
"install": {
"title": "Setup",
"#version": "1.2.0",
"description": [
"Download the script [render-basic-{{ install.#version }}.js](//devgutt.github.io/wdr/dist/render-basic-{{ install.#version }}.js) and include it directly in the initiator:"
],
"instructions": [
"```{\n \"title\": \"Example Page\",\n \"description\": \"This is an example.\",\n \"#render\": \"<html hidden><meta charset=utf-8><script src=/render-basic-{{ install.#version }}.js></script></html>\"\n}```"
]
},
"style": {
"title": "Styling",
"description": [
"Every element rendered includes its `key` name on the `class` attribute. The layout can be customized via CSS.",
"To add a custom CSS, include a `css` key on the `#render` element. For example:",
"```\"#render\": {\n \"_\": \"<html hidden><script src=/dist/render-basic-1.0.0.js></script></html>\",\n \"css\": \"/css/main.css\"\n}```",
"The CSS will be loaded automatically."
]
},
"formatting": {
"title": "Basic formatting",
"description": [
"The render accepts some basic formatting:",
"`**` or `__` for **bold**",
"`*` or `_` for *italic*",
"`~~` for ~~strike-through~~",
"`\\n` for a new line",
"`[text](url)` to create a link with the label `text` to `url`. If `text` is not informed, `url` is used in the label instead.",
"`` to create an image with the alt `text` with `url`.",
"`#`, `##`, … for h1...6 tags",
"Use ` for inline code",
"Use ``` for code blocks"
]
},
"keys": {
"title": "Keys with special meanings",
"description": [
"`#` at the start of the key will not be rendered.",
"`#title`: Title of the page. If not informed, `title` is used.",
"`title`: Transforms the content to HTML h1...6 tags.",
"If the title key is inside the root, it will transform into h1. If it is inside an object, it will transform into h2 to h6, for every new nested object."
]
},
"support": {
"github": "The code is available on [GitHub](//github.com/devgutt/wdr-render-basic)."
},
"about": {
"logo": ""
},
"#render": {
"_": "",
"css": "/wdr/css/main.css"
}
}