index

src/components/widgets/Content.svelte

@@ -32,7 +32,7 @@
                     .use(remarkRehype, { allowDangerousHtml: true }) // Turn markdown syntax tree to HTML syntax tree, ignoring embedded HTML
                     .use(rehypeRaw) // *Parse* the raw HTML strings embedded in the tree
                     .use(rehypeStringify, { allowDangerousHtml: true }) // Serialize HTML syntax tree
-                    .use(rehypeHighlight)
+                    .use(rehypeHighlight, { ignoreMissing: true })
                     .process(t)
                     .then((file) => {
                         md = String(file)

src/components/widgets/FileList.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+    import { link } from "svelte-routing"
+
+    export let files
+    export let baseDir
+
+    console.log(baseDir)
+    console.log(files)
+
+    $: filesF = files?.filter((f) => f.name != "attachements").sort((a, b) => (a.name < b.name ? -1 : 1))
+</script>
+
+{#if filesF?.length}
+    <ul>
+        {#each filesF as f}
+            <li>
+                <a use:link href="{baseDir}/{f.isDir ? f.name + '/_index' : f.name.replace(/\.md$/, '')}">
+                    {f.name.replace(/\.md$/, "")}
+                </a>
+                <svelte:self files="{f.elements}" baseDir="{baseDir}/{f.name}" />
+            </li>
+        {/each}
+    </ul>
+{/if}
+
+<style>
+    a {
+        color: white;
+    }
+</style>

src/components/widgets/Footer.svelte

@@ -1,10 +1,2 @@
 <script lang="ts">
 </script>
-
-<footer>
-    <div class="container">
-        <div class="row">
-            <div class="col-md-12"></div>
-        </div>
-    </div>
-</footer>

src/components/widgets/Header.svelte

@@ -1,17 +1,2 @@
 <script lang="ts">
-    import { link } from "svelte-routing"
 </script>
-
-<header>
-    <div class="container">
-        <div class="row">
-            <div class="col-sm-12">
-                <div class="header-content">
-                    <a href="/" use:link>My Notes</a>
-
-                    <div class="header-content-right"></div>
-                </div>
-            </div>
-        </div>
-    </div>
-</header>

src/components/widgets/Index.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import FileList from "./FileList.svelte"
+
+    interface fileElement {
+        name: string
+        isDir?: boolean
+        elements?: fileElement[]
+    }
+
+    let tree: fileElement[]
+
+    fetch("/note/index.json")
+        .then((r) => r.json())
+        .then((j) => {
+            tree = j
+        })
+</script>
+
+<h3>INDEX</h3>
+
+<FileList files="{tree}" baseDir="" />