fix: updated base template to handlebars (#1463)

* fix: we need to update that template to handlebars

the previous syntax might have been fine for mustache, but we should both explicitly use the block helpers as well as mind the context of variables within each helpers.

* chore: additionally updating the template type

from mustache to handlebars; wouldn't hurt …

* Update index.html

* fix: this ones actually an iteration

* Revert "fix: this ones actually an iteration"

This reverts commit 7def87d.

* fix: we actually need to the previous declaration here

* chore: previous formatting

* chore: changed my mind again …

Author: mfranzke

packages/uikit-workshop/src/html/index.html

@@ -26,7 +26,7 @@
     <pl-layout></pl-layout>
 
     <!-- the template for the modal slider -->
-    <script type="text/mustache" class="pl-js-panel-template-base">
+    <script type="text/x-handlebars-template" class="pl-js-panel-template-base">
       ${require('./partials/base-template.html') }
     </script>
 

packages/uikit-workshop/src/html/partials/base-template.html

@@ -1,135 +1,135 @@
 <!-- description, etc. -->
-{{# descBlockExists }}
+{{#if descBlockExists }}
 
 <div
   class="pl-c-pattern-info__panel pl-c-pattern-info__panel--info pl-js-pattern-info"
 >
-  {{# isPatternView }}
+  {{#if isPatternView }}
   <!-- extra info for modal view -->
   <div class="pl-c-pattern-info__header">
     <ul class="pl-c-breadcrumb">
-      {{# patternBreadcrumb }}
+      {{#with patternBreadcrumb }}
 
       <li class="pl-c-breadcrumb__item">{{ patternGroup }}</li>
 
-      {{# patternSubgroup }}
+      {{#if patternSubgroup }}
       <li class="pl-c-breadcrumb__item">{{ patternSubgroup }}</li>
-      {{/ patternSubgroup }} {{/ patternBreadcrumb }}
+      {{/if }} {{/with }}
     </ul>
     <!--end pl-c-breadcrumb-->
 
     <h2 class="pl-c-pattern-info__title">
-      {{ patternName }} {{# patternState }}
+      {{ patternName }} {{#if patternState }}
       <span
         class="pl-c-pattern-state pl-c-pattern-state--{{ patternState }}"
         title="{{ patternState }}"
       ></span>
-      {{/ patternState }}
+      {{/if }}
     </h2>
     <!--end pl-c-pattern-info__title-->
   </div>
   <!--end pl-c-pattern-info__header-->
-  {{/ isPatternView }} {{# patternDescExists }}
+  {{/if }} {{#if patternDescExists }}
   <div class="pl-c-pattern-info__description pl-c-text-passage">
-    {{{ patternDesc }}} {{# patternDescAdditions }} {{{ patternDescAdditions }}}
-    {{/ patternDescAdditions }}
+    {{{ patternDesc }}} {{#if patternDescAdditions }} {{{ patternDescAdditions
+    }}} {{/if }}
   </div>
   <!--end pl-c-pattern-info__description-->
-  {{/ patternDescExists }} {{# lineageExists }}
+  {{/if }} {{#if lineageExists }}
   <p class="pl-c-lineage pl-js-lineage">
     The
     <em>{{ patternName }}</em>
-    pattern contains the following patterns: {{# lineage }}
+    pattern contains the following patterns: {{#each lineage }}
     <a
       href="{{ lineagePath }}"
       class="pl-c-lineage__link pl-js-lineage-link"
       data-patternpartial="{{ lineagePattern }}"
     >
-      {{ lineagePattern }} {{# lineageState }}<span
+      {{ lineagePattern }} {{#if lineageState }}<span
         class="pl-c-pattern-state pl-c-pattern-state--{{ lineageState }}"
         title="{{ lineageState }}"
       />
-      {{/ lineageState }}
+      {{/if }}
     </a>
     <!--end pl-c-lineage__link-->
-    {{# hasComma }}, {{/ hasComma }} {{/ lineage }}
+    {{#if hasComma }}, {{/if }} {{/each }}
   </p>
   <!--end pl-c-lineage-->
-  {{/ lineageExists }} {{# lineageRExists }}
+  {{/if }} {{#if lineageRExists }}
   <p class="pl-c-lineage">
     The
     <em>{{ patternName }}</em>
-    pattern is included in the following patterns: {{# lineageR }}
+    pattern is included in the following patterns: {{#each lineageR }}
     <a
       href="{{ lineagePath }}"
       class="pl-c-lineage__link pl-js-lineage-link"
       data-patternpartial="{{ lineagePattern }}"
     >
-      {{ lineagePattern }} {{# lineageState }}<span
+      {{ lineagePattern }} {{#if lineageState }}<span
         class="pl-c-pattern-state pl-c-pattern-state--{{ lineageState }}"
         title="{{ lineageState }}"
       />
-      {{/ lineageState }}
+      {{/if }}
     </a>
     <!--end pl-c-lineage__link-->
-    {{# hasComma }}, {{/ hasComma }} {{/ lineageR }}
+    {{#if hasComma }}, {{/if }} {{/each }}
   </p>
   <!--end pl-c-lineage-->
-  {{/ lineageRExists }} {{# annotationExists }}
+  {{/if }} {{#if annotationExists }}
   <div class="pl-c-annotations pl-c-text-passage pl-js-annotations">
     <h2 class="pl-c-annotations__title">Annotations</h2>
     <ol class="pl-c-annotations__list">
-      {{# annotations }}
+      {{#each annotations }}
       <li class="pl-c-annotations__item">
         <h3 class="pl-c-annotations__item-title">{{ title }}</h3>
 
         <div class="pl-c-annotations__item-body">{{{ comment }}}</div>
         <!--end pl-c-annotations__item-body-->
       </li>
       <!--end pl-c-annotations__item-->
-      {{/ annotations }}
+      {{/each }}
     </ol>
     <!--end pl-c-annotations__list-->
   </div>
   <!--end pl-c-annotations-->
-  {{/ annotationExists }}
+  {{/if }}
 </div>
 <!--end pl-c-pattern-info__panel-->
-{{/ descBlockExists }}
+{{/if }}
 
 <div class="pl-c-pattern-info__panel pl-c-pattern-info__panel--code">
   <div id="pl-{{ patternPartial }}-tabs" class="pl-c-tabs pl-js-tabs">
     <div class="pl-c-tabs__header">
       <ul class="pl-c-tabs__list">
-        {{# panels }}
+        {{#each panels }}
         <li class="pl-c-tabs__list-item">
           <a
             class="pl-c-tabs__link pl-js-tab-link"
-            href="#pl-{{ patternPartial }}-{{ id }}-panel"
-            id="pl-{{ patternPartial }}-{{ id }}-tab"
-            data-patternpartial="{{ patternPartial }}"
+            href="#pl-{{ ../patternPartial }}-{{ id }}-panel"
+            id="pl-{{ ../patternPartial }}-{{ id }}-tab"
+            data-patternpartial="{{ ../patternPartial }}"
             data-panelid="{{ id }}"
             no-smooth-scroll
             >{{ name }}</a
           >
         </li>
         <!--end pl-c-tabs__list-item-->
-        {{/ panels }}
+        {{/each }}
       </ul>
       <!--end pl-c-tabs__list-->
     </div>
     <!--end pl-c-tabs__header-->
 
     <div id="pl-{{ patternPartial }}-panels" class="pl-c-tabs__content">
-      {{# panels }}
+      {{#each panels }}
       <div
-        id="pl-{{ patternPartial }}-{{ id }}-panel"
+        id="pl-{{ ../patternPartial }}-{{ id }}-panel"
         class="pl-c-tabs__panel pl-js-tab-panel"
       >
         <button
           class="pl-c-code-copy-btn pl-js-code-copy-btn"
           size="small"
-          data-clipboard-target="#pl-{{ patternPartial }}-{{ id }}-panel code"
+          data-clipboard-target="#pl-{{ ../patternPartial }}-{{ id }}-panel code"
           type="button"
         >
           <span class="pl-c-code-copy-btn__icon-text">Copy</span>
@@ -166,7 +166,7 @@ <h3 class="pl-c-annotations__item-title">{{ title }}</h3>
         {{{ content }}}
       </div>
       <!--end pl-c-tabs__panel-->
-      {{/ panels }}
+      {{/each }}
     </div>
     <!--end pl-c-tabs__content-->
   </div>