maturity to generic note icons

This commit is contained in:
Utsob Roy 2023-02-13 14:41:59 +06:00
parent 3a1cdaebda
commit 616a2a9a0f
7 changed files with 64 additions and 42 deletions

View File

@ -162,7 +162,7 @@ module.exports = function (eleventyConfig) {
} }
let permalink = `/notes/${slugify(fileName)}`; let permalink = `/notes/${slugify(fileName)}`;
let maturity = process.env.MATURITY_DEFAULT; let noteIcon = process.env.NOTE_ICON_DEFAULT;
const title = linkTitle ? linkTitle : fileName; const title = linkTitle ? linkTitle : fileName;
let deadLink = false; let deadLink = false;
@ -176,8 +176,8 @@ module.exports = function (eleventyConfig) {
if (frontMatter.data.permalink) { if (frontMatter.data.permalink) {
permalink = frontMatter.data.permalink; permalink = frontMatter.data.permalink;
} }
if (frontMatter.data.maturity) { if (frontMatter.data.noteIcon) {
maturity = frontMatter.data.maturity; noteIcon = frontMatter.data.noteIcon;
} }
} catch { } catch {
deadLink = true; deadLink = true;
@ -185,7 +185,7 @@ module.exports = function (eleventyConfig) {
return `<a class="internal-link ${ return `<a class="internal-link ${
deadLink ? "is-unresolved" : "" deadLink ? "is-unresolved" : ""
}" ${deadLink ? "" : 'data-maturity="' + maturity + '"'} href="${permalink}${headerLinkPath}">${title}</a>`; }" ${deadLink ? "" : 'data-note-icon="' + noteIcon + '"'} href="${permalink}${headerLinkPath}">${title}</a>`;
}) })
); );
}); });

View File

@ -45,7 +45,7 @@ const sortTree = (unsorted) => {
function getPermalinkMeta(path, key) { function getPermalinkMeta(path, key) {
let permalink = "/"; let permalink = "/";
let name = key.replace(".md", ""); let name = key.replace(".md", "");
let maturity = process.env.MATURITY_DEFAULT; let noteIcon = process.env.NOTE_ICON_DEFAULT;
try { try {
const file = fs.readFileSync(`${path}`, "utf8"); const file = fs.readFileSync(`${path}`, "utf8");
const frontMatter = matter(file); const frontMatter = matter(file);
@ -55,14 +55,14 @@ function getPermalinkMeta(path, key) {
if (frontMatter.data.title) { if (frontMatter.data.title) {
name = frontMatter.data.title; name = frontMatter.data.title;
} }
if (frontMatter.data.maturity) { if (frontMatter.data.noteIcon) {
maturity = frontMatter.data.maturity; noteIcon = frontMatter.data.noteIcon;
} }
} catch { } catch {
//ignore //ignore
} }
return { permalink, name, maturity }; return { permalink, name, noteIcon };
} }
function populateWithPermalink(tree) { function populateWithPermalink(tree) {
@ -71,13 +71,13 @@ function populateWithPermalink(tree) {
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, maturity } = getPermalinkMeta( let { permalink, name, noteIcon } = getPermalinkMeta(
tree[key].path, tree[key].path,
key key
); );
tree[key].permalink = permalink; tree[key].permalink = permalink;
tree[key].name = name; tree[key].name = name;
tree[key].maturity = maturity; tree[key].noteIcon = noteIcon;
} }
} else { } else {
tree[key].isFolder = true; tree[key].isFolder = true;

View File

@ -14,36 +14,36 @@ module.exports = async () => {
themeStyle = themeStyle.split("site")[1]; themeStyle = themeStyle.split("site")[1];
} }
let bodyClasses = []; let bodyClasses = [];
let maturitySettings = { let noteIconsSettings = {
filetree: false, filetree: false,
links: false, links: false,
title: false, title: false,
default: process.env.MATURITY_DEFAULT, default: process.env.NOTE_ICON_DEFAULT,
}; };
if (process.env.MATURITY_TITLE && process.env.MATURITY_TITLE == "true") { if (process.env.NOTE_ICON_TITLE && process.env.NOTE_ICON_TITLE == "true") {
bodyClasses.push("title-maturity"); bodyClasses.push("title-note-icon");
maturitySettings.title = true; noteIconsSettings.title = true;
} }
if ( if (
process.env.MATURITY_FILETREE && process.env.NOTE_ICON_FILETREE &&
process.env.MATURITY_FILETREE == "true" process.env.NOTE_ICON_FILETREE == "true"
) { ) {
bodyClasses.push("filetree-maturity"); bodyClasses.push("filetree-note-icon");
maturitySettings.filetree = true; noteIconsSettings.filetree = true;
} }
if ( if (
process.env.MATURITY_INTERNAL_LINKS && process.env.NOTE_ICON_INTERNAL_LINKS &&
process.env.MATURITY_INTERNAL_LINKS == "true" process.env.NOTE_ICON_INTERNAL_LINKS == "true"
) { ) {
bodyClasses.push("links-maturity"); bodyClasses.push("links-note-icon");
maturitySettings.links = true; noteIconsSettings.links = true;
} }
const meta = { const meta = {
env: process.env.ELEVENTY_ENV, env: process.env.ELEVENTY_ENV,
theme: process.env.THEME, theme: process.env.THEME,
themeStyle, themeStyle,
bodyClasses: bodyClasses.join(" "), bodyClasses: bodyClasses.join(" "),
maturitySettings, noteIconsSettings,
baseTheme: process.env.BASE_THEME || "dark", baseTheme: process.env.BASE_THEME || "dark",
siteName: process.env.SITE_NAME_HEADER || "Digital Garden", siteName: process.env.SITE_NAME_HEADER || "Digital Garden",
siteBaseUrl: baseUrl, siteBaseUrl: baseUrl,

View File

@ -3,8 +3,8 @@
<div x-show="isOpen" style="display:none" class="{{'filelist' if step>0}}"> <div x-show="isOpen" style="display:none" class="{{'filelist' if step>0}}">
{%if fileOrFolder.isNote %} {%if fileOrFolder.isNote %}
<div @click.stop class="notelink {{ 'active-note' if fileOrFolder.permalink === permalink}}"> <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 -%} {%- if not meta.noteIconsSettings.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> <a data-note-icon="{{fileOrFolder.noteIcon}}" style="text-decoration: none;" class="filename" href="{{fileOrFolder.permalink}}">{{fileOrFolder.name}} </a>
</div> </div>
{% elif fileOrFolder.isFolder%} {% elif fileOrFolder.isFolder%}
<div class="folder inner-folder" x-data="{isOpen: $persist(false).as('{{currentPath}}')}" @click.stop="isOpen=!isOpen"> <div class="folder inner-folder" x-data="{isOpen: $persist(false).as('{{currentPath}}')}" @click.stop="isOpen=!isOpen">

View File

@ -23,7 +23,7 @@ permalink: "notes/{{ page.fileSlug | slugify }}/"
<main class="content cm-s-obsidian"> <main class="content cm-s-obsidian">
<header> <header>
{% if settings.dgShowInlineTitle === true %} {% 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 %} {% endif %}
<div class="header-meta"> <div class="header-meta">
{% if settings.dgShowTags === true and tags %} {% if settings.dgShowTags === true and tags %}

View File

@ -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>

After

Width:  |  Height:  |  Size: 479 B

View File

@ -5,9 +5,10 @@
body { body {
overflow-x: hidden; overflow-x: hidden;
--maturity-icon-1: url(/img/tree-1.svg); --note-icon-1: url(/img/tree-1.svg);
--maturity-icon-2: url(/img/tree-2.svg); --note-icon-2: url(/img/tree-2.svg);
--maturity-icon-3: url(/img/tree-3.svg); --note-icon-3: url(/img/tree-3.svg);
--note-icon-fallback: url(/img/default-note-icon.svg);
} }
.content { .content {
@ -611,20 +612,33 @@ input[type="range"]::-webkit-slider-thumb {
margin-top: -10px; margin-top: -10px;
} }
body.title-maturity .cm-s-obsidian > header > h1[data-maturity="1"]::before, body.title-note-icon .cm-s-obsidian > header > h1[data-note-icon]::before,
body.filetree-maturity .filename[data-maturity="1"]::before, body.filetree-note-icon .filename[data-note-icon]::before,
body.links-maturity .internal-link[data-maturity="1"]::before { body.links-note-icon .internal-link[data-note-icon]::before {
background-image: var(--maturity-icon-1); 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.title-note-icon .cm-s-obsidian > header > h1[data-note-icon="1"]::before,
body.filetree-maturity .filename[data-maturity="2"]::before, body.filetree-note-icon .filename[data-note-icon="1"]::before,
body.links-maturity .internal-link[data-maturity="2"]::before { body.links-note-icon .internal-link[data-note-icon="1"]::before {
background-image: var(--maturity-icon-2); background-image: var(--note-icon-1);
} }
body.title-maturity .cm-s-obsidian > header > h1[data-maturity="3"]::before, body.title-note-icon .cm-s-obsidian > header > h1[data-note-icon="2"]::before,
body.filetree-maturity .filename[data-maturity="3"]::before, body.filetree-note-icon .filename[data-note-icon="2"]::before,
body.links-maturity .internal-link[data-maturity="3"]::before { body.links-note-icon .internal-link[data-note-icon="2"]::before {
background-image: var(--maturity-icon-3); 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);
} }