tcsenpai/obsidiangarden_netlify
1
0
Fork 0
mirror of https://github.com/tcsenpai/obsidiangarden_netlify.git synced 2025-06-04 12:00:02 +00:00
Code Issues 5 Packages Projects Releases Wiki Activity

Implemented filetree, and made some adjustments to graph and backlinks

Browse Source
This commit is contained in:
Ole Eskild Steensen 2022-11-03 16:14:12 +01:00
parent 725a211252
commit 4c555c58d4
18 changed files with 1189 additions and 1495 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eleventy.js
View File

@ -133,7 +133,6 @@ module.exports = function(eleventyConfig) {
const title = linkTitle ? linkTitle : fileName;
let deadLink = false;
try {
const startPath = './src/site/notes/';
const fullPath = fileName.endsWith('.md') ?

2316
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -27,6 +27,7 @@
"axios": "^0.26.1",
"dotenv": "^10.0.0",
"eleventy-favicon": "^1.1.2",
"fs-file-tree": "^1.1.1",
"gray-matter": "^4.0.3",
"markdown-it": "^12.3.2",
"markdown-it-footnote": "^3.0.3",

8
src/helpers/constants.js Normal file
View File

@ -0,0 +1,8 @@
exports.ALL_NOTE_SETTINGS= [
"dgHomeLink",
"dgPassFrontmatter",
"dgShowBacklinks",
"dgShowLocalGraph",
"dgShowInlineTitle",
"dgShowFileTree"
];

63
src/site/_data/filetree.js Normal file
View File

@ -0,0 +1,63 @@
const fsFileTree = require("fs-file-tree");
const matter = require('gray-matter');
const fs = require('fs');
module.exports = async () => {
const tree = await fsFileTree("src/site/notes");
populateWithPermalink(tree);
//Sort by folder before file, then by name
const orderedTree = Object.keys(tree).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>b){
return 1;
}
return -1;
}).reduce(
(obj, key) => {
obj[key] = tree[key];
return obj;
},
{}
);
return orderedTree;
}
function getPermalink(path) {
let permalink = "/"
try {
const file = fs.readFileSync(`${path}`, 'utf8');
const frontMatter = matter(file);
if (frontMatter.data.permalink) {
permalink = frontMatter.data.permalink;
}
} catch {
//ignore
}
return permalink;
}
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) {
tree[key].permalink = getPermalink(tree[key].path);
tree[key].name = key.replace(".md", "");
}
} else {
tree[key].isFolder = true;
populateWithPermalink(tree[key]);
}
});
}

1
src/site/_data/meta.js
View File

@ -13,6 +13,7 @@ module.exports = async() => {
theme: process.env.THEME,
themeStyle: themeStyle,
baseTheme: process.env.BASE_THEME || "dark",
siteName: process.env.SITE_NAME || "Digital Garden",
};
return meta;

44
src/site/_includes/components/filetree.njk Normal file
View File

@ -0,0 +1,44 @@
{% macro menuItem(fileOrFolderName, fileOrFolder, step) %}
{%if fileOrFolder.isNote or fileOrFolder.isFolder%}
<div x-show="isOpen" style="display:none" class="{{'filelist' if step>0}}">
{%if fileOrFolder.isNote %}
<div class="notelink">
<a class="filename" href="{{fileOrFolder.permalink}}">{{fileOrFolder.name}}</a>
</div>
{% elif fileOrFolder.isFolder%}
<div class="folder inner-folder" x-data="{isOpen: false}" @click.stop="isOpen=!isOpen">
<i x-show="isOpen" style="display: none;" class="fa fa-caret-down"></i>
<i x-show="!isOpen" class="fa fa-caret-right"></i>
<span class="foldername">{{fileOrFolderName}}</span>
{% for fileOrFolderName, child in fileOrFolder %}
{{menuItem(fileOrFolderName, child, step+1)}}
{% endfor %}
</div>
{% endif %}
</div>
{%endif%}
{% endmacro %}
<div x-init="isDesktop = window.innerWidth>=1490;"
x-on:resize.window="isDesktop = (window.innerWidth>=1490) ? true : false;"
x-data="{isDesktop: true, showFilesMobile: false}">
<div x-show="!isDesktop">
{%include "components/filetreeNavbar.njk"%}
</div>
<div x-show="showFilesMobile && !isDesktop" @click="showFilesMobile = false" style="display:none;" class="fullpage-overlay"></div>
<nav class="filetree-sidebar" style="display:none;" x-show="isDesktop || showFilesMobile">
<a href="/" style="text-decoration: none;">
<h1 style="text-align:center;">{{meta.siteName}}</h1>
</a>
<div class="folder" x-data="{isOpen: true}">
{%- for fileOrFolderName, fileOrFolder in filetree -%}
{{menuItem(fileOrFolderName, fileOrFolder, 0)}}
{%- endfor -%}
</div>
</nav>
</div>

8
src/site/_includes/components/filetreeNavbar.njk Normal file
View File

@ -0,0 +1,8 @@
<nav class="navbar">
<div class="navbar-inner">
<i style="font-size: 1.5rem; margin-right: 10px;" @click="showFilesMobile=!showFilesMobile" class="fa fa-bars"></i>
<a href="/" style="text-decoration: none;">
<h1>{{meta.siteName}}</h1>
</a>
</div>
</nav>

10
src/site/_includes/components/graphScript.njk
View File

@ -110,7 +110,7 @@
ctx.fill();
const label = htmlDecode(node.title)
const fontSize = 6;
const fontSize = 3.5;
ctx.font = `${fontSize}px Sans-Serif`;
ctx.textAlign = 'center';
@ -124,7 +124,11 @@
window.location = node.url;
});
Graph.zoomToFit()
Graph.zoom(3)
setTimeout(() => {
Graph.zoomToFit();
Graph.zoom(3);
}, 10);
}
renderGraph(330,300);
</script>

5
src/site/_includes/components/navbar.njk Normal file
View File

@ -0,0 +1,5 @@
<nav class="navbar">
<a href="/" style="text-decoration: none;">
<h1>{{meta.siteName}}</h1>
</a>
</nav>

69
src/site/_includes/components/sidebar.njk
View File

@ -1,28 +1,19 @@
<div x-init="isDesktop = window.innerWidth>=1100;"
x-on:resize.window="isDesktop = (window.innerWidth>=1100) ? true : false;"
x-data="sidebarData">
<div class="sidebar" :style="open && isDesktop ? 'box-shadow: -5px 0 15px rgba(0,0,0,0.3);' : ''">
<div x-show="isDesktop" class="expand-line">
<button style="font-size: 48px; background: transparent; border:none; box-shadow: none;" @click="toggleOpen()">
<i x-show="open" style="display: none;" class="fa fa-caret-right"></i>
<i x-show="!open" class="fa fa-caret-left"></i>
</button>
</div>
<div x-show="open || !isDesktop" class="sidebar-container" style="display: none;">
<div>
<div class="sidebar">
<div class="sidebar-container">
{%if settings.dgShowLocalGraph === true%}
<div x-show="isDesktop">
<h3>Graph</h3>
<div id="link-graph" style="margin-bottom:20px; background-color: var(--background-primary); border-radius: 10px; width: fit-content;"></div>
<div class="graph">
<div style="display: flex; justify-content: flex-end;">
<h6 class="graph-title">Interactive graph</h6>
</div>
<div id="link-graph"></div>
</div>
{%endif%}
{%endif%}
{%if settings.dgShowBacklinks === true %}
<h3>Links to this page</h3>
{%if settings.dgShowBacklinks === true %}
<div class="backlinks">
<h6 class="backlink-title">Links to this page</h6>
{%- if backlinks.length === 0 -%}
<div class="backlink-card">
No backlinks
@ -34,36 +25,12 @@
<a href="{{backlink.url}}">{{backlink.title}}</a>
</div>
{%- endfor -%}
{%endif%}
</div>
{%endif%}
</div>
</div>
</div>
{%if settings.dgShowLocalGraph === true %}
{%include "components/graphScript.njk"%}
{% endif %}
<script>
document.addEventListener('alpine:init', () => {
const isDesktop = window.innerWidth >= 1100;
{% if settings.dgShowLocalGraph === true %}
renderGraph(600, 400);
{% endif %}
Alpine.data('sidebarData', () => ({
open: false,
isDesktop,
toggleOpen() {
this.open = !this.open;
if (Graph) {
setTimeout(() => {
Graph.zoomToFit();
Graph.zoom(3);
}, 10);
}
}
}))
})
</script>
{%if settings.dgShowLocalGraph === true %}
{%include "components/graphScript.njk"%}
{% endif %}

10
src/site/_includes/layouts/note.njk
View File

@ -10,12 +10,14 @@ permalink: "notes/{{ page.fileSlug | slugify }}/"
</head>
<body class="theme-{{meta.baseTheme}} markdown-preview-view markdown-rendered markdown-preview-section">
{%include "components/notegrowthhistory.njk"%}
{% if settings.dgShowFileTree !== true %}
{%include "components/navbar.njk"%}
{%else%}
{%include "components/filetree.njk"%}
{% endif %}
<div class="content">
{% if settings.dgHomeLink !== false%}
<a href="/">🏡 Back Home</a>
{% endif %}
{# Dra dette opp i en egen greie for hver setting. Definer disse settingene i en klasse og lag en settings.js lik meta.js. Gå gjennom hver key og kjør denne logikken for å sette den. #}
{% if settings.dgShowInlineTitle === true %}
<h1>{{ page.fileSlug }}</h1>
{% endif %}

3
src/site/_includes/layouts/versionednote.njk
View File

@ -6,9 +6,6 @@
</head>
<body>
<div class="content">
{%- if item.tags !== 'Garden' -%}
<a href="/">🏡 Back Home</a>
{%endif%}
{{ item.content | safe}}
</div>
</body>

11
src/site/index.11tydata.js
View File

@ -1,19 +1,14 @@
require("dotenv").config();
const settings = require("../helpers/constants");
const wikilink = /\[\[(.*?\|.*?)\]\]/g
function caselessCompare(a, b) {
return a.toLowerCase() === b.toLowerCase();
}
//Duplicated in notes.11tydata.js because new files means I need to update the plugin
const allSettings = [
"dgHomeLink",
"dgPassFrontmatter",
"dgShowBacklinks",
"dgShowLocalGraph",
"dgShowInlineTitle"
];
const allSettings = settings.ALL_NOTE_SETTINGS;
module.exports = {
eleventyComputed: {

5
src/site/index.njk
View File

@ -6,6 +6,11 @@
</head>
<body class="theme-{{meta.baseTheme}} markdown-preview-view markdown-rendered markdown-preview-section">
{%include "components/notegrowthhistory.njk"%}
{% if settings.dgShowFileTree !== true %}
{%include "components/navbar.njk"%}
{%else%}
{%include "components/filetree.njk"%}
{% endif %}
<div class="content">
{% if settings.dgShowInlineTitle === true %}

12
src/site/notes/notes.11tydata.js
View File

@ -1,5 +1,6 @@
require("dotenv").config();
const settings = require("../../helpers/constants");
const wikilink = /\[\[(.*?\|.*?)\]\]/g
@ -7,14 +8,7 @@ function caselessCompare(a, b) {
return a.toLowerCase() === b.toLowerCase();
}
//Duplicated in index.11tydata.js because new files means I need to update the plugin
const allSettings = [
"dgHomeLink",
"dgPassFrontmatter",
"dgShowBacklinks",
"dgShowLocalGraph",
"dgShowInlineTitle"
];
const allSettings = settings.ALL_NOTE_SETTINGS;
module.exports = {
eleventyComputed: {
@ -55,7 +49,7 @@ module.exports = {
},
outbound: (data) => {
const notes = data.collections.note;
const currentFileSlug = data.page.filePathStem.replace('/notes/', '');
const currentFileSlug = data.page.filePathStem.replace('/notes/', '');
if (!notes || notes.length == 0) {
return [];

116
src/site/styles/digital-garden-base.scss
View File

@ -4,10 +4,11 @@
***/
.content {
max-width: 900px;
max-width: 870px;
margin: auto;
font-size: 22px;
line-height: 1.5;
margin-top: 75px;
}
.external-link {
@ -60,17 +61,17 @@ ul.task-list {
padding-left: 15px;
}
.sidebar {
position: fixed;
top: 50%;
transform: translateY(-50%);
right: 0;
height: 100%;
background-color: var(--background-secondary);
min-width: 25px;
display: flex;
z-index: 3;
max-width: 350px;
margin-top: 75px;
}
.expand-line {
@ -80,27 +81,120 @@ ul.task-list {
}
.sidebar-container {
padding: 20px;
padding-right: 20px;
width: 100%;
overflow-y: auto;
}
.backlink-card {
padding: 20px;
border-radius: 4px;
margin-bottom: 20px;
background-color: var(--background-primary);
width: 100%;
.backlinks {
margin-top: 50px;
background-color: var(--background-secondary);
border-radius: 10px;
padding: 10px;
.backlink-title {
margin: 4px 0;
font-size: 18px !important;
}
}
@media(max-width: 1100px) {
.backlink-card {
padding-bottom: 4px;
border-radius: 4px;
width: 100%;
font-size: 1rem;
}
.graph{
.graph-title{
width: fit-content;
background-color: var(--background-secondary);
margin: 10px 0 0 0;
padding: 12px;
font-size: 18px !important;
border-radius: 10px 10px 0 0;
}
}
#link-graph {
background-color: var(--background-secondary);
margin-bottom: 20px;
border-radius: 10px 0 10px 10px;
width: fit-content;
}
@media(max-width: 1490px) {
.sidebar {
position: relative;
transform: none;
border-radius: 4px;
margin-top: 50px;
}
.graph{
display: none;
}
.backlinks {
margin-top: 0;
}
}
.filetree-sidebar {
margin: 0;
z-index: 10;
padding: 10px;
top:0px;
left:0;
position: fixed;
height: 100%;
background-color: var(--background-secondary);
color: var(--text-muted);
overflow-y:auto;
width: 250px;
}
.navbar {
background-color: var(--background-secondary);
position: absolute;
width: 100%;
top: 0;
left: 0;
right: 0;
z-index: 3;
padding-left: var(--file-margins);
.navbar-inner {
display: flex;
align-items: center;
cursor: pointer;
}
}
.notelink {
padding: 2px 0 2px 25px;
}
.foldername {
margin-left: 5px;
cursor: pointer;
}
.inner-folder {
padding: 3px 0 3px 10px;
}
.filelist {
border-left: 1px solid var(--text-mark);
}
.fullpage-overlay{
background-color: rgba(0,0,0,0.5);
position: absolute;
top:0;
right:0;
left:0;
bottom:0;
z-index: 5
}

1
src/site/styles/style.scss
View File

@ -9,6 +9,7 @@
--background-secondary: rgb(57, 56, 56);
--text-normal: #dcddde;
--text-accent: rgb(97, 186, 245);
--file-margins: 32px;
}
h1 {