Hi all, thought it was high-time I shared what is happening with UIBUILDER.
As some of you may be aware, I've suffered some eye problems this autumn so I've not been able to get as much done. But things are happening. Sadly, I'll probably not get a new release out before Christmas but at least I can share progress.
There are a couple of important new features to highlight:
-
When going into the Editor after a new version of UIBUILDER has been installed, we now have the option to show a highlight summary of changes.
-
There will be a new node, uib-markweb. This has a very simple configuration, just a folder (relative to the userDir) and a URL path.
The idea behind this is to be able to very simply create a file-based content management system, not dissimilar to Docsify which UIBUILDER's documentation currently uses. But, obviously, a fully Node-RED solution. (with help from UIBUILDER of course!)
The folder will need to contain any number of markdown files and sub-folders, all of which will be made available at the url and rendered from Markdown to HTML using the markdown-it library.
There will be an option to have an HTML wrapper to make things look nice and that can, of course, have CSS styling.
Markdown extensions will be allowed as well and will be automatically mounted.
Not in the initial release, but in the future, there will be features for automatic menus/navigation and dynamic data. Also for the future, I will make the libraries available to the uibuilder front-end so they can be used there as well as in Node-RED.
I've been meaning to work on something like this for a long time and I think a lot of people may find it useful even if they aren't using uibuilder itself. It should be great for documentation sites and even simple blogs or other news sites with minimal effort and no build-steps required.
Other updates already completed:
- Improvements to the performance of the
uib-cache node allowing much higher throughput.
- Some improvements to the documentation, with collapsible sidebar sections and some bug fixes.
- In the brand css, a new class
visually-hidden which is ideal for input labels that you don't need sighted people to see but you do need for screen-readers. Also a fix for the fieldset border.
- In the client library, I've added a high-resolution timing value to inbound messages to enable measuring of latency and performance.
- In the back-end code, there are some security improvements.
- In GitHub, I now have just 2 branches,
main is the release code and dev is the next development version. Both of those will continue to be around and so I won't be changing to new dev branches all the time. This should make it much easier for people who like to try out the upcoming features.
As always, the changelog and the "next" documents always have a lot more detail.
4 Likes
Progress!
The uib-markweb node now uses the same process as the main uibuilder node to create it's web instance. That also means that the uibuilder node and the back-end processes have all be updated to allow more flexibility when creating a new set of web routes. They are no longer restricted to static web serving, a node can provide its own handler or set of handlers and that is what uib-markweb does since it uses server-side rendering of markdown to HTML. Eventually, the uibuilder node should also get an input to allow you to specify any accessible server folder as its instance root folder.
The markdown can now also contain {{propertyname}} which will be replaced dynamically with attributes in the pages front matter and some additional attributes provided by the node.
The markdown is also now wrapped in an HTML page template, which can also use {{propertyname}} fields. It is a fixed template at present but that will change before release. Not only will the template be flexible but also I will provide the ability to add other attribute fields (static at least, possibly also dynamic).
Since the uibuilder instance processes are being used, generated pages will inherit the full power of uibuilder, both the front-end library and the real-time comms with Node-RED. This also means that you will be able to use uibuilder's custom web components such as <uib-var> to provide dynamically updating page elements as well.
So uib-markweb effectively becomes a Markdown-driven simpler version of uibuilder. 
Let me know in this thread if there are any specific Markdown extensions you want me to support. I will include these to start with (tick means already done):
- Front Matter.
- GFM (GitHub Flavoured Markdown), including, and checklists.
- GitHub style callouts (AKA "Alerts")
- Some form of code syntax highlighting.
- Mermaid for diagrams.
- Page table-of-contents
- Navigation sidebar (both auto-generated and manual), possibly a horizontal version as well.
Not sure if all of these will be in the first release though.
And now I have a basic search engine working. This creates a watcher in the source folder so that the index automatically updates in the background when content changes. Search is fairly basic but could be expanded with a more featureful search library later on.
And the socket.io realtime comms is also working. Inputs and outputs also working. Basically, the uib-markweb node is now very much a simplified version of the uibuilder node, sharing much of the code.
The big difference being that a uibuilder node is basically a multi-page app and to get a single-page app (SPA), you have to add and configure the uib-router library. Whereas the uib-markweb node creates a single-page app from the start, with a simplified router that doesn't need any configuration.
There are some limits with this approach, if you manually change the URL, a full page load is triggered. But with the gradual arrival of the new "Navigator" web API, those limits will disappear once Firefox get their act together and support it (Apple added support to Safari in December 2025, Chromium in 2022).
So I've now dealt with the two biggest potential issues with this approach. Next it will be head-down to do the tweaking which always takes time.
Everything is pushed to the GitHub "dev" branch though if you want to try things for yourself.
After some delays thanks to Christmas and some temporary ill health, updates will start appearing again for v7.6
Making slow but steady progress on the markweb feature set.
Any updates to markdown files will now automatically trigger a refresh in a connected client on the same "page". Updates are fully dynamic with no browser tab reloads needed. Data is cached which speeds up searching as well as page changes.
Searching is now more robust and results are more comprehensible.
There is now a reliable index listing of folders/files, makes it easy to have menu's and sidebar navigation.
Update detection is now a lot more robust.
THe page template is now more comprehensive.
Some Markdown extensions have been included: Full CommonMark compatibility; GFM Tables, Checklists and Alerts (Callouts); Comprehensive syntax highlighting; Custom attributes. Plenty more to come.
All front-matter fields are made available to Markdown using {{fieldname}} tags. Some additional file metadata is also added to the fields automatically. Fields are also made available to the front-end in case you want to add your own front-end processing to pages.
All of the usual uibuilder goodness is also baked in.
Documentation is also growing.
Much more to come but the GitHub dev branch of uibuilder is usable if you want to have a play.
1 Like
More updates pushed to GitHub today. The markweb node should now be quite usable. Please do give it a go and give feedback.
I've updated the documentation which should now be relatively comprehensive: node-red-contrib-uibuilder/docs/nodes/uib-markweb.md at dev · TotallyInformation/node-red-contrib-uibuilder · GitHub
The Editor config and help panels still need some work, that is next.
I've squished some annoying bugs and searches should now work better, in-page # URL links also now work correctly, great for keeping track of where on the page you were last or giving a deep link. All heading levels now also get automatic anchor links.
Content updates (e.g. changing a markdown file's content) now reliably auto-update the page you are viewing - no need for a separate dev server!
Markdown processing already supports:
- Custom attributes on elements. So you can very simply add highlighting, change a list entry bullet, create a custom anchor heading link, etc. All by adding
{.class-name}, {#custom-id} or indeed {attrname="value"} to any markdown.
- GFM-style Alerts (AKA callouts)
- GFM-style task lists (AKA checklists) using
* [ ] and * [x] syntax.
- GFM-style tables. Including left, center and right alignments.
- Code blocks with highlighting using
highlight.js.
- Inclusion of any front-matter fields using
{{fieldname}} syntax.
I do want to add more. Including Mermaid diagrams, footnotes, ToC at least. Not sure if they will all make the first release. Let me know if something is super-critical to you.
I would also like to provide an alternate layout to the very simple default one. I'll try to create a more Docsify style layout (see the live UIBUILDER documentation as the inspiration).
I would also like to implement one or more %%...%% directives:
%%recent%% - Like %%index%% listings but listing by date. This is really important for blog or news style sites.
At some point, I will also need to add pagination to those directives to allow for bigger sites.
3 Likes
I've extended the %%index%% directive to include from, to and duration attributes so that listings can be filtered by date/time and durations. I've also added a latest attribute so that you can list the latest entries with or without other filters.
I still need to implement sorting options though.
Yet more updates now pushed to GitHub.
The main visible changes this time are a revamped and improved overall template. The new template now uses a sidebar rather than horizontal navigation menu, this is much more flexible. The sidebar contains:
The sidebar/main-content split sizing can be freely changed by dragging the resize bar.
The page status is shown in a blockquote. Obviously, this can be removed from the template if you don't want it just like everything else.
The template also has a footer, this will have optional copywrite and updated date details (not yet working) should you want them.
