From 71bd1e6138752e2a85a9d7e1b8683c4f305dda6f Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Tue, 13 Sep 2022 18:41:21 +0200
Subject: [PATCH 1/7] Miniminor doc reformating.

---
 src/pat/toggle/documentation.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pat/toggle/documentation.md b/src/pat/toggle/documentation.md
index fd7ce3ac7..4cf6246e4 100644
--- a/src/pat/toggle/documentation.md
+++ b/src/pat/toggle/documentation.md
@@ -1,6 +1,7 @@
 ## Description
 
-Toggle allows for toggling between 2 different attribute values. For instance to show or hide a sidebar with a CSS class on the body tag.
+Toggle allows for toggling between 2 different attribute values.
+For instance to show or hide a sidebar with a CSS class on the body tag.
 
 ## Documentation
 

From 2f366e9b84caa937db0d9ceb520f49d159933b82 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Fri, 9 Sep 2022 14:06:35 +0200
Subject: [PATCH 2/7] maint: Modernize header markup in demo files.

---
 index.html                                     | 10 +++-------
 src/pat/auto-scale/index.html                  | 13 ++++---------
 src/pat/auto-submit/index.html                 | 14 +++++---------
 src/pat/auto-submit/pattern-test-response.html |  4 ++--
 src/pat/auto-suggest/index.html                | 10 +++-------
 src/pat/autofocus/index-iframed.html           | 13 +++----------
 src/pat/autofocus/index.html                   | 13 +++----------
 src/pat/bumper/index.html                      | 12 ++++--------
 src/pat/calendar/index.html                    | 12 ++++--------
 src/pat/calendar/test_add_event.html           |  4 ++--
 src/pat/calendar/test_event.html               |  2 +-
 src/pat/carousel/index.html                    |  8 ++------
 src/pat/checklist/index.html                   | 10 +++-------
 src/pat/clone/index.html                       | 11 +++--------
 src/pat/close-panel/index.html                 | 17 ++++-------------
 src/pat/collapsible/index.html                 | 10 +++-------
 src/pat/colour-picker/index.html               | 10 +++-------
 src/pat/date-picker/index.html                 | 12 ++++--------
 src/pat/datetime-picker/index.html             | 14 ++++++--------
 src/pat/depends/index.html                     | 10 +++-------
 src/pat/display-time/index.html                | 14 +++-----------
 src/pat/equaliser/index.html                   | 12 ++++--------
 src/pat/expandable-tree/index.html             | 12 ++++--------
 src/pat/focus/index.html                       | 10 +++-------
 src/pat/forward/index.html                     | 10 +++-------
 src/pat/fullscreen/index.html                  | 12 ++++--------
 src/pat/gallery/index.html                     | 12 ++++--------
 src/pat/grid/index.html                        | 10 +++-------
 src/pat/image-crop/index.html                  | 10 +++-------
 src/pat/inject/demo/history-inject-source.html |  2 +-
 src/pat/inject/demo/history-page1.html         | 10 +++-------
 src/pat/inject/demo/history-page2.html         | 10 +++-------
 src/pat/inject/demo/history-page3.html         | 10 +++-------
 src/pat/inject/demo/history.html               | 10 +++-------
 src/pat/inject/demo/inject-sources.html        |  2 +-
 src/pat/inject/demo/inject-text.html           |  4 ++--
 src/pat/inject/demo/pattern-test-response.html | 10 +++-------
 src/pat/inject/demo/test_404.html              |  4 ++--
 src/pat/inject/index.html                      | 12 ++++--------
 src/pat/markdown/index.html                    | 10 +++-------
 src/pat/markdown/injected-page.html            | 10 +++-------
 src/pat/masonry/index.html                     | 13 +++----------
 src/pat/menu/index.html                        | 12 ++++--------
 src/pat/minimalpattern/index.html              | 10 +++-------
 src/pat/modal/index-modal.html                 | 10 +++-------
 src/pat/modal/index.html                       | 14 +++++---------
 src/pat/navigation/index.html                  | 13 ++++---------
 src/pat/notification/index.html                | 10 +++-------
 src/pat/notification/inject-notification.html  | 10 +++-------
 src/pat/notification/inject-source.html        |  2 +-
 src/pat/push/index.html                        | 12 ++++--------
 src/pat/scroll-box/index.html                  | 14 +++++---------
 src/pat/scroll/index.html                      | 10 +++-------
 src/pat/scroll/test-scrollbody.html            |  7 ++++---
 src/pat/selectbox/index.html                   | 10 +++-------
 src/pat/slides/index.html                      | 10 +++-------
 src/pat/slides/standalone-test.html            | 12 ++++--------
 src/pat/slides/style/fontello/demo.html        |  4 ++--
 src/pat/sortable/index.html                    | 10 +++-------
 src/pat/stacks/index.html                      | 10 +++-------
 src/pat/subform/form-response.html             |  2 +-
 src/pat/subform/index.html                     | 10 +++-------
 src/pat/subform/pattern-test-response.html     |  2 +-
 src/pat/subform/subform-other-response.html    |  2 +-
 src/pat/subform/subform-response.html          |  2 +-
 src/pat/switch/index.html                      | 12 ++++--------
 src/pat/syntax-highlight/index.html            | 10 +++-------
 src/pat/tabs/index.html                        | 12 ++++--------
 src/pat/toggle/index.html                      | 12 ++++--------
 src/pat/tooltip/index.html                     | 12 ++++--------
 src/pat/tooltip/pattern-test-response.html     |  2 +-
 src/pat/validation/index.html                  | 18 ++++--------------
 src/pat/zoom/index.html                        |  9 +++------
 73 files changed, 224 insertions(+), 479 deletions(-)

diff --git a/index.html b/index.html
index 0054f6e5f..d479fe384 100644
--- a/index.html
+++ b/index.html
@@ -1,14 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Patterns demo pages</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
     </head>
     <body class="component-index">
         <h1>Demos and documentation for the individual patterns</h1>
diff --git a/src/pat/auto-scale/index.html b/src/pat/auto-scale/index.html
index 19abaa51d..4d5b172cc 100644
--- a/src/pat/auto-scale/index.html
+++ b/src/pat/auto-scale/index.html
@@ -1,14 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Auto scale</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
     </head>
 
     <body>
@@ -82,8 +78,7 @@
             >
                 open in fullscreen
             </button>
-
-            <style type="text/css">
+            <style>
                 .pat-button {
                     float: left;
                 }
diff --git a/src/pat/auto-submit/index.html b/src/pat/auto-submit/index.html
index 6e4caeb29..0eea53a5e 100644
--- a/src/pat/auto-submit/index.html
+++ b/src/pat/auto-submit/index.html
@@ -1,15 +1,11 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Auto submit</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
-        <style type="text/css" media="screen">
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
+        <style>
           label {
             display: block;
           }
@@ -35,7 +31,7 @@
     <body class="home">
         <h1>pat-autosubmit demo</h1>
         <div id="demo">
-            <style type="text/css">
+            <style>
                 .pat-message {
                     animation: fadeIn 0.5s;
                 }
diff --git a/src/pat/auto-submit/pattern-test-response.html b/src/pat/auto-submit/pattern-test-response.html
index e4614163d..c44823927 100644
--- a/src/pat/auto-submit/pattern-test-response.html
+++ b/src/pat/auto-submit/pattern-test-response.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Feedback</title>
+        <meta charset="utf-8">
     </head>
     <body>
-        <p id="message" 
+        <p id="message"
            class="pat-message success">Succeeded!!</p>
     </body>
 </html>
diff --git a/src/pat/auto-suggest/index.html b/src/pat/auto-suggest/index.html
index cd9644a1d..80f79821a 100644
--- a/src/pat/auto-suggest/index.html
+++ b/src/pat/auto-suggest/index.html
@@ -1,14 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Demo page</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
     </head>
     <body>
         <h2>
diff --git a/src/pat/autofocus/index-iframed.html b/src/pat/autofocus/index-iframed.html
index e98e8704f..210177036 100644
--- a/src/pat/autofocus/index-iframed.html
+++ b/src/pat/autofocus/index-iframed.html
@@ -1,17 +1,10 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta http-equiv="Content-Type"
-          content="text/html; charset=UTF-8"
-    />
     <title>pat-autofocus iframe'd demo page</title>
-    <link href="/style/common.css"
-          rel="stylesheet"
-          type="text/css"
-    />
-    <script src="/bundle.min.js"
-            type="text/javascript"
-    ></script>
+    <meta charset="utf-8">
+    <link href="/style/common.css" rel="stylesheet" />
+    <script src="/bundle.min.js"></script>
   </head>
   <body>
     <form>
diff --git a/src/pat/autofocus/index.html b/src/pat/autofocus/index.html
index 0641210d8..642ede58e 100644
--- a/src/pat/autofocus/index.html
+++ b/src/pat/autofocus/index.html
@@ -1,17 +1,10 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta http-equiv="Content-Type"
-          content="text/html; charset=UTF-8"
-    />
     <title>pat-autofocus demo page</title>
-    <link href="/style/common.css"
-          rel="stylesheet"
-          type="text/css"
-    />
-    <script src="/bundle.min.js"
-            type="text/javascript"
-    ></script>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="/style/common.css" />
+    <script src="/bundle.min.js"></script>
   </head>
   <body>
     <form>
diff --git a/src/pat/bumper/index.html b/src/pat/bumper/index.html
index d18b50e78..47197d6e6 100644
--- a/src/pat/bumper/index.html
+++ b/src/pat/bumper/index.html
@@ -1,15 +1,11 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Demo page</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
-        <style type="text/css" media="screen">
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
+        <style>
           .pat-bumper {
             position: sticky;
             top: 1em;
diff --git a/src/pat/calendar/index.html b/src/pat/calendar/index.html
index 5cde31594..b6fc983a1 100644
--- a/src/pat/calendar/index.html
+++ b/src/pat/calendar/index.html
@@ -1,14 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <title>Demo page</title>
-    <link rel="stylesheet" href="/style/common.css" type="text/css">
-    <script
-        src="/bundle.min.js"
-        type="text/javascript"
-        charset="utf-8"
-    ></script>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="/style/common.css">
+    <script src="/bundle.min.js"></script>
 </head>
 <body>
     <div class="calendar-main">
@@ -122,7 +118,7 @@
             </article>
     </div>
 
-    <style type="text/css" media="screen">
+    <style>
         .calendar-hidden {
             display: none !important;
         }
diff --git a/src/pat/calendar/test_add_event.html b/src/pat/calendar/test_add_event.html
index fbef5f9c1..20ff8bd69 100644
--- a/src/pat/calendar/test_add_event.html
+++ b/src/pat/calendar/test_add_event.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us">
+<html>
   <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <meta charset="utf-8">
   </head>
   <body>
     <h1>Create event</h1>
diff --git a/src/pat/calendar/test_event.html b/src/pat/calendar/test_event.html
index d23463d4c..57051d7a3 100644
--- a/src/pat/calendar/test_event.html
+++ b/src/pat/calendar/test_event.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="UTF-8" />
     <title>Test event</title>
+    <meta charset="utf-8">
   </head>
   <body>
     <div id="document-body">
diff --git a/src/pat/carousel/index.html b/src/pat/carousel/index.html
index 4960c1d9d..ad2cc3cf7 100644
--- a/src/pat/carousel/index.html
+++ b/src/pat/carousel/index.html
@@ -2,12 +2,8 @@
 <html>
     <head>
         <title>Demo page</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
     </head>
     <body>
         <h3>Carousel in a list</h3>
diff --git a/src/pat/checklist/index.html b/src/pat/checklist/index.html
index 9edfb053d..9e152f5ff 100644
--- a/src/pat/checklist/index.html
+++ b/src/pat/checklist/index.html
@@ -1,14 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Demo page</title>
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
-        <style type="text/css" media="screen">
+        <meta charset="utf-8">
+        <script src="/bundle.min.js"></script>
+        <style>
           fieldset fieldset {
             padding-left: 4em;
           }
diff --git a/src/pat/clone/index.html b/src/pat/clone/index.html
index 29a0ca8be..d6c57261a 100644
--- a/src/pat/clone/index.html
+++ b/src/pat/clone/index.html
@@ -1,17 +1,12 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>pat-clone demo page</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
     </head>
     <body>
-
         <h1>Example 1 with hidden template</h1>
         <form action=""
               class="pat-form"
diff --git a/src/pat/close-panel/index.html b/src/pat/close-panel/index.html
index f5eef1695..6668b4d0a 100644
--- a/src/pat/close-panel/index.html
+++ b/src/pat/close-panel/index.html
@@ -1,20 +1,11 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8" />
     <title>pat-close-panel demo</title>
-    <link href="/style/common.css"
-          rel="stylesheet"
-          type="text/css"
-    />
-    <script charset="utf-8"
-            src="/bundle.min.js"
-            type="text/javascript"
-    ></script>
-
-    <style media="screen"
-           type="text/css"
-    >
+    <meta charset="utf-8">
+    <link href="/style/common.css" rel="stylesheet" />
+    <script src="/bundle.min.js"></script>
+    <style>
       .panel {
         background-color: white;
       }
diff --git a/src/pat/collapsible/index.html b/src/pat/collapsible/index.html
index a93d03ba3..9e3c5e823 100644
--- a/src/pat/collapsible/index.html
+++ b/src/pat/collapsible/index.html
@@ -1,14 +1,10 @@
 <!DOCTYPE html>
-
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Demo page</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script src="/bundle.min.js"
-                type="text/javascript"
-                charset="utf-8"
-        ></script>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
     </head>
     <body>
         <fieldset class="pat-button-bar">
diff --git a/src/pat/colour-picker/index.html b/src/pat/colour-picker/index.html
index 34f41faf3..ba57a25be 100644
--- a/src/pat/colour-picker/index.html
+++ b/src/pat/colour-picker/index.html
@@ -1,14 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>pat-colour-picker demo page</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
     </head>
     <body>
         <form>
diff --git a/src/pat/date-picker/index.html b/src/pat/date-picker/index.html
index 07ace4e1d..19dd3ff51 100644
--- a/src/pat/date-picker/index.html
+++ b/src/pat/date-picker/index.html
@@ -1,15 +1,11 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>pat-date-picker demo page</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
-        <style type="text/css" media="screen">
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
+        <style>
           time.output-field {
             min-width: 6em;
             height: 2em;
diff --git a/src/pat/datetime-picker/index.html b/src/pat/datetime-picker/index.html
index daf970541..e59b6bfbe 100644
--- a/src/pat/datetime-picker/index.html
+++ b/src/pat/datetime-picker/index.html
@@ -1,15 +1,13 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>pat-datetime-picker demo page</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
-        <link rel="stylesheet" href="datetime-picker.css" type="text/css" />
+        <meta charset="utf-8">
+        <script>
+            window.__patternslib_import_styles = true;
+        </script>
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
     </head>
     <body>
         <form action="">
diff --git a/src/pat/depends/index.html b/src/pat/depends/index.html
index b411a4518..2f0df129c 100644
--- a/src/pat/depends/index.html
+++ b/src/pat/depends/index.html
@@ -1,16 +1,12 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Depends demo</title>
-        <script charset="utf-8">
+        <meta charset="utf-8">
+        <script>
             window.__patternslib_import_styles = true;
         </script>
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <script src="/bundle.min.js"></script>
     </head>
     <body>
       <section id="pat-depends-demo">
diff --git a/src/pat/display-time/index.html b/src/pat/display-time/index.html
index cd7965844..7b6ab11a7 100644
--- a/src/pat/display-time/index.html
+++ b/src/pat/display-time/index.html
@@ -1,18 +1,10 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta http-equiv="content-type"
-          content="text/html; charset=utf-8"
-    />
     <title>pat-display-time demo</title>
-    <link href="/style/common.css"
-          rel="stylesheet"
-          type="text/css"
-    />
-    <script charset="utf-8"
-            src="/bundle.min.js"
-            type="text/javascript"
-    ></script>
+    <meta charset="utf-8">
+    <link href="/style/common.css" rel="stylesheet" />
+    <script src="/bundle.min.js"></script>
   </head>
 
   <body role="document">
diff --git a/src/pat/equaliser/index.html b/src/pat/equaliser/index.html
index b8f2fbe9e..b26c4b5d1 100644
--- a/src/pat/equaliser/index.html
+++ b/src/pat/equaliser/index.html
@@ -1,14 +1,10 @@
 <!DOCTYPE html>
-<html xmlns:fb="http://www.facebook.com/2008/fbml">
+<html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Patterns — Equaliser</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
     </head>
     <body class="home">
         <div
diff --git a/src/pat/expandable-tree/index.html b/src/pat/expandable-tree/index.html
index 4520fa486..279120ade 100644
--- a/src/pat/expandable-tree/index.html
+++ b/src/pat/expandable-tree/index.html
@@ -1,14 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Demo page</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
     </head>
     <body>
         <ul class="pat-expandable twisties">
@@ -56,7 +52,7 @@
             </li>
             <li class="folder">Folder 5</li>
         </ul>
-        <style type="text/css">
+        <style>
           .twisties {
             background-color: #f9f9f9;
             padding: 10px;
diff --git a/src/pat/focus/index.html b/src/pat/focus/index.html
index 0824a2731..ad8e1914b 100644
--- a/src/pat/focus/index.html
+++ b/src/pat/focus/index.html
@@ -1,14 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>focus pattern demo</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
     </head>
     <body>
         <form>
diff --git a/src/pat/forward/index.html b/src/pat/forward/index.html
index 8b25683a5..cc423e901 100644
--- a/src/pat/forward/index.html
+++ b/src/pat/forward/index.html
@@ -1,14 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Toggle</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
     </head>
     <body>
         <form>
diff --git a/src/pat/fullscreen/index.html b/src/pat/fullscreen/index.html
index 259f2c7a9..e04043a2d 100644
--- a/src/pat/fullscreen/index.html
+++ b/src/pat/fullscreen/index.html
@@ -1,15 +1,11 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Scroll demo</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
-        <style type="text/css" media="screen">
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
+        <style>
             button:not(.pat-fullscreen-close-fullscreen) {
                 background: white;
                 color: black;
diff --git a/src/pat/gallery/index.html b/src/pat/gallery/index.html
index 7b5546988..81cf63cca 100644
--- a/src/pat/gallery/index.html
+++ b/src/pat/gallery/index.html
@@ -1,15 +1,11 @@
 <!DOCTYPE html>
 <html lang="en-US">
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Gallery</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
-        <style type="text/css" media="screen">
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
+        <style>
             .pat-gallery img,
             img.pat-gallery {
                 width: 150px;
diff --git a/src/pat/grid/index.html b/src/pat/grid/index.html
index ff4ddb8fb..43376b6bb 100644
--- a/src/pat/grid/index.html
+++ b/src/pat/grid/index.html
@@ -1,14 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Patterns — Grid</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
     </head>
     <body class="home">
         <div id="demo">
diff --git a/src/pat/image-crop/index.html b/src/pat/image-crop/index.html
index 81044cd01..eb39c5eec 100644
--- a/src/pat/image-crop/index.html
+++ b/src/pat/image-crop/index.html
@@ -1,14 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Demo page</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
     </head>
     <body>
         <form id="crop-demo-form">
diff --git a/src/pat/inject/demo/history-inject-source.html b/src/pat/inject/demo/history-inject-source.html
index d28c18df5..a18425d2f 100644
--- a/src/pat/inject/demo/history-inject-source.html
+++ b/src/pat/inject/demo/history-inject-source.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Gilgamesh Epos</title>
+        <meta charset="utf-8">
     </head>
 
     <body>
diff --git a/src/pat/inject/demo/history-page1.html b/src/pat/inject/demo/history-page1.html
index 72248a0ee..02200e2e7 100644
--- a/src/pat/inject/demo/history-page1.html
+++ b/src/pat/inject/demo/history-page1.html
@@ -1,14 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Injection history demo page</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
     </head>
     <body>
         <h1>Injection history demo page 1</h1>
diff --git a/src/pat/inject/demo/history-page2.html b/src/pat/inject/demo/history-page2.html
index a14ac612e..d8d6e9d57 100644
--- a/src/pat/inject/demo/history-page2.html
+++ b/src/pat/inject/demo/history-page2.html
@@ -1,14 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Injection history demo page</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
     </head>
     <body>
         <h1>Injection history demo page 2</h1>
diff --git a/src/pat/inject/demo/history-page3.html b/src/pat/inject/demo/history-page3.html
index c4e913865..ffcb17523 100644
--- a/src/pat/inject/demo/history-page3.html
+++ b/src/pat/inject/demo/history-page3.html
@@ -1,14 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Injection history demo page</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
     </head>
     <body>
         <h1>Injection history demo page 3</h1>
diff --git a/src/pat/inject/demo/history.html b/src/pat/inject/demo/history.html
index 2bbd777dd..9cfedccfd 100644
--- a/src/pat/inject/demo/history.html
+++ b/src/pat/inject/demo/history.html
@@ -1,14 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Injection history demo page</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
     </head>
     <body>
         <p><a href="../#demo-history-2">Back to the main inject demo.</a></p>
diff --git a/src/pat/inject/demo/inject-sources.html b/src/pat/inject/demo/inject-sources.html
index ce345fbd8..70b076f75 100644
--- a/src/pat/inject/demo/inject-sources.html
+++ b/src/pat/inject/demo/inject-sources.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Demo page</title>
+        <meta charset="utf-8">
     </head>
 
     <body>
diff --git a/src/pat/inject/demo/inject-text.html b/src/pat/inject/demo/inject-text.html
index ed44ffc7f..dfe4d53ac 100644
--- a/src/pat/inject/demo/inject-text.html
+++ b/src/pat/inject/demo/inject-text.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Demo page</title>
+        <meta charset="utf-8">
     </head>
 
     <body>
-        <style type="text/css" media="screen">
+        <style>
             #pos-1 {
                 margin-top: 60vh;
             }
diff --git a/src/pat/inject/demo/pattern-test-response.html b/src/pat/inject/demo/pattern-test-response.html
index 5bc339305..b383bc249 100644
--- a/src/pat/inject/demo/pattern-test-response.html
+++ b/src/pat/inject/demo/pattern-test-response.html
@@ -1,14 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Insert title here</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
     </head>
 
     <body>
diff --git a/src/pat/inject/demo/test_404.html b/src/pat/inject/demo/test_404.html
index 9b9f6ba98..722fa79b3 100644
--- a/src/pat/inject/demo/test_404.html
+++ b/src/pat/inject/demo/test_404.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width" />
     <title>404</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width" />
   </head>
   <body>
     <h1>oh-nose!</h1>
diff --git a/src/pat/inject/index.html b/src/pat/inject/index.html
index 88b26c163..19bf5f7bd 100644
--- a/src/pat/inject/index.html
+++ b/src/pat/inject/index.html
@@ -1,21 +1,17 @@
 <!DOCTYPE html>
 <html>
     <head>
+        <title>Injection pattern</title>
         <meta charset="utf-8"/>
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
         <!--meta name="patterns-push-url" content="ws://push.quaivecloud.com/ws" /-->
         <!--meta name="patterns-push-url" content="ws://localhost:15674/ws" /-->
         <!--meta name="patterns-push-exchange" content="patternslib" /-->
         <!--meta name="patterns-push-login" content="guest" /-->
         <!--meta name="patterns-push-password" content="guest" /-->
         <!--meta name="patterns-push-filter" content="allan_neece" /-->
-        <meta name="pat-inject-status-404" content="./demo/test_404.html" /
-        <title>Injection pattern</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <meta name="pat-inject-status-404" content="./demo/test_404.html" />
     </head>
 
     <body>
diff --git a/src/pat/markdown/index.html b/src/pat/markdown/index.html
index b12b3b619..4fc5cfbcb 100644
--- a/src/pat/markdown/index.html
+++ b/src/pat/markdown/index.html
@@ -1,14 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Demo page</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
     </head>
     <body>
         <h3>The content below is rendered from Markdown</h3>
diff --git a/src/pat/markdown/injected-page.html b/src/pat/markdown/injected-page.html
index 324a326d7..c743f20c6 100644
--- a/src/pat/markdown/injected-page.html
+++ b/src/pat/markdown/injected-page.html
@@ -1,14 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Demo page</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
     </head>
     <body>
         <a
diff --git a/src/pat/masonry/index.html b/src/pat/masonry/index.html
index 0f12ec9ee..9b5d52369 100644
--- a/src/pat/masonry/index.html
+++ b/src/pat/masonry/index.html
@@ -1,17 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" 
-              content="text/html; charset=UTF-8" />
         <title>Masonry Pattern demo</title>
-        <link rel="stylesheet" 
-              href="/style/common.css" 
-              type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
     </head>
     <body>
         <div id="masonry-demo"
diff --git a/src/pat/menu/index.html b/src/pat/menu/index.html
index e99a32a20..e6e68e0f0 100644
--- a/src/pat/menu/index.html
+++ b/src/pat/menu/index.html
@@ -1,15 +1,11 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>pat-colour-picker demo page</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
-        <style type="text/css">
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
+        <style>
             ul {
                 width: 40em;
             }
diff --git a/src/pat/minimalpattern/index.html b/src/pat/minimalpattern/index.html
index 129a2ba40..66cc1d49d 100644
--- a/src/pat/minimalpattern/index.html
+++ b/src/pat/minimalpattern/index.html
@@ -1,14 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Minimalpattern Demo</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
     </head>
     <body>
         <h1>Minimalpattern examples</h1>
diff --git a/src/pat/modal/index-modal.html b/src/pat/modal/index-modal.html
index 75ab43fef..624fcc23e 100644
--- a/src/pat/modal/index-modal.html
+++ b/src/pat/modal/index-modal.html
@@ -1,14 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Demo page</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
     </head>
     <body>
         <div id="pat-modal">
diff --git a/src/pat/modal/index.html b/src/pat/modal/index.html
index 4efd6b89e..b5e9bcb82 100644
--- a/src/pat/modal/index.html
+++ b/src/pat/modal/index.html
@@ -1,14 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Demo page</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
     </head>
     <body>
 
@@ -139,7 +135,7 @@ <h1>Header goes into panel</h1>
                 </div>
             </div>
 
-            <style type="text/css">
+            <style>
                 .pat-modal .panel-content h1 {
                     margin: 0 0 40px;
                     padding: 0;
@@ -168,7 +164,7 @@ <h1 class="custom-header">Custom header</h1>
                 </div>
             </div>
 
-            <style type="text/css">
+            <style>
                 .pat-modal .panel-content h1 {
                     margin: 0 0 40px;
                     padding: 0;
diff --git a/src/pat/navigation/index.html b/src/pat/navigation/index.html
index c46da7e74..a679b31f8 100644
--- a/src/pat/navigation/index.html
+++ b/src/pat/navigation/index.html
@@ -1,14 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Navigation demo</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
     </head>
     <body>
         <header>
@@ -107,8 +103,7 @@ <h3>Example 2</h3>
             <div id="inject-tab-1-2">Content for tab 1.2</div>
         </section>
 
-        <style type="text/css" 
-               media="screen">
+        <style>
             /* example 1 styles */
             a.current {
                 color: white;
diff --git a/src/pat/notification/index.html b/src/pat/notification/index.html
index ed7324138..aaa51ac12 100644
--- a/src/pat/notification/index.html
+++ b/src/pat/notification/index.html
@@ -1,14 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Notification demo page</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
     </head>
     <body>
         <p class="pat-notification" data-pat-notification="healing: persistent">
diff --git a/src/pat/notification/inject-notification.html b/src/pat/notification/inject-notification.html
index 946581917..e05f0a9c4 100644
--- a/src/pat/notification/inject-notification.html
+++ b/src/pat/notification/inject-notification.html
@@ -1,14 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Demo page</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
     </head>
     <body>
         <p
diff --git a/src/pat/notification/inject-source.html b/src/pat/notification/inject-source.html
index 7b9edc116..a136e9e92 100644
--- a/src/pat/notification/inject-source.html
+++ b/src/pat/notification/inject-source.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Demo page</title>
+        <meta charset="utf-8">
     </head>
     <body>
         This is a notification!
diff --git a/src/pat/push/index.html b/src/pat/push/index.html
index ab020983f..146493f20 100644
--- a/src/pat/push/index.html
+++ b/src/pat/push/index.html
@@ -1,20 +1,16 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+        <title>Push pattern</title>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
         <!--meta name="patterns-push-url" content="ws://push.quaivecloud.com/ws" /-->
         <meta name="patterns-push-url" content="ws://localhost:15674/ws" />
         <meta name="patterns-push-exchange" content="patternslib" />
         <meta name="patterns-push-login" content="guest" />
         <meta name="patterns-push-password" content="guest" />
         <meta name="patterns-push-filter" content="push_marker" />
-        <title>Injection pattern</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
     </head>
 
     <body>
diff --git a/src/pat/scroll-box/index.html b/src/pat/scroll-box/index.html
index 47261b494..1046da3ea 100644
--- a/src/pat/scroll-box/index.html
+++ b/src/pat/scroll-box/index.html
@@ -1,16 +1,12 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width" />
         <title>Demo for pat-scroll</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
-        <style type="text/css" media="screen">
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
+        <meta name="viewport" content="width=device-width" />
+        <style>
             body {
                 height: 200vh;
             }
diff --git a/src/pat/scroll/index.html b/src/pat/scroll/index.html
index 17cc47ac7..99651538c 100644
--- a/src/pat/scroll/index.html
+++ b/src/pat/scroll/index.html
@@ -1,14 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Scroll demo</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
     </head>
     <style>
         .current {
diff --git a/src/pat/scroll/test-scrollbody.html b/src/pat/scroll/test-scrollbody.html
index 09d443309..ca70e95f6 100644
--- a/src/pat/scroll/test-scrollbody.html
+++ b/src/pat/scroll/test-scrollbody.html
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <html>
-<title>label_longziekten-algemeen</title>
-    <script src="/bundle.min.js" type="text/javascript"></script>
-    <style type="text/css" media="screen">
+    <title>label_longziekten-algemeen</title>
+    <meta charset="utf-8">
+    <script src="/bundle.min.js"></script>
+    <style>
       #global-nav {
         background: green;
         height: 6em;
diff --git a/src/pat/selectbox/index.html b/src/pat/selectbox/index.html
index c9632dad3..dec8ba0d5 100644
--- a/src/pat/selectbox/index.html
+++ b/src/pat/selectbox/index.html
@@ -1,14 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Selectbox demo</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
     </head>
     <body>
 
diff --git a/src/pat/slides/index.html b/src/pat/slides/index.html
index 47ea321df..c340d3ba8 100644
--- a/src/pat/slides/index.html
+++ b/src/pat/slides/index.html
@@ -1,14 +1,10 @@
 <!DOCTYPE html>
 <html lang="en-US">
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Slideshows</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
     </head>
     <body>
         <ul>
diff --git a/src/pat/slides/standalone-test.html b/src/pat/slides/standalone-test.html
index 433906cb4..57f6927ba 100644
--- a/src/pat/slides/standalone-test.html
+++ b/src/pat/slides/standalone-test.html
@@ -2,15 +2,11 @@
 <html lang="en-US">
     <head>
         <title>Patterns — Slides</title>
-        <meta charset="UTF-8" />
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
         <meta name="viewport" content="width=1274, user-scalable=no" />
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
-        <link rel="stylesheet" href="style/slides.css" media="all" />
+        <link rel="stylesheet" href="style/slides.css" />
     </head>
     <body>
         <div class="pat-slides">
diff --git a/src/pat/slides/style/fontello/demo.html b/src/pat/slides/style/fontello/demo.html
index 8b8a72455..f435f5e87 100644
--- a/src/pat/slides/style/fontello/demo.html
+++ b/src/pat/slides/style/fontello/demo.html
@@ -4,8 +4,8 @@
     <!--[if lt IE 9]>
       <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script
     ><![endif]-->
-    <meta charset="UTF-8" />
-    <style type="text/css">
+    <meta charset="utf-8" />
+    <style>
       .clearfix {
         *zoom: 1;
       }
diff --git a/src/pat/sortable/index.html b/src/pat/sortable/index.html
index b747e885d..137eeb3e9 100644
--- a/src/pat/sortable/index.html
+++ b/src/pat/sortable/index.html
@@ -1,14 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Sortable demo page</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
     </head>
     <body>
         <ul class="pat-sortable">
diff --git a/src/pat/stacks/index.html b/src/pat/stacks/index.html
index 46575fdf4..2fd09cef1 100644
--- a/src/pat/stacks/index.html
+++ b/src/pat/stacks/index.html
@@ -1,14 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Demo page</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
         <style>
             .navigation.tabs {
                 background-color: white;
diff --git a/src/pat/subform/form-response.html b/src/pat/subform/form-response.html
index cb3faf55a..0fade3940 100644
--- a/src/pat/subform/form-response.html
+++ b/src/pat/subform/form-response.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Feedback</title>
+        <meta charset="utf-8">
     </head>
     <body>
         <p id="message" class="message success">
diff --git a/src/pat/subform/index.html b/src/pat/subform/index.html
index 75a2117b6..2f9d9beab 100644
--- a/src/pat/subform/index.html
+++ b/src/pat/subform/index.html
@@ -1,14 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Subform</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
     </head>
     <body class="home">
         <div class="row">
diff --git a/src/pat/subform/pattern-test-response.html b/src/pat/subform/pattern-test-response.html
index 061e566e1..adf058dd4 100644
--- a/src/pat/subform/pattern-test-response.html
+++ b/src/pat/subform/pattern-test-response.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Feedback</title>
+        <meta charset="utf-8">
     </head>
     <body>
         <p id="message" class="message success">Succeeded!!</p>
diff --git a/src/pat/subform/subform-other-response.html b/src/pat/subform/subform-other-response.html
index 2b8d6e3fd..5b91873c1 100644
--- a/src/pat/subform/subform-other-response.html
+++ b/src/pat/subform/subform-other-response.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Feedback</title>
+        <meta charset="utf-8">
     </head>
     <body>
         <p id="message" class="message success">
diff --git a/src/pat/subform/subform-response.html b/src/pat/subform/subform-response.html
index 0e39aecbe..9affaa9c9 100644
--- a/src/pat/subform/subform-response.html
+++ b/src/pat/subform/subform-response.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Feedback</title>
+        <meta charset="utf-8">
     </head>
     <body>
         <p id="message" class="message success">
diff --git a/src/pat/switch/index.html b/src/pat/switch/index.html
index 3ef8fa5a6..45335335c 100644
--- a/src/pat/switch/index.html
+++ b/src/pat/switch/index.html
@@ -1,17 +1,13 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Switch demo page</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
     </head>
     <body>
-        <style type="text/css">
+        <style>
             li.mode-Red {
                 color: red !important;
             }
diff --git a/src/pat/syntax-highlight/index.html b/src/pat/syntax-highlight/index.html
index edd9e7a7a..4a3edbc6b 100644
--- a/src/pat/syntax-highlight/index.html
+++ b/src/pat/syntax-highlight/index.html
@@ -1,14 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>pat-syntax-highlight demo page</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
     </head>
     <body>
         <h2>Sample output:</h2>
diff --git a/src/pat/tabs/index.html b/src/pat/tabs/index.html
index 2fe8d4d80..15c8e7013 100644
--- a/src/pat/tabs/index.html
+++ b/src/pat/tabs/index.html
@@ -1,15 +1,11 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Tabs demo</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
-        <style type="text/css" media="screen">
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
+        <style>
             .pat-tabs {
                 background: #eee;
                 margin-bottom: 2em;
diff --git a/src/pat/toggle/index.html b/src/pat/toggle/index.html
index a337cd5c3..6c394b50e 100644
--- a/src/pat/toggle/index.html
+++ b/src/pat/toggle/index.html
@@ -1,15 +1,11 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Toggle</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
-        <style type="text/css">
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
+        <style>
             .green {
                 background-color: #23bf42;
             }
diff --git a/src/pat/tooltip/index.html b/src/pat/tooltip/index.html
index 9e502fe9b..d1d91c1fe 100644
--- a/src/pat/tooltip/index.html
+++ b/src/pat/tooltip/index.html
@@ -1,14 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
         <title>pat-tooltip demo</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
     </head>
     <body role="document">
         <div class="container"
@@ -366,7 +362,7 @@ <h4>programmatic triggering</h4>
           }
         </script>
 
-        <style type="text/css" media="screen">
+        <style>
             #demo a {
                 color: rgb(0,0,0,0.6);
                 background: lightblue;
diff --git a/src/pat/tooltip/pattern-test-response.html b/src/pat/tooltip/pattern-test-response.html
index ca5e751b0..0f07cae26 100644
--- a/src/pat/tooltip/pattern-test-response.html
+++ b/src/pat/tooltip/pattern-test-response.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Insert title here</title>
+        <meta charset="utf-8">
     </head>
     <body>
         <div id="message">Thank you!!</div>
diff --git a/src/pat/validation/index.html b/src/pat/validation/index.html
index 5a142344e..0ad4b7426 100644
--- a/src/pat/validation/index.html
+++ b/src/pat/validation/index.html
@@ -1,21 +1,11 @@
 <!DOCTYPE html>
 <html lang="de">
   <head>
-    <meta http-equiv="Content-Type"
-          content="text/html; charset=UTF-8"
-    />
     <title>Form validation</title>
-    <link href="/style/common.css"
-          rel="stylesheet"
-          type="text/css"
-    />
-    <script charset="utf-8"
-            src="/bundle.min.js"
-            type="text/javascript"
-    ></script>
-    <style media="screen"
-           type="text/css"
-    >
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="/style/common.css" />
+    <script src="/bundle.min.js"></script>
+    <style>
           input:required {
             border: 1px solid red;
           }
diff --git a/src/pat/zoom/index.html b/src/pat/zoom/index.html
index cc288ee37..920616c8d 100644
--- a/src/pat/zoom/index.html
+++ b/src/pat/zoom/index.html
@@ -2,12 +2,9 @@
 <html>
     <head>
         <title>Zoom pattern demo</title>
-        <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/bundle.min.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script src="/bundle.min.js"></script>
     </head>
     <body>
         <form class="slide-collection">

From 4ac25cc146a7f4dcb3767f8541fe02881714bd87 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Fri, 9 Sep 2022 12:51:50 +0200
Subject: [PATCH 3/7] maint(core dom): Update documentation.

---
 src/core/dom.js      | 75 +++++++++++++++++++++++++++++++++++---------
 src/core/dom.test.js |  2 ++
 2 files changed, 62 insertions(+), 15 deletions(-)

diff --git a/src/core/dom.js b/src/core/dom.js
index 1cd739706..7fb3a4b15 100644
--- a/src/core/dom.js
+++ b/src/core/dom.js
@@ -4,8 +4,14 @@ import events from "./events";
 const DATA_PREFIX = "__patternslib__data_prefix__";
 const DATA_STYLE_DISPLAY = "__patternslib__style__display";
 
+/**
+ * Return an array of DOM nodes.
+ *
+ * @param {Node|NodeList|jQuery} nodes - The DOM node to start the search from.
+ *
+ * @returns {Array} - An array of DOM nodes.
+ */
 const toNodeArray = (nodes) => {
-    // Return an array of DOM nodes
     if (nodes.jquery || nodes instanceof NodeList) {
         // jQuery or document.querySelectorAll
         nodes = [...nodes];
@@ -15,10 +21,15 @@ const toNodeArray = (nodes) => {
     return nodes;
 };
 
+/**
+ * Like querySelectorAll but including the element where it starts from.
+ * Returns an Array, not a NodeList
+ *
+ * @param {Node} el - The DOM node to start the search from.
+ *
+ * @returns {Array} - The DOM nodes found.
+ */
 const querySelectorAllAndMe = (el, selector) => {
-    // Like querySelectorAll but including the element where it starts from.
-    // Returns an Array, not a NodeList
-
     if (!el) {
         return [];
     }
@@ -30,16 +41,23 @@ const querySelectorAllAndMe = (el, selector) => {
     return all;
 };
 
+/**
+ * Wrap a element with a wrapper element.
+ *
+ * @param {Node} el - The DOM node to wrap.
+ */
 const wrap = (el, wrapper) => {
-    // Wrap a element with a wrapper element.
     // See: https://stackoverflow.com/a/13169465/1337474
-
     el.parentNode.insertBefore(wrapper, el);
     wrapper.appendChild(el);
 };
 
+/**
+ * Hides the element with ``display: none`` and stores the current display value.
+ *
+ * @param {Node} el - The DOM node to hide.
+ */
 const hide = (el) => {
-    // Hides the element with ``display: none``
     if (el.style.display === "none") {
         // Nothing to do.
         return;
@@ -51,20 +69,30 @@ const hide = (el) => {
     el.setAttribute("hidden", "");
 };
 
+/**
+ * Shows element by removing ``display: none`` and restoring the display value
+ * to whatever it was before.
+ *
+ * @param {Node} el - The DOM node to show.
+ */
 const show = (el) => {
-    // Shows element by removing ``display: none`` and restoring the display
-    // value to whatever it was before.
     const val = el[DATA_STYLE_DISPLAY] || null;
     el.style.display = val;
     delete el[DATA_STYLE_DISPLAY];
     el.removeAttribute("hidden", "");
 };
 
+/**
+ * Return all direct parents of ``el`` matching ``selector``.
+ * This matches against all parents but not the element itself.
+ * The order of elements is from the search starting point up to higher
+ * DOM levels.
+ *
+ * @param {Node} el - The DOM node to start the search from.
+ * @param {String} selector - CSS selector to match against.
+ * @returns {Array} - List of matching DOM nodes.
+ */
 const find_parents = (el, selector) => {
-    // Return all direct parents of ``el`` matching ``selector``.
-    // This matches against all parents but not the element itself.
-    // The order of elements is from the search starting point up to higher
-    // DOM levels.
     const ret = [];
     let parent = el?.parentNode?.closest?.(selector);
     while (parent) {
@@ -74,15 +102,32 @@ const find_parents = (el, selector) => {
     return ret;
 };
 
+/**
+ * Find an element in the whole DOM tree if the selector is an ID selector,
+ * otherwise use the given element as the starting point.
+ *
+ * @param {Node} el - The DOM node to start the search from.
+ * @param {String} selector - The CSS selector to search for.
+ *
+ * @returns {NodeList} - The DOM nodes found.
+ *
+ */
 const find_scoped = (el, selector) => {
     // If the selector starts with an object id do a global search,
     // otherwise do a local search.
     return (selector.indexOf("#") === 0 ? document : el).querySelectorAll(selector);
 };
 
+/**
+ * Return all HTMLElement parents of el, starting from the direct parent of el.
+ * The document itself is excluded because it's not a real DOM node.
+ *
+ * @param {Node} el - The DOM node to start the search from.
+ *
+ * @returns {Array} - The DOM nodes found.
+ */
 const get_parents = (el) => {
     // Return all HTMLElement parents of el, starting from the direct parent of el.
-    // The document itself is excluded because it's not a real DOM node.
     const parents = [];
     let parent = el?.parentNode;
     while (parent) {
@@ -211,7 +256,7 @@ const find_scroll_container = (el, direction, fallback = document.body) => {
  * @param name {String} - The name of the variable. Note - this is stored on
  *                        the DOM node prefixed with the DATA_PREFIX.
  * @param default_value {Any} - Optional default value.
- * @return {Any} - The value which is stored on the DOM node.
+ * @returns {Any} - The value which is stored on the DOM node.
  */
 const get_data = (el, name, default_value) => {
     return el[`${DATA_PREFIX}${name}`] || default_value;
diff --git a/src/core/dom.test.js b/src/core/dom.test.js
index 96f47442c..6595b8cfd 100644
--- a/src/core/dom.test.js
+++ b/src/core/dom.test.js
@@ -177,12 +177,14 @@ describe("core.dom tests", () => {
 
             done();
         });
+
         it("don't break with no element.", (done) => {
             const res = dom.find_parents(null, ".findme");
             expect(res.length).toEqual(0);
 
             done();
         });
+
         it("don't break with DocumentFragment without a parent.", (done) => {
             const el = new DocumentFragment();
             el.innerHTML = `<div class="starthere"></div>`;

From de1fb718e794b26ba03fe2c18cec13e560589965 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Fri, 9 Sep 2022 18:05:31 +0200
Subject: [PATCH 4/7] maint(core dom): Code optimization for dom.find_parents.

---
 src/core/dom.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/core/dom.js b/src/core/dom.js
index 7fb3a4b15..ccb8ade37 100644
--- a/src/core/dom.js
+++ b/src/core/dom.js
@@ -94,10 +94,10 @@ const show = (el) => {
  */
 const find_parents = (el, selector) => {
     const ret = [];
-    let parent = el?.parentNode?.closest?.(selector);
+    let parent = el;
     while (parent) {
-        ret.push(parent);
         parent = parent.parentNode?.closest?.(selector);
+        if (parent) ret.push(parent);
     }
     return ret;
 };

From cd1610732d47a48a2a2d5ba25f56ef8dc5a74458 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Fri, 9 Sep 2022 19:16:36 +0200
Subject: [PATCH 5/7] fix(core base): Do not break when initialized with no
 element.

---
 src/core/base.js      |  4 ++++
 src/core/base.test.js | 12 ++++++++++++
 2 files changed, 16 insertions(+)

diff --git a/src/core/base.js b/src/core/base.js
index b118ce487..285a6107e 100644
--- a/src/core/base.js
+++ b/src/core/base.js
@@ -46,6 +46,10 @@ const initBasePattern = function ($el, options, trigger) {
 };
 
 const Base = async function ($el, options, trigger) {
+    if (!$el) {
+        log.warn("No element given to pattern.");
+        return;
+    }
     if (!$el.jquery) {
         $el = $($el);
     }
diff --git a/src/core/base.test.js b/src/core/base.test.js
index d1bfb2770..79ad83e88 100644
--- a/src/core/base.test.js
+++ b/src/core/base.test.js
@@ -58,6 +58,18 @@ describe("pat-base: The Base class for patterns", function () {
         expect(tmp.el).toBe(node);
     });
 
+    it("Does nothing when initialized with no DOM node", function () {
+        const Tmp = Base.extend({
+            name: "example",
+            init: () => {},
+        });
+        const tmp = new Tmp(null);
+        console.log(tmp);
+        expect(tmp instanceof Tmp).toBeTruthy();
+        expect(tmp.$el).toBeFalsy();
+        expect(tmp.el).toBeFalsy();
+    });
+
     it("will automatically register a pattern in the registry when extended", function () {
         jest.spyOn(registry, "register");
         var NewPattern = Base.extend({

From 144240de790d6b4e9d6e73f8fef7cd02d8fb66d7 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Thu, 8 Sep 2022 17:48:53 +0200
Subject: [PATCH 6/7] maint(pat inject): Move core.utils.rebaseURL to inject
 patterns.

core.utils.rebaseURL was only used by the inject pattern and is in this form not useful for broader use.
If you need to rebase an relative or absolute URL against a base url, use:
new URL(url, base_url)
---
 src/core/utils.js             |  9 -------
 src/core/utils.test.js        | 44 ------------------------------
 src/pat/inject/inject.js      | 18 ++++++++-----
 src/pat/inject/inject.test.js | 51 ++++++++++++++++++++++++++++++++++-
 4 files changed, 62 insertions(+), 60 deletions(-)

diff --git a/src/core/utils.js b/src/core/utils.js
index 2c93bc832..b96b20728 100644
--- a/src/core/utils.js
+++ b/src/core/utils.js
@@ -156,14 +156,6 @@ function extend(obj) {
 }
 // END: Taken from Underscore.js until here.
 
-function rebaseURL(base, url) {
-    base = new URL(base, window.location).href; // If base is relative make it absolute.
-    if (url.indexOf("://") !== -1 || url[0] === "/" || url.indexOf("data:") === 0) {
-        return url;
-    }
-    return base.slice(0, base.lastIndexOf("/") + 1) + url;
-}
-
 function findLabel(input) {
     var $label;
     for (
@@ -683,7 +675,6 @@ var utils = {
     escapeRegExp: escapeRegExp,
     isObject: isObject,
     extend: extend,
-    rebaseURL: rebaseURL,
     findLabel: findLabel,
     elementInViewport: elementInViewport,
     removeWildcardClass: removeWildcardClass,
diff --git a/src/core/utils.test.js b/src/core/utils.test.js
index 6ff61683b..c0d0cdb64 100644
--- a/src/core/utils.test.js
+++ b/src/core/utils.test.js
@@ -3,50 +3,6 @@ import $ from "jquery";
 import { jest } from "@jest/globals";
 
 describe("basic tests", function () {
-    describe("rebaseURL", function () {
-        it("Keep URL with scheme", function () {
-            expect(
-                utils.rebaseURL("http://example.com/foo/", "http://other.com/me")
-            ).toBe("http://other.com/me");
-        });
-
-        it("Keep URL with absolute path", function () {
-            expect(utils.rebaseURL("http://example.com/foo/", "/me")).toBe("/me");
-        });
-
-        it("Rebase to base with filename", function () {
-            expect(
-                utils.rebaseURL("http://example.com/foo/index.html", "me/page.html")
-            ).toBe("http://example.com/foo/me/page.html");
-        });
-
-        it("Rebase to base with directory path", function () {
-            expect(utils.rebaseURL("http://example.com/foo/", "me/page.html")).toBe(
-                "http://example.com/foo/me/page.html"
-            );
-        });
-
-        it("Rebase with absolute base url", function () {
-            expect(
-                utils.rebaseURL("/foo/", "me/page.html").indexOf("/foo/me/page.html") > 0
-            ).toBe(true);
-        });
-
-        it("Rebase with relative base url", function () {
-            expect(
-                utils
-                    .rebaseURL("example.com/foo/", "me/page.html")
-                    .indexOf("example.com/foo/me/page.html") > 0
-            ).toBe(true);
-        });
-
-        it("Doesn't rebase data: urls", function () {
-            expect(
-                utils.rebaseURL("http://example.com/foo/", "data:image-base64gibberish")
-            ).toBe("data:image-base64gibberish");
-        });
-    });
-
     describe("removeDuplicateObjects", function () {
         it("removes removes duplicates inside an array of objects", function () {
             var objs = [];
diff --git a/src/pat/inject/inject.js b/src/pat/inject/inject.js
index eb7a9c05e..3bda49b8c 100644
--- a/src/pat/inject/inject.js
+++ b/src/pat/inject/inject.js
@@ -861,6 +861,14 @@ const inject = {
         "inject": ["url"],
     },
 
+    _rebaseURL(base, url) {
+        if (url.indexOf("://") !== -1 || url[0] === "/" || url.indexOf("data:") === 0) {
+            return url;
+        }
+        base = new URL(base, window.location).href; // If base is relative make it absolute.
+        return base.slice(0, base.lastIndexOf("/") + 1) + url;
+    },
+
     _rebaseHTML(base, html) {
         if (html === "") {
             // Special case, source is none
@@ -889,7 +897,7 @@ const inject = {
                 value.slice(0, 6) !== "teams:" &&
                 value.slice(0, 11) !== "javascript:"
             ) {
-                value = utils.rebaseURL(base, value);
+                value = this._rebaseURL(base, value);
                 $el_.attr(attrName, value);
             }
         });
@@ -915,9 +923,9 @@ const inject = {
                         }
                         changed = true;
                         if (Array.isArray(val)) {
-                            config[opt] = val.map((it) => utils.rebaseURL(base, it));
+                            config[opt] = val.map((it) => this._rebaseURL(base, it));
                         } else {
-                            config[opt] = utils.rebaseURL(base, val);
+                            config[opt] = this._rebaseURL(base, val);
                         }
                     }
                 }
@@ -945,9 +953,7 @@ const inject = {
             .trim();
     },
 
-    _parseRawHtml(html, url) {
-        url = url || "";
-
+    _parseRawHtml(html, url = "") {
         // remove script tags and head and replace body by a div
         const title = html.match(/\<title\>(.*)\<\/title\>/);
         let clean_html = html
diff --git a/src/pat/inject/inject.test.js b/src/pat/inject/inject.test.js
index 47b830155..803f20655 100644
--- a/src/pat/inject/inject.test.js
+++ b/src/pat/inject/inject.test.js
@@ -253,6 +253,55 @@ describe("pat-inject", function () {
         });
     });
 
+    describe("rebaseURL", function () {
+        it("Keep URL with scheme", function () {
+            expect(
+                pattern._rebaseURL("http://example.com/foo/", "http://other.com/me")
+            ).toBe("http://other.com/me");
+        });
+
+        it("Keep URL with absolute path", function () {
+            expect(pattern._rebaseURL("http://example.com/foo/", "/me")).toBe("/me");
+        });
+
+        it("Rebase to base with filename", function () {
+            expect(
+                pattern._rebaseURL("http://example.com/foo/index.html", "me/page.html")
+            ).toBe("http://example.com/foo/me/page.html");
+        });
+
+        it("Rebase to base with directory path", function () {
+            expect(pattern._rebaseURL("http://example.com/foo/", "me/page.html")).toBe(
+                "http://example.com/foo/me/page.html"
+            );
+        });
+
+        it("Rebase with absolute base url", function () {
+            expect(
+                pattern
+                    ._rebaseURL("/foo/", "me/page.html")
+                    .indexOf("/foo/me/page.html") > 0
+            ).toBe(true);
+        });
+
+        it("Rebase with relative base url", function () {
+            expect(
+                pattern
+                    ._rebaseURL("example.com/foo/", "me/page.html")
+                    .indexOf("example.com/foo/me/page.html") > 0
+            ).toBe(true);
+        });
+
+        it("Doesn't rebase data: urls", function () {
+            expect(
+                pattern._rebaseURL(
+                    "http://example.com/foo/",
+                    "data:image-base64gibberish"
+                )
+            ).toBe("data:image-base64gibberish");
+        });
+    });
+
     describe("rebaseHTML", function () {
         it("Basic markup with DOCTYPE", function () {
             expect(
@@ -276,7 +325,7 @@ describe("pat-inject", function () {
         });
 
         it("Element without link attribute", function () {
-            var spy_rebaseURL = jest.spyOn(utils, "rebaseURL");
+            var spy_rebaseURL = jest.spyOn(pattern, "_rebaseURL");
             expect(pattern._rebaseHTML("base", "<a>This is a test</a>")).toBe(
                 "<a>This is a test</a>"
             );

From e36c58cf147551f77c11e55d2dcf0f16ae024cd4 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Thu, 15 Sep 2022 12:15:14 +0200
Subject: [PATCH 7/7] maint(pat inject): Specify allowed values for the history
 parameter.

---
 src/pat/inject/inject.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pat/inject/inject.js b/src/pat/inject/inject.js
index 3bda49b8c..2caadad2f 100644
--- a/src/pat/inject/inject.js
+++ b/src/pat/inject/inject.js
@@ -34,7 +34,7 @@ parser.addArgument("loading-class", "injecting"); // Add a class to the target w
 parser.addArgument("executing-class", "executing"); // Add a class to the element while content is still loading.
 parser.addArgument("executed-class", "executed"); // Add a class to the element when content is loaded.
 parser.addArgument("class"); // Add a class to the injected content.
-parser.addArgument("history");
+parser.addArgument("history", "none", ["none", "record"]);
 parser.addArgument("push-marker");
 parser.addArgument("scroll");
 // XXX: this should not be here but the parser would bail on