# Translate Template Strings <!-- See: https://hackmd.io/@signalwerk/BkWrH2ABt#/ --> <br /> <br /> <br /> <small>2021 · Stefan Huber</small> --- ## Translation · requirements 1. **bold & beautiful** normal 2. [Link](https://example.com/) --- ## Translation · HTML ```html <strong>bold &amp; beautiful</strong> normal ``` ```html <a href="https://example.com/">Link</a> ``` --- ## JavaScript · rendering ### Vue ```vue <span v-html="rawHtml"></span> ``` ### React ```mdx function MyComponent() { return <span dangerouslySetInnerHTML={rawHtml} /> } ``` --- ## Translation · HTML (errors) ```html <strong>bold & beautiful<strong /> normal ``` ```html <a href="https://example.com/>Link</a> ``` ### JavaScript · rendering ⚠️ destroys the rendering --- ## Translation · Markdown ```md **bold & beautiful** normal ``` ```md [Link](https://example.com/) ``` --- ## Translation · Markdown - simple - escaping less problematic (&, <, >) - well known since 2004 - [John Gruber](https://daringfireball.net/projects/markdown/syntax) (writer) - [Aaron Swartz](https://en.wikipedia.org/wiki/Aaron_Swartz) (writer/developer) --- ## JavaScript · rendering - Small tool: [mdast-util-from-markdown](https://www.npmjs.com/package/mdast-util-from-span-markdown) - Only [Span-Elements](https://daringfireball.net/projects/markdown/syntax#span) - very basic «parser» --- ## JavaScript · parser example ```js import fromMarkdown from "mdast-util-from-span-markdown"; fromMarkdown("**bold & beautiful** normal"); ``` ### result ```js [ { type: "strong", children: [ { type: "text", value: "bold & beautiful", }, ], }, { type: "text", value: "normal ", }, ]; ``` --- ## JavaScript · parser example ```js import fromMarkdown from "mdast-util-from-span-markdown"; fromMarkdown("[Link](https://example.com/)"); ``` ### result ```js [ { type: "link", url: "https://example.com", children: [ { type: "text", value: "Link", }, ], }, ]; ``` --- ### Vue · rendering ```vue <span> <span v-for="(node, index) in nodes" :key="index"> <strong v-else-if="mdTypes.STRONG === node.type"> <MDnode :nodes="node.children"></MDnode> </strong> <a v-else-if="mdTypes.LINK === node.type" :href="node.url"> <MDnode :nodes="node.children"></MDnode> </a> <span v-else-if="mdTypes.TEXT === node.type">{{ node.value }}</span> </span> </span> ``` --- ## Translation · Markdown (error) ```md **bold & beautiful* normal ``` ```md Link](https://example.com/) ``` ### JavaScript · rendering - **bold & beautiful* normal - Link](https://example.com/) --- ## More stuff... --- ## Pluralization ```md You selected one element. ``` ```md You selected 5 elements. ``` --- ## Pluralization ``` 1 – output: one element 2 – output: a pair 3 – output: 3 elements 4 – output: 4 elements … – output: @count elements ``` ### Translation ``` (1)[one element];(2)[a pair];(3-inf)[@count elements] ``` --- ## Thank you! `exit 0;` --- ## Questions?