fix code examples in docs

ember-animation · Aug 4, 2023 · 2bec6f9 · 2bec6f9
1 parent ceb643d
commit 2bec6f9
Show file tree

Hide file tree

Showing 12 changed files with 28 additions and 28 deletions.
diff --git a/docs/app/templates/cookbook.hbs b/docs/app/templates/cookbook.hbs
@@ -21,7 +21,7 @@ route to the <em>posts</em> route. The reverse call indicates what should happen
 <h3>2. Replace outlets in your templates</h3>
 
 <p>Now we have defined our transitions, the next step is to replace Embers native <code>\{{outlet}}</code> in your
-template files. You should replace it with the outlet component by Liquid Fire: <code>\{{#liquid-outlet}}</code>. It is
+template files. You should replace it with the outlet component by Liquid Fire: <code>&lt;LiquidOutlet /&gt;</code>. It is
 most likely that you will find this <code>\{{outlet}}</code> in your application template file. So now your
 <em>app/templates/application.hbs</em> might look like this.</p>
 
@@ -56,7 +56,7 @@ place a new liquid outlet component, so the file looks like this.</p>
 And click it. You will now see (another build-in) cross-fade transition!</p>
 
 <p>Remember, you will have to include a
-<code>\{{liquid-outlet}}</code> in any nested route's master template. Otherwise, there will be no transition visible.
+<code>&lt;LiquidOutlet /&gt;</code> in any nested route's master template. Otherwise, there will be no transition visible.
 This is how Ember works. A nested master template contains <code>\{{outlet}}</code> by default and you should overwrite
-it with a <code>\{{liquid-outlet}}</code>. But that is easy, right?</p>
+it with a <code>&lt;LiquidOutlet /&gt;</code>. But that is easy, right?</p>
 
diff --git a/docs/app/templates/helpers-documentation/index.hbs b/docs/app/templates/helpers-documentation/index.hbs
@@ -8,7 +8,7 @@
   <dt>
     {{!-- template-lint-disable no-invalid-link-text --}}
     <LinkTo @route="helpers-documentation.liquid-outlet">
-      \{{liquid-outlet}}
+      &lt;LiquidOutlet /&gt;
     </LinkTo>
   </dt>
   <dd>
@@ -18,7 +18,7 @@
   <dt>
     {{!-- template-lint-disable no-invalid-link-text --}}
     <LinkTo @route="helpers-documentation.liquid-bind">
-      \{{#liquid-bind}}
+      &lt;LiquidBind&gt; &lt;/LiquidBind&gt;
     </LinkTo>
   </dt>
   <dd>
@@ -38,7 +38,7 @@
   <dt>
     {{!-- template-lint-disable no-invalid-link-text --}}
     <LinkTo @route="helpers-documentation.liquid-spacer">
-      \{{#liquid-spacer}}
+      &lt;LiquidSpacer&gt; &lt;/LiquidSpacer&gt;
     </LinkTo>
   </dt>
   <dd>

diff --git a/docs/app/templates/helpers-documentation/liquid-bind-block/page.hbs b/docs/app/templates/helpers-documentation/liquid-bind-block/page.hbs
@@ -1,11 +1,11 @@
 {{! template-lint-disable no-unbalanced-curlies }}
 
 <h2>
-  \{{#liquid-bind}} with a block
+  &lt;LiquidBind /&gt; with a block
 </h2>
 
 <p>
-  If you pass a block to\{{#liquid-bind}}, each new version of your
+  If you pass a block to <code>&lt;LiquidBind /&gt;</code>, each new version of your
 bound value will cause the block to render
 </p>
 

diff --git a/docs/app/templates/helpers-documentation/liquid-bind.hbs b/docs/app/templates/helpers-documentation/liquid-bind.hbs
@@ -1,7 +1,7 @@
 {{!-- template-lint-disable no-unbalanced-curlies --}}
 
 <h2>
-  \{{liquid-bind}}
+  &lt;LiquidBind /&gt;
 </h2>
 
 <p>
@@ -12,12 +12,12 @@ map to decide how to animate when the bound value changes.
 <p>
   Saying
   <code>
-    \{{liquid-bind value=someValue}}
+    &lt;LiquidBind @value=\{{this.someValue}} /&gt;
   </code>
   is a drop-in
 replacement for
   <code>
-    \{{someValue}}
+    \{{this.someValue}}
   </code>
   , except this wraps the
 content in markup so that it can be targeted for animation. See the
@@ -31,7 +31,7 @@ Options
 <p>
   There is also a block form of
   <code>
-    \{{#liquid-bind}}
+    &lt;LiquidBind&gt; &lt;/LiquidBind&gt;
   </code>
   that
 is

diff --git a/docs/app/templates/helpers-documentation/liquid-if.hbs b/docs/app/templates/helpers-documentation/liquid-if.hbs
@@ -41,7 +41,7 @@ normal
 
 <p>
   <code>
-    \{{#liquid-unless}}
+    &lt;LiquidUnless&gt; &lt;/LiquidUnless&gt;
   </code>
   is the complement to
   <code>

diff --git a/docs/app/templates/helpers-documentation/liquid-outlet.hbs b/docs/app/templates/helpers-documentation/liquid-outlet.hbs
@@ -1,7 +1,7 @@
 {{!-- template-lint-disable no-unbalanced-curlies --}}
 
 <h2>
-  \{{liquid-outlet}}
+  &lt;LiquidOutlet /&gt;
 </h2>
 
 <p>
@@ -43,7 +43,7 @@
   does,
 including named outlets (like
   <code>
-    \{{liquid-outlet inputOutletName="sidebar"}}
+    &lt;LiquidOutlet @inputOutletName="sidebar" /&gt;
   </code>
   ).
 </p>

diff --git a/docs/app/templates/helpers-documentation/liquid-spacer.hbs b/docs/app/templates/helpers-documentation/liquid-spacer.hbs
@@ -1,12 +1,12 @@
 {{! template-lint-disable no-unbalanced-curlies }}
 
 <h2>
-  \{{#liquid-spacer}}
+  &lt;LiquidSpacer /&gt;
 </h2>
 
 <p>
   <code>
-    \{{#liquid-spacer}}
+    &lt;LiquidSpacer /&gt;
   </code>
   is a component that animates its
 own width and height to match the width and height of its

diff --git a/docs/app/templates/index.hbs b/docs/app/templates/index.hbs
@@ -22,7 +22,7 @@ template helpers, the transition map, and transitions.</p>
 <h4>Template Helpers</h4>
 
 <p>The library provides helpers
-like <code>\{{liquid-outlet}}</code>, <code>\{{liquid-if}}</code>,
+like <code>&lt;LiquidOutlet /&gt;</code>, <code>&lt;LiquidIf /&gt;</code>,
 etc, that are nearly drop-in replacements for the equivalent normal
 Ember helpers. The key difference is that they don't update instantly
 when bound data changes. Instead they consult your application's

diff --git a/docs/app/templates/transition-map/outlet-constraints.hbs b/docs/app/templates/transition-map/outlet-constraints.hbs
@@ -8,16 +8,16 @@
   The following constraint applies to oulet names.
   It will only work with
   <code>
-    \{{liquid-outlet}}
+    &lt;LiquidOutlet /&gt;
   </code>
   because only
   <code>
-    \{{liquid-outlet}}
+    &lt;LiquidOutlet /&gt;
   </code>
   has access to it's own name.
   (The other helpers like
   <code>
-    \{{liquid-if}}
+    &lt;LiquidIf /&gt;
   </code>
   ) don't know anything about outlets.)
 </p>

diff --git a/docs/app/templates/transition-map/route-constraints.hbs b/docs/app/templates/transition-map/route-constraints.hbs
@@ -7,15 +7,15 @@
 <p>
   The following three constraints apply to route names. They will only work with
   <code>
-    \{{liquid-outlet}}
+    &lt;LiquidOutlet /&gt;
   </code>
   because only
   <code>
-    \{{liquid-outlet}}
+    &lt;LiquidOutlet /&gt;
   </code>
   has visibility into routes. (The other helpers like
   <code>
-    \{{liquid-if}}
+    &lt;LiquidIf /&gt;
   </code>
   ) don't know anything about routes.)
 </p>
@@ -55,7 +55,7 @@ those.
   The next three constraint apply to routes' models. They too only
 work with
   <code>
-    \{{liquid-outlet}}
+    &lt;LiquidOutlet /&gt;
   </code>
   .
 </p>

diff --git a/docs/app/templates/transition-map/value-constraints.hbs b/docs/app/templates/transition-map/value-constraints.hbs
@@ -11,13 +11,13 @@
 <ul>
   <li>
     <code>
-      \{{liquid-bind}}
+      &lt;LiquidBind /&gt;
     </code>
     match against its own bound contexts.
   </li>
   <li>
     <code>
-      \{{liquid-if}}
+      &lt;LiquidIf /&gt;
     </code>
     matches against its predicate.
   </li>

diff --git a/docs/app/templates/transitions/defining.hbs b/docs/app/templates/transitions/defining.hbs
@@ -27,7 +27,7 @@ transition is done.</p>
 
   <dd>The corresponding values that go with your old and new states
   (this is the valued passed into a helper like
-  <code>\{{liquid-bind}}</code>).</dd>
+  <code>&lt;LiquidBind /&gt;</code>).</dd>
 
   <dt><code>oldView, newView</code></dt>