[DRAFT] Example of what the course would look like with the new renderer #1216
Conversation
sakex
changed the title
src/components/language_picker.html
Outdated
| @@ -0,0 +1,39 @@ | |||
| {% import "Macros" as macros %} | |||
There was a problem hiding this comment.
Macros work (import the name defined in the book.toml and not the file name. You could name it with the file name too)
There was a problem hiding this comment.
I see! This is the difference in thinking: I was expecting the user to declare an include directory and then rely solely on the mechanisms in the template engine (import a file by it's relative path, for example).
I believe you've instead built more infrastructure to make it easier to use — but the problem with that is that the user now has to understand the custom logic here (and you and I have to document and maintain this).
There was a problem hiding this comment.
I want to support both options, but to do use a macro like this in index.hbs, you will need to write sometimes 4 { in a row {{{{ attribute | get(key="style") }}}}, I find that very clunky, when using HTML syntax is pretty easy to understand for people already writing HTML.
There was a problem hiding this comment.
You might even have to write 6 in a row when I think about it
There was a problem hiding this comment.
I want to support both options
Please don't: avoid building up your own vocabulary here since nobody but you will know about it 🙂 I would like us to have as little code to maintain as possible here.
src/components/language_picker.html
Outdated
| <button id="language-toggle{{ counter }}" class="icon-button" type="button" | ||
| title="Change language" aria-label="Change language" | ||
| aria-haspopup="true" aria-expanded="false" | ||
| aria-controls="language-list{{ counter }}" style="{{ attributes | get(key="style", default="") }}"> |
There was a problem hiding this comment.
Reading attributes passed in HTML
There was a problem hiding this comment.
This should go away in a MVP — I would like to keep this super simple at first.
src/components/language_picker.html
Outdated
| {% for identifier, language_name in get_context(key="output.i18n.languages") %} | ||
| <li role="none"> | ||
| <a id="{{ identifier }}" | ||
| href="{{ macros::get_rendered_path(identifier=identifier) }}" |
src/components/language_picker.html
Outdated
| href="{{ macros::get_rendered_path(identifier=identifier) }}" | ||
| style="color: inherit;"> | ||
| <button role="menuitem" class="theme {% if identifier == language %} theme-selected {% endif %}"> | ||
| {% include "Included" %} {{ language_name }} |
| @@ -0,0 +1,3 @@ | |||
| {% macro get_rendered_path(identifier) %} | |||
theme/index.hbs
Outdated
| } | ||
| </script> | ||
|
|
||
| <LanguagePicker style="color: red;"> |
There was a problem hiding this comment.
<LanguagePicker /> syntax is not supported
There was a problem hiding this comment.
For now tera syntax is not supported in index.hbs but I will add it later, it is going to look a bit ugly though.
src/components/language_picker.html
Outdated
| <script> | ||
| let langToggle = document.getElementById("language-toggle{{ counter }}"); | ||
| let langList = document.getElementById("language-list{{ counter }}"); | ||
| {% raw %} |
There was a problem hiding this comment.
We need a raw block for the Javascript block
There was a problem hiding this comment.
Okay, but then I think the {{ below has a { too many?
There was a problem hiding this comment.
Yes, that's a mistake actually (from copy pasting the HBS one), but still valid JS
Co-authored-by: Martin Geisler <[email protected]>
No description provided.