From 616a2a9a0f2c720c0623e894c3f07d08518deb73 Mon Sep 17 00:00:00 2001
From: Utsob Roy <roy@utsob.me>
Date: Mon, 13 Feb 2023 14:41:59 +0600
Subject: [PATCH] maturity to generic note icons

---
 .eleventy.js                               |  8 ++--
 src/site/_data/filetree.js                 | 12 +++---
 src/site/_data/meta.js                     | 28 +++++++-------
 src/site/_includes/components/filetree.njk |  4 +-
 src/site/_includes/layouts/note.njk        |  2 +-
 src/site/img/default-note-icon.svg         |  8 ++++
 src/site/styles/digital-garden-base.scss   | 44 ++++++++++++++--------
 7 files changed, 64 insertions(+), 42 deletions(-)
 create mode 100644 src/site/img/default-note-icon.svg

diff --git a/.eleventy.js b/.eleventy.js
index 2549ae3..440c255 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -162,7 +162,7 @@ module.exports = function (eleventyConfig) {
         }
 
         let permalink = `/notes/${slugify(fileName)}`;
-        let maturity = process.env.MATURITY_DEFAULT;
+        let noteIcon = process.env.NOTE_ICON_DEFAULT;
         const title = linkTitle ? linkTitle : fileName;
         let deadLink = false;
 
@@ -176,8 +176,8 @@ module.exports = function (eleventyConfig) {
           if (frontMatter.data.permalink) {
             permalink = frontMatter.data.permalink;
           }
-          if (frontMatter.data.maturity) {
-            maturity = frontMatter.data.maturity;
+          if (frontMatter.data.noteIcon) {
+            noteIcon = frontMatter.data.noteIcon;
           }
         } catch {
           deadLink = true;
@@ -185,7 +185,7 @@ module.exports = function (eleventyConfig) {
 
         return `<a class="internal-link ${
           deadLink ? "is-unresolved" : ""
-        }" ${deadLink ? "" : 'data-maturity="' + maturity + '"'} href="${permalink}${headerLinkPath}">${title}</a>`;
+        }" ${deadLink ? "" : 'data-note-icon="' + noteIcon + '"'} href="${permalink}${headerLinkPath}">${title}</a>`;
       })
     );
   });
diff --git a/src/site/_data/filetree.js b/src/site/_data/filetree.js
index c8a31c3..714d7cf 100644
--- a/src/site/_data/filetree.js
+++ b/src/site/_data/filetree.js
@@ -45,7 +45,7 @@ const sortTree = (unsorted) => {
 function getPermalinkMeta(path, key) {
   let permalink = "/";
   let name = key.replace(".md", "");
-  let maturity = process.env.MATURITY_DEFAULT;
+  let noteIcon = process.env.NOTE_ICON_DEFAULT;
   try {
     const file = fs.readFileSync(`${path}`, "utf8");
     const frontMatter = matter(file);
@@ -55,14 +55,14 @@ function getPermalinkMeta(path, key) {
     if (frontMatter.data.title) {
       name = frontMatter.data.title;
     }
-    if (frontMatter.data.maturity) {
-      maturity = frontMatter.data.maturity;
+    if (frontMatter.data.noteIcon) {
+      noteIcon = frontMatter.data.noteIcon;
     }
   } catch {
     //ignore
   }
 
-  return { permalink, name, maturity };
+  return { permalink, name, noteIcon };
 }
 
 function populateWithPermalink(tree) {
@@ -71,13 +71,13 @@ function populateWithPermalink(tree) {
       const isNote = tree[key].path.endsWith(".md");
       tree[key].isNote = isNote;
       if (isNote) {
-        let { permalink, name, maturity } = getPermalinkMeta(
+        let { permalink, name, noteIcon } = getPermalinkMeta(
           tree[key].path,
           key
         );
         tree[key].permalink = permalink;
         tree[key].name = name;
-        tree[key].maturity = maturity;
+        tree[key].noteIcon = noteIcon;
       }
     } else {
       tree[key].isFolder = true;
diff --git a/src/site/_data/meta.js b/src/site/_data/meta.js
index 69fad81..90ae703 100644
--- a/src/site/_data/meta.js
+++ b/src/site/_data/meta.js
@@ -14,36 +14,36 @@ module.exports = async () => {
     themeStyle = themeStyle.split("site")[1];
   }
   let bodyClasses = [];
-  let maturitySettings = {
+  let noteIconsSettings = {
     filetree: false,
     links: false,
     title: false,
-    default: process.env.MATURITY_DEFAULT,
+    default: process.env.NOTE_ICON_DEFAULT,
   };
-  if (process.env.MATURITY_TITLE && process.env.MATURITY_TITLE == "true") {
-    bodyClasses.push("title-maturity");
-    maturitySettings.title = true;
+  if (process.env.NOTE_ICON_TITLE && process.env.NOTE_ICON_TITLE == "true") {
+    bodyClasses.push("title-note-icon");
+    noteIconsSettings.title = true;
   }
   if (
-    process.env.MATURITY_FILETREE &&
-    process.env.MATURITY_FILETREE == "true"
+    process.env.NOTE_ICON_FILETREE &&
+    process.env.NOTE_ICON_FILETREE == "true"
   ) {
-    bodyClasses.push("filetree-maturity");
-    maturitySettings.filetree = true;
+    bodyClasses.push("filetree-note-icon");
+    noteIconsSettings.filetree = true;
   }
   if (
-    process.env.MATURITY_INTERNAL_LINKS &&
-    process.env.MATURITY_INTERNAL_LINKS == "true"
+    process.env.NOTE_ICON_INTERNAL_LINKS &&
+    process.env.NOTE_ICON_INTERNAL_LINKS == "true"
   ) {
-    bodyClasses.push("links-maturity");
-    maturitySettings.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(" "),
-    maturitySettings,
+    noteIconsSettings,
     baseTheme: process.env.BASE_THEME || "dark",
     siteName: process.env.SITE_NAME_HEADER || "Digital Garden",
     siteBaseUrl: baseUrl,
diff --git a/src/site/_includes/components/filetree.njk b/src/site/_includes/components/filetree.njk
index 59d5f3c..6c9f6d2 100644
--- a/src/site/_includes/components/filetree.njk
+++ b/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}}">
-                    {%- 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>
+                    {%- 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>
                 </div>
             {% elif fileOrFolder.isFolder%}
                 <div class="folder inner-folder"  x-data="{isOpen: $persist(false).as('{{currentPath}}')}" @click.stop="isOpen=!isOpen">
diff --git a/src/site/_includes/layouts/note.njk b/src/site/_includes/layouts/note.njk
index e0483c8..fcb9cfe 100644
--- a/src/site/_includes/layouts/note.njk
+++ b/src/site/_includes/layouts/note.njk
@@ -23,7 +23,7 @@ permalink: "notes/{{ page.fileSlug | slugify }}/"
     <main class="content cm-s-obsidian">
       <header>
         {% if settings.dgShowInlineTitle === true %}
-          <h1 data-maturity="{% if maturity %}{{maturity}}{% else %}{{meta.maturitySettings.default}}{% endif %}">{% 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 %}
diff --git a/src/site/img/default-note-icon.svg b/src/site/img/default-note-icon.svg
new file mode 100644
index 0000000..3c1d1aa
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/site/styles/digital-garden-base.scss b/src/site/styles/digital-garden-base.scss
index 8f65d75..a4c04bf 100644
--- a/src/site/styles/digital-garden-base.scss
+++ b/src/site/styles/digital-garden-base.scss
@@ -5,9 +5,10 @@
 
 body {
     overflow-x: hidden;
-    --maturity-icon-1: url(/img/tree-1.svg);
-    --maturity-icon-2: url(/img/tree-2.svg);
-    --maturity-icon-3: url(/img/tree-3.svg);
+    --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 {
@@ -611,20 +612,33 @@ input[type="range"]::-webkit-slider-thumb {
     margin-top: -10px;
 }
 
-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-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-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-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-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);
+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);
 }