Fix(config): allowing aligning Pug indentation with the current one (#265)

* fix: allow aligning Pug indentation with the current one

* fix: minor change

Author: Hugo-COLLIN

config/esbuild/plugins/pugPlugin.js

@@ -19,7 +19,29 @@ const pugPlugin = {
         // Transform all pug templates to HTML
         contents = contents.replace(pugTemplateRegex, (match, pugCode) => {
           try {
-            // Manage interpolations ${...} in the template
+            // Handle indentation
+            const lines = pugCode.split('\n');
+            if (lines.length > 1) {
+              // Find the common indentation
+              const indentMatch = lines[1].match(/^\s+/);
+              if (indentMatch) {
+                const baseIndent = indentMatch[0];
+                // Remove the common indentation from all lines
+                pugCode = lines
+                  .map((line, index) => {
+                    // Skip the first empty line if it exists
+                    if (index === 0 && line.trim() === '') return '';
+                    // Remove base indentation only if line starts with it
+                    if (line.startsWith(baseIndent)) {
+                      return line.slice(baseIndent.length);
+                    }
+                    return line;
+                  })
+                  .join('\n');
+              }
+            }
+
+            // Handle interpolations
             const interpolationPlaceholders = [];
             let index = 0;
 
@@ -46,11 +68,17 @@ const pugPlugin = {
               );
             });
 
-            // Return the literal template with the compiled HTML
+            // Clean up extra whitespace and newlines
+            html = html
+              .split('\n')
+              .map(line => line.trimRight())
+              .join('\n')
+              .trim();
+
             return 'html`' + html.replace(/`/g, '\\`') + '`';
           } catch (error) {
             console.error('Error compiling Pug template:', error);
-            return match; // In case of error, keep the original template
+            throw error; // Rethrow the error to stop the build
           }
         });
 

src/features/optionsPage/ExportOptions.ts

@@ -70,52 +70,52 @@ export class ExportOptions extends LitElement {
   /* language=pug */
   render() {
     return pug`
-main.container
-  .title-div
-    span.inner-span-image(style="margin-right: 10px;")
-      img(
-        src="${chrome.runtime.getURL('../files/icons/icon-48.png')}"
-        alt="${appInfos.APP_SNAME} icon"
-        width="48"
-        height="48"
-      )
-    h1.title Export Options
-  form#options-form(@submit="${this.saveOptions}")
-    #options-fieldset
-      sl-input#filenameTemplate(
-        .value="${this.filenameTemplate}"
-        @sl-input="${this.handleInputChange}"
-        placeholder="Enter filename format"
-        label="Filename format:"
-      )
-      div
-        p The filename format is a string containing placeholders, that will be replaced by the actual values when exporting a page. 
-        p The currently supported placeholders are:
-        i Domain placeholders:
-        ul
-          li %W - Sub-domain name (e.g. "Phind Search", "Perplexity Pages")
-          li %H - Host name (e.g. "www.chatgpt.com")
-          li %T - Title of the page (first 60 characters)
-        i Date placeholders:
-        ul
-          li %t - Timestamp (Unix time)
-          li %Y - Year
-          li %M - Month
-          li %D - Day
-          li %h - Hour
-          li %m - Minutes
-          li %s - Seconds
-        sl-input#webhookUrl(
-          .value="${this.webhookUrl}"
-          @sl-input="${this.handleInputChange}"
-          placeholder="Enter webhook URL (optional)"
-          label="Webhook URL:"
-        )
-    sl-button(variant="primary" type="submit") Save changes
-  p(class="feedback")
-    span Options page is currently in beta. 
-      a(href="${appInfos.URLS.DISCUSSIONS}" target="_blank") Share feedback and report bugs.
-    div(class="toast-stack")
+      main.container
+        .title-div
+          span.inner-span-image(style="margin-right: 10px;")
+            img(
+              src="${chrome.runtime.getURL('../files/icons/icon-48.png')}"
+              alt="${appInfos.APP_SNAME} icon"
+              width="48"
+              height="48"
+            )
+          h1.title Export Options
+        form#options-form(@submit="${this.saveOptions}")
+          #options-fieldset
+            sl-input#filenameTemplate(
+              .value="${this.filenameTemplate}"
+              @sl-input="${this.handleInputChange}"
+              placeholder="Enter filename format"
+              label="Filename format:"
+            )
+            div
+              p The filename format is a string containing placeholders, that will be replaced by the actual values when exporting a page. 
+              p The currently supported placeholders are:
+              i Domain placeholders:
+              ul
+                li %W - Sub-domain name (e.g. "Phind Search", "Perplexity Pages")
+                li %H - Host name (e.g. "www.chatgpt.com")
+                li %T - Title of the page (first 60 characters)
+              i Date placeholders:
+              ul
+                li %t - Timestamp (Unix time)
+                li %Y - Year
+                li %M - Month
+                li %D - Day
+                li %h - Hour
+                li %m - Minutes
+                li %s - Seconds
+              sl-input#webhookUrl(
+                .value="${this.webhookUrl}"
+                @sl-input="${this.handleInputChange}"
+                placeholder="Enter webhook URL (optional)"
+                label="Webhook URL:"
+              )
+          sl-button(variant="primary" type="submit") Save changes
+        p(class="feedback")
+          span Options page is currently in beta. 
+            a(href="${appInfos.URLS.DISCUSSIONS}" target="_blank") Share feedback and report bugs.
+          div(class="toast-stack")
   `;
   }