Merge branch 'uroybd-maturity-support'

2025-06-04 12:00:02 +00:00 · 2023-02-14 18:46:46 +01:00 · 2023-02-14 18:46:46 +01:00 · 54dcc4ffe4
commit 54dcc4ffe4
parent 92b999811b 42b7d2313c
13 changed files with 213 additions and 83 deletions
--- a/.eleventy.js
+++ b/.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>`;
      })
    );
  });
--- a/plugin-info.json
+++ b/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",
--- 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 noteIcon = process.env.NOTE_ICON_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.noteIcon) {
+      noteIcon = frontMatter.data.noteIcon;
+    }
+  } catch {
+    //ignore
+  }

-    return { permalink, name };
+  return { permalink, name, noteIcon };
 }

 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, noteIcon } = getPermalinkMeta(
+          tree[key].path,
+          key
+        );
+        tree[key].permalink = permalink;
+        tree[key].name = name;
+        tree[key].noteIcon = noteIcon;
+      }
+    } else {
+      tree[key].isFolder = true;
+      populateWithPermalink(tree[key]);
+    }
+  });
 }
--- a/src/site/_data/meta.js
+++ b/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,
--- 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.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">
--- a/src/site/_includes/layouts/note.njk
+++ b/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 %}
--- a/src/site/img/default-note-icon.svg
+++ 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>
--- 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
@ -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"%}
--- a/src/site/styles/digital-garden-base.scss
+++ b/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);
+}
--- 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;
@ -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{
- 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 +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;