slug patterns rollback

src/routes/(mawanet)/mawanet/maelstrom_encyclopedia/+page.js

@@ -0,0 +1,10 @@
+import { fetchComponent } from "$lib/stores/mawanet.loader.js"
+
+export async function load({ params }) {
+  let entryProperties = await fetchComponent(params.entry ?? 'index')
+	return {
+    pageName: entryProperties.componentName,
+    pageComponent: entryProperties.entryComponent,
+    error: entryProperties.error,
+  };
+}

src/routes/(mawanet)/mawanet/maelstrom_encyclopedia/+page.svelte

@@ -0,0 +1,59 @@
+<script>
+  
+  import { createTableOfContents } from '@melt-ui/svelte';
+
+  import { currentPageName } from "$lib/stores/mawanet.loader";
+  // import Tree from '$lib/components/toc.svelte';
+  import Sidebar from "$lib/components/sidebar.svelte"
+  
+  export let data;
+
+  if (data.error) console.error(data.error);
+
+  $: updateTitle(data.pageName);
+ 
+  /**
+   * crete table of content by scanning a component
+   */
+  const {
+    elements: { item },
+    states: { activeHeadingIdxs, headingsTree },
+  } = createTableOfContents({
+    selector: '#toc-builder-preview',
+    exclude: ['h1',],
+    activeType: 'all',
+    headingFilterFn: (heading) => !heading.hasAttribute('data-toc-ignore'),
+    scrollFn: (id) => {
+      const container = document.getElementById('toc-builder-preview');
+      const element = document.getElementById(id);
+ 
+      if (container && element) {
+        container.scrollTo({
+          top: element.offsetTop - container.offsetTop - 16,
+          behavior: 'smooth',
+        });
+      }
+    },
+  });
+ 
+
+  /**
+   * Updates documents title reactively
+   * 
+   * @param {String} pageName Page/entry's file name
+   */
+  function updateTitle(pageName) {
+    let titleStructured = pageName.replace(/\_/g," ");
+    let title = titleStructured.charAt(0).toUpperCase() + titleStructured.substr(1).toLowerCase();
+    document.title = `${title} // MAWANET`;
+  }
+  $: currentPageName.set(data.pageName.replace(/\_/g," ").split(' ')[0].toUpperCase());
+</script>
+
+<Sidebar/>
+
+<div class="container">
+  <div id="toc-builder-preview">
+    <svelte:component this={data.pageComponent}></svelte:component>
+  </div>
+</div>