Code Snippets

/src/site/styles/custom-style.scss

nav.filetree-sidebar {
      h1::before {
        content: " ";
        display: block;
        width: 100%;
        height: 3em;
        background-size: contain;
        background-repeat: no-repeat;
        background-image: url(/img/logo.svg);
        background-position: center;
      }
    }

    nav.navbar {
      .navbar-inner {
        h1::before {
          content: " ";
          display: inline-block;
          width: 1em;
          height: 1.2em;
          background-size: contain;
          background-repeat: no-repeat;
          background-image: url(/img/logo.svg);
          margin-right: 5px;
          background-position: bottom;
        }
      }
    }

src/helpers/filetreeUtils.js

function getPermalinkMeta(note, key) {
  let permalink = "/";
  let parts = note.filePathStem.split("/");
  let name = parts[parts.length - 1];
  let noteIcon = process.env.NOTE_ICON_DEFAULT;
  let hide = false;
  let pinned = false;
  let folders = null;
  let isHiddenInTree = false;

  try {
    if (note.data.permalink) {
      permalink = note.data.permalink;
    }
    if (note.data.tags && note.data.tags.indexOf("gardenEntry") != -1) {
      permalink = "/";
    }    
    if (note.data.title) {
      name = note.data.title;
    }
    if (note.data.noteIcon) {
      noteIcon = note.data.noteIcon;
    }
    // Reason for adding the hide flag instead of removing completely from file tree is to
    // allow users to use the filetree data elsewhere without the fear of losing any data.
    if (note.data.hide) {
      hide = note.data.hide;
    }
    if (note.data.pinned) {
      pinned = note.data.pinned;
    }

    if (note.data["dg-path"]) {
      folders = note.data["dg-path"].split("/");
    } else {
      folders = note.filePathStem
        .split("notes/")[1]
        .split("/");
    }
    folders[folders.length - 1]+= ".md";
    isHiddenInTree = name.startsWith("_");
  } catch {
    //ignore
  }
  return [{ permalink, name, noteIcon, hide, pinned, isHiddenInTree: isHiddenInTree }, folders];
}

function assignNested(obj, keyPath, value) {
    lastKeyIndex = keyPath.length - 1;
    for (var i = 0; i < lastKeyIndex; ++i) {
      key = keyPath[i];
      if (!(key in obj)) {
        obj[key] = { isFolder: true, isHiddenInTree: key.startsWith("_") };
      }
      obj = obj[key];
      if (!value.hide) obj.isHiddenInTree = key.startsWith("_"); // added
    }
    obj[keyPath[lastKeyIndex]] = value;
}

src/site/_includes/components/filetree.njk

{% macro menuItem(fileOrFolderName, fileOrFolder, step, currentPath) %}
    {%if fileOrFolder.isNote or fileOrFolder.isFolder%}
        <div x-show="isOpen" style="display:none" class="{{'filelist' if step>0}}">
            {%if fileOrFolder.isNote and not fileOrFolder.hide and not fileOrFolder.isHiddenInTree %}
                <div @click.stop class="notelink {{ 'active-note' if fileOrFolder.permalink === permalink}}">
                    {%- if not meta.noteIconsSettings.filetree -%}<i icon-name="sticky-note" aria-hidden="true"></i>{%- endif -%}
                    <a data-note-icon="{{fileOrFolder.noteIcon}}" style="text-decoration: none;" class="filename" href="{{fileOrFolder.permalink}}">{{fileOrFolder.name}} </a>
                </div>
            {% elif fileOrFolder.isFolder and not fileOrFolder.isHiddenInTree %}
                <div class="folder inner-folder"  x-data="{isOpen: $persist(false).as('{{currentPath}}')}" @click.stop="isOpen=!isOpen">
                    <div class="foldername-wrapper align-icon">
                    <i x-show="isOpen" style="display: none;"  icon-name="chevron-down"></i>
                    <i x-show="!isOpen"  icon-name="chevron-right"></i>
                    <span class="foldername">{{fileOrFolderName}}</span>
                    </div>
                    {% for fileOrFolderName, child in fileOrFolder %}
                        {{menuItem(fileOrFolderName, child, step+1, (currentPath+"/"+fileOrFolderName))}}
                    {% endfor %}
                </div>
            {% endif %}
        </div>
        {%endif%}
    {% endmacro %}