Pr0dt0s / obsidian-html-server

Obsidian plugin to serve a vault as an html site.
GNU General Public License v3.0
75 stars 4 forks source link

Insertion of HTML Template Blocks from Variables Section #21

Open O-Willis opened 9 months ago

O-Willis commented 9 months ago

I think this is an amazing plugin but I was thinking, it would be amazing if you could implement a way to insert html templates into the custom index.html section. In the Replaceable Variables section, you could have a type section in between the name and value sections to specify the action needed to either stringify or read the given file/value. I'm not very familiar with how Electron works in this regard but I think by allowing this feature, you would enable two super important things:

  1. We the users can test and customize the html. By doing this, we could make PRs for customization that might take some of the strain of development off of your shoulders :)
  2. Allow flexibility within templatizing the index.html file. # At the moment, I believe the variables are just reading the string values of the input box, which makes sense why I get the result in the following two images: image image
Pr0dt0s commented 9 months ago

Hello @O-Willis, thanks a lot for the feedback, this seems like a really great feature.

I can think of two options right now:

  1. To add a type of variable ex. Simple string, internal template (like the one in your example) or user/custom template.
  2. To add another option list for templates, and a different replacer tag #TEMPLATE{NAME}

I'm feeling more inclined for the second option, since it would simplify replacing variables and templates for individual files by using the files' metadata.

For more advanced use cases, I thought about implementing advanced templates similarly to a web component or react element, something like:

<Template file="path_to_file.html">
children that will be rendered inside the template document tree (at a specified outlet)
<\Template>
O-Willis commented 9 months ago

If your ok with it, I could make a pull request on this feature. I've been playing around with obsidian for a little while now and would be happy to help with development on this plugin.


I was also wondering, how would you handle locating the html files? As I understand it, the obsidian api doesn't normally detect html files. I think this.registerExtensions(['html', 'htm'], "markdown"); allows the obsidian api to do this though.

O-Willis commented 9 months ago

Sort of as a follow up but I was thinking about two important things to go with template/html support:

  1. How would you want HTML code to be rendered inside of obsidian? Would it be rendered as raw text or would it be better to use a code block and parse that off?
  2. Will Javascript code also come with html support?

From what I've seen in the plugin's current state, everything that a note needs (i.e. assets, images, etc.) are only retrieved when the note is loaded in the web page. Then when the user leaves the page to go to another, the resources are removed, and new ones (if they exist) are retrieved and rendered. This can get tricky if Javascript code is going to be executed, which pose similar questions to the html file handling (where should it be stored, would it also be a var or would it be stored in the .md frontmatter) On top of that, if live editing on notes (and also multi-user collaboration...👀) is in consideration as a future feature, this might need some additional handling.

The more I look into this plugin and think about the possibilities, the more its kinda hyping me up! In my mind, this plugin could fix the issues many people have with Obsidian that note taking apps like Notion handle through being web-hosted, such as synchronous multi-user editing, use on an OS that Obsidian wouldn't typically support, etc. There's actually a mega-thread on this topic: forum link here