Cleanup nunjuck templates (#3109)

Ran a linter over it (djlint) which fixed intendation and a few errors --------- Co-authored-by: veeck <[email protected]>
MagicMirrorOrg · Sep 2, 2023 · c0a5f35 · c0a5f35
1 parent 2ad463b
commit c0a5f35
Show file tree

Hide file tree

Showing 12 changed files with 95 additions and 104 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -24,6 +24,7 @@ _This release is scheduled to be released on 2023-10-01._
 - Replace pretty-quick by lint-staged (<https://github.com/azz/pretty-quick/issues/164>)
 - Update engine node >=18. v16 reached it's end of life. (#3170)
 - Update typescript definition for modules
+- Cleaned up nunjuck templates
 
 ### Fixed
 

diff --git a/modules/default/alert/templates/alert.njk b/modules/default/alert/templates/alert.njk
@@ -1,18 +1,20 @@
 {% if imageUrl or imageFA %}
-  {% set imageHeight = imageHeight if imageHeight else "80px" %}
-  {% if imageUrl %}
-    <img src="{{ imageUrl }}" height="{{ imageHeight }}" style="margin-bottom: 10px;"/>
-  {% else %}
-    <span class="bright fas fa-{{ imageFA }}" style='margin-bottom: 10px; font-size: {{ imageHeight }};'/></span>
-  {% endif %}
-  <br/>
+    {% set imageHeight = imageHeight if imageHeight else "80px" %}
+    {% if imageUrl %}
+        <img src="{{ imageUrl }}"
+             height="{{ imageHeight }}"
+             style="margin-bottom: 10px" />
+    {% else %}
+        <span class="bright fas fa-{{ imageFA }}"
+              style="margin-bottom: 10px;
+                     font-size: {{ imageHeight }}"></span>
+    {% endif %}
+    <br />
 {% endif %}
 {% if title %}
-  <span class="thin dimmed medium">{{ title if titleType == 'text' else title | safe }}</span>
+    <span class="thin dimmed medium">{{ title if titleType == 'text' else title | safe }}</span>
 {% endif %}
 {% if message %}
-  {% if title %}
-    <br/>
-  {% endif %}
-  <span class="light bright small">{{ message if messageType == 'text' else message | safe }}</span>
+    {% if title %}<br />{% endif %}
+    <span class="light bright small">{{ message if messageType == 'text' else message | safe }}</span>
 {% endif %}
diff --git a/modules/default/alert/templates/notification.njk b/modules/default/alert/templates/notification.njk
@@ -1,9 +1,7 @@
 {% if title %}
-  <span class="thin dimmed medium">{{ title if titleType == 'text' else title | safe }}</span>
+    <span class="thin dimmed medium">{{ title if titleType == 'text' else title | safe }}</span>
 {% endif %}
 {% if message %}
-  {% if title %}
-    <br/>
-  {% endif %}
-  <span class="light bright small">{{ message if messageType == 'text' else message | safe }}</span>
+    {% if title %}<br />{% endif %}
+    <span class="light bright small">{{ message if messageType == 'text' else message | safe }}</span>
 {% endif %}
diff --git a/modules/default/helloworld/helloworld.njk b/modules/default/helloworld/helloworld.njk
@@ -2,4 +2,4 @@
 	Use ` | safe` to allow html tages within the text string.
 	https://mozilla.github.io/nunjucks/templating.html#autoescaping
 -->
-<div>{{text | safe}}</div>
+<div>{{ text | safe }}</div>
diff --git a/modules/default/newsfeed/fullarticle.njk b/modules/default/newsfeed/fullarticle.njk
@@ -1,3 +1,3 @@
 <div>
     <iframe class="newsfeed-fullarticle" src="{{ url }}"></iframe>
-</div>
+</div>
diff --git a/modules/default/newsfeed/newsfeed.njk b/modules/default/newsfeed/newsfeed.njk
@@ -1,27 +1,31 @@
 {% macro escapeText(text, dangerouslyDisableAutoEscaping=false) %}
-  {% if dangerouslyDisableAutoEscaping %}
-    {{ text | safe}}
-  {% else %}
-    {{ text }}
-  {% endif %}
+    {% if dangerouslyDisableAutoEscaping -%}
+        {{ text | safe }}
+    {%- else -%}
+        {{ text }}
+    {%- endif %}
 {% endmacro %}
-
 {% macro escapeTitle(title, url, dangerouslyDisableAutoEscaping=false, showTitleAsUrl=false) %}
-  {% if dangerouslyDisableAutoEscaping %}
-    {% if showTitleAsUrl %}
-      <a href="{{ url }}" style="text-decoration:none;color:#ffffff" target="_blank">{{ title | safe }}</a>
+    {% if dangerouslyDisableAutoEscaping %}
+        {% if showTitleAsUrl %}
+            <a href="{{ url }}"
+               style="text-decoration:none;
+                      color:#ffffff"
+               target="_blank">{{ title | safe }}</a>
+        {% else %}
+            {{ title | safe }}
+        {% endif %}
     {% else %}
-      {{ title | safe}}
+        {% if showTitleAsUrl %}
+            <a href="{{ url }}"
+               style="text-decoration:none;
+                      color:#ffffff"
+               target="_blank">{{ title }}</a>
+        {% else %}
+            {{ title }}
+        {% endif %}
     {% endif %}
-  {% else %}
-    {% if showTitleAsUrl %}
-      <a href="{{ url }}" style="text-decoration:none;color:#ffffff" target="_blank">{{ title }}</a>
-    {% else %}
-      {{ title }}
-    {% endif %}
-  {% endif %}
 {% endmacro %}
-
 {% if loaded %}
     {% if config.showAsList %}
         <ul class="newsfeed-list">
@@ -30,11 +34,9 @@
                     {% if (config.showSourceTitle and item.sourceTitle) or config.showPublishDate %}
                         <div class="newsfeed-source light small dimmed">
                             {% if item.sourceTitle and config.showSourceTitle %}
-                                {{ item.sourceTitle }}{% if config.showPublishDate %}, {% else %}: {% endif %}
-                            {% endif %}
-                            {% if config.showPublishDate %}
-                                {{ item.publishDate }}:
+                                {{ item.sourceTitle }}{% if config.showPublishDate %}, {% else %}:{% endif %}
                             {% endif %}
+                            {% if config.showPublishDate %}{{ item.publishDate }}:{% endif %}
                         </div>
                     {% endif %}
                     <div class="newsfeed-title bright medium light{{ ' no-wrap' if not config.wrapTitle }}">
@@ -43,7 +45,7 @@
                     {% if config.showDescription %}
                         <div class="newsfeed-desc small light{{ ' no-wrap' if not config.wrapDescription }}">
                             {% if config.truncDescription %}
-                                {{ escapeText(item.description | truncate(config.lengthDescription), config.dangerouslyDisableAutoEscaping) }}
+                                {{ escapeText(item.description | truncate(config.lengthDescription) , config.dangerouslyDisableAutoEscaping) }}
                             {% else %}
                                 {{ escapeText(item.description, config.dangerouslyDisableAutoEscaping) }}
                             {% endif %}
@@ -57,11 +59,9 @@
             {% if (config.showSourceTitle and sourceTitle) or config.showPublishDate %}
                 <div class="newsfeed-source light small dimmed">
                     {% if sourceTitle and config.showSourceTitle %}
-                        {{ escapeText(sourceTitle, config.dangerouslyDisableAutoEscaping) }}{% if config.showPublishDate %}, {% else %}: {% endif %}
-                    {% endif %}
-                    {% if config.showPublishDate %}
-                        {{ publishDate }}:
+                        {{ escapeText(sourceTitle, config.dangerouslyDisableAutoEscaping) }}{% if config.showPublishDate %}, {% else %}:{% endif %}
                     {% endif %}
+                    {% if config.showPublishDate %}{{ publishDate }}:{% endif %}
                 </div>
             {% endif %}
             <div class="newsfeed-title bright medium light{{ ' no-wrap' if not config.wrapTitle }}">
@@ -70,7 +70,7 @@
             {% if config.showDescription %}
                 <div class="newsfeed-desc small light{{ ' no-wrap' if not config.wrapDescription }}">
                     {% if config.truncDescription %}
-                        {{ escapeText(description | truncate(config.lengthDescription), config.dangerouslyDisableAutoEscaping) }}
+                        {{ escapeText(description | truncate(config.lengthDescription) , config.dangerouslyDisableAutoEscaping) }}
                     {% else %}
                         {{ escapeText(description, config.dangerouslyDisableAutoEscaping) }}
                     {% endif %}
@@ -79,15 +79,11 @@
         </div>
     {% endif %}
 {% elseif empty %}
-    <div class="small dimmed">
-        {{ "NEWSFEED_NO_ITEMS" | translate | safe }}
-    </div>
+    <div class="small dimmed">{{ "NEWSFEED_NO_ITEMS" | translate | safe }}</div>
 {% elseif error %}
     <div class="small dimmed">
         {{ "MODULE_CONFIG_ERROR" | translate({MODULE_NAME: "Newsfeed", ERROR: error}) | safe }}
     </div>
 {% else %}
-    <div class="small dimmed">
-        {{ "LOADING" | translate | safe }}
-    </div>
+    <div class="small dimmed">{{ "LOADING" | translate | safe }}</div>
 {% endif %}
diff --git a/modules/default/newsfeed/oldconfig.njk b/modules/default/newsfeed/oldconfig.njk
@@ -1,3 +1,3 @@
 <div class="small bright">
     {{ "MODULE_CONFIG_CHANGED" | translate({MODULE_NAME: "Newsfeed"}) | safe }}
-</div>
+</div>
diff --git a/modules/default/updatenotification/updatenotification.njk b/modules/default/updatenotification/updatenotification.njk
@@ -1,15 +1,15 @@
 {% if not suspended %}
-  {% for name, status in moduleList %}
-    <div class="small bright">
-      <i class="fas fa-exclamation-circle"></i>
-      <span>
-        {% set mainTextLabel = "UPDATE_NOTIFICATION" if name === "MagicMirror" else "UPDATE_NOTIFICATION_MODULE" %}
-        {{ mainTextLabel | translate({MODULE_NAME: name}) }}
-      </span>
-    </div>
-    <div class="xsmall dimmed">
-      {% set subTextLabel = "UPDATE_INFO_SINGLE" if status.behind === 1 else "UPDATE_INFO_MULTIPLE" %}
-      {{ subTextLabel | translate({COMMIT_COUNT: status.behind, BRANCH_NAME: status.current}) | diffLink(status) | safe }}
-    </div>
-  {% endfor %}
+    {% for name, status in moduleList %}
+        <div class="small bright">
+            <i class="fas fa-exclamation-circle"></i>
+            <span>
+                {% set mainTextLabel = "UPDATE_NOTIFICATION" if name === "MagicMirror" else "UPDATE_NOTIFICATION_MODULE" %}
+                {{ mainTextLabel | translate({MODULE_NAME: name}) }}
+            </span>
+        </div>
+        <div class="xsmall dimmed">
+            {% set subTextLabel = "UPDATE_INFO_SINGLE" if status.behind === 1 else "UPDATE_INFO_MULTIPLE" %}
+            {{ subTextLabel | translate({COMMIT_COUNT: status.behind, BRANCH_NAME: status.current}) | diffLink(status) | safe }}
+        </div>
+    {% endfor %}
 {% endif %}
diff --git a/modules/default/weather/current.njk b/modules/default/weather/current.njk
@@ -7,7 +7,8 @@
                 {% if config.showWindDirection %}
                     <sup>
                         {% if config.showWindDirectionAsArrow %}
-                            <i class="fas fa-long-arrow-alt-down" style="transform:rotate({{ current.windFromDirection }}deg);"></i>
+                            <i class="fas fa-long-arrow-alt-down"
+                               style="transform:rotate({{ current.windFromDirection }}deg)"></i>
                         {% else %}
                             {{ current.cardinalWindDirection() | translate }}
                         {% endif %}
@@ -29,34 +30,28 @@
                 </span>
             {% endif %}
             {% if config.showUVIndex %}
-                    <td class="align-right bright uv-index">
+                <td class="align-right bright uv-index">
                     <div class="wi dimmed wi-hot"></div>
-                        {{ current.uv_index }}
-                    </td>
+                    {{ current.uv_index }}
+                </td>
             {% endif %}
         </div>
     {% endif %}
     <div class="large light">
-        <span class="wi weathericon wi-{{current.weatherType}}"></span>
-        <span class="bright">
-            {{ current.temperature | roundValue | unit("temperature") | decimalSymbol }}
-        </span>
+        <span class="wi weathericon wi-{{ current.weatherType }}"></span>
+        <span class="bright">{{ current.temperature | roundValue | unit("temperature") | decimalSymbol }}</span>
     </div>
     <div class="normal light indoor">
         {% if config.showIndoorTemperature and indoor.temperature %}
             <div>
                 <span class="fas fa-home"></span>
-                <span class="bright">
-                    {{ indoor.temperature | roundValue | unit("temperature") | decimalSymbol }}
-                </span>
+                <span class="bright">{{ indoor.temperature | roundValue | unit("temperature") | decimalSymbol }}</span>
             </div>
         {% endif %}
         {% if config.showIndoorHumidity and indoor.humidity %}
             <div>
                 <span class="fas fa-tint"></span>
-                <span class="bright">
-                    {{ indoor.humidity | roundValue | unit("humidity") | decimalSymbol }}
-                </span>
+                <span class="bright">{{ indoor.humidity | roundValue | unit("humidity") | decimalSymbol }}</span>
             </div>
         {% endif %}
     </div>
@@ -65,25 +60,24 @@
             {% if config.showFeelsLike %}
                 <span class="dimmed">
                     {{ "FEELS" | translate({DEGREE: current.feelsLike() | roundValue | unit("temperature") | decimalSymbol }) }}
-                </span><br/>
+                </span>
+                <br />
             {% endif %}
             {% if config.showPrecipitationAmount and current.precipitationAmount %}
                 <span class="dimmed">
                     <span class="precipitationLeadText">{{ "PRECIP_AMOUNT" | translate }}</span> {{ current.precipitationAmount | unit("precip", current.precipitationUnits) }}
-                </span><br/>
+                </span>
+                <br />
             {% endif %}
-            {% if config.showPrecipitationProbability and current.precipitationProbability  %}
+            {% if config.showPrecipitationProbability and current.precipitationProbability %}
                 <span class="dimmed">
                     <span class="precipitationLeadText">{{ "PRECIP_POP" | translate }}</span> {{ current.precipitationProbability }}%
                 </span>
             {% endif %}
         </div>
     {% endif %}
 {% else %}
-    <div class="dimmed light small">
-        {{ "LOADING" | translate }}
-    </div>
+    <div class="dimmed light small">{{ "LOADING" | translate }}</div>
 {% endif %}
-
 <!-- Uncomment the line below to see the contents of the `current` object. -->
 <!-- <div style="word-wrap:break-word" class="xsmall dimmed">{{current | dump}}</div> -->
diff --git a/modules/default/weather/forecast.njk b/modules/default/weather/forecast.njk
@@ -7,15 +7,18 @@
         {% endif %}
         {% set forecast = forecast.slice(0, numSteps) %}
         {% for f in forecast %}
-            <tr {% if config.colored %}class="colored"{% endif %} {% if config.fade %}style="opacity: {{ currentStep | opacity(numSteps) }};"{% endif %}>
+            <tr {% if config.colored %}class="colored"{% endif %}
+                {% if config.fade %}style="opacity: {{ currentStep | opacity(numSteps) }};"{% endif %}>
                 {% if (currentStep == 0) and config.ignoreToday == false and config.absoluteDates == false %}
                     <td class="day">{{ "TODAY" | translate }}</td>
                 {% elif (currentStep == 1) and config.ignoreToday == false and config.absoluteDates == false %}
                     <td class="day">{{ "TOMORROW" | translate }}</td>
                 {% else %}
-                    <td class="day">{{ f.date.format('ddd') }}</td>
+                    <td class="day">{{ f.date.format("ddd") }}</td>
                 {% endif %}
-                <td class="bright weather-icon"><span class="wi weathericon wi-{{ f.weatherType }}"></span></td>
+                <td class="bright weather-icon">
+                    <span class="wi weathericon wi-{{ f.weatherType }}"></span>
+                </td>
                 <td class="align-right bright max-temp">
                     {{ f.maxTemperature | roundValue | unit("temperature") | decimalSymbol }}
                 </td>
@@ -29,7 +32,7 @@
                 {% endif %}
                 {% if config.showPrecipitationProbability %}
                     <td class="align-right bright precipitation-prob">
-                        {{ f.precipitationProbability | unit("precip", "%") }}
+                        {{ f.precipitationProbability | unit('precip', '%') }}
                     </td>
                 {% endif %}
                 {% if config.showUVIndex %}
@@ -43,10 +46,7 @@
         {% endfor %}
     </table>
 {% else %}
-    <div class="dimmed light small">
-        {{ "LOADING" | translate }}
-    </div>
+    <div class="dimmed light small">{{ "LOADING" | translate }}</div>
 {% endif %}
-
 <!-- Uncomment the line below to see the contents of the `forecast` object. -->
 <!-- <div style="word-wrap:break-word" class="xsmall dimmed">{{forecast | dump}}</div> -->
diff --git a/modules/default/weather/hourly.njk b/modules/default/weather/hourly.njk
@@ -4,9 +4,12 @@
     <table class="{{ config.tableClass }}">
         {% set hours = hourly.slice(0, numSteps) %}
         {% for hour in hours %}
-            <tr {% if config.colored %}class="colored"{% endif %} {% if config.fade %}style="opacity: {{ currentStep | opacity(numSteps) }};"{% endif %}>
+            <tr {% if config.colored %}class="colored"{% endif %}
+                {% if config.fade %}style="opacity: {{ currentStep | opacity(numSteps) }};"{% endif %}>
                 <td class="day">{{ hour.date | formatTime }}</td>
-                <td class="bright weather-icon"><span class="wi weathericon wi-{{ hour.weatherType }}"></span></td>
+                <td class="bright weather-icon">
+                    <span class="wi weathericon wi-{{ hour.weatherType }}"></span>
+                </td>
                 <td class="align-right bright">
                     {{ hour.temperature | roundValue | unit("temperature") }}
                 </td>
@@ -25,18 +28,15 @@
                 {% endif %}
                 {% if config.showPrecipitationProbability %}
                     <td class="align-right bright precipitation-prob">
-                        {{ hour.precipitationProbability | unit("precip", "%") }}
+                        {{ hour.precipitationProbability | unit('precip', '%') }}
                     </td>
                 {% endif %}
             </tr>
             {% set currentStep = currentStep + 1 %}
         {% endfor %}
     </table>
 {% else %}
-    <div class="dimmed light small">
-        {{ "LOADING" | translate }}
-    </div>
+    <div class="dimmed light small">{{ "LOADING" | translate }}</div>
 {% endif %}
-
 <!-- Uncomment the line below to see the contents of the `hourly` object. -->
 <!-- <div style="word-wrap:break-word" class="xsmall dimmed">{{hourly | dump}}</div> -->
diff --git a/tests/e2e/modules/weather_current_spec.js b/tests/e2e/modules/weather_current_spec.js
@@ -48,7 +48,7 @@ describe("Weather module", () => {
 		it("should render windDirection with an arrow", async () => {
 			const elem = await helpers.waitForElement(".weather .normal.medium sup i.fa-long-arrow-alt-down");
 			expect(elem).not.toBe(null);
-			expect(elem.outerHTML).toContain("transform:rotate(250deg);");
+			expect(elem.outerHTML).toContain("transform:rotate(250deg)");
 		});
 
 		it("should render humidity", async () => {