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
Sorry for spamming the forum but I'm trying to keep the pressure on myself to get v7.6 to deployment status.
And thanks for those still following along.
Today was mostly updating the Markweb documentation and demo pages. With some CSS tweaks to satisfy my OCD including a better theme for syntax highlighted code blocks.
More notably, {{varname}} markdown processing now allows for control attributes similar to %%directive%% entries. Specifically things like:
{{temperature [default="N/A" before="🌡️: " after="℃"]}}
One more Markweb thing to test - you can override the sidebar nav listing with a custom listing using JSON.
After that, we should be done. Just the usual pre-publish workflow to go through.
And now we are VERY close to release.
I've tidied up some code, squashed a few edge-case issues and done my best to expand the documentation.
Regarding documentation for Markweb, the details are now contained in the [DEMO] site which acts not only as documentation but also as a regression test suite.
A few tweaks added since my last update:
- Recognises not just
index.md for content folders but also _index.md and <foldername>.md which makes it easier to migrate content from things like Hugo, Astro and Obsidian.
- Task list layouts are a bit nicer.
- The title at the top of each page now not only reduces in size as you scroll down long content but is also a link back to the top of the page (also removing any hash on the URL at the same time).
- The footer at the bottom of each page also reduces in size slightly as you scroll down.
- Index tree lists, including the navigation list, now better respect the high/medium/low
sortPriority frontmatter field. Saves having to do a custom navigation tree just to move something to the top or bottom.
- A bunch of CSS tweaks done - to satisfy my OCD!
- Removed some cases of site reindexing when it didn't really need to.
- Expanded the default
global-attributes.json file to include the site favicon (which has changed to a green version of UIBUILDER's wireframe world icon). Also added a default page title and description.
{{varname}} processing now uses UIBUILDER's <uib-var> responsive web component or the uib-var custom attribute to stay in line with and re-use uibuilder's feature sets.
Additionally, the {{...}} processing allows for 3 possible arguments to supplement the value display.
before, after, default
Each accepts text or HTML (not Markdown) and should be pretty self-evident.
Phew! There always seems more to do than expected when getting ready for a release.
I'm hoping to release v7.6 in the next few days now.
2 Likes
UIBUILDER nodes have received a small update:
1 Like
