From 13e28c259ff70251aa7b562214b4813cd9e6139b Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
Date: Fri, 30 Dec 2022 17:51:26 +0100
Subject: [PATCH] fix: updated base template to handlebars (#1463)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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 7def87d96cb301d1430601ca3327d5896e20f17f.

* fix: we actually need to the previous declaration here

* chore: previous formatting

* chore: changed my mind again …
---
 packages/uikit-workshop/src/html/index.html   |  2 +-
 .../src/html/partials/base-template.html      | 68 +++++++++----------
 2 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/packages/uikit-workshop/src/html/index.html b/packages/uikit-workshop/src/html/index.html
index 00b7b7a21..b5f8174d1 100644
--- a/packages/uikit-workshop/src/html/index.html
+++ b/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>
 
diff --git a/packages/uikit-workshop/src/html/partials/base-template.html b/packages/uikit-workshop/src/html/partials/base-template.html
index 9ec4c1556..fbf6ff782 100755
--- a/packages/uikit-workshop/src/html/partials/base-template.html
+++ b/packages/uikit-workshop/src/html/partials/base-template.html
@@ -1,85 +1,85 @@
 <!-- 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>
 
@@ -87,49 +87,49 @@ <h3 class="pl-c-annotations__item-title">{{ title }}</h3>
         <!--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>