Implement a JS Template Engine

ratsey commented 3 years ago

Please select if your request is either something new or an enhancement

[ ] Enhancement of an existing Feature.
[x] Request of a new feature.

Please select the area your request applies to. (Multiple selections are possible)

[ ] Onboard. Initial vault setup and import/export pods
[x] Create. Note creation, lookup, snippets and templates
[ ] Retrieve. Backlinks, references, graph view
[ ] Structure. Refactoring, multi-vault and schemas
[ ] Publish. Sharing your repo with the world
[ ] Misc (Choose this if your not sure)

Is your feature request related to a problem? Please describe

No

Describe the solution you'd like

Migrating from a 'competitor' which has support for dynamic templating. While there are many uses for this, my main one is as simple as creating a pretty created | edited time marker at the top of my note page. I do this using moment.js by passing the file creation and modified dates into moment's calendar function with appropriate config to show either a date, or something ore friendly like yesterday or today at 10:05 AM Without naming names, the 'other' application uses the eta JS Template Engine

Describe alternatives you've considered

N/A

Additional context

Screenshot showing this particular usage and sample code used: <small> <%+ moment(tp.file.creation_date("ddd D MMM YYYY h:mm A")).calendar(null, {sameDay: '', nextDay: '', nextWeek: 'dddd', lastDay: '', lastWeek: '[Last] dddd', sameElse: 'ddd D MMM YYYY'}) %> | <%+ moment(tp.file.last_modified_date("ddd D MMM YYYY h:mm A")).calendar(null, {sameDay: '', nextDay: '', nextWeek: 'dddd', lastDay: '', lastWeek: '[Last] dddd', sameElse: 'ddd D MMM YYYY'}) %></small>

aleksey-rowan commented 3 years ago

Have you tried using Nunjuck templates?

ratsey commented 3 years ago

I have not ... just added to my dendron.yaml and restarted VSCode just in case ... but not seeing how to use it. Tried adding

{{fname}}

which was given in the docs, but my Preview (even with refresh) just shows {{fname}}!

aleksey-rowan commented 3 years ago

You need to add useNunjucks: true to your dendron.yml to enable the templates.

ratsey commented 3 years ago

Assuming it goes at the top level, that's what I already tried:

version: 3
useNunjucks: true
useFMTitle: true
useNoteTitleForLink: true

aleksey-rowan commented 3 years ago

Seems that only {{ fm.title }} works when using the standard frontmatter values. https://github.com/dendronhq/dendron/issues/1322#issuecomment-953995620

ratsey commented 3 years ago

Thanks for the link ... unfortunately even {{ fm.title }} doesn't render either. On the assumption I'm doing something that's just fundamentally wrong, my assumption was that once nunjucks.js is set in the yaml, I could just add {{ fm.title }} anywhere in my md. Is that not correct?

aleksey-rowan commented 3 years ago

useNunjucks: true does need to be set in dendron.yml and {{ fm.title }} should work.

Silly question: have you tried restarting VSCode after setting the nunjucks option?

ratsey commented 3 years ago

Yes, just did again to confirm. Even checked the Output for any hints of an error. Created a new file with nothing else

aleksey-rowan commented 3 years ago

Oh, it looks like you are using V1 Preview. Try V2 Preview.

ratsey commented 3 years ago

Already have that:

dev:
    enablePreviewV2: true

I also have 'Dendron Markdown Preview Enhanced' extension - tried with and without that, All the same. With the extension I get 2 preview types - a white one (above) and a black one. Both show {{ fm.title }}

aleksey-rowan commented 3 years ago

"Dendron Markdown Preview Enhanced" is V1 Preview and it's being discontinued.

Try opening V2 Preview through the command pallet:

ratsey commented 3 years ago

Ah! That was the magic sauce needed. Thanks! Now to play with it ...

ratsey commented 3 years ago

Per your linked issue, with only fname and f.title offered, its not much use that I can see. Maybe if there was a way to expose all of the meta data for the page, the hierarchy, and the full set of notes?

aleksey-rowan commented 3 years ago

Maybe if there was a way to expose all of the meta data for the page, the hierarchy, and the full set of notes?

You should probably open another issue about exposing more data to the templating engine since the one I linked is about bringing parity with V1 Preview and it's technically completed.

kevinslin commented 3 years ago

Here are my thoughts on nunjucks:

I like nunjucks personally - its a powerful templating engine with lots of features
What makes it challenging to integrate is that nunjucks has no integrations with unified which is the framework we use to parse and render markdown/html
The workaround is to make nunjucks something we run before/after the parsing pipeline
- while this kind of works, it makes a whole family of optimizations and functionality much more complicated to implement:
  - rendering only the current visible part of markdown (with nunjucks, we'd need to parse the whole note)
  - implementing scroll sync (we would be doing this off the AST which now we can't accurately map because of nunjucks)
  - statically parsing a note for metadata (with just the AST, we can parse a note once and calculate offsets for anchors and other elements, with nunjucks, this becomes more difficult)

Given the above points, we don't have any current plans of integrating nunjucks with note rendering. That being said, if you want to customize how notes are rendered, we do offer other entry points:

kevinslin commented 3 years ago

@jonathanyeung is currently doing the initial implementation of custom note types. will leave it to him to elaborate on any potential custom template engine with note types

dendronhq / dendron