latte: added example how latte seen template

latte/bg/safety-first.texy

@@ -203,29 +203,29 @@ Latte срещу наивни системи .[#toc-latte-vs-naive-systems]
 <div class="juxtapose juxtapose--dark-handle" data-startingposition="80" data-animation="juxtapose-wiper">
 
 ```twig .{file:Twig template as seen by Twig himself}
-░░░░░░░░░░░░░░░░░{{ text }}░░░░░░░
-░░░░░░░░░░░░░░░░{{ text }}░░░░░░░░░
-░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ text }}░░░░░░░░░
-░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ text }}░░░░░░░░
-░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ text }}░░░░░░
-░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ text }}░░
-░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ text }}░░░░░░░░░
-░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ text }}░░░░░░░░░
-░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ text }}░░░░░░░░░░░
-░░░░░░░░░░░░░░░░░░░{{ text }}░░░░
+░░░░░░░░░░░░░░░░░{{ foo }}░░░░░░░
+░░░░░░░░░░░░░░░░{{ foo }}░░░░░░░░░
+░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ foo }}░░░░░░░░░
+░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ foo }}░░░░░░░░
+░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ foo }}░░░░░░
+░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ foo }}░░
+░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ foo }}░░░░░░░░░
+░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ foo }}░░░░░░░░░
+░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ foo }}░░░░░░░░░░░
+░░░░░░░░░░░░░░░░░░░{{ foo }}░░░░
 ```
 
 ```twig .{file:Twig template as the designer sees it}
-- in text: <span>{{ text }}</span>
-- in tag: <span {{ text }} ></span>
-- in attribute: <span title='{{ text }}'></span>
-- in unquoted attribute: <span title={{ text }}></span>
-- in attribute containing URL: <a href="{{ text }}"></a>
-- in attribute containing JavaScript: <img onload="{{ text }}">
-- in attribute containing CSS: <span style="{{ text }}"></span>
-- in JavaScriptu: <script>var = {{ text }}</script>
-- in CSS: <style>body { content: {{ text }}; }</style>
-- in comment: <!-- {{ text }} -->
+- in text: <span>{{ foo }}</span>
+- in tag: <span {{ foo }} ></span>
+- in attribute: <span title='{{ foo }}'></span>
+- in unquoted attribute: <span title={{ foo }}></span>
+- in attribute containing URL: <a href="{{ foo }}"></a>
+- in attribute containing JavaScript: <img onload="{{ foo }}">
+- in attribute containing CSS: <span style="{{ foo }}"></span>
+- in JavaScriptu: <script>var = {{ foo }}</script>
+- in CSS: <style>body { content: {{ foo }}; }</style>
+- in comment: <!-- {{ foo }} -->
 ```
 
 </div>
@@ -234,6 +234,36 @@ Latte срещу наивни системи .[#toc-latte-vs-naive-systems]
 
 Latte вижда шаблона по същия начин като вас. Той разбира HTML, XML, разпознава тагове, атрибути и др. Поради това той разпознава контекстите и обработва данните по съответния начин. Следователно тя предлага наистина ефективна защита срещу критичната уязвимост Cross-site Scripting.
 
+<div class="juxtapose juxtapose--dark-handle" data-startingposition="80" data-animation="juxtapose-wiper">
+
+```latte .{file:Latte template as seen by Latte himself}
+░░░░░░░░░░░<span>{$foo}</span>
+░░░░░░░░░░<span {$foo} ></span>
+░░░░░░░░░░░░░░░░<span title='{$foo}'></span>
+░░░░░░░░░░░░░░░░░░░░░░░░░<span title={$foo}></span>
+░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░<a href="{$foo}"></a>
+░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░<img onload="{$foo}">
+░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░<span style="{$foo}"></span>
+░░░░░░░░░░░░░░░░░░<script>░░░░░░{$foo}</script>
+░░░░░░░░░░<style>░░░░░░░░░░░░░░░░{$foo}░░░</style>
+░░░░░░░░░░░░░░<!--░{$foo}░-->
+```
+
+```latte .{file:Latte template as the designer sees it}
+- in text: <span>{$foo}</span>
+- in tag: <span {$foo} ></span>
+- in attribute: <span title='{$foo}'></span>
+- in unquoted attribute: <span title={$foo}></span>
+- in attribute containing URL: <a href="{$foo}"></a>
+- in attribute containing JavaScript: <img onload="{$foo}">
+- in attribute containing CSS: <span style="{$foo}"></span>
+- in JavaScriptu: <script>var = {$foo}</script>
+- in CSS: <style>body { content: {$foo}; }</style>
+- in comment: <!-- {$foo} -->
+```
+
+</div>
+
 
 Демонстрация на живо .[#toc-live-demonstration]
 ===============================================

latte/cs/safety-first.texy

@@ -202,29 +202,29 @@ Automatické escapování bez znalosti kontextu je poněkud zavádějící a **v
 <div class="juxtapose juxtapose--dark-handle" data-startingposition="80" data-animation="juxtapose-wiper">
 
 ```twig .{file:Twig šablona, jak ji vidí samotný Twig}
-░░░░░░░░░░░░░░░░░{{ text }}░░░░░░░
-░░░░░░░░░░░░░░░░{{ text }}░░░░░░░░░
-░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ text }}░░░░░░░░░
-░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ text }}░░░░░░░░
-░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ text }}░░░░░░
-░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ text }}░░
-░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ text }}░░░░░░░░░
-░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ text }}░░░░░░░░░
-░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ text }}░░░░░░░░░░░
-░░░░░░░░░░░░░░░░░░░░{{ text }}░░░░
+░░░░░░░░░░░░░░░░░{{ foo }}░░░░░░░
+░░░░░░░░░░░░░░░░{{ foo }}░░░░░░░░░
+░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ foo }}░░░░░░░░░
+░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ foo }}░░░░░░░░
+░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ foo }}░░░░░░
+░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ foo }}░░
+░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ foo }}░░░░░░░░░
+░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ foo }}░░░░░░░░░
+░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ foo }}░░░░░░░░░░░
+░░░░░░░░░░░░░░░░░░░░{{ foo }}░░░░
 ```
 
 ```twig .{file:Twig šablona, jak ji vidí designer}
-- v textu: <span>{{ text }}</span>
-- v tagu: <span {{ text }} ></span>
-- v atributu: <span title='{{ text }}'></span>
-- v atributu bez uvozovek: <span title={{ text }}></span>
-- v atributu obsahujícím URL: <a href="{{ text }}"></a>
-- v atributu obsahujícím JavaScript: <img onload="{{ text }}">
-- v atributu obsahujícím CSS: <span style="{{ text }}"></span>
-- v JavaScriptu: <script>var = {{ text }}</script>
-- v CSS: <style>body { content: {{ text }}; }</style>
-- v komentáři: <!-- {{ text }} -->
+- v textu: <span>{{ foo }}</span>
+- v tagu: <span {{ foo }} ></span>
+- v atributu: <span title='{{ foo }}'></span>
+- v atributu bez uvozovek: <span title={{ foo }}></span>
+- v atributu obsahujícím URL: <a href="{{ foo }}"></a>
+- v atributu obsahujícím JavaScript: <img onload="{{ foo }}">
+- v atributu obsahujícím CSS: <span style="{{ foo }}"></span>
+- v JavaScriptu: <script>var = {{ foo }}</script>
+- v CSS: <style>body { content: {{ foo }}; }</style>
+- v komentáři: <!-- {{ foo }} -->
 ```
 
 </div>
@@ -233,6 +233,36 @@ Naivní systémy pouze mechanicky převádějí znaky `< > & ' "` na HTML entity
 
 Latte šablonu vidí stejně jako vy. Chápe HTML, XML, rozeznává značky, atributy atd. A díky tomu rozlišuje jednotlivé kontexty a podle nich ošetřuje data. Nabízí tak opravdu efektivní ochranu proti kritické zranitelnosti Cross-site Scripting.
 
+<div class="juxtapose juxtapose--dark-handle" data-startingposition="80" data-animation="juxtapose-wiper">
+
+```latte .{file:Latte šablona, jak ji vidí Latte}
+░░░░░░░░░░░<span>{$foo}</span>
+░░░░░░░░░░<span {$foo} ></span>
+░░░░░░░░░░░░░░<span title='{$foo}'></span>
+░░░░░░░░░░░░░░░░░░░░░░░░░░░<span title={$foo}></span>
+░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░<a href="{$foo}"></a>
+░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░<img onload="{$foo}">
+░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░<span style="{$foo}"></span>
+░░░░░░░░░░░░░░░░░<script>░░░░░░{$foo}</script>
+░░░░░░░░░<style>░░░░░░░░░░░░░░░░{$foo}░░░</style>
+░░░░░░░░░░░░░░░<!--░{$foo}░-->
+```
+
+```latte .{file:Latte šablona, jak ji vidí designer}
+- v textu: <span>{$foo}</span>
+- v tagu: <span {$foo} ></span>
+- v atributu: <span title='{$foo}'></span>
+- v atributu bez uvozovek: <span title={$foo}></span>
+- v atributu obsahujícím URL: <a href="{$foo}"></a>
+- v atributu obsahujícím JavaScript: <img onload="{$foo}">
+- v atributu obsahujícím CSS: <span style="{$foo}"></span>
+- v JavaScriptu: <script>var = {$foo}</script>
+- v CSS: <style>body { content: {$foo}; }</style>
+- v komentáři: <!-- {$foo} -->
+```
+
+</div>
+
 
 Živá ukázka
 ===========

latte/de/safety-first.texy

@@ -203,29 +203,29 @@ Templating-Systeme wie Twig, Laravel Blade und andere sehen keine HTML-Struktur
 <div class="juxtapose juxtapose--dark-handle" data-startingposition="80" data-animation="juxtapose-wiper">
 
 ```twig .{file:Twig template as seen by Twig himself}
-░░░░░░░░░░░░░░░░░{{ text }}░░░░░░░
-░░░░░░░░░░░░░░░░{{ text }}░░░░░░░░░
-░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ text }}░░░░░░░░░
-░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ text }}░░░░░░░░
-░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ text }}░░░░░░
-░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ text }}░░
-░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ text }}░░░░░░░░░
-░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ text }}░░░░░░░░░
-░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ text }}░░░░░░░░░░░
-░░░░░░░░░░░░░░░░░░░{{ text }}░░░░
+░░░░░░░░░░░░░░░░░{{ foo }}░░░░░░░
+░░░░░░░░░░░░░░░░{{ foo }}░░░░░░░░░
+░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ foo }}░░░░░░░░░
+░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ foo }}░░░░░░░░
+░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ foo }}░░░░░░
+░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ foo }}░░
+░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ foo }}░░░░░░░░░
+░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ foo }}░░░░░░░░░
+░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░{{ foo }}░░░░░░░░░░░
+░░░░░░░░░░░░░░░░░░░{{ foo }}░░░░
 ```
 
 ```twig .{file:Twig template as the designer sees it}
-- in text: <span>{{ text }}</span>
-- in tag: <span {{ text }} ></span>
-- in attribute: <span title='{{ text }}'></span>
-- in unquoted attribute: <span title={{ text }}></span>
-- in attribute containing URL: <a href="{{ text }}"></a>
-- in attribute containing JavaScript: <img onload="{{ text }}">
-- in attribute containing CSS: <span style="{{ text }}"></span>
-- in JavaScriptu: <script>var = {{ text }}</script>
-- in CSS: <style>body { content: {{ text }}; }</style>
-- in comment: <!-- {{ text }} -->
+- in text: <span>{{ foo }}</span>
+- in tag: <span {{ foo }} ></span>
+- in attribute: <span title='{{ foo }}'></span>
+- in unquoted attribute: <span title={{ foo }}></span>
+- in attribute containing URL: <a href="{{ foo }}"></a>
+- in attribute containing JavaScript: <img onload="{{ foo }}">
+- in attribute containing CSS: <span style="{{ foo }}"></span>
+- in JavaScriptu: <script>var = {{ foo }}</script>
+- in CSS: <style>body { content: {{ foo }}; }</style>
+- in comment: <!-- {{ foo }} -->
 ```
 
 </div>
@@ -234,6 +234,36 @@ Naive Systeme wandeln die Zeichen von `< > & ' "` einfach mechanisch in HTML-Ent
 
 Latte sieht die Vorlage auf die gleiche Weise wie Sie. Es versteht HTML, XML, erkennt Tags, Attribute usw. Und weil das so ist, unterscheidet es zwischen Kontexten und behandelt die Daten entsprechend. So bietet es einen wirklich effektiven Schutz gegen die kritische Cross-Site-Scripting-Schwachstelle.
 
+<div class="juxtapose juxtapose--dark-handle" data-startingposition="80" data-animation="juxtapose-wiper">
+
+```latte .{file:Latte template as seen by Latte himself}
+░░░░░░░░░░░<span>{$foo}</span>
+░░░░░░░░░░<span {$foo} ></span>
+░░░░░░░░░░░░░░░░<span title='{$foo}'></span>
+░░░░░░░░░░░░░░░░░░░░░░░░░<span title={$foo}></span>
+░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░<a href="{$foo}"></a>
+░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░<img onload="{$foo}">
+░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░<span style="{$foo}"></span>
+░░░░░░░░░░░░░░░░░░<script>░░░░░░{$foo}</script>
+░░░░░░░░░░<style>░░░░░░░░░░░░░░░░{$foo}░░░</style>
+░░░░░░░░░░░░░░<!--░{$foo}░-->
+```
+
+```latte .{file:Latte template as the designer sees it}
+- in text: <span>{$foo}</span>
+- in tag: <span {$foo} ></span>
+- in attribute: <span title='{$foo}'></span>
+- in unquoted attribute: <span title={$foo}></span>
+- in attribute containing URL: <a href="{$foo}"></a>
+- in attribute containing JavaScript: <img onload="{$foo}">
+- in attribute containing CSS: <span style="{$foo}"></span>
+- in JavaScriptu: <script>var = {$foo}</script>
+- in CSS: <style>body { content: {$foo}; }</style>
+- in comment: <!-- {$foo} -->
+```
+
+</div>
+
 
 Live-Demonstration .[#toc-live-demonstration]
 =============================================