fix: add optional chaining to prevent undefined access errors in templates

Fixed TypeError: Cannot read properties of undefined (reading 'includes')
that occurred when plugin sections are undefined during template rendering.

Changes:
- Added optional chaining (?.) to all .sections.includes() calls
- Added fallback empty array for .sections.filter() in wakatime.ejs
- Affected templates: lines, wakatime, 16personalities, anilist, sponsors, leetcode, steam, splatoon

This prevents runtime errors when plugins are enabled but sections data is not properly initialized.

Fixes: https://github.com/markobonna/markobonna/actions/runs/20869692208/job/59971577650

Author: claude

source/templates/classic/partials/16personalities.ejs

@@ -14,10 +14,10 @@
         </section>
       </div>
     <% } else { %>
-      <% if ((plugins["16personalities"].sections.includes("personality"))||(plugins["16personalities"].sections.includes("profile"))) { %>
+      <% if ((plugins["16personalities"].sections?.includes("personality"))||(plugins["16personalities"].sections?.includes("profile"))) { %>
         <div class="row fill-width">
           <section class="personality-traits categories">
-            <% for (const {category, value, image, text} of plugins["16personalities"].personality) { if (((!plugins["16personalities"].sections.includes("personality"))&&(/personality/i.test(category)))||((!plugins["16personalities"].sections.includes("profile"))&&(!/personality/i.test(category)))) continue %>
+            <% for (const {category, value, image, text} of plugins["16personalities"].personality) { if (((!plugins["16personalities"].sections?.includes("personality"))&&(/personality/i.test(category)))||((!plugins["16personalities"].sections?.includes("profile"))&&(!/personality/i.test(category)))) continue %>
               <div class="category">
                 <img src="<%= image %>" alt="" />
                 <div class="explanation">
@@ -29,7 +29,7 @@
           </section>
         </div>
       <% } %>
-      <% if (plugins["16personalities"].sections.includes("traits")) { %>
+      <% if (plugins["16personalities"].sections?.includes("traits")) { %>
         <div class="row fill-width">
           <section class="personality-traits categories">
             <% for (const {category, value, score, text} of plugins["16personalities"].traits) { %>

source/templates/classic/partials/anilist.ejs

@@ -110,7 +110,7 @@
               <% } %>
             <% } %>
           <% } %>
-          <% if (plugins.anilist.sections.includes("characters")) { %>
+          <% if (plugins.anilist.sections?.includes("characters")) { %>
             <div class="anilist">
               <h2 class="field">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.565 20.565 0 008 13.393a20.561 20.561 0 003.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.75.75 0 01-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5zM8 14.25l-.345.666-.002-.001-.006-.003-.018-.01a7.643 7.643 0 01-.31-.17 22.075 22.075 0 01-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.08 22.08 0 01-3.744 2.584l-.018.01-.006.003h-.002L8 14.25zm0 0l.345.666a.752.752 0 01-.69 0L8 14.25z"></path></svg>

source/templates/classic/partials/leetcode.ejs

@@ -14,7 +14,7 @@
         </section>
       </div>
     <% } else { %>
-      <% if (plugins.leetcode.sections.includes("solved")) { %>
+      <% if (plugins.leetcode.sections?.includes("solved")) { %>
         <section>
           <div class="row fill-width leetcode scores">
             <section class="categories">
@@ -33,7 +33,7 @@
           </div>
         </section>
       <% } %>
-      <% if (plugins.leetcode.sections.includes("skills")) { %>
+      <% if (plugins.leetcode.sections?.includes("skills")) { %>
         <section class="leetcode subsection">
           <h2 class="field">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2.5 7.775V2.75a.25.25 0 01.25-.25h5.025a.25.25 0 01.177.073l6.25 6.25a.25.25 0 010 .354l-5.025 5.025a.25.25 0 01-.354 0l-6.25-6.25a.25.25 0 01-.073-.177zm-1.5 0V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 010 2.474l-5.026 5.026a1.75 1.75 0 01-2.474 0l-6.25-6.25A1.75 1.75 0 011 7.775zM6 5a1 1 0 100 2 1 1 0 000-2z"></path></svg>
@@ -46,7 +46,7 @@
           </div>
         </section>
       <% } %>
-      <% if (plugins.leetcode.sections.includes("recent")) { %>
+      <% if (plugins.leetcode.sections?.includes("recent")) { %>
         <section class="leetcode subsection">
           <h2 class="field">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2.5 1.75a.25.25 0 01.25-.25h8.5a.25.25 0 01.25.25v7.736a.75.75 0 101.5 0V1.75A1.75 1.75 0 0011.25 0h-8.5A1.75 1.75 0 001 1.75v11.5c0 .966.784 1.75 1.75 1.75h3.17a.75.75 0 000-1.5H2.75a.25.25 0 01-.25-.25V1.75zM4.75 4a.75.75 0 000 1.5h4.5a.75.75 0 000-1.5h-4.5zM4 7.75A.75.75 0 014.75 7h2a.75.75 0 010 1.5h-2A.75.75 0 014 7.75zm11.774 3.537a.75.75 0 00-1.048-1.074L10.7 14.145 9.281 12.72a.75.75 0 00-1.062 1.058l1.943 1.95a.75.75 0 001.055.008l4.557-4.45z"></path></svg>

source/templates/classic/partials/lines.ejs

@@ -1,4 +1,4 @@
-<% if ((plugins.lines)&&((plugins.lines.sections.includes("history"))||(plugins.lines.sections.includes("repositories")))) { %>
+<% if ((plugins.lines)&&((plugins.lines.sections?.includes("history"))||(plugins.lines.sections?.includes("repositories")))) { %>
   <section>
     <h2 class="field">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2.75 1.5a.25.25 0 00-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V4.664a.25.25 0 00-.073-.177l-2.914-2.914a.25.25 0 00-.177-.073H2.75zM1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0113.25 16H2.75A1.75 1.75 0 011 14.25V1.75zm7 1.5a.75.75 0 01.75.75v1.5h1.5a.75.75 0 010 1.5h-1.5v1.5a.75.75 0 01-1.5 0V7h-1.5a.75.75 0 010-1.5h1.5V4A.75.75 0 018 3.25zm-3 8a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75z"></path></svg>

source/templates/classic/partials/splatoon.ejs

@@ -16,7 +16,7 @@
     </div>
   <% } else { %>
 
-    <% if (plugins.splatoon.sections.includes("player")) { %>
+    <% if (plugins.splatoon.sections?.includes("player")) { %>
       <div class="player-plate" style="color:<%= plugins.splatoon.player.plate.color %>; background-image: url('<%= plugins.splatoon.player.plate.icon %>');">
         <div class="player-head">
           <div class="player-title">
@@ -56,7 +56,7 @@
       </div>
     <% } %>
 
-    <% if (plugins.splatoon.sections.includes("versus")) { %>
+    <% if (plugins.splatoon.sections?.includes("versus")) { %>
       <div class="versus">
         <div class="player-stats">
           <div>Level <%= plugins.splatoon.player.level %></div>
@@ -145,7 +145,7 @@
       </div>
     <% } %>
 
-    <% if (plugins.splatoon.sections.includes("salmon-run")) { %>
+    <% if (plugins.splatoon.sections?.includes("salmon-run")) { %>
       <div class="salmon-run">
         <div class="player-grade"><%= plugins.splatoon.player.salmon.grade.name %> +<%= plugins.splatoon.player.salmon.grade.points %></div>
         <div class="player-stats">

source/templates/classic/partials/sponsors.ejs

@@ -14,7 +14,7 @@
           </section>
         </div>
       <% } else { %>
-        <% for (const section of plugins.sponsors.sections) { if ((plugins.sponsors.sections.includes("goal"))&&(plugins.sponsors.sections.includes("list"))&&(section === "list")) continue%>
+        <% for (const section of plugins.sponsors.sections) { if ((plugins.sponsors.sections?.includes("goal"))&&(plugins.sponsors.sections?.includes("list"))&&(section === "list")) continue%>
           <% if ((section === "goal")||(section === "list")) { %>
             <div class="fill-width">
               <section class="sponsors goal">
@@ -44,7 +44,7 @@
                     <span><%= plugins.sponsors.goal.title %></span>
                   <% } %>
                 </div>
-                <% if ((section === "list")||(plugins.sponsors.sections.includes("list"))) { %>
+                <% if ((section === "list")||(plugins.sponsors.sections?.includes("list"))) { %>
                   <div class="row">
                     <% for (const user of plugins.sponsors.list.filter(({past}) => !past)) { %><img class="avatar <%= user.type === "organization" ? "organization" : "" %>" src="<%= user.avatar %>" width="<%= plugins.sponsors.size %>" height="<%= plugins.sponsors.size %>" alt="" /><% } %>
                   </div>

source/templates/classic/partials/steam.ejs

@@ -14,7 +14,7 @@
         </section>
       </div>
     <% } else { %>
-      <% if ((plugins.steam.sections.includes("player"))&&(plugins.steam.player)) { %> 
+      <% if ((plugins.steam.sections?.includes("player"))&&(plugins.steam.player)) { %> 
         <div class="row">
           <section>
             <div class="field">
@@ -38,7 +38,7 @@
           </section>
         </div>
       <% } %>
-      <% for (const section of ["most-played", "recently-played"]) { if (plugins.steam.sections.includes(section)) { %> 
+      <% for (const section of ["most-played", "recently-played"]) { if (plugins.steam.sections?.includes(section)) { %> 
         <div class="games">
           <h2 class="field">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path></svg>

source/templates/classic/partials/wakatime.ejs

@@ -15,39 +15,39 @@
     <% } else { %>
       <div class="row">
         <section class="largeable-column-fields">
-          <% if (plugins.wakatime.sections.includes("time")) { %>
+          <% if (plugins.wakatime.sections?.includes("time")) { %>
             <div class="field">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.643 3.143L.427 1.927A.25.25 0 000 2.104V5.75c0 .138.112.25.25.25h3.646a.25.25 0 00.177-.427L2.715 4.215a6.5 6.5 0 11-1.18 4.458.75.75 0 10-1.493.154 8.001 8.001 0 101.6-5.684zM7.75 4a.75.75 0 01.75.75v2.992l2.028.812a.75.75 0 01-.557 1.392l-2.5-1A.75.75 0 017 8.25v-3.5A.75.75 0 017.75 4z"></path></svg>
               ~<%= f(Math.ceil(plugins.wakatime.time.total)) %> coding hour<%= s(plugins.wakatime.time.total) %> recorded
             </div>
           <% } %>
-          <% if ((plugins.wakatime.sections.includes("projects"))&&(plugins.wakatime.projects?.length)) { %>
+          <% if ((plugins.wakatime.sections?.includes("projects"))&&(plugins.wakatime.projects?.length)) { %>
             <div class="field">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"></path></svg>
               Working on <%= f.ellipsis(plugins.wakatime.projects[0]?.name, {length:16}) %>
             </div>
           <% } %>
-          <% if ((plugins.wakatime.sections.includes("languages"))&&(plugins.wakatime.languages?.length)) { %>
+          <% if ((plugins.wakatime.sections?.includes("languages"))&&(plugins.wakatime.languages?.length)) { %>
             <div class="field">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.5 2.75a.25.25 0 01.25-.25h12.5a.25.25 0 01.25.25v8.5a.25.25 0 01-.25.25h-6.5a.75.75 0 00-.53.22L4.5 14.44v-2.19a.75.75 0 00-.75-.75h-2a.25.25 0 01-.25-.25v-8.5zM1.75 1A1.75 1.75 0 000 2.75v8.5C0 12.216.784 13 1.75 13H3v1.543a1.457 1.457 0 002.487 1.03L8.061 13h6.189A1.75 1.75 0 0016 11.25v-8.5A1.75 1.75 0 0014.25 1H1.75zm5.03 3.47a.75.75 0 010 1.06L5.31 7l1.47 1.47a.75.75 0 01-1.06 1.06l-2-2a.75.75 0 010-1.06l2-2a.75.75 0 011.06 0zm2.44 0a.75.75 0 000 1.06L10.69 7 9.22 8.47a.75.75 0 001.06 1.06l2-2a.75.75 0 000-1.06l-2-2a.75.75 0 00-1.06 0z"></path></svg>
               Mostly coding in <%= plugins.wakatime.languages[0]?.name %>
             </div>
           <% } %>
         </section>
         <section class="largeable-column-fields">
-          <% if (plugins.wakatime.sections.includes("time")) { %>
+          <% if (plugins.wakatime.sections?.includes("time")) { %>
             <div class="field">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M6 2a.75.75 0 01.696.471L10 10.731l1.304-3.26A.75.75 0 0112 7h3.25a.75.75 0 010 1.5h-2.742l-1.812 4.528a.75.75 0 01-1.392 0L6 4.77 4.696 8.03A.75.75 0 014 8.5H.75a.75.75 0 010-1.5h2.742l1.812-4.529A.75.75 0 016 2z"></path></svg>
               ~<%= f(Math.ceil(plugins.wakatime.time.daily)) %> hour<%= s(plugins.wakatime.time.total) %> of coding per day
             </div>
           <% } %>
-          <% if ((plugins.wakatime.sections.includes("editors"))&&(plugins.wakatime.editors?.length)) { %>
+          <% if ((plugins.wakatime.sections?.includes("editors"))&&(plugins.wakatime.editors?.length)) { %>
             <div class="field">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M0 2.75C0 1.784.784 1 1.75 1h12.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0114.25 15H1.75A1.75 1.75 0 010 13.25V2.75zm1.75-.25a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25H1.75zM7.25 8a.75.75 0 01-.22.53l-2.25 2.25a.75.75 0 11-1.06-1.06L5.44 8 3.72 6.28a.75.75 0 111.06-1.06l2.25 2.25c.141.14.22.331.22.53zm1.5 1.5a.75.75 0 000 1.5h3a.75.75 0 000-1.5h-3z"></path></svg>
               Coding with <%= plugins.wakatime.editors[0]?.name %>
             </div>
           <% } %>
-          <% if ((plugins.wakatime.sections.includes("os"))&&(plugins.wakatime.os?.length)) { %>
+          <% if ((plugins.wakatime.sections?.includes("os"))&&(plugins.wakatime.os?.length)) { %>
             <div class="field">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M6.5.75a.75.75 0 00-1.5 0V2H3.75A1.75 1.75 0 002 3.75V5H.75a.75.75 0 000 1.5H2v3H.75a.75.75 0 000 1.5H2v1.25c0 .966.784 1.75 1.75 1.75H5v1.25a.75.75 0 001.5 0V14h3v1.25a.75.75 0 001.5 0V14h1.25A1.75 1.75 0 0014 12.25V11h1.25a.75.75 0 000-1.5H14v-3h1.25a.75.75 0 000-1.5H14V3.75A1.75 1.75 0 0012.25 2H11V.75a.75.75 0 00-1.5 0V2h-3V.75zm5.75 11.75h-8.5a.25.25 0 01-.25-.25v-8.5a.25.25 0 01.25-.25h8.5a.25.25 0 01.25.25v8.5a.25.25 0 01-.25.25zM5.75 5a.75.75 0 00-.75.75v4.5c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-4.5a.75.75 0 00-.75-.75h-4.5zm.75 4.5v-3h3v3h-3z"></path></svg>
               Using <%= plugins.wakatime.os[0]?.name %>
@@ -56,7 +56,7 @@
         </section>
       </div>
 
-      <% { const sections = plugins.wakatime.sections.filter(x => /-graphs$/.test(x)).map(x => x.replace(/-graphs$/, "")), slots = 2 + large %>
+      <% { const sections = plugins.wakatime.sections?.filter(x => /-graphs$/.test(x)).map(x => x.replace(/-graphs$/, "")) || [], slots = 2 + large %>
       <% for (let i = 0; i < sections.length; i+=slots) { %>
           <div class="row">
           <% for (let j = 0; j < slots; j++) { const key = sections[i+j] ; const section = plugins.wakatime[key] ; if (!key) continue %>