maturity visualization

src/site/_includes/components/filetree.njk

@@ -3,8 +3,13 @@
         <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}}">
+<<<<<<< HEAD
                     {%- if not meta.noteIconsSettings.filetree -%}<i class="fa fa-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>
+=======
+                    {%- if not meta.maturitySettings.filetree -%}<i class="fa fa-sticky-note" aria-hidden="true"></i>{%- endif -%}
+                    <a data-maturity="{{fileOrFolder.maturity}}" style="text-decoration: none;" class="filename" href="{{fileOrFolder.permalink}}">{{fileOrFolder.name}} </a>
+>>>>>>> d6a8455 (maturity visualization)
                 </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

@@ -29,7 +29,11 @@ permalink: "notes/{{ page.fileSlug | slugify }}/"
     <main class="content cm-s-obsidian">
       <header>
         {% if settings.dgShowInlineTitle === true %}
+<<<<<<< HEAD
           <h1 data-note-icon="{% if noteIcon %}{{noteIcon}}{% else %}{{meta.noteIconsSettings.default}}{% endif %}">{% 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>
+>>>>>>> d6a8455 (maturity visualization)
         {% endif %}
         <div class="header-meta">
           {% if settings.dgShowTags === true and tags %}

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

@@ -99,7 +99,7 @@ ul.task-list {
             height: 100%;
         }
 
-        #graph-controls{
+        #graph-controls {
             margin-top: 10px;
         }
 

src/site/styles/style.scss

@@ -18,6 +18,10 @@
     --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 {
@@ -217,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);
+}