maturity visualization

.eleventy.js

@@ -162,6 +162,7 @@ module.exports = function (eleventyConfig) {
         }
 
         let permalink = `/notes/${slugify(fileName)}`;
+        let maturity = process.env.MATURITY_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.maturity) {
+            maturity = frontMatter.data.maturity;
+          }
         } catch {
           deadLink = true;
         }
 
         return `<a class="internal-link ${
           deadLink ? "is-unresolved" : ""
-        }" href="${permalink}${headerLinkPath}">${title}</a>`;
+        }" ${deadLink ? "" : 'data-maturity="' + maturity + '"'} href="${permalink}${headerLinkPath}">${title}</a>`;
       })
     );
   });

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 maturity = process.env.MATURITY_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.maturity) {
+      maturity = frontMatter.data.maturity;
+    }
+  } catch {
+    //ignore
+  }
 
-    return { permalink, name };
+  return { permalink, name, maturity };
 }
 
 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, maturity } = 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[kye].maturity = maturity;
-        }
+      }
-    });
+    } else {
+      tree[key].isFolder = true;
+      populateWithPermalink(tree[key]);
+    }
+  });
 }

src/site/_data/meta.js

@@ -13,10 +13,31 @@ module.exports = async () => {
   if (themeStyle) {
     themeStyle = themeStyle.split("site")[1];
   }
+  let bodyClasses = [];
+  let maturitySettings = {
+    filetree: false,
+    links: false,
+    title: false,
+    default: process.env.MATURITY_DEFAULT,
+  };
+  if (process.env.MATURITY_TITLE) {
+    bodyClasses.push("title-maturity");
+    maturitySettings.title = true;
+  }
+  if (process.env.MATURITY_FILETREE) {
+    bodyClasses.push("filetree-maturity");
+    maturitySettings.filetree = true;
+  }
+  if (process.env.MATURITY_INTERNAL_LINKS) {
+    bodyClasses.push("links-maturity");
+    maturitySettings.links = true;
+  }
   const meta = {
     env: process.env.ELEVENTY_ENV,
     theme: process.env.THEME,
     themeStyle,
+    bodyClasses: bodyClasses.join(" "),
+    maturitySettings,
     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.maturitySettings.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-maturity="{{fileOrFolder.maturity}}" 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

@@ -7,7 +7,7 @@ permalink: "notes/{{ page.fileSlug | slugify }}/"
     <title>{% if title %}{{ title }}{% else %}{{ page.fileSlug }}{% endif %}</title>
     {%include "components/pageheader.njk"%}
   </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 %}
@@ -23,7 +23,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-maturity="{% if maturity %}{{maturity}}{% else %}{{meta.maturitySettings.default}}{% endif %}">{% if title %}{{ title }}{% else %}{{ page.fileSlug }}{% endif %}</h1>
         {% endif %}
         <div class="header-meta">
           {% if settings.dgShowTags === true and tags %}

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

@@ -4,7 +4,7 @@
     <title>{{ noteTitle }}</title>
     {%include "components/pageheader.njk"%}
   </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/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;
@@ -19,22 +18,26 @@
     --callout-title-padding: 0;
     --callout-title-size: inherit;
     --callout-content-padding: 0;
+
+    --maturity-icon-1: url(/img/tree-1.svg);
+    --maturity-icon-2: url(/img/tree-2.svg);
+    --maturity-icon-3: url(/img/tree-3.svg);
 }
 
 h1 {
-    color: #FFEF60;
+    color: #ffef60;
 }
 
 h2 {
-    color: #F06449;
+    color: #f06449;
 }
 
 h3 {
-    color: #D4FCC3;
+    color: #d4fcc3;
 }
 
 h4 {
-    color: #72DCFF;
+    color: #72dcff;
 }
 
 button {
@@ -54,21 +57,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 +80,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 +99,7 @@ blockquote p {
     display: inline;
 }
 
-p>code {
+p > code {
     //Inline code
     color: #c7254e;
     background-color: #1a1a1a;
@@ -218,3 +221,32 @@ p>code {
 .callout.is-collapsed .callout-fold .svg-icon {
     transform: rotate(-90deg);
 }
+
+body.title-maturity .cm-s-obsidian > header > h1[data-maturity]::before,
+body.filetree-maturity .filename[data-maturity]::before,
+body.links-maturity .internal-link[data-maturity]::before {
+    content: " ";
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    background-size: contain;
+    background-repeat: no-repeat;
+}
+
+body.title-maturity .cm-s-obsidian > header > h1[data-maturity="1"]::before,
+body.filetree-maturity .filename[data-maturity="1"]::before,
+body.links-maturity .internal-link[data-maturity="1"]::before {
+    background-image: var(--maturity-icon-1);
+}
+
+body.title-maturity .cm-s-obsidian > header > h1[data-maturity="2"]::before,
+body.filetree-maturity .filename[data-maturity="2"]::before,
+body.links-maturity .internal-link[data-maturity="2"]::before {
+    background-image: var(--maturity-icon-2);
+}
+
+body.title-maturity .cm-s-obsidian > header > h1[data-maturity="3"]::before,
+body.filetree-maturity .filename[data-maturity="3"]::before,
+body.links-maturity .internal-link[data-maturity="3"]::before {
+    background-image: var(--maturity-icon-3);
+}