Slow but steady progress on v7.6.
As usual, I've taken on a bigger task than first appreciated with the new uib-markweb node that will be the simplest way to create an entire, information heavy website with Node-RED. 
However, it is a fun project and I think will be highly useful to a lot of people. However, I've had to rewrite major sections of it several times already. Not least of which having to replace a Markdown-to-HTML library and having to learn how to create custom plugins for the new library that integrate with the data in markweb. Remembering that I am doing all of the conversion on the server not in the browser. Getting there though, it should be worth the wait.
Also as usual, working on one thing triggers the need for updates (and bug-fixes :cough:) in other areas. Today's side-track has resulted in a very nice new feature - the addition of uib-var attributes that you can add to any HMTL element. This rounds out the existing uib-topic attribute which is certainly the easiest way to dynamically update on-screen information from Node-RED.
The uib-var attribute will be more useful to anyone doing any front-end JavaScript processing. It is very similar in concept to the existing <uib-var> custom web component that is built-in.
Of course, improvements in any area demand better documentation and new examples. So we have 2 new examples:
-
Built-in Web Components
Shows how to use the uibuilder client web components: <uib-meta>, <uib-var>, <apply-template>, and <uib-control>. These are all included in the main client library and do not need to be loaded separately.
-
Easy UI Updates
Illustrates the use of the different ways to update the UI from Node-RED or your own front-end JavaScript. Includes examples of using the (new) uib-var and (existing) uib-topic custom HTML attributes, and the existing <uib-var> web component.
The addition of the uib-var attribute opens up a much better way to handle seamless updates for your markweb websites.
Tomorrow, it is back to restructuring the markweb code to make use of the new uibuilder capability for better and more dynamic seamless updates. Then back to a 3rd (or maybe 4th!) attempt at creating the perfect page/folder listing feature that will give you all of the control and flexibility you might be used to from tools like Hugo or Astro - BUT also having everything dynamically updating! So if a page changes, so will your index list and menus, automatically!
5 Likes
Another quick update since there have been quite a few fixes and updates to the new markweb feature set over the last few days.
-
If the currently shown page content changes on the server, the client is automatically updated.
-
Navigation and folder/page index listings are now also dynamic. If anything changes on the server, any connected client is automatically updated.
-
If a client disconnects from Node-RED and then re-connects, the content and the navigation is automatically updated.
-
The navigation index highlights the current page.
-
The table of contents in the sidebar not only updates on content change but also highlights the current scroll position.
-
You can now have a custom page template. (But only 1 for all pages I'm afraid. Multiple templates will come in a later release).
-
The sidebar can be dragged to be larger or smaller and there is a burger menu to toggle it.
-
Most of the bugs have been ironed out now.
1 Like
Another day, more updates. I think that most if not all of the markweb core is now working.
Index listings now have a nicer and clearer format:
Notice the index lines on the left border.
Your main content is now also collapsable, headings show the level on hover and have different bottom borders for different levels:
Code blocks with defined languages now show the language on hover. I will try to make them collapsible as well.
Next up is to finish off the Editor panel and Editor help.
Lots more I'd like to do but I think we are close to an initial release now, other things can wait for a follow-up release.
2 Likes
Ahem, thought I was ready to go and then decided that people would appreciate a built-in demo site for Markweb!
The demo site runs through all the main features and also acts as a test site. Better than an example flow in this case since the typical flow for Markweb is just a single node! 
Slightly mixed initial outcome because that showed up a bunch of hidden issues in my logic. 
Now fixed 
Aaand ... What was called uib-markweb is now just markweb. This is the brand for that feature I'll be using from now on. Welcome to Markweb!
There is one remaining enhancement I've not yet managed to get working correctly. I want the page to refresh after a socket disconnection (e.g. your PC went to sleep). Think that is going to need an enhancement to the main uibuilder client library as well.
Node-RED log output for Markweb is all prefixed with "
" (other uibuilder node outputs are prefixed with just "". Makes the logs a lot easier to parse.
The Node-RED Editor panel for markweb is ready as is the Editor help panel. The uibuilder docs are updated too.
So, inching closer to release.
2 Likes
More fun!
I threw the uibuilder docs at Markweb to see what would happen. Not too bad actually. I may eventually transfer to using it for the local docs at some point - TBD.
Also a bit of fun with the content header. The header and the page title shrink as you scroll down and back as you scroll to the top. (Sorry if you are a Firefox user - they haven't implemented the scroll behaviours yet I'm afraid. They'll get there eventually).
2 Likes
Fantastic Steady progress there Julian
Craig
2 Likes
