Implemented filetree, and made some adjustments to graph and backlinks

.eleventy.js

@@ -133,7 +133,6 @@ module.exports = function(eleventyConfig) {
             const title = linkTitle ? linkTitle : fileName;
             let deadLink = false;
 
-
             try {
                 const startPath = './src/site/notes/';
                 const fullPath = fileName.endsWith('.md') ? 

package.json

@@ -27,6 +27,7 @@
         "axios": "^0.26.1",
         "dotenv": "^10.0.0",
         "eleventy-favicon": "^1.1.2",
+        "fs-file-tree": "^1.1.1",
         "gray-matter": "^4.0.3",
         "markdown-it": "^12.3.2",
         "markdown-it-footnote": "^3.0.3",

src/helpers/constants.js

@@ -0,0 +1,8 @@
+exports.ALL_NOTE_SETTINGS= [
+    "dgHomeLink",
+    "dgPassFrontmatter",
+    "dgShowBacklinks",
+    "dgShowLocalGraph",
+    "dgShowInlineTitle",
+    "dgShowFileTree"
+];

src/site/_data/filetree.js

@@ -0,0 +1,63 @@
+const fsFileTree = require("fs-file-tree");
+const matter = require('gray-matter');
+const fs = require('fs');
+
+module.exports = async () => {
+    const tree = await fsFileTree("src/site/notes");
+    populateWithPermalink(tree);
+    
+    //Sort by folder before file, then by name
+    const orderedTree = Object.keys(tree).sort((a,b)=>{
+        if(a.indexOf(".md") > -1 && b.indexOf(".md") === -1){
+            return 1;
+        }
+
+        if(a.indexOf(".md") === -1 && b.indexOf(".md") > -1){
+            return -1;
+        }
+
+        if(a>b){
+            return 1;
+        }
+
+        return -1;
+    }).reduce(
+        (obj, key) => {
+            obj[key] = tree[key];
+            return obj;
+        },
+        {}
+    );
+    return orderedTree;
+}
+
+function getPermalink(path) {
+    let permalink = "/"
+    try {
+        const file = fs.readFileSync(`${path}`, 'utf8');
+        const frontMatter = matter(file);
+        if (frontMatter.data.permalink) {
+            permalink = frontMatter.data.permalink;
+        }
+    } catch {
+        //ignore
+    }
+
+    return permalink;
+}
+
+function populateWithPermalink(tree) {
+    Object.keys(tree).forEach(key => {
+        if (tree[key].path) {
+            const isNote = tree[key].path.endsWith(".md");
+            tree[key].isNote = isNote;
+            if (isNote) {
+                tree[key].permalink = getPermalink(tree[key].path);
+                tree[key].name = key.replace(".md", "");
+            }
+        } else {
+            tree[key].isFolder = true;
+            populateWithPermalink(tree[key]);
+        }
+    });
+}

src/site/_data/meta.js

@@ -13,6 +13,7 @@ module.exports = async() => {
         theme: process.env.THEME,
         themeStyle: themeStyle,
         baseTheme: process.env.BASE_THEME || "dark",
+        siteName: process.env.SITE_NAME || "Digital Garden",
     };
 
     return meta;

src/site/_includes/components/filetree.njk

@@ -0,0 +1,44 @@
+{% macro menuItem(fileOrFolderName, fileOrFolder, step) %}
+    {%if fileOrFolder.isNote or fileOrFolder.isFolder%}
+        <div x-show="isOpen" style="display:none" class="{{'filelist' if step>0}}">
+            {%if fileOrFolder.isNote %}
+                <div class="notelink">
+                    <a class="filename" href="{{fileOrFolder.permalink}}">{{fileOrFolder.name}}</a>
+                </div>
+            {% elif fileOrFolder.isFolder%}
+                <div class="folder inner-folder"  x-data="{isOpen: false}" @click.stop="isOpen=!isOpen">
+                    <i x-show="isOpen" style="display: none;" class="fa fa-caret-down"></i>
+                    <i x-show="!isOpen" class="fa fa-caret-right"></i>
+                    <span class="foldername">{{fileOrFolderName}}</span>
+                    {% for fileOrFolderName, child in fileOrFolder %}
+                        {{menuItem(fileOrFolderName, child, step+1)}}
+                    {% endfor %}
+                </div>
+            {% endif %}
+        </div>
+        {%endif%}
+    {% endmacro %}
+    
+    <div x-init="isDesktop = window.innerWidth>=1490;" 
+            x-on:resize.window="isDesktop = (window.innerWidth>=1490) ? true : false;" 
+            x-data="{isDesktop: true, showFilesMobile: false}">
+
+        <div x-show="!isDesktop">
+            {%include "components/filetreeNavbar.njk"%}
+        </div>
+        
+        <div x-show="showFilesMobile && !isDesktop" @click="showFilesMobile = false" style="display:none;" class="fullpage-overlay"></div>
+
+      <nav class="filetree-sidebar" style="display:none;" x-show="isDesktop || showFilesMobile">
+
+         <a href="/" style="text-decoration: none;">
+               <h1 style="text-align:center;">{{meta.siteName}}</h1>
+         </a>
+
+         <div class="folder" x-data="{isOpen: true}">
+               {%- for fileOrFolderName, fileOrFolder in filetree -%}
+                  {{menuItem(fileOrFolderName, fileOrFolder, 0)}}
+               {%- endfor -%}
+         </div>
+      </nav>
+    </div>

src/site/_includes/components/filetreeNavbar.njk

@@ -0,0 +1,8 @@
+<nav class="navbar">
+    <div class="navbar-inner">
+        <i style="font-size: 1.5rem; margin-right: 10px;" @click="showFilesMobile=!showFilesMobile" class="fa fa-bars"></i>
+        <a href="/" style="text-decoration: none;">
+            <h1>{{meta.siteName}}</h1>
+        </a>
+    </div>
+</nav>

src/site/_includes/components/graphScript.njk

@@ -110,7 +110,7 @@
                 ctx.fill();
 
                 const label = htmlDecode(node.title)
-                const fontSize = 6;
+                const fontSize = 3.5;
                 ctx.font = `${fontSize}px Sans-Serif`;
 
                 ctx.textAlign = 'center';
@@ -124,7 +124,11 @@
                 window.location = node.url;
             });
 
-        Graph.zoomToFit()
+            setTimeout(() => {
-        Graph.zoom(3)
+                Graph.zoomToFit();
+                Graph.zoom(3);
+            }, 10);
     }
+
+    renderGraph(330,300);
 </script>

src/site/_includes/components/navbar.njk

@@ -0,0 +1,5 @@
+<nav class="navbar">
+    <a href="/" style="text-decoration: none;">
+        <h1>{{meta.siteName}}</h1>
+    </a>
+</nav>

src/site/_includes/components/sidebar.njk

@@ -1,28 +1,19 @@
-<div x-init="isDesktop = window.innerWidth>=1100;" 
+<div>
-            x-on:resize.window="isDesktop = (window.innerWidth>=1100) ? true : false;" 
+      <div class="sidebar">
-            x-data="sidebarData">
+            <div class="sidebar-container">
-
-      <div class="sidebar" :style="open && isDesktop ? 'box-shadow: -5px 0 15px rgba(0,0,0,0.3);' : ''">
-            <div x-show="isDesktop" class="expand-line">
-
-                  <button style="font-size: 48px; background: transparent; border:none; box-shadow: none;" @click="toggleOpen()">
-
-                        <i x-show="open" style="display: none;" class="fa fa-caret-right"></i>
-                        <i x-show="!open" class="fa fa-caret-left"></i>
-                  </button>
-            </div>
-
-            <div x-show="open || !isDesktop" class="sidebar-container" style="display: none;">
 
                   {%if settings.dgShowLocalGraph === true%}
-                        <div x-show="isDesktop">
+                        <div class="graph">
-                              <h3>Graph</h3>
+                              <div style="display: flex; justify-content: flex-end;">
-                              <div id="link-graph" style="margin-bottom:20px; background-color: var(--background-primary); border-radius: 10px; width: fit-content;"></div>
+                                    <h6 class="graph-title">Interactive graph</h6>
+                              </div>
+                              <div id="link-graph"></div>
                         </div>
                   {%endif%}
 
                   {%if settings.dgShowBacklinks === true %}
-                              <h3>Links to this page</h3>
+                        <div class="backlinks">
+                              <h6 class="backlink-title">Links to this page</h6>
                               {%- if backlinks.length === 0 -%}
                                     <div class="backlink-card">
                                           No backlinks
@@ -34,36 +25,12 @@
                                           <a href="{{backlink.url}}">{{backlink.title}}</a>
                                     </div>
                               {%- endfor -%}
+                        </div>
                   {%endif%}
-
             </div>
       </div>
+</div>
 
-            {%if settings.dgShowLocalGraph === true %}
+{%if settings.dgShowLocalGraph === true %}
       {%include "components/graphScript.njk"%}
-            {% endif %}
+{% endif %}
-
-            <script>
-                  document.addEventListener('alpine:init', () => {
-
-                        const isDesktop = window.innerWidth >= 1100;
-                        {% if settings.dgShowLocalGraph === true %}
-                              renderGraph(600, 400);
-                        {% endif %}
-
-                        Alpine.data('sidebarData', () => ({
-                              open: false,
-                              isDesktop,
-                              toggleOpen() {
-                                    this.open = !this.open;
-                                    if (Graph) {
-                                          setTimeout(() => {
-                                                Graph.zoomToFit();
-                                                Graph.zoom(3);
-                                          }, 10);
-                                    }
-                              }
-
-                        }))
-                  })
-            </script>

src/site/_includes/layouts/note.njk

@@ -11,11 +11,13 @@ permalink: "notes/{{ page.fileSlug | slugify }}/"
   <body class="theme-{{meta.baseTheme}} markdown-preview-view markdown-rendered markdown-preview-section">
     {%include "components/notegrowthhistory.njk"%}
     
-    <div class="content">
+    {% if settings.dgShowFileTree !== true %}
-      {% if settings.dgHomeLink !== false%}
+      {%include "components/navbar.njk"%}
-        <a href="/">🏡 Back Home</a>
+    {%else%}
+      {%include "components/filetree.njk"%}
     {% endif %}
-      {# Dra dette opp i en egen greie for hver setting. Definer disse settingene i en klasse og lag en settings.js lik meta.js. Gå gjennom hver key og kjør denne logikken for å sette den.  #}
+
+    <div class="content">
       {% if settings.dgShowInlineTitle === true %}
         <h1>{{ page.fileSlug }}</h1>
       {% endif %}

src/site/_includes/layouts/versionednote.njk

@@ -6,9 +6,6 @@
   </head>
   <body>
     <div class="content">
-      {%- if item.tags !== 'Garden' -%}
-        <a href="/">🏡 Back Home</a>
-        {%endif%}
         {{ item.content | safe}}
       </div>
     </body>

src/site/index.11tydata.js

@@ -1,19 +1,14 @@
 
 require("dotenv").config();
+const settings = require("../helpers/constants");
+
 const wikilink = /\[\[(.*?\|.*?)\]\]/g
 
 function caselessCompare(a, b) {
     return a.toLowerCase() === b.toLowerCase();
 }
 
-//Duplicated in notes.11tydata.js because new files means I need to update the plugin 
+const allSettings = settings.ALL_NOTE_SETTINGS;
-const allSettings = [
-    "dgHomeLink",
-    "dgPassFrontmatter",
-    "dgShowBacklinks",
-    "dgShowLocalGraph",
-    "dgShowInlineTitle"
-];
 
 module.exports = {
     eleventyComputed: {

src/site/index.njk

@@ -6,6 +6,11 @@
   </head>
   <body class="theme-{{meta.baseTheme}} markdown-preview-view markdown-rendered markdown-preview-section">
     {%include "components/notegrowthhistory.njk"%}
+    {% if settings.dgShowFileTree !== true %}
+      {%include "components/navbar.njk"%}
+    {%else%}
+      {%include "components/filetree.njk"%}
+    {% endif %}
     <div class="content">
 
       {% if settings.dgShowInlineTitle === true %}

src/site/notes/notes.11tydata.js

@@ -1,5 +1,6 @@
 
 require("dotenv").config();
+const settings = require("../../helpers/constants");
 
 const wikilink = /\[\[(.*?\|.*?)\]\]/g
 
@@ -7,14 +8,7 @@ function caselessCompare(a, b) {
     return a.toLowerCase() === b.toLowerCase();
 }
 
-//Duplicated in index.11tydata.js because new files means I need to update the plugin 
+const allSettings =  settings.ALL_NOTE_SETTINGS;
-const allSettings = [
-    "dgHomeLink",
-    "dgPassFrontmatter",
-    "dgShowBacklinks",
-    "dgShowLocalGraph",
-    "dgShowInlineTitle"
-];
 
 module.exports = {
     eleventyComputed: {

src/site/styles/digital-garden-base.scss

@@ -4,10 +4,11 @@
 ***/
 
 .content {
-    max-width: 900px;
+    max-width: 870px;
     margin: auto;
     font-size: 22px;
     line-height: 1.5;
+    margin-top: 75px;
 }
 
 .external-link {
@@ -60,17 +61,17 @@ ul.task-list {
     padding-left: 15px;
 }
 
-
 .sidebar {
     position: fixed;
     top: 50%;
     transform: translateY(-50%);
     right: 0;
     height: 100%;
-    background-color: var(--background-secondary);
     min-width: 25px;
     display: flex;
     z-index: 3;
+    max-width: 350px;
+    margin-top: 75px;
 }
 
 .expand-line {
@@ -80,27 +81,120 @@ ul.task-list {
 }
 
 .sidebar-container {
-    padding: 20px;
+    padding-right: 20px;
     width: 100%;
     overflow-y: auto;
 }
 
-.backlink-card {
+.backlinks {
-    padding: 20px;
+    margin-top: 50px;
-    border-radius: 4px;
+    background-color: var(--background-secondary);
-    margin-bottom: 20px;
+    border-radius: 10px;
-    background-color: var(--background-primary);
+    padding: 10px;
-    width: 100%;
 
+    .backlink-title {
+        margin: 4px 0;
+        font-size: 18px !important;
+    }
 }
 
-@media(max-width: 1100px) {
+.backlink-card {
+    padding-bottom: 4px;
+    border-radius: 4px;
+    width: 100%;
+    font-size: 1rem;
+}
+
+.graph{
+    .graph-title{
+        width: fit-content;
+        background-color: var(--background-secondary);
+        margin: 10px 0 0 0;
+        padding: 12px;
+        font-size: 18px !important;
+        border-radius: 10px 10px 0 0;
+    }
+}
+
+#link-graph {
+    background-color: var(--background-secondary);
+    margin-bottom: 20px;
+    border-radius: 10px 0 10px 10px;
+    width: fit-content;
+}
+
+@media(max-width: 1490px) {
     .sidebar {
         position: relative;
         transform: none;
         border-radius: 4px;
+        margin-top: 50px;
     }
 
+    .graph{
+        display: none;
+    }
+    .backlinks {
+        margin-top: 0;
+    }
+}
+
+.filetree-sidebar {
+    margin: 0;
+    z-index: 10;
+    padding: 10px; 
+    top:0px; 
+    left:0; 
+    position: fixed; 
+    height: 100%; 
+    background-color: var(--background-secondary); 
+    color: var(--text-muted); 
+    overflow-y:auto; 
+    width: 250px;
+}
+
+.navbar {
+    background-color: var(--background-secondary);
+    position: absolute;
+    width: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 3;
+    padding-left: var(--file-margins);
+
+    .navbar-inner {
+        display: flex; 
+        align-items: center; 
+        cursor: pointer;
+    }
+}
+
+.notelink {
+    padding: 2px 0 2px 25px;
+}
+
+.foldername {
+    margin-left: 5px;
+    cursor: pointer;
+}
+
+.inner-folder {
+    padding: 3px 0 3px 10px;
+}
+
+.filelist {
+    border-left: 1px solid var(--text-mark);
+}
+
+.fullpage-overlay{
+    background-color: rgba(0,0,0,0.5); 
+    position: absolute; 
+    top:0; 
+    right:0; 
+    left:0; 
+    bottom:0; 
+    z-index: 5
 }
 
 

src/site/styles/style.scss

@@ -9,6 +9,7 @@
     --background-secondary: rgb(57, 56, 56);
     --text-normal: #dcddde;
     --text-accent: rgb(97, 186, 245);
+    --file-margins: 32px;
 }
 
 h1 {