Merge branch 'uroybd-maturity-support'

.eleventy.js

@@ -162,6 +162,7 @@ module.exports = function (eleventyConfig) {
         }
 
         let permalink = `/notes/${slugify(fileName)}`;
+        let noteIcon = process.env.NOTE_ICON_DEFAULT;
         const title = linkTitle ? linkTitle : fileName;
         let deadLink = false;
 
@@ -175,13 +176,16 @@ module.exports = function (eleventyConfig) {
           if (frontMatter.data.permalink) {
             permalink = frontMatter.data.permalink;
           }
+          if (frontMatter.data.noteIcon) {
+            noteIcon = frontMatter.data.noteIcon;
+          }
         } catch {
           deadLink = true;
         }
 
         return `<a class="internal-link ${
           deadLink ? "is-unresolved" : ""
-        }" href="${permalink}${headerLinkPath}">${title}</a>`;
+        }" ${deadLink ? "" : 'data-note-icon="' + noteIcon + '"'} href="${permalink}${headerLinkPath}">${title}</a>`;
       })
     );
   });

plugin-info.json

@@ -6,7 +6,11 @@
     "filesToAdd": [
         "src/site/styles/custom-style.scss",
         ".env",
-        "src/site/favicon.svg"
+        "src/site/favicon.svg",
+        "src/site/img/default-note-icon.svg",
+        "src/site/img/tree-1.svg",
+        "src/site/img/tree-2.svg",
+        "src/site/img/tree-3.svg"
     ],
     "filesToModify": [
             ".eleventy.js",

src/site/_data/filetree.js

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

src/site/_data/meta.js

@@ -13,10 +13,37 @@ module.exports = async () => {
   if (themeStyle) {
     themeStyle = themeStyle.split("site")[1];
   }
+  let bodyClasses = [];
+  let noteIconsSettings = {
+    filetree: false,
+    links: false,
+    title: false,
+    default: process.env.NOTE_ICON_DEFAULT,
+  };
+  if (process.env.NOTE_ICON_TITLE && process.env.NOTE_ICON_TITLE == "true") {
+    bodyClasses.push("title-note-icon");
+    noteIconsSettings.title = true;
+  }
+  if (
+    process.env.NOTE_ICON_FILETREE &&
+    process.env.NOTE_ICON_FILETREE == "true"
+  ) {
+    bodyClasses.push("filetree-note-icon");
+    noteIconsSettings.filetree = true;
+  }
+  if (
+    process.env.NOTE_ICON_INTERNAL_LINKS &&
+    process.env.NOTE_ICON_INTERNAL_LINKS == "true"
+  ) {
+    bodyClasses.push("links-note-icon");
+    noteIconsSettings.links = true;
+  }
   const meta = {
     env: process.env.ELEVENTY_ENV,
     theme: process.env.THEME,
     themeStyle,
+    bodyClasses: bodyClasses.join(" "),
+    noteIconsSettings,
     baseTheme: process.env.BASE_THEME || "dark",
     siteName: process.env.SITE_NAME_HEADER || "Digital Garden",
     siteBaseUrl: baseUrl,

src/site/_includes/components/filetree.njk

@@ -3,8 +3,8 @@
         <div x-show="isOpen" style="display:none" class="{{'filelist' if step>0}}">
             {%if fileOrFolder.isNote %}
                 <div @click.stop class="notelink {{ 'active-note' if fileOrFolder.permalink === permalink}}">
-                    <i class="fa fa-sticky-note" aria-hidden="true"></i>
+                    {%- if not meta.noteIconsSettings.filetree -%}<i class="fa fa-sticky-note" aria-hidden="true"></i>{%- endif -%}
-                    <a style="text-decoration: none;" class="filename" href="{{fileOrFolder.permalink}}">{{fileOrFolder.name}} </a>
+                    <a data-note-icon="{{fileOrFolder.noteIcon}}" style="text-decoration: none;" class="filename" href="{{fileOrFolder.permalink}}">{{fileOrFolder.name}} </a>
                 </div>
             {% elif fileOrFolder.isFolder%}
                 <div class="folder inner-folder"  x-data="{isOpen: $persist(false).as('{{currentPath}}')}" @click.stop="isOpen=!isOpen">

src/site/_includes/layouts/note.njk

@@ -13,7 +13,7 @@ permalink: "notes/{{ page.fileSlug | slugify }}/"
       {% include imp %}
     {% endfor %}
   </head>
-  <body class="theme-{{meta.baseTheme}} markdown-preview-view markdown-rendered markdown-preview-section">
+  <body class="theme-{{meta.baseTheme}} markdown-preview-view markdown-rendered markdown-preview-section {{meta.bodyClasses}}">
     {%include "components/notegrowthhistory.njk"%}
     
     {% if settings.dgShowFileTree !== true %}
@@ -29,7 +29,7 @@ permalink: "notes/{{ page.fileSlug | slugify }}/"
     <main class="content cm-s-obsidian">
       <header>
         {% if settings.dgShowInlineTitle === true %}
-          <h1>{% if title %}{{ title }}{% else %}{{ page.fileSlug }}{% endif %}</h1>
+          <h1 data-note-icon="{% if noteIcon %}{{noteIcon}}{% else %}{{meta.noteIconsSettings.default}}{% endif %}">{% if title %}{{ title }}{% else %}{{ page.fileSlug }}{% endif %}</h1>
         {% endif %}
         <div class="header-meta">
           {% if settings.dgShowTags === true and tags %}

src/site/img/default-note-icon.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
+    <polyline points="14 2 14 8 20 8"></polyline>
+    <line x1="16" y1="13" x2="8" y2="13"></line>
+    <line x1="16" y1="17" x2="8" y2="17"></line>
+    <line x1="10" y1="9" x2="8" y2="9"></line>
+</svg>

src/site/img/tree-1.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="150" height="205" version="1.1" viewBox="0 0 39.688 54.24" xmlns="http://www.w3.org/2000/svg">
+ <g transform="translate(-69.7 -93.956)" fill="none" stroke="#008000">
+  <path d="m69.7 146.87h39.688" stroke-width="2.6458"/>
+  <g transform="translate(-.36252)">
+   <path d="m89.544 146.87v-6.794" stroke-width="2.6458"/>
+   <path d="m88.77 141.34 6.6272-8.1886" stroke-width="2.3347"/>
+   <path d="m89.919 141.46-5.5766-5.8386" stroke-width="2.3102"/>
+  </g>
+  <circle cx="100.95" cy="126.47" r="6.9136" stroke-width="2.6458"/>
+  <circle cx="79.351" cy="130.4" r="5.0854" stroke-width="2.6458"/>
+ </g>
+</svg>

src/site/img/tree-2.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg width="150" height="205" version="1.1" viewBox="0 0 39.688 54.24" xmlns="http://www.w3.org/2000/svg">
+ <g transform="translate(0 -.8262)" fill="none" stroke="#20b2aa">
+  <circle cx="33.971" cy="33.263" r="4.79" stroke-width="1.8521"/>
+  <circle cx="5.716" cy="33.263" r="4.79" stroke-width="1.8521"/>
+  <g stroke-width="2.6458">
+   <path d="m6.8958 53.743h25.896"/>
+   <path d="m19.844 53.743v-25.896"/>
+   <circle cx="19.844" cy="18.683" r="7.0212"/>
+   <path d="m6.8958 40.795 12.948 3.237 12.948-3.237"/>
+  </g>
+ </g>
+</svg>

src/site/img/tree-3.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg width="150" height="205" version="1.1" viewBox="0 0 39.688 54.24" xmlns="http://www.w3.org/2000/svg">
+ <g fill="none" stroke="#2e8b57">
+  <g>
+   <circle cx="34.846" cy="31.29" r="3.9152" stroke-width="1.8521"/>
+   <circle cx="4.8413" cy="31.29" r="3.9152" stroke-width="1.8521"/>
+   <path d="m9.2604 52.775h21.167" stroke-width="2.6458"/>
+  </g>
+  <path d="m19.844 53.834v-37.849" stroke-width="2.5838"/>
+  <circle cx="19.844" cy="7.1851" r="5.739" stroke-width="2.6458"/>
+  <path d="m6.6146 37.959 5.2917 5.2917h7.9375" stroke-width="2.6458"/>
+  <path d="m33.073 37.959-5.2917 5.2917h-7.9375" stroke-width="2.6458"/>
+  <circle cx="31.804" cy="17.056" r="3.9152" stroke-width="1.3229"/>
+  <circle cx="7.884" cy="17.056" r="3.9152" stroke-width="1.3229"/>
+  <path d="m9.2604 23.406 10.583 2.6458 10.583-2.6458" stroke-width="2.6458"/>
+ </g>
+</svg>

src/site/index.njk

@@ -10,7 +10,7 @@
       {% include imp %}
     {% endfor %}
   </head>
-  <body class="theme-{{meta.baseTheme}} markdown-preview-view markdown-rendered markdown-preview-section">
+  <body class="theme-{{meta.baseTheme}} markdown-preview-view markdown-rendered markdown-preview-section {{meta.bodyClasses}}">
     {%include "components/notegrowthhistory.njk"%}
     {% if settings.dgShowFileTree !== true %}
       {%include "components/navbar.njk"%}

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

@@ -5,6 +5,10 @@
 
 body {
     overflow-x: hidden;
+    --note-icon-1: url(/img/tree-1.svg);
+    --note-icon-2: url(/img/tree-2.svg);
+    --note-icon-3: url(/img/tree-3.svg);
+    --note-icon-fallback: url(/img/default-note-icon.svg);
 }
 
 .content {
@@ -95,7 +99,7 @@ ul.task-list {
             height: 100%;
         }
 
-        #graph-controls{
+        #graph-controls {
             margin-top: 10px;
         }
 
@@ -378,7 +382,8 @@ ul.task-list {
     padding: 3px 0 3px 10px;
 }
 
-.filelist {
+.filename {
+    margin-left: 5px;
 }
 
 .notelink.active-note {
@@ -661,3 +666,34 @@ input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
     margin-top: -10px;
 }
+
+body.title-note-icon .cm-s-obsidian > header > h1[data-note-icon]::before,
+body.filetree-note-icon .filename[data-note-icon]::before,
+body.links-note-icon .internal-link[data-note-icon]::before {
+    content: " ";
+    display: inline-block;
+    width: 0.9em;
+    height: 1em;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: bottom;
+    background-image: var(--note-icon-fallback);
+}
+
+body.title-note-icon .cm-s-obsidian > header > h1[data-note-icon="1"]::before,
+body.filetree-note-icon .filename[data-note-icon="1"]::before,
+body.links-note-icon .internal-link[data-note-icon="1"]::before {
+    background-image: var(--note-icon-1);
+}
+
+body.title-note-icon .cm-s-obsidian > header > h1[data-note-icon="2"]::before,
+body.filetree-note-icon .filename[data-note-icon="2"]::before,
+body.links-note-icon .internal-link[data-note-icon="2"]::before {
+    background-image: var(--note-icon-2);
+}
+
+body.title-note-icon .cm-s-obsidian > header > h1[data-note-icon="3"]::before,
+body.filetree-note-icon .filename[data-note-icon="3"]::before,
+body.links-note-icon .internal-link[data-note-icon="3"]::before {
+    background-image: var(--note-icon-3);
+}

src/site/styles/style.scss

@@ -3,8 +3,7 @@
 * MODIFY THE custom-style.scss FILE INSTEAD.
 ***/
 
-
+:root {
-:root{
     --background-primary: rgb(32, 31, 31);
     --background-secondary: rgb(57, 56, 56);
     --text-normal: #dcddde;
@@ -22,19 +21,19 @@
 }
 
 h1 {
-    color: #FFEF60;
+    color: #ffef60;
 }
 
 h2 {
-    color: #F06449;
+    color: #f06449;
 }
 
 h3 {
-    color: #D4FCC3;
+    color: #d4fcc3;
 }
 
 h4 {
-    color: #72DCFF;
+    color: #72dcff;
 }
 
 button {
@@ -54,21 +53,21 @@ button {
 .theme-dark {
     background: var(--background-primary);
     color: var(--text-normal);
-    font-family: 'Roboto', sans-serif;
+    font-family: "Roboto", sans-serif;
 }
 
 .theme-light {
     background: white;
     color: black;
-    font-family: 'Roboto', sans-serif;
+    font-family: "Roboto", sans-serif;
 }
 
-a.is-unresolved{
+a.is-unresolved {
- color: rgb(97 186 245 / 65%);
+    color: rgb(97 186 245 / 65%);
 }
 a {
     text-decoration: underline;
-    color: var(--text-accent)
+    color: var(--text-accent);
 }
 
 .font-bg {
@@ -77,7 +76,7 @@ a {
 
 blockquote {
     background: #ffffff17;
-    border-left: 10px solid #C1DBE3;
+    border-left: 10px solid #c1dbe3;
     margin: 1.5em 10px;
     padding: 0.5em 10px;
     quotes: "\201C""\201D""\2018""\2019";
@@ -96,7 +95,7 @@ blockquote p {
     display: inline;
 }
 
-p>code {
+p > code {
     //Inline code
     color: #c7254e;
     background-color: #1a1a1a;