feat: enhance article layout and styling; add word break and overflow handling for code elements; implement H3 header component in rehype plugin; adjust layout styles for better responsiveness

Author: flmath

src/lib/assets/mdlayouts/article.svelte

@@ -9,7 +9,14 @@
 
 :global(.container-wrapper a) {
   color: var(--link-text);
+
 }
+
+	:global(.container-wrapper * code) {
+		word-break: break-word;
+		overflow-wrap: break-word; /* Breaks words only if they don't fit */
+		white-space: pre-line; /* Preserves whitespace and wraps lines */
+	}
 :global(.container-wrapper) {
   visibility: visible;
 
@@ -35,6 +42,9 @@
 	width: calc(100vw - 175px);
 	overflow-wrap: break-word;
 	word-break: break-word;
+
+	
+
 	}
   :global(.outer-wrapper) {
     width: 100%;
@@ -105,4 +115,15 @@
     transform: skewX(50deg);
   }
 
+:global(.h3-wrapper) 
+    {
+    color: rgba(0, 0, 0, 1);
+    padding: 0;
+    font-size: 1.5rem;
+    margin: auto;
+    margin-left: 2%;
+    text-align: left;
+    vertical-align: middle;
+  }
+
 </style>

src/lib/plugins/rehype-section-wrapper.js

@@ -65,6 +65,30 @@ export default function rehypeSectionWrapper() {
         currentWrapper = null;
         continue;
       }
+
+      if (node.type === 'element' && node.tagName === 'h3') {
+        // 1. Extract the text content of the H3.
+        const headerText = toString(node);
+
+        // 2. Create a new <Header> component element with a 'title' prop.
+          const headerComponent = h('div.outer-wrapper', [h('h3.h3-wrapper', headerText), h('div.middle-wrapper',
+          [h('div.inter-wrapper', [])])]);
+      
+        if (currentWrapper) {
+          if (currentWrapper.children.length === 1) {
+            // If the current wrapper is empty, remove it
+            newChildren.pop();
+          }
+        }
+        // 3. Add the new <Header> component to the wrapper.
+        newChildren.push(h('br', [])); // Add a horizontal rule before the header
+        newChildren.push(headerComponent);
+        newChildren.push(h('br', []));
+        currentWrapper = null;
+        continue;
+      }
+
+
       if (node.type === 'element' && node.tagName === 'hr') {
         newChildren.push(h('br', [])); // Add a horizontal rule before the header
         currentWrapper = null;

src/routes/posts/mdarticles/[slug]/+layout.svelte

@@ -11,7 +11,8 @@
 main {
     position: relative;
     margin: 0;
-    min-width: 100vw;
+   
+    max-width: 100vw;
     min-height: 100vh;    
 
     color: black;
@@ -22,5 +23,7 @@ main {
     background-attachment: fixed;
   
     background-position: center;
+   
+  overflow-x: clip;  
   } 
 </style>