Uibuilder markweb too dark

General
1

I haven't used uibuilder significantly, but the markweb feature appeals to me.

As suggested in the markweb node help text I configured it to show the demo pages and the result is:

image
image1009×411 34.7 KB

I am not running any unusual theme as far as I know.
uibuilder v7.7.0
NR 5.0.0 Beta 6

2

Ooh, that doesn't look right!

Can you check the browser console and the network page to see if both stylesheet files have loaded?

It should look like this:

image
image2500×1095 267 KB

There are 2 stylesheets. The default uibuilder brand and one specific for markweb:

image
image756×150 2.94 KB

3

Yes, they have both loaded. They are 304 rather than 200.

I don't see anything obviously wrong in the developer tools.

4

Wait, what browser are you using?

I bet you are using Safari? I forgot to re-test on Safari because my wife has stolen my only Mac. I've just tried on iOS Safari and I'm getting the same result. Annoyingly, there is no longer a Safari for Windows so it isn't possible for me to test fully.

Do you have Brave or Vivaldi or another Chromium based browser to test on? Or Firefox? (Brave is the same, at least on iOS, so I expect the others will be as well).

Now I need to try and work out why this looks so wrong on Safari - the 21st C IE! :frowning:

5

Nope, sorry, Edge and Brave.

6

On Apple hardware though?

7

No, Lenovo Thinkpad running Ubuntu 24.04.

I will try it on another PC to eliminate browser config.

8

It is the same viewed on Android, so it must be my NR setup.

9

Wait, just thought of something else - I think I've done something without thinking. My browsers tend to be set to dark mode. I think you are in light mode. If you switch to dark, I think it will correct itself.

If so, that's an easy fix thankfully.

Yes, just tested:

image
image1521×532 48.5 KB

It's a light mode issue. Easily fixed. Watch out for v7.7.1 :smiley:

10

Yes, it is ok in dark mode.

11

I've just published v7.7.1 so all should be well now if you update.

If you already have a config folder, please either delete page-template.html and restart node-red so it gets re-created from the updated template, or simply adjust the HTML tag line of it to be:

<html lang="en" class="dark"><head>
12

Great, all good now, thanks.

13

In the demo site all I see is the home page, but if I look in the folder .node-red/node_modules/node-red-contrib-uibuilder/templates/markweb-demo/ there seems to be a lot more. Should those pages appear in the Navigation panel?

14

Yes, there are many pages in the demo as it includes lots of Markdown formatting and content examples.

image
image884×330 62.5 KB

Try adding the following path to the URL to see if the pages are there (so it would be the nav menu not working) or not there at all (something more fundamental awry).

Also check the node-red logs. You should see something like these entries:

[info] 🌐🕸️[markweb:buildIndex:/mwdemo] Indexed "/home/home/nrmain/data/node_modules/node-red-contrib-uibuilder/templates/markweb-demo" in 370ms. 20 files, 117kb

And a bit later:

[info] 🌐🕸️[markweb:setupFileWatcher:/mwdemo] File watcher started for: "/home/home/nrmain/data/node_modules/node-red-contrib-uibuilder/templates/markweb-demo"

Obviously, your url name and FS paths may be different.

The first one is the important one, it should say that 20 files have been indexed.

15

This is what I see in the log

1 Jun 17:21:10 - [info] 🌐🕸️[markweb] New URL "/markweb", source fldr "/home/colinl/.node-red/node_modules/node-red-contrib-uibuilder/templates/markweb-demo", config fldr "/home/colinl/.node-red/node_modules/node-red-contrib-uibuilder/templates/.markweb-defaults"
1 Jun 17:21:10 - [info] 🌐🕸️[markweb:buildIndex:/markweb] Indexed "/home/colinl/.node-red/node_modules/node-red-contrib-uibuilder/templates/markweb-demo" in 10ms. 0 files, 0kb
1 Jun 17:21:10 - [info] Started flows
...
1 Jun 17:21:10 - [info] +-----------------------------------------------------
1 Jun 17:21:10 - [info] | 🌐 uibuilder v7.7.1 initialised
1 Jun 17:21:10 - [info] | root folder: /home/colinl/.node-red/uibuilder
1 Jun 17:21:10 - [info] | Telemetry: On, uuid: 6d9be8ed-c90c-4974-acd6-5bdc15888c66
1 Jun 17:21:10 - [info] | Using Node-RED's webserver at:
1 Jun 17:21:10 - [info] |   http://0.0.0.0:1880/
1 Jun 17:21:10 - [info] | Instances: 0 uibuilder, 1 markweb
1 Jun 17:21:10 - [info] | Installed packages:
1 Jun 17:21:10 - [info] |   No packages installed
1 Jun 17:21:10 - [info] +-----------------------------------------------------
1 Jun 17:21:10 - [info] 🌐🕸️[markweb:setupFileWatcher:/markweb] File watcher started for: "/home/colinl/.node-red/node_modules/node-red-contrib-uibuilder/templates/markweb-demo"

If I edit index.md then I see

1 Jun 21:05:59 - [info] 🌐🕸️[markweb:watcher:/markweb] File event detected: "add" for ".goutputstream-4NPYP3"
1 Jun 21:05:59 - [info] 🌐🕸️[markweb:watcher:/markweb] File event detected: "change" for ".goutputstream-4NPYP3"
1 Jun 21:05:59 - [info] 🌐🕸️[markweb:watcher:/markweb] File event detected: "change" for "index.md"
1 Jun 21:05:59 - [info] 🌐🕸️[markweb:watcher:/markweb] File event detected: "unlink" for ".goutputstream-4NPYP3"
1 Jun 21:06:00 - [info] 🌐🕸️[markweb:watcher:/markweb] File/folder changes detected, rebuilding search index
1 Jun 21:06:00 - [info] 🌐🕸️[markweb:buildIndex:/markweb] Indexed "/home/colinl/.node-red/node_modules/node-red-contrib-uibuilder/templates/markweb-demo" in 6ms. 0 files, 0kb

You didn't actually provide the url, but I tried markweb/design and it shows that page correctly.

16

Oh dear, that's not right.

Wait, what is that? Are you using some kind of odd filing system? What is .goutputstream-4NPYP3? Something to do with Ubuntu/Gnome?

Even so, this should work. The watcher uses Chokidar which is, of course, very widely used.

17

I have no idea, it is a conventional Ubuntu gnome install. Not on a mapped drive or anything like that.

Where is the indexing code? I will try and debug it.

18

It is the ignore options being passed to fgsync. If I change customNode.js line 1107 from

        const regularFiles = fgSync(`${indexFolder}/**/*.md`, { ignore: ['**/_*/**', '**/_*', '**/.*/**', '**/.*'], })

to

        const regularFiles = fgSync(`${indexFolder}/**/*.md`, { ignore: [], })

then it finds the files.

19

That's weird though. Since it works on all of my installs, including both Windows and Linux. The point of the ignore's is to filter out anything starting with _ or ..

Would you mind changing that again to be:

const regularFiles = fgSync(`${indexFolder}/**/*.md`, { ignore: [`${indexFolder}/**/_*/**`, `${indexFolder}/**/_*`, `${indexFolder}/**/.*/**`, `${indexFolder}/**/.*`], })

To see if that is also a fix?

If not, I will have to do the filtering in the actual indexing process.

Oh, and thanks for doing the detailed debugging. :smiley: