index

src/components/App.svelte

@@ -7,6 +7,7 @@
     import Header from "./widgets/Header.svelte"
     import Footer from "./widgets/Footer.svelte"
     import Content from "./widgets/Content.svelte"
+    import Index from "./widgets/Index.svelte"
 
     export let url = ""
 
@@ -31,14 +32,21 @@
 
 <Header />
 
-<Router url="{url}">
-    <Route path="/" let:params>
-        <h1>Home</h1>
-    </Route>
-    <Route path="/*path" let:params>
-        <Content path="{params.path}" />
-    </Route>
-</Router>
+<div style="display: flex">
+    <div style="margin-right: 20px; background-color: #333333; color: white; padding: 10px;">
+        <Index />
+    </div>
+    <div>
+        <Router url="{url}">
+            <Route path="/" let:params>
+                <h1>Home</h1>
+            </Route>
+            <Route path="/*path" let:params>
+                <Content path="{params.path}" />
+            </Route>
+        </Router>
+    </div>
+</div>
 
 <Footer />
 

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="" />