binyamin/eleventy-garden

:seedling: A starter site for building a mind garden with eleventy

Eleventy-Garden

A starter site for building a mind garden, using 11ty (demo)

Note: I'm not building this project for myself, so y'all gotta tell me what you think. Issues are the way to go here.

🏠 About

• Double-bracket links (the ones roam uses)
• Displays backlinks
• hovercards for backlinks

Related

• maximevaillancourt/digital-garden-jekyll-template
• mathieudutour/gatsby-digital-garden
• Find more at maggieappleton/digital-gardeners

🚀 Usage

If you're new here, see the Getting Started page in the wiki. Otherwise, check out the wiki guides (coming soon) or FAQ.

❤️ Contribute

Feel free to dive in!

Here's what this project needs...

• Feedback! I didn't make this repo is for myself, so y'all gotta tell me what you want.
• Stars on GitHub
• Contributors - check out the contributing guide

Maintainers

@binyamin

📜 License

This project is under the MIT license. Please adhere to the code of conduct.

eleventy-garden's Issues

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (github>whitesource/merge-confidence:beta)

GitIgnore filters eleventy output

Describe the bug
Currently everything in .gitignore is ignored when serving the site with npm start.

To Reproduce

1. Clone the template
2. Add notes/ to .gitignore
3. run npm install from terminal
4. run npm start from terminal

Expected behavior
I can't say for sure if .gitignore is meant to be respected by 11 in this project, but I think not due to the useGitIgnore: false.
If so though - I expect it to still serve the files in .gitignore as long as they are not in .eleventyignore

Environment (please complete the following information):

• Windows 10 business
• chrome

Additional info
Current implementation is not using the eleventyConfig.setUseGitIgnore(false); specification in the official docs at https://www.11ty.dev/docs/ignores/

Allow subfolders within the notes folder

I'd like to be able to organize my notes into folders e.g. 'Recipes', 'Evergreen notes' etc - currently this doesn't work.

I'm not sure if the folder hierarchy should be reflected in the URL (e.g. /Recipes/Tomato-soup) or if it should just resolve to the note name (e.g. /Tomato-soup). Maybe this could be configurable?

Separate content from config

Personally I'd love to have content separated as much as possible from code and configs.

Is your feature request related to a problem? Please describe.
The issue with the current setup is it makes syncing updates to the template into my fork more painful/less clean than it needs to be.

Describe the solution you'd like
Move notes, assets, about.md, index.md etc. into a content sub-directory. Then when merging one can disregard changes in this folder. It's not completely separable since notes.11tydata.js needs to live inside the notes folder unfortunately.

Describe alternatives you've considered
Haven't thought of any.

Additional context
I have a proposed solution made up in my own fork (commit) but looking for others to weigh in before I submit a PR. Maybe noone else is keeping their forks linked to upstream to pull updates? Maybe others have even better ways to structure their repo.

Only generate links for pages that exist

In a digital gardens, you may have a [[wiki link]] to a note that does not yet exist or is in a private folder. It would be great if links to pages that do not yet exist were left in the double bracket style or could be handled separately instead of being converted to a html link which will only end up at a 404 (but anyone viewing the notes does not know this until they click on the link).

Question from a total noob

I'd love to use this but I'm a total newbie and unsure how to work this.

Per your directions, I dropped my Obsidian files into the notes folder and ran NPM START but all I see is your sample site. How do I get it to process my own files and do I need to make an index of some sort?

Thanks!
Ray

Links don't work when they start with emojis

Reported by @Vasallius on discord

List of backlinks are not reported in new MD files

Describe the bug
I have created a set of new notes with wikiinks. The list of reference pages of the note I'm in is not getting computed and displayed in the backlinks section of the page.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://epic-johnson-6b6441.netlify.app/notes/easter%20egg/'
2. Click on 'Random Notes' in the backlinks section.
3. List of backlinks in the backlink section below is empty. It says no backlinks found even though the page I'm in has backlinks.

Expected behavior
I expect to see a list reference pages of the note I'm in, in the backlinks section of the page.

Environment (please complete the following information):

• OS & Version: windows 10
• Browser : chrome

Additional context
Refer this sample link
https://epic-johnson-6b6441.netlify.app/notes/easter%20egg/

document adding pages to site + navbar

Move note pages to subdirectory

this way, users can use the template to set up their own website.

Is download broken?

Hi

I am very interested in installing eleventy garden. Neither installing the zip container-files nor the git clone works.
This is what npm audit returns:

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

added 415 packages from 398 contributors and audited 415 packages in 8.819s

11 packages are looking for funding
run npm fund for details

found 1 high severity vulnerability

                   === npm audit security report ===                        

┌──────────────────────────────────────────────────────────────────────────────┐
│ Manual Review │
│ Some vulnerabilities require your attention to resolve │
│ │
│ Visit https://go.npm.me/audit-guide for additional guidance │
└──────────────────────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ High │ Server-Side Request Forgery │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package │ axios │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in │ >=0.21.1 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ @11ty/eleventy [dev] │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path │ @11ty/eleventy > browser-sync > localtunnel > axios │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info │ https://npmjs.com/advisories/1594 │
└───────────────┴──────────────────────────────────────────────────────────────┘
found 1 high severity vulnerability in 415 scanned packages
1 vulnerability requires manual review. See the full report for details.

Any suggestions? Thanks a lot. erwin

Allow Obsidian style embedded links

Is your feature request related to a problem? Please describe.
I've been making heavy use of Obsidian's "embed" syntax, ie

![[related block]]

![[diagram.jpg]]

But these aren't rendered.

Describe the solution you'd like
The embedded notes/files are either iframed in or their content is included in the html.

Sidebar for notes/comments

Using footnotes, currently. They need to be styled.

Draft option for notes and blog posts

I'd like to be able to write notes and blog posts without having them be immediately published. This could work either via:

• A drafts folder, or
• YAML frontmatter specifying that it's a draft

document adding a blog

see #10; h/t @RosieCampbell

Support blog posts

Currently the template only supports notes - I'd like it to also support blog posts so I can use it to create a complete personal website.

Auto-generate index.html

Is your feature request related to a problem? Please describe.
I often edit my digital garden via the web interface on GitHub. Adding a new file, or editing an existing file is very easy, but I consistently forget to add the new note to my index.html.

Describe the solution you'd like
I would like to auto-generate an index.html that contains a link to every note. Not every user might want this behavior, so I would also like a way to opt in or out of this feature.

Describe alternatives you've considered
I have considered being more rememberful, but I have not been very successful heretofore, and I don't think it's gonna happen.

Additional context
We probably need the ability to specify a template for the generated page.

We can probably generate other files (a sitemap, a manifest.json, etc) during the same pass over the filesystem.

display note tags

Use hashtags to generate lists of related notes. Each hashtag should link to the relevant list.

Example: Some of my notes include the text "#art". I want a page which lists all notes containing "#art". The page should be /tag/art, or something similar.

Alternatives: Depending on how the search function (#11) is implemented, you could simply link all hashtags to a search query like /search?tag=art.

Conflict between wikilinks and permalinks

Describe the bug
I hate even to call this a "bug" -- but if I use Eleventy's permalink functionality to rewrite a URL, the wikilinks functionality won't be able to convert the link correctly.

To Reproduce

1. Successfully install eleventy-garden
2. Note that the regex substitution binyamin uses replaces any white space in a filename with a %20, so that a note named "my great file" produces the URL "/notes/my%20great%20file/"
3. Use the "permalink" key in the template's front-matter to set the URL for "my great file" to "/notes/my-great-file/"

Help needed
I'm not a developer (obviously) but I think the issue is that what I am calling the "wikilinks" function rewrites the link using the standard escape characters for spaces. Can someone show me where in the code I can change the regex that is replacing the spaces with %20 -- so that I can simply change them to dashes?

Thanks in advance!
jack

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update all non-major dependencies (@11ty/eleventy, markdown-it-attrs)
• Update dependency @11ty/eleventy to v2
• Update dependency markdown-it to v14
• Update dependency markdown-it-footnote to v4
• Update dependency title-case to v4
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

html

includes/head.html

• normalize 8.0.1

npm

package.json

• @11ty/eleventy ^1.0.1
• markdown-it ^12.3.2
• markdown-it-attrs ^4.1.4
• markdown-it-footnote ^3.0.3
• title-case ^3.0.3

---

• Check this box to trigger a request for Renovate to run again on this repository

Links to subfolders don't work as expected

Describe the bug
Links don't work in case when notes are in subfolders. They either don't translate into a working link or a backlink isn't created. See below.

To Reproduce
Consider the following notes and folders:

/notes/Music/index.md
/notes/Music/Production.md

Linking [[Music/Production.md]] in the index.md creates a clickable link on the Music index site, but the Production site won't show a backlink. However, linking [[Production]] in the index will create a non-clickable link on the Music site, but it will somehow create a bakclink on the Production site. Placing both links in the index will create both a clickable link, and a backlink on the Production site, but one of the links on the Music index site will not work.

Expected behavior
If a link appears, it should point to an existing md and create a backlink. This can currently be achieved by using both types of references at the same time in the index.md, but one won't link to actual file. An invisible link can be produced to generate the backlink by placing the [[Production]] reference in an md comment (without '), but this is hacky:

'[comment]: # ([[Production]])'

No Backlinks

Hi
I put a lot of files in some folders as you wrote: „Q: Can I have subfolders in my notes? A: Of course! Remember to link to the subfolder, like [[ subfolder/note ]]“.
Do do so I realized, that the app doesn‘t represent the backlinks anymore. Any suggestions? Thx.

Mobile first!

Can't serve current version

Describe the bug
Can't serve the site currently

To Reproduce

1. Clone/fork current repo
2. Run npm install and npm start

Expected behavior
Serves the site to localhost:8080

Environment (please complete the following information):

• Windows 10 Business

Additional context
Not sure if it's a windows thing or some local thing. Output says it can't find head.html in includes. Seeing that it builds fine on Netlify it could be a Windows issue with the mixed forward/backward slashes in the filepath as seen in the log.
Relevant part of log:

[11ty] Problem writing Eleventy templates:
[11ty] Having trouble writing template: _site/about/index.html

`TemplateWriterWriteError` was thrown
  Eleventy:EleventyErrorHandler (error stack): TemplateWriterWriteError: Having trouble writing template: _site/about/index.html
  Eleventy:EleventyErrorHandler     at c:\Projects\testgarden\node_modules\@11ty\eleventy\src\TemplateWriter.js:290:15
  Eleventy:EleventyErrorHandler     at async Promise.all (index 1)
  Eleventy:EleventyErrorHandler     at async Eleventy.executeBuild (c:\Projects\testgarden\node_modules\@11ty\eleventy\src\Eleventy.js:958:13)
  Eleventy:EleventyErrorHandler     at async Eleventy.watch (c:\Projects\testgarden\node_modules\@11ty\eleventy\src\Eleventy.js:809:18) +0ms
[11ty] ENOENT: Failed to lookup "head.html" in "c:\Projects\testgarden\includes/", file:./layouts/default.html, line:4, col:5

`RenderError` was thrown
  Eleventy:EleventyErrorHandler (error stack): ENOENT: Failed to lookup "head.html" in "c:\Projects\testgarden\includes/", file:./layouts/default.html, line:4, col:5

Also not sure if this could be related: harttle/liquidjs#395 but specifically adding liquidjs 9.25.1 as dependency and reinstalling doesn't seem to fix the issue.

Backlinks behave differently in local and on github page

Describe the bug
The expected backlink appears in local (image 1), but not when pushed to my (project) github page. Interestingly, another backlink appears in that case (image 2).

Screenshots

Additional context
My page contains two notes named "First note" and "Inertial Waves and Inertial Modes" that both link to a third note named "Poincaré equation". Only the first note appears in the list of backlinks online. On the other hand, only the second appears in local. That does not seem to be collections issue. I could not find the reason for this behavior.

Backlinks only appear if the page's filename is lowercase

First up, thanks for putting this together! I've been wanting to try out Eleventy and this has been the perfect opportunity.

Bug:
I created a test digital garden based on the template and added some of my own existing notes. I noticed that backlinks for pages only show up if the page's filename is entirely lowercase.

What happens:
Example: note1 links to Note2 and vice versa. note1 shows Note2 in the backlinks section but Note2 does not show note1. This also happens when only one note links to the others.

Changing filenames to all lowercase fixes this. All links otherwise work as normal and it does not seem to matter if the actual link text contains uppercase characters as long as the filename it is linking to is lowercase.

Notes:
I'm running MacOS & viewing my local build in Chrome.

Does this work with roam exports?

• https://github.com/fabioberger/roam-migration

Page shifting when hover over backlink

Hi, thanks for building this SSG template for digital gardening, I really like it. I found a small bug, It's very easy to reproduce and happens 100% of the time:
On the demo site, simply go to notes page, click on "easter egg" and then in the backlink section, when you hover over"Notes" the whole page will shift position when the preview pops up, creating a effect as if the page is shaking.
I think it happens because the scroll bar shows up during the hover.
Hope this can be fixed in the future iteration, thanks again!

Jarod

Can't link to notes homepage

Describe the bug

There's no way to link to the notes homepage (/notes/), via wikilinks.

link text	href	backlink?
notes	/notes/notes	yes
/ or /notes	/notes/notes	no
. or ./	n/a	no

Expected behavior

In General: Links including filename, or a relative path to the file, should point to the specified file.
Here: Accept / and ./ (relative paths), and notes (filename) for the link location.

Syntax highlight prism

I can't implement eleventy's syntax highlight 'prism' into the .eleventy.js file without bugs. Help is needed. 🙏🏻

Improve code comments for backlinks section

More step-by-step details here:

eleventy-garden/notes/notes.11tydata.js

Lines 9 to 48 in 6c43cba

	backlinks: (data) => {
	const notes = data.collections.notes;
	const currentFileSlug = data.page.fileSlug;
	const stripYaml = (content) => {
	if(content.startsWith("---")) {
	return content.substr(content.indexOf("---", 3) + 3);
	} else {
	return content;
	}
	}
	// Search each note for backlinks
	return notes.filter(n => {
	// Only fetch backlinks
	const noteContent = stripYaml(n.template.inputContent);
	// This regex finds all wikilinks in the note
	const linksInNote = (noteContent.match(
	/\[\[([\w\s/-]+)(.\w+)?(\|([\w\s/]+))?\]\]/g
	) || [])
	.map(m => (
	// Extract link location
	m.slice(2,-2).split("|")[0]
	.toLowerCase()
	.replace(/[^\w\s-]+/g,'')
	));
	return linksInNote.includes(currentFileSlug);
	}).map(n => {
	// Construct return object
	const noteContent = stripYaml(n.template.inputContent);
	return {
	url: n.url,
	title: n.data.title || titleCase(path.basename(n.filePathStem)),
	preview: noteContent
	}
	})
	}

page preview for backlinks

When hovering over a backlink, I would like to see a portion of the relevant page's content.

Notes should have proper metadata

• twitter tags
• og tags
• seo tags
• page-specific titles.

Package into Eleventy plugin(s)

Is your feature request related to a problem? Please describe.
The features are tied to this repository

Describe the solution you'd like
Package several different features into plugins, so that they can be easily updated, implemented and installed in any Eleventy website. Specifically:

• leave all of the wikilinks handling to markdown-it-wikilinks extension
• create a separate plugin generating backlinks (done! eleventy-plugin-backlinks)
• create a separate plugin generating hover previews on links for notes
• create a separate plugin for #83

Describe alternatives you've considered
In order to adapt this template repository to my website, I got crazy and it took me a long time (since I am not a developer). Furthermore, if any improvement or update is made, I will most likely going to miss it and in any case I should manually re-code it into my website.

Additional context
Add any other context or screenshots about the feature request here.

Notes graph

Is your feature request related to a problem? Please describe.
Graphically representing links among notes.

Describe the solution you'd like
Display a graph of all links among notes.

Describe alternatives you've considered
none

Additional context

• my specific needs: xplosionmind/tommi.space#8
• example of a wonderful plugin, for Jekyll: jekyll-graph

Getting started guide is unclear

(Reported on discord.)

cc @SaysKez @Vasallius

Preview not appear on hover

To Reproduce
Steps to reproduce the behavior:

1. npm start in terminal in folder
2. In browser, navigate to "bar" page
3. Hover over link "Testing"
4. Testing preview is not visible. Also when navigating to Testing page, backlink to "bar" is not present

Forked repo here: https://github.com/francofaa/ArgotWiki/

Expected behavior
Preview should appear on hover on testing link. Backlink to bar should appear on testing page.

Environment (please complete the following information):

• OS & Version: Mac OS 10.15.7
• Browser FF 82.0

Need help with configuring 11ty-garden with an existing 11ty-ghost deployment.

Describe the bug
I need help to configure 11ty-garden within an existing 11ty-ghost deployment.

To Reproduce
Nothing to reproduce as this is not a bug. But I do not know how to reach you.

Expected behavior

• I have an eleventy site that's fed with content from my ghost deployment.
• I am looking for an integration with this where my base url has something like Notes (similar to About, Home, etc). on the main page
• The md files (with backlinks) should show up here

Screenshots
If applicable, add screenshots to help explain your problem.

Environment (please complete the following information):
Nothing to enter here.

Additional context
Add any other context about the problem here. If there's a GitHub repo and/or live demo of the problem, please include link(s).

Search function

I'd like to be able to bring up a search bar to search across all content on the site.

Community standards

• Code of Conduct
• Contributing
• License
• pretty, informational readme
• Usage docs

page preview for all internal links

For internal links, show a preview of the relevant page on hover. (Exactly like #2, but not just in the backlinks section.)

Doesn't work with multi-word links

Trying to use my Obsidian vault to generate the garden. The .md files have multi word titles with spaces.

Clicking on the generated links doesn't work out of the box. I could fix this by replacing the spaces by hyphens in all the filenames. This makes the links work, but the backlink discovery still fails.

Example: Clicking on the link generated by [[Keep things simple]] doesn't work when the original filename is "Keep things simple.md". The link works after renaming file to "Keep-things-simple.md" but the backlink discovery doesn't.

Obsidian style nested links are not resolved

notes
├── index.md
├── nested
    └── inside.md

Obsidian knows how resolve a [[inside]] link in index.md.
Would be great if this will be supported here, too, so we could use this to directly render a vault.

Hosting through GitHub?

Hi fellow Maryland person!

I saw your link from Obsidian and was checking out your project. I have pretty limited development experience (if development is even the right word here) and haven't worked with websites in a looooong time. You mentioned hosting on Netlify or elsewhere in "Getting Started." Could the site just be hosted from a GitHub repo of notes?