add intro and chapter wrapper

css/modules/_layout.scss

@@ -150,20 +150,6 @@ $unit: calc($content-w/7);
 }
 
 
-// #section__content{
-//     columns: 2;
-//     column-gap: $gap;
-//     column-fill: auto;
-// }
-
-
-// Title chapter
-
-// #section__content h1{
-//     break-before: left;
-//     break-after: page;
-//     page: chapter;
-// }
 #section__content h1 .h1-count{
     string-set: chapterCount content(text);
 }
@@ -172,13 +158,20 @@ $unit: calc($content-w/7);
     string-set: chapter content(text);
 }
 
-
+.chapter{
-#section__content{
     break-before: left;
 }
 
+.intro{
+    color: red;
+}
 
-#section__content h1:first-of-type{
+
-    break-before: right;
+// #section__content{
-    // background-color: red;
+//     break-before: left;
-}
+// }
+
+
+// #section__content h1:first-of-type{
+//     break-before: right;
+// }

css/modules/_titles.scss

@@ -2,6 +2,7 @@
 #section__content{
 
    
+   
 
 
 
@@ -15,7 +16,7 @@
     // }
 
     h1{
-        break-before: page;
+        // break-before: page;
         break-after: page;
 
         position: absolute;

css/style.css

@@ -253,14 +253,13 @@ body {
   string-set: chapter content(text);
 }
 
-#section__content {
+.chapter {
   -moz-column-break-before: left;
        break-before: left;
 }
 
-#section__content h1:first-of-type {
+.intro {
-  -moz-column-break-before: right;
+  color: red;
-       break-before: right;
 }
 
 sup {
@@ -362,8 +361,6 @@ ol[type="1"].ol-clone {
 }
 
 #section__content h1 {
-  -moz-column-break-before: page;
-       break-before: page;
   -moz-column-break-after: page;
        break-after: page;
   position: absolute;

csspageweaver/manifest.json

@@ -25,7 +25,6 @@
     "hook": [
         "/js/beforeAll.js",
         "/js/counters.js",
-        "/js/these.js",
         "/js/addPagesNotes.js"
     ]
 }

index.html

@@ -7,6 +7,7 @@
     <title>Höchstpersönlichkeit</title>
     <script src="/csspageweaver/main.js" type="module"></script>
 
+
     <link rel="stylesheet" href="/fonts/Moulin/stylesheet.css">
     <link rel="stylesheet" href="/fonts/BasisGrotesquePro/stylesheet.css">
     <link rel="stylesheet" href="/fonts/Louize/stylesheet.css">

js/beforeAll.js

@@ -6,12 +6,85 @@ export default class beforeAll extends Handler {
     }
 
     beforeParsed(content){
-        let headings = content.querySelectorAll('#section__content h1');
+
-        headings.forEach(function (h1) {
+
-            let div = document.createElement('div');
+        thesis(content);
-            div.classList.add('before-h1');
+
-            h1.insertAdjacentElement('beforebegin', div);
+
-        });
+        // for break
+        // let headings = content.querySelectorAll('#section__content h1');
+        // headings.forEach(function (h1) {
+        //     let div = document.createElement('div');
+        //     div.classList.add('before-h1');
+        //     h1.insertAdjacentElement('beforebegin', div);
+        // });
+
+        // Wrap h1 and following content in .chapter sections
+        const sectionContent = content.querySelector('#section__content');
+        if (sectionContent) {
+            const h1s = sectionContent.querySelectorAll(':scope > h1');
+            h1s.forEach(h1 => {
+                // Create chapter section
+                const chapter = document.createElement('section');
+                chapter.classList.add('chapter');
+
+                // Insert chapter before h1
+                h1.parentNode.insertBefore(chapter, h1);
+
+                // Move h1 into chapter
+                chapter.appendChild(h1);
+
+                // Move following siblings until next h1 or end
+                let nextElement = chapter.nextElementSibling;
+                while (nextElement && nextElement.tagName.toLowerCase() !== 'h1') {
+                    const current = nextElement;
+                    nextElement = nextElement.nextElementSibling;
+                    chapter.appendChild(current);
+                }
+            });
+
+            // Wrap content between h1 and h2 in .intro if chapter doesn't contain .p-these
+            const chapters = sectionContent.querySelectorAll('.chapter');
+            chapters.forEach(chapter => {
+                if (chapter.querySelector('.p-these')) {
+                    // Case 1: Chapter has thesis
+                    chapter.classList.add('has-thesis');
+                } else {
+                    const h1 = chapter.querySelector('h1');
+                    const nextHeading = chapter.querySelector('h2, h3, h4, h5, h6');
+
+                    if (h1) {
+                        const intro = document.createElement('div');
+                        intro.classList.add('intro');
+
+                        if (nextHeading) {
+                            // Case 2: Has heading, wrap all content between h1 and that heading
+                            h1.parentNode.insertBefore(intro, h1.nextSibling);
+
+                            let current = intro.nextSibling;
+                            while (current && current !== nextHeading) {
+                                const next = current.nextSibling;
+                                intro.appendChild(current);
+                                current = next;
+                            }
+                            chapter.classList.add('has-intro');
+                        } else {
+                            // Case 3: No heading, wrap only the first paragraph after h1
+                            let current = h1.nextSibling;
+                            while (current && current.tagName.toLowerCase() !== 'p') {
+                                current = current.nextSibling;
+                            }
+
+                            if (current) {
+                                current.parentNode.insertBefore(intro, current);
+                                intro.appendChild(current);
+                                chapter.classList.add('has-intro-1-paragraph');
+                            }
+                        }
+                    }
+                }
+            });
+        }
     }
 
     
@@ -19,3 +92,33 @@ export default class beforeAll extends Handler {
 }
 
 
+function thesis(content){
+    const strongs = content.querySelectorAll('strong');
+        strongs.forEach(strong => {
+            if (/^these\s+\d+/i.test(strong.textContent.trim())) {
+                const parent = strong.closest('p');
+                if (parent) {
+                    const thesisDiv = document.createElement('div');
+                    thesisDiv.classList.add('thesis-title');
+                    const thesisP = document.createElement('p');
+                    thesisP.textContent = strong.textContent;
+                    thesisDiv.appendChild(thesisP);
+                    parent.parentNode.insertBefore(thesisDiv, parent);
+                    strong.remove();
+
+                    parent.classList.add('p-these');
+                }
+            }
+        });
+
+        const theseParas = content.querySelectorAll('.p-these');
+        theseParas.forEach(p => {
+            let next = p.nextElementSibling;
+            while (next && next.tagName.toLowerCase() === 'ol') {
+                next = next.nextElementSibling;
+            }
+            if (!next || !next.classList.contains('p-these')) {
+                p.classList.add('p-these-last');
+            }
+        });
+}

js/these.js

@@ -7,26 +7,7 @@ export default class thesis extends Handler {
 
     beforeParsed(content){
 
-        const strongs = content.querySelectorAll('strong');
+        
-        strongs.forEach(strong => {
-            if (/^these\s+\d+/i.test(strong.textContent.trim())) {
-                const parent = strong.closest('p');
-                if (parent) {
-                    parent.classList.add('p-these');
-                }
-            }
-        });
-
-        const theseParas = content.querySelectorAll('.p-these');
-        theseParas.forEach(p => {
-            let next = p.nextElementSibling;
-            while (next && next.tagName.toLowerCase() === 'ol') {
-                next = next.nextElementSibling;
-            }
-            if (!next || !next.classList.contains('p-these')) {
-                p.classList.add('p-these-last');
-            }
-        });
     }