Serve minified static assets and stop blocking HTML parsing

.github/workflows/minified-assets.yml

@@ -0,0 +1,23 @@
+name: Minified assets
+on: [push]
+permissions:
+  contents: read
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      # git checkout
+      - uses: actions/checkout@v2
+
+      # node setup (esbuild is fetched on the fly via npx)
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      # regenerate redturtle_chefcookie(.tech).min.js and styles.min.css
+      # and fail if that produces a diff: it means a source file was
+      # edited without regenerating its minified counterpart.
+      - name: check minified assets are up to date
+        run: make check-minified

CHANGES.rst

@@ -4,7 +4,10 @@ Changelog
 3.0.1 (unreleased)
 ------------------
 
-- Nothing changed yet.
+- Serve minified versions of ``redturtle_chefcookie.js``, ``redturtle_chefcookie_tech.js`` and ``styles.css``.
+  [mamico]
+- Add ``defer`` attribute to injected script tags so they no longer block HTML parsing.
+  [mamico]
 
 
 3.0.0 (2026-03-26)

DEVELOP.rst

@@ -40,3 +40,19 @@ run a specific tox env:
 
     $ tox -e py37-Plone52
 
+
+Minified JS/CSS assets
+-----------------------
+
+``redturtle_chefcookie.js``, ``redturtle_chefcookie_tech.js`` and ``styles.css``
+(under ``src/redturtle/chefcookie/browser/static/``) are shipped both as
+readable sources and as minified files that are actually served to the
+browser. If you edit one of those sources, regenerate the minified files
+with (requires Node/npx, esbuild is fetched on the fly)::
+
+    $ make minify
+
+CI (``.github/workflows/minified-assets.yml``) runs ``make check-minified``,
+which regenerates the minified files and fails if that produces a diff, to
+catch a source edited without regenerating its ``.min`` counterpart.
+

Makefile

@@ -0,0 +1,39 @@
+STATIC_DIR = src/redturtle/chefcookie/browser/static
+ESBUILD = npx --yes esbuild@0.28.1
+
+JS_SOURCES = \
+	$(STATIC_DIR)/redturtle_chefcookie.js \
+	$(STATIC_DIR)/redturtle_chefcookie_tech.js
+JS_MINIFIED = $(JS_SOURCES:.js=.min.js)
+
+CSS_SOURCES = $(STATIC_DIR)/styles.css
+CSS_MINIFIED = $(CSS_SOURCES:.css=.min.css)
+
+.PHONY: minify minify-js minify-css check-minified
+
+minify: minify-js minify-css
+
+minify-js:
+	@for src in $(JS_SOURCES); do \
+		out="$${src%.js}.min.js"; \
+		echo "minifying $$src -> $$out"; \
+		$(ESBUILD) $$src --minify --outfile=$$out; \
+	done
+
+minify-css:
+	@for src in $(CSS_SOURCES); do \
+		out="$${src%.css}.min.css"; \
+		echo "minifying $$src -> $$out"; \
+		$(ESBUILD) $$src --minify --outfile=$$out; \
+	done
+
+# Regenerates the minified assets and fails if that changes anything that
+# is not already committed: catches the case where someone edited a source
+# file (redturtle_chefcookie.js, redturtle_chefcookie_tech.js, styles.css)
+# without regenerating its .min counterpart.
+# NOTE: this compares file *content* (git diff), not modification times:
+# git does not preserve mtimes on checkout, so an mtime-based check would
+# always "pass" right after a fresh clone/checkout in CI regardless of
+# which file was actually edited last.
+check-minified: minify
+	git diff --exit-code -- $(JS_MINIFIED) $(CSS_MINIFIED)

src/redturtle/chefcookie/browser/static/redturtle_chefcookie.min.js

@@ -0,0 +1,69 @@
+class redturtlechefcookie extends chefcookie{showSettings(){this.logTracking("settings_open");let e=document.querySelector(".chefcookie__settings-container");e.classList.add("chefcookie__settings-container--visible"),e.style.minHeight=e.scrollHeight+"px",setTimeout(()=>{e.classList.contains("chefcookie__settings-container--visible")&&(e.style.height="auto"),e.focus()},this.animationSpeed),this.fixMaxHeight()}acceptAllScripts(){let e=[];this.config.settings.forEach(i=>{i.scripts!==void 0&&Object.entries(i.scripts).forEach(([c,t])=>{this.accept(c,!1)})})}switchSettingsLabelsOpen(){document.querySelector(".chefcookie__button--accept").style.display="block",document.querySelector(".chefcookie__button--settings").style.display="none"}buildDom(){document.body.insertAdjacentHTML("afterbegin",`
+            <div id="cc-banner" class="chefcookie chefcookie--${this.config.style.layout} chefcookie--columns-${"columns"in this.config.style?this.config.style.columns:"auto"}${"scripts_selection"in this.config&&this.config.scripts_selection!==!1?" chefcookie--has-scripts":""} chefcookie--hidden">
+                <div class="chefcookie__inner">
+                    <div class="chefcookie__box">
+
+                    <a data-cc-destroy href="#" class="close" title="${this.getLabel("close")}"></a>
+
+                        <div class="chefcookie__message">${this.translate(this.config.message)}</div>
+                        <div class="chefcookie__settings-container" id="chefcookie__settings" tabindex="0">
+                            <ul class="chefcookie__groups chefcookie__groups--count-${this.config.settings.length}">
+                                ${this.config.settings.map((e,i)=>`
+                                    <li class="chefcookie__group${e.cannot_be_modified?" chefcookie__group--disabled":""}">
+                                        <div class="chefcookie__group_wrapper">
+                                          ${"scripts_selection"in this.config&&this.config.scripts_selection==="collapse"&&"scripts"in e&&Object.keys(e.scripts).length>0&&Object.keys(e.scripts)[0].indexOf("dummy_")===-1?`
+                                                      <a href="#" class="chefcookie__group-collapse">${this.getLabel("group_open")!=""?this.getLabel("group_open"):this.getLabel("settings_open")}</a>
+                                                  `:""}
+                                          <label class="chefcookie__group-label" for="chefcookie_group_${i}">
+                                              <h3 class="chefcookie__group-label-text">
+                                                ${this.translate(e.title)}
+                                              </h3>
+                                              <span class="show-info" aria-controls="chefcookie_group_${i}_description">
+
+                                              ${"description"in e&&e.description!=""?`
+                                              <span class="chefcookie__group-description" id="chefcookie_group_${i}_description">${this.translate(e.description)}</span>
+                                              `:""}
+                                              </span>
+
+                                              <input${e.cannot_be_modified?' disabled="disabled"':""} class="chefcookie__group-checkbox" data-status="${this.isCheckboxActiveForGroup(i)}" id="chefcookie_group_${i}" type="checkbox" role="checkbox" aria-describedby="chefcookie_group_${i}_description" aria-checked="${this.isCheckboxActiveForGroup(i)===2?"true":"false"}" name="chefcookie_group[]" value="${i}"${this.isCheckboxActiveForGroup(i)===2?' checked="checked"':""} />
+                                    <span class="chefcookie__group-checkbox-icon"></span>
+                                          </label>
+
+
+
+
+                                    </div>
+
+                                        ${"scripts_selection"in this.config&&this.config.scripts_selection!==!1&&"scripts"in e&&Object.keys(e.scripts).length>0&&Object.keys(e.scripts)[0].indexOf("dummy_")===-1?`
+                                                <ul class="chefcookie__scripts chefcookie__scripts--count-${Object.keys(e.scripts).length}${this.config.scripts_selection!=="collapse"?" chefcookie__scripts--visible":""}">
+                                                    ${Object.keys(e.scripts).map(c=>`
+                                                        <li class="chefcookie__script${e.cannot_be_modified?" chefcookie__script--disabled":""}">
+                                                            <div class="chefcookie__script_wrapper">
+                                                              <label class="chefcookie__script-label" for="chefcookie_script_${i}_${c}">
+                                                                  <input${e.cannot_be_modified?' disabled="disabled"':""} class="chefcookie__script-checkbox" id="chefcookie_script_${i}_${c}" aria-describedby="chefcookie_script_${i}_${c}_description" type="checkbox" name="chefcookie_script[]" value="${i}|${c}"${this.isCheckboxActiveForProvider(i,c)?' checked="checked"':""} />
+                                                                  <span class="chefcookie__script-title">${typeof e.scripts[c]=="object"&&e.scripts[c]!==null&&"title"in e.scripts[c]&&e.scripts[c].title!=""?this.translate(e.scripts[c].title):c}</span>
+                                                                  <span class="chefcookie__script-checkbox-icon"></span>
+                                                              </label>
+                                                              ${typeof e.scripts[c]=="object"&&e.scripts[c]!==null&&"description"in e.scripts[c]&&e.scripts[c].description!=""?'<div class="chefcookie__script-description"><a href="#" class="chefcookie__script-description-collapse" aria-hidden="true" aria-controls="chefcookie_script_'+i+"_"+c+'_description" aria-label="'+this.getLabel("details_open")+'">'+this.getLabel("details_open")+'</a><div class="chefcookie__script-description-content" id="chefcookie_script_'+i+"_"+c+'_description">'+this.translate(e.scripts[c].description)+"</div></div>":""}
+                                                            </div>
+                                                        </li>
+                                                    `).join("")}
+                                                </ul>
+                                            `:""}
+
+                                    </li>
+                                `).join("")}
+                            </ul>
+                        </div>
+                        <div class="chefcookie__buttons chefcookie__buttons--count-${"show_decline_button"in this.config&&this.config.show_decline_button===!0?"3":"2"}">
+                            <a href="#chefcookie__decline" class="chefcookie__button chefcookie__button--decline" role="button">${this.getLabel("decline")}</a>
+                            <a href="#chefcookie__accept_all" data-cc-accept-all class="chefcookie__button chefcookie__button--accept_all" role="button">${this.getLabel("accept_all")}</a>
+
+                            <a href="#chefcookie__settings" class="chefcookie__button chefcookie__button--settings" aria-controls="chefcookie__settings" role="button">${this.getLabel("settings_open")}</a>
+                            <a href="#chefcookie__accept" style="display:none" class="chefcookie__button chefcookie__button--accept" role="button">${this.getLabel("accept")}</a>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `)}}