refactor: adjust margin for improved layout consistency and remove unused header components

Author: flmath

src/lib/assets/mdlayouts/article.svelte

@@ -96,7 +96,7 @@
     color: rgba(0, 0, 0, 1);
     padding: 0;
     margin: auto;
-    margin-left: 10%;
+    margin-left: 20%;
     text-align: left;
     vertical-align: middle;
     transform: skewX(50deg);

src/lib/components/HeaderTitle.svelte

@@ -65,7 +65,7 @@
     padding: 0;
     font-size: 1.8rem;
     margin: auto;
-    margin-left: 10%;
+    margin-left: 20%;
     text-align: left;
     vertical-align: middle;
     transform: skewX(50deg);

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

@@ -1,16 +1,15 @@
-
 import { h } from 'hastscript';
 import { toString } from 'hast-util-to-string';
 /**
- * Custom Rehype plugin to wrap sections and replace H2 with a <Header> component.
- * @returns {import('unified').Transformer}
- */
+* Custom Rehype plugin to wrap sections and replace H2 with a <Header> component.
+* @returns {import('unified').Transformer}
+*/
 
 
 export default function rehypeSectionWrapper() {
   /**
-   * @param {import('hast').Root} tree
-   */
+  * @param {import('hast').Root} tree
+  */
   return (tree) => {
     const newChildren = [];
     let currentWrapper = null;
@@ -20,44 +19,53 @@ export default function rehypeSectionWrapper() {
       newChildren.push(wrapper);
       return wrapper;
     };
-  
+
     for (const node of tree.children) {
       // Check if the node is an H1 element
       if (node.type === 'element' && node.tagName === 'h1') {
-        // 1. Extract the text content of the H2.
+        // 1. Extract the text content of the H1.
         const headerText = toString(node);
-        
+
         // 2. Create a new <Header> component element with a 'title' prop.
-        const headerComponent = h('div.outer-wrapper', [h('div.middle-wrapper', 
+        const headerComponent = h('div.outer-wrapper', [h('div.middle-wrapper',
           [h('h1.h1-wrapper', headerText), h('div.inter-wrapper', [])])]);
 
         // 3. Add the new <Header> component to the wrapper.
+        if (currentWrapper) {
+          if (currentWrapper.children.length === 1) {
+            // If the current wrapper is empty, remove it
+            newChildren.pop();
+          }
+        }
         newChildren.push(h('br', [])); // Add a horizontal rule before the header
         newChildren.push(headerComponent);
         newChildren.push(h('br', []));
-        currentWrapper = createNewWrapper();
+        currentWrapper = null;
         continue;
       }
 
       if (node.type === 'element' && node.tagName === 'h2') {
         // 1. Extract the text content of the H2.
         const headerText = toString(node);
-        
+
         // 2. Create a new <Header> component element with a 'title' prop.
-        const headerComponent = h('div.outer-wrapper', [h('div.middle-wrapper', 
+        const headerComponent = h('div.outer-wrapper', [h('div.middle-wrapper',
           [h('div.inter-wrapper', [h('h2.h2-wrapper', headerText)])])])
 
+        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 = createNewWrapper();
+        currentWrapper = null;
         continue;
       }
       if (node.type === 'element' && node.tagName === 'hr') {
-
-        
-        // 4. Add the new <Header> component to the wrapper.
         newChildren.push(h('br', [])); // Add a horizontal rule before the header
         currentWrapper = null;
         continue;
@@ -66,11 +74,13 @@ export default function rehypeSectionWrapper() {
       if (!currentWrapper) {
         currentWrapper = createNewWrapper();
       }
-      
-      // Add any other node to the current section.
+
       currentWrapper.children.push(node);
+
+
     }
 
+
     tree.children = newChildren;
   };
 }

src/routes/curriculum_vitae/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Interests from "./Interests.svelte";
+  // import Interests from "./Interests.svelte";
   import Certificates from "./Certificates.svelte";
   import Education from "./Education.svelte";
   import Experience from "./Experience.svelte";
@@ -30,10 +30,12 @@
     <CvHeader>Certificates</CvHeader>
     <Certificates />
   </section>
-  <section id="Interests">
+  <!-- <section id="Interests">
     <CvHeader>Pursuits</CvHeader>
     <Interests />
-  </section>
+  </section> -->
+  <br />
+  <br />
 </div>
 
 <style>

src/routes/posts/ErlangDBG/+page.svelte

@@ -9,8 +9,8 @@
 	import CustomHandlerMessageSignals from './CustomHandlerSignals.md?svelte';
 	import RegisteredProcessesTracking from './RegisteredProcessesTracking.md?svelte';
 	import Cleanup from './Cleanup.md?svelte';
-	import HeaderShort from '../HeaderShort.svelte';
-	import Header from '../Header.svelte';
+	import HeaderShort from '$lib/components/HeaderShort.svelte';
+	import Header from '$lib/components/Header.svelte';
 	import BasicScenario from './BasicScenario.md?svelte';
 	import Conclusion from './Conclusion.md?svelte';
 </script>

src/routes/posts/Header.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   // import type { PageData } from './[slug]/$types';
 
-  import HeaderShort from '../../HeaderShort.svelte';
+  import HeaderShort from '$lib/components/HeaderShort.svelte';
   import type { PageData } from './$types';
-	import HeaderTitle from '../../HeaderTitle.svelte';
+	import HeaderTitle from '$lib/components/HeaderTitle.svelte';
   // The 'data' prop is automatically populated by SvelteKit
   // with the result from the `load` function in `+page.ts`.
   export let data: PageData;
@@ -25,7 +25,7 @@
     <br />
     <HeaderShort> Date: {formatDate(data.metadata.date) || 'No date'}</HeaderShort>
     <HeaderTitle>{data.metadata.title || data.slug}</HeaderTitle>
-    <HeaderShort>Tags: {data.metadata.tags?.join(', ')  || 'No tags '}&nbsp; &nbsp;</HeaderShort>
+    <!-- <HeaderShort>Tags: {data.metadata.tags?.join(', ')  || 'No tags '}&nbsp; &nbsp;</HeaderShort> -->
   <article class="prose lg:prose-xl dark:prose-invert max-w-none">
     <svelte:component this={data.PostContent} />
   </article>