SB: Leovue progress report

Edward K. Ream

unread,

Nov 23, 2020, 7:48:50 AM11/23/20

to leo-editor

This is a long entry in the Sabbatical Chronicles. The summary:

1. Leovue is up on my HostGator site. This breakthrough came from discovering the "secret instructions" here. I am studying Leovue by altering this site and seeing what happens.

2. The leo-editor-leovue repo contains the files used on my HostGator site. EKR.com.leo manages the site. LeoVue.leo contains the site. That is, index.html contains a link to LeoVue.leo.

3. I am still unable to run Leovue locally. I continue to investigate. In other words, my HostGator site relies on files (including JS scripts) copied from Joe Orr's LeoVue repo.

The rest of this post discusses various details. Feel free to ignore.

Breakthrough

Discovering the secret instructions was a build-related breakthrough. Here they are:

How to create your own Leo/Leo Vue site:

Create a folder
Create a leo file in the folder (See Leo Vue for more info about Leo).
Download 'index.html' from this repo to the folder
Edit settings in index.html
Upload your folder to github pages or other server.

As noted below, the crucial setting is in the window.lconfig part of the <head> element.

Build problems

Leo's issue #735 contains detailed build instructions. Alas, they do not work for me. That is, I am unable to see anything on localhost. There are several possible explanations for this.

Recently I have been using docker to build and run Leovue:

docker build -t leovue .
docker run -p 8080:8080 leovue

I cloned Leovue into a local leovue repo, then ran the above commands (in the leovue directory!) to build and run leovue. The build appears to have succeeded, and I see the expected index.html on localhost:8080. However, the page is blank. The browser's debugger does show problems:

Uncaught ReferenceError: exports is not defined app.js line 21793. I would appreciate any help anyone might give me about this.

Organizational issues

Initial massive confusion taught me that web development demands strict attention to organization, even including the naming and organization of bookmarks.

As an amusing example of the initial confusion, I actually downloaded icons from Joe Orr's actual site. Doh, Joe Orr's repo contains those details. And Doh again, I had already cloned that repo onto my machine!

I quickly saw that I had to use a git repo to keep track of my work. To repeat, the leo-editor-leovue repo contains the files used on my HostGator site.

With all the details required to build a website, it's no wonder that organization tools have proliferated. However, my mantra is: I'm interested in code, not organization. I have Leo and git for organization.

Settings in index.html

Recall that on my site EKR.com.leo manages the site. LeoVue.leo contains the site.

Among other files, EKR.com.leo contains @clean index.html. The <head> element contains:

window.lconfig = {
<< set window.lconfig >>
}
</script>

The crucial code is this from the << set window.lconfig >> section:

"filename": "LeoVue", // was docs.

In other words, the LeoVue scripts will create the website from the file LeoVue.leo!!.

Joe Orr's repo contains many .leo files, but these are used as data to Leovue. I don't see anything like EKR.com.leo on Joe Orr's repo.

Possible bugs in Leovue

I wonder how many people are using Leovue. I found the following problems in my first few hours of playing with Leovue on my HostGator site:

- The File Nodes section (in the official Leovue site) does not show the @file or @clean part of the node.

- There seems to be a buglet in @mermaid nodes. This works:

@mermaidtd (Simple Example Top Down)

But the trailing ')' does not appear in:

@mermaidlr People Chart (Left to Right)

On my site, I use this workaround:

@mermaidlr People Chart: Left to Right

BTW, on Joe Orr's site, there are two nodes that render identically:

@mermaidlr People Chart

@mermaidrl People Chart

That's a "demo bug". It's a bit confusing.

The biggest problem I am facing is the resolution of links, especially in markdown files. At present, only full links are working. This has necessitated quite a bit of tweaking of the markdown files for my HostGator site. This might be a Leovue bug, or it may be something else.

Searching on Windows

Searching on Windows 10 is pathetically broken. Happily, I stumbled across FileLocator. The free (lite) version is plenty good enough.

Summary

I am now longer completely clueless re Leovue. The struggles chronicled above have taught me a lot. Proper organization, using git and Leo, is crucial to managing web technologies. However, my primary focus is on Leovue's code.

Leovue is up on my HostGator site. EKR.com.leo manages the site. I'll create @clean nodes to study various parts of the site as they become available to me. LeoVue.leo contains the site. I'll tweak various files on the site and observe what changes.

I am still not able to build and run Leovue locally. When run from localhost, the debugger reports an Uncaught ReferenceError. I would appreciate any help anyone might give me about this.

The more I study Leovue, the more I see what an amazing product it is. Joe Orr's Leovue website is a great demo of Leovue.

The documentation of LeoVue directives (extra directives that only Leovue understands) is buried in all the cool demos. More study of the documentation would be wise. Doh! The easiest way to do that is to study LeoVue.leo, not Joe Orr's website.

Edward

vitalije

unread,

Nov 23, 2020, 9:36:12 AM11/23/20

to leo-editor

Uncaught ReferenceError: exports is not defined app.js line 21793. I would appreciate any help anyone might give me about this.

This kind of error suggests that the script your browser loads is intended for nodejs scripting environment not for the browser. In order to be used in the webpage this scripts must be transformed or repackaged. IIRC leo-vue uses webpack as build tool. The build tool (whatever it might be) bundles all separate javascript files in one big javascript file. That file should be loaded in the webpage. It means that the script tag in your index.html needs a src attribute to be correctly set to load this big javascript which contains all separate files bundled together.

Look in the webpack configuration file to find out where the result of build process should be and then adjust `<scirpt src="">` inside your index.html to the correct path.

HTH Vitalije

Edward K. Ream

unread,

Nov 23, 2020, 9:43:13 AM11/23/20

to leo-editor

Thanks! I'll try this out later today.

Edward

Edward K. Ream

unread,

Nov 24, 2020, 12:15:50 PM11/24/20

to leo-editor

On Monday, November 23, 2020 at 8:36:12 AM UTC-6 vitalije wrote:

Uncaught ReferenceError: exports is not defined app.js line 21793. I would appreciate any help anyone might give me about this.

This kind of error suggests that the script your browser loads is intended for nodejs scripting environment not for the browser.

Again, thanks for this suggestion. It's time to come up to speed with docker and webpack.

I suspect there is something relatively simple behind the problems. Finding out what that might be is my next sabbatical project.