maturity visualization

2025-06-05 12:25:20 +00:00 · 2023-02-11 19:31:11 +06:00 · 2023-02-11 19:31:11 +06:00 · aff76efc5b
commit aff76efc5b
parent efb951179d
10 changed files with 189 additions and 80 deletions
--- a/.eleventy.js
+++ b/.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>`;
      })
    );
  });
--- a/src/site/_data/filetree.js
+++ b/src/site/_data/filetree.js
@ -1,80 +1,87 @@
 const fsFileTree = require("fs-file-tree");
-const matter = require('gray-matter');
-const fs = require('fs');
+const matter = require("gray-matter");
+const fs = require("fs");

 module.exports = async () => {
-    const tree = await fsFileTree("src/site/notes");
-    populateWithPermalink(tree);
+  const tree = await fsFileTree("src/site/notes");
+  populateWithPermalink(tree);

-    return sortTree(tree);
-}
+  return sortTree(tree);
+};

 const sortTree = (unsorted) => {
-    //Sort by folder before file, then by name
-    const orderedTree = Object.keys(unsorted).sort((a, b) => {
-        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;
-        }
+  //Sort by folder before file, then by name
+  const orderedTree = Object.keys(unsorted)
+    .sort((a, b) => {
+      if (a.indexOf(".md") > -1 && b.indexOf(".md") === -1) {
+        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)) {
-        if (!orderedTree[key].path) {
-            orderedTree[key] = sortTree(orderedTree[key])
-        }
+      return -1;
+    })
+    .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) {
-    let permalink = "/"
-    let name = key.replace(".md", "");
-    try {
-        const file = fs.readFileSync(`${path}`, 'utf8');
-        const frontMatter = matter(file);
-        if (frontMatter.data.permalink) {
-            permalink = frontMatter.data.permalink;
-        }
-        if (frontMatter.data.title) {
-            name = frontMatter.data.title
-        }
-    } catch {
-        //ignore
+function getPermalinkMeta(path, key) {
+  let permalink = "/";
+  let name = key.replace(".md", "");
+  let maturity = process.env.MATURITY_DEFAULT;
+  try {
+    const file = fs.readFileSync(`${path}`, "utf8");
+    const frontMatter = matter(file);
+    if (frontMatter.data.permalink) {
+      permalink = frontMatter.data.permalink;
    }
+    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 => {
-        if (tree[key].path) {
-            const isNote = tree[key].path.endsWith(".md");
-            tree[key].isNote = isNote;
-            if (isNote) {
-                let { permalink, name } = getPermalinkAndName(tree[key].path, key);
-                tree[key].permalink = permalink
-                tree[key].name = name
-            }
-        } else {
-            tree[key].isFolder = true;
-            populateWithPermalink(tree[key]);
-        }
-    });
+  Object.keys(tree).forEach((key) => {
+    if (tree[key].path) {
+      const isNote = tree[key].path.endsWith(".md");
+      tree[key].isNote = isNote;
+      if (isNote) {
+        let { permalink, name, maturity } = getPermalinkMeta(
+          tree[key].path,
+          key
+        );
+        tree[key].permalink = permalink;
+        tree[key].name = name;
+        tree[kye].maturity = maturity;
+      }
+    } else {
+      tree[key].isFolder = true;
+      populateWithPermalink(tree[key]);
+    }
+  });
 }
--- a/src/site/_data/meta.js
+++ b/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,
--- 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}}">
-                    <i class="fa fa-sticky-note" aria-hidden="true"></i>
-                    <a 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>
                </div>
            {% elif fileOrFolder.isFolder%}
                <div class="folder inner-folder"  x-data="{isOpen: $persist(false).as('{{currentPath}}')}" @click.stop="isOpen=!isOpen">
--- a/src/site/_includes/layouts/note.njk
+++ b/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 %}
--- a/src/site/img/tree-1.svg
+++ b/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>
--- a/src/site/img/tree-2.svg
+++ b/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>
--- a/src/site/img/tree-3.svg
+++ b/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>
--- a/src/site/index.njk
+++ b/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"%}
--- a/src/site/styles/style.scss
+++ b/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{
- color: rgb(97 186 245 / 65%);
+a.is-unresolved {
+    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);
+}