use hugo menu

assets/js/drawTree.js

@@ -1,101 +0,0 @@
-async function drawTree(pathBase){
-// async function drawTree(){
-
-const { content } = await fetchData;
-
-// COMMENT : add a uid for pages and folders id ? will avoid problems if duplicates in page name and folder name
-
-// we want to build an array of objects, one for each page and folder (type)
-const tree = [];
-
-for (let path in content) {
-  const c = content[path];
-  const pageTitle = c.title;
-  const crumb = path.split("/");
-  // ['', 'folder1','folder2', ... , pageId ]
-  let pageId = crumb.pop();
-  if (pageId == '') pageId = '_ROOT_';
-  let parentFolderId = crumb.slice(-1)[0];
-  if (parentFolderId == '' && pageId == '_ROOT_') parentFolderId = 'SUPER-ROOT';
-  if (parentFolderId == '') parentFolderId = 'ROOT';
-  parentFolderId = '_' + parentFolderId + '_'; // added to distinguished from pageId
-
-  // we found a page
-  tree.push({
-    id: pageId,
-    parentId: parentFolderId,
-    name: pageTitle,
-    text: pageTitle,
-    type: 'page',
-    a_attr  : {href : pathBase.slice(0, pathBase.length - 1) + path} ,
-    href: pathBase.slice(0, pathBase.length - 1) + path
-  })
-
-  // if the page is in one or more folders
-  crumb.forEach((folderId, level) => {
-    let parentId = crumb[level - 1];
-    if (parentId == '') {
-      parentId = '_ROOT_'
-    } else {
-      parentId = '_' + parentId + '_';
-    }
-
-    // we found a folder
-    const push = {
-      id: '_' + folderId + '_',
-      parentId: parentId,
-      name: folderId.replace(/-/g, ' '),
-      text: folderId.replace(/-/g, ' '),
-      type: 'folder',
-      // type : Tree.FOLDER,
-      level: level
-    }
-
-    // avoid duplicates of folders
-    if (folderId != '' && !tree.some(el => JSON.stringify(el) === JSON.stringify(push)))
-      tree.push(push);
-  });
-}
-
-// METHODE 1
-// FYI https://www.jstree.com/docs/json/ doesn't need a hierarchial JSON
-// it needs jQuery though. Not used for the moment
-
-//METHODE 2
-// build the hierarchial JSON
-// from https://typeofnan.dev/an-easy-way-to-build-a-tree-with-object-references/
-let root;
-
-const idMapping = tree.reduce((acc, el, i) => {
-  acc[el.id] = i;
-  return acc;
-}, {});
-
-tree.forEach((el) => {
-  // Handle the root element
-  if (el.parentId == '_SUPER-ROOT_') {
-    root = el;
-    return;
-  }
-  // Use our mapping to locate the parent element in our data array
-  const parentEl = tree[idMapping[el.parentId]];
-  // Add our current el to its parent's `children` array
-  parentEl.children = [...(parentEl.children || []), el];
-});
-
-const structure = root.children;
-
-$(function () {
-  $('#jstree')
-    .on('click', function (e) {
-      $('#jstree').jstree(true).toggle_node(e.target);
-    })
-    .jstree({
-      core : {
-        dblclick_toggle : false,
-        'data' : structure},
-        "plugins" : [ "wholerow" ]
-    });
-});
-
-}

assets/styles/base.scss

@@ -165,7 +165,7 @@ td, th {
   }
 }
 
-article {
+article, .tree{
   & > .meta {
     margin: -1.5em 0 1em 0;
     opacity: 0.7;
@@ -313,6 +313,13 @@ hr {
   //   padding: 25px 5vw;
   // }
 }
+.singlePage-oldLayout {
+  padding: 4em 30vw;
+
+  @media all and (max-width: 1200px) {
+    padding: 25px 5vw;
+  }
+}
 
 .page-end {
   display: flex;

assets/styles/column.scss

@@ -16,14 +16,30 @@ div.sticky {
 }
 .tree summary {
     color: #6b879a;
+    position: relative;
+    left: -1em;
+    margin-top: 0.2em;
+
+}
+.tree details {
+    margin-bottom: 0.3em;
 }
 .tree a{
-    font-weight:unset;
+    // font-weight:unset;
-    color: black;
+    // color: black;
+    font-weight: 600;
+    // font-size: 0.9rem;
 }
 
 a.active{
-  color: #f28482;
+  // color: #f28482;
+  // margin: 0.5em 0;
+  padding: 0.2em 0.5em ;
+  // padding: 0.25em 1em;
+  position: relative;
+  left: -0.5em;
+  border: var(--outlinegray) 1px solid;
+  border-radius: 5px
 }
 /* The Modal (background) */
 .modal {

assets/styles/custom.scss

@@ -22,4 +22,4 @@
   --gray: #d4d4d4 !important;
   --lightgray: #292633 !important;
   --outlinegray: #343434 !important;
-}
+}

content/notes/_index.md

@@ -0,0 +1,3 @@
+---
+title: Notes
+---

content/test_folder/_index.md

@@ -0,0 +1,3 @@
+---
+title: Nice Folder Title 1
+---

content/test_folder/other_test_folder_2/_index.md

@@ -1,4 +1,3 @@
 ---
-title: Folder Title 2
+title: Nice Folder Title 2
 ---
-test

content/test_folder/other_test_folder_2/test_page_2.md

@@ -1,5 +1,5 @@
 ---
-title: test_page_2
+title: Test Page 1
 ---
 
 test

content/test_folder/other_test_folder_2/test_page_20.md

@@ -1,5 +1,5 @@
 ---
-title: test_page_20
+title: Test Page 2
 ---
 
 test

content/test_folder/other_test_folder_2/test_page_21.md

@@ -1,4 +1,4 @@
 ---
-title: test_page_21
+title: Test Page 3
 ---
 test

content/test_folder/other_test_folder_2/test_page_22.md

@@ -1,4 +1,4 @@
 ---
-title: test_page_22
+title: Test Page 4
 ---
 test

content/test_folder/test_page_1.md

@@ -1,5 +1,5 @@
 ---
-title: test_page_1
+title: Test Page 01
 ---
 
 test

content/test_folder/test_page_10.md

@@ -1,4 +1,4 @@
 ---
-title: test_page_10
+title: Test Page 02
 ---
 test

content/test_folder/test_page_11.md

@@ -1,4 +1,4 @@
 ---
-title: test_page_11
+title: Test Page 03
 ---
 test

layouts/_default/single.html

@@ -9,7 +9,7 @@
     <r-c join>
     <main data-lg1-2 data-lg2 data-m2 data-sm1 data-xs1>
   {{else}}
-    <main >
+    <main class="singlePage-oldLayout">
   {{end}}
 
     <!-- Begin actual content -->
@@ -51,7 +51,7 @@
   {{if $.Site.Data.config.enableColumnLayout}}
       <aside data-sm1-2 data-md1-2 data-lg1-4 data-lg1 data-m1 data-sm2 data-xs3>
         <div class="sticky page-end vertical">
-          <h3> Menu hugo</h3>
+          <h3> Menu</h3>
           <div class="menu-toc">
                 <ol class="tree">
                 {{partial "menu-hugo.html" .}}

layouts/index.html

@@ -7,10 +7,10 @@
 
   {{if $.Site.Data.config.enableColumnLayout}}
   <r-c join>
-    <main data-lg1-2 data-lg2 data-m2 data-sm1 data-xs1 >
+    <main data-lg1-2 data-lg2 data-m2 data-sm1 data-xs1>
-      {{else}}
+  {{else}}
-        <main>
+    <main class="singlePage-oldLayout">
-          {{end}}
+  {{end}}
 
           <!-- Begin actual content -->
           <header>
@@ -42,37 +42,37 @@
         </main>
 
         {{if $.Site.Data.config.enableColumnLayout}}
-          <aside data-sm1-2 data-md1-2 data-lg1-4 data-lg1 data-m1 data-sm2 data-xs3>
+        <aside data-sm1-2 data-md1-2 data-lg1-4 data-lg1 data-m1 data-sm2 data-xs3>
-            <div class="sticky page-end vertical">
+          <div class="sticky page-end vertical">
-              <h3> Menu hugo</h3>
+            <h3> Menu</h3>
-              <div class="menu-toc">
+            <div class="menu-toc">
-                    <ol class="tree">
+              <ol class="tree">
-                    {{partial "menu-hugo.html" .}}
+                {{partial "menu-hugo.html" .}}
-                    </ol>
+              </ol>
-                </div>
             </div>
-          </aside>
+          </div>
-          <aside data-sm1-2 data-md1-2 data-lg1-4 data-lg3 data-m3 data-sm3 data-xs2>
+        </aside>
-            <div class="sticky">
+        <aside data-sm1-2 data-md1-2 data-lg1-4 data-lg3 data-m3 data-sm3 data-xs2>
-              <div class="page-end vertical">
+          <div class="sticky">
-                <button id="myBtn">Open Modal</button>
+            <div class="page-end vertical">
-                <div id="myModal" class="modal">
+              <button id="myBtn">Open Modal</button>
-                  <div class="modal-content">
+              <div id="myModal" class="modal">
-                    <span class="close">&times;</span>
+                <div class="modal-content">
-                    <div id="graph-container-modal"></div>
+                  <span class="close">&times;</span>
-                  </div>
+                  <div id="graph-container-modal"></div>
                 </div>
               </div>
-              {{partial "footer.html" .}}
             </div>
-          </aside>
+            {{partial "footer.html" .}}
-          </r-c>
+          </div>
-          <footer data-r-c data-join>
+        </aside>
-            <c1-1>
+  </r-c>
-              {{partial "contact.html" .}}
+  <footer data-r-c data-join>
-            </c1-1>
+    <c1-1>
-          </footer>
+      {{partial "contact.html" .}}
-        {{end}}
+    </c1-1>
+  </footer>
+  {{end}}
 
 </body>
 

layouts/partials/head.html

@@ -59,18 +59,6 @@
   <script src="{{$clipboard.Permalink}}"></script>
   {{ end }}
 
-  <!-- columns layout scripts -->
-  {{ if $.Site.Data.config.enableColumnLayout }}
-  {{ $drawTree := resources.Get "js/drawTree.js" | resources.Fingerprint "md5" | resources.Minify }}
-  <script src="{{$drawTree.Permalink}}"></script>
-
-  {{ $jquery := resources.Get "js/jquery.js" | resources.Fingerprint "md5" | resources.Minify }}
-  <script src="{{$jquery.Permalink}}"></script>
-
-  {{ $jstree := resources.Get "js/jstree.js" | resources.Fingerprint "md5" | resources.Minify }}
-  <script src="{{$jstree.Permalink}}"></script>
-  {{ end }}
-
   <!--  Preload page vars  -->
   {{$linkIndex := resources.Get "indices/linkIndex.json" | resources.Fingerprint
   "md5" | resources.Minify | }} {{$contentIndex := resources.Get
@@ -127,6 +115,9 @@
 
       {{end}}
 
+      {{if $.Site.Data.config.enableColumnLayout}}
+
+
       // draw graph in modal // not working
 
       // const containerModal = document.getElementById("graph-container-modal")
@@ -143,6 +134,7 @@
           true
         );
 
+      {{end}}
 
       {{if $.Site.Data.config.enableLinkPreview}}
       initPopover(
@@ -181,11 +173,6 @@
       {{end}}
 
       {{if $.Site.Data.config.enableColumnLayout}}
-        const siteBaseURL = new URL(BASE_URL);
-        const pathBase = siteBaseURL.pathname;
-        drawTree(pathBase)
-
-        
 
         // Get the modal
         var modal = document.getElementById("myModal");