Leo Vue

[Joe Orr]

The Leo HTML viewer is now Leo Vue - added more Vue integration.

https://github.com/kaleguy/leovue

Added:

* Search

* Static Site Generation

* Clickable Section Links

* Ability to put Vue components in Content (e.g. Diagrams, Maps, Charts, Table, others)

* Vue components can read JSON and CSV data from nodes

* Nested Presentations with Reveal.js

- Joe

[Edward K. Ream]

On Mon, Jan 1, 2018 at 5:08 PM, Joe Orr <joe...@gmail.com> wrote:

The Leo HTML viewer is now Leo Vue - added more Vue integration.

https://github.com/kaleguy/leovue

​Many thanks, Joe, for this outstanding work.

For those following this link, please make sure you scroll down the page.  There you will see the readme.md file.​ It shows the impressive capabilities of the viewer and provides a spectacular demo of Leo. I'd like to make this "presentation" part of Leo's home page.​

Joe, Leo Vue already goes far beyond what I had hoped in terms of a web interface for Leo.  I shall be studying the code closely, focusing on reveal.js, vue.js, and the other dependencies in package.json. This promises to save me months of aimless wandering.

Edward

[Joe Orr]

Edward,

Thanks for the note, will be adding to the README soon, including an acknowledgement to you for making it all possible.

Couple of notes about making a front end for Leo using web technologies:

- I can make the tree look exactly like the current Leo interface with basically just CSS, will add that as option in future.

- Vue is a great framework for this, lightweight and complete. Leo Vue is a good case study, I think. Will be adding more (Leo) docs to explain the code.

- The reader program has some capabilities that wouldn't be suitable to the actual program, like being able to load subtrees. So a Leo version with a web interface would be separate program, not an extension of Leo Vue. But a lot of the same code or patterns could be used.

- Mentioned this way back when but haven't had time to work on it, the Leo (python) program could be wrapped in node, and web front end could talk to it.

Joe

[Joe Orr]

Forgot to add, so far I haven't posted about Leo Vue anywhere but here because it was missing key features. The basic features are now complete so I'll be posting about it elsewhere in a few weeks. In meantime, if anyone has a bug report, that would be very helpful, the program isn't very well tested yet. Also if anyone has a nice sample Leo file to post to the examples repo, that would be great as well. You can load your leo file just by using the index.html file noted in the README.

Joe

[Offray Vladimir Luna Cárdenas]

Joe,

The web interface looks really great. I wonder if this could be the path for the visualization & services 2018 roadmap. The advantage of using a web interface as a rendering interface is that a lot of stuff is there ready to be used. Electron apps [1] has been discussed previously in this list as a possibility for such integration, but I don't know you they can use the python source there.

[1] https://github.com/electron/electron

There is any support for OPML or other ouliners? I think this could be a really good way to publish online the output of several programs.

Keep the good work.

Cheers,

Offray

--
You received this message because you are subscribed to the Google Groups "leo-editor" group.
To unsubscribe from this group and stop receiving emails from it, send an email to leo-editor+...@googlegroups.com.
To post to this group, send email to leo-e...@googlegroups.com.
Visit this group at https://groups.google.com/group/leo-editor.
For more options, visit https://groups.google.com/d/optout.

[Joe Orr]

Offray,

Thanks for the kind words. About Electron, that is basically just node + browser in a package. I think should be doable to wrap Leo python code in node and have the browser interface, maybe using something like this: https://www.npmjs.com/package/node-python

About other formats and outlines, no plans for that. People can always just import into Leo ;-)

Joe

[Chris George]

I am on Day 2 of trying to get it to work on my system. It took over a week last time, but I have since installed a different Linux distribution. Today I finally got "npm run dev" to work without errors.

Now to figure out what "Cannot GET /"means, :-(

Chris

To unsubscribe from this group and stop receiving emails from it, send an email to leo-editor+unsubscribe@googlegroups.com.

[Kent Tenney]

I also see
Cannot GET /

at localhost:8080

and the following in the terminal where I entered

$ npm run dev

ERROR  Failed to compile with 1 errors                                                                                                      1:08:24 PM

 error  in ./src/main.js

Module build failed: Error: Couldn't find preset "es2015" relative to directory "/opt/fetching/leovue"
    at /opt/fetching/leovue/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
    at Array.map (native)
    at OptionManager.resolvePresets (/opt/fetching/leovue/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (/opt/fetching/leovue/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (/opt/fetching/leovue/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init (/opt/fetching/leovue/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/opt/fetching/leovue/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/opt/fetching/leovue/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (/opt/fetching/leovue/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (/opt/fetching/leovue/node_modules/babel-loader/lib/index.js:50:20)
    at Object.module.exports (/opt/fetching/leovue/node_modules/babel-loader/lib/index.js:175:20)

 @ multi ./build/dev-client ./src/main.js

> Listening at http://localhost:8080

[Chris George]

I am stuck in the same place. I have tried three or four different suggestions from stackoverflow and google.

Chris

npm run dev

> leo...@1.4.0 dev /home/chris/leo-editor/leovue
> node build/dev-server.js



 ERROR  Failed to compile with 1 errors           11:19:15 AM

 error  in ./src/main.js

Module build failed: Error: Couldn't find preset "es2015" relative to directory "/home/chris/leo-editor/leovue"
    at /home/chris/leo-editor/leovue/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
    at Array.map (native)
    at OptionManager.resolvePresets (/home/chris/leo-editor/leovue/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (/home/chris/leo-editor/leovue/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (/home/chris/leo-editor/leovue/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init (/home/chris/leo-editor/leovue/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/home/chris/leo-editor/leovue/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/home/chris/leo-editor/leovue/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (/home/chris/leo-editor/leovue/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (/home/chris/leo-editor/leovue/node_modules/babel-loader/lib/index.js:50:20)
    at Object.module.exports (/home/chris/leo-editor/leovue/node_modules/babel-loader/lib/index.js:175:20)

 @ multi ./build/dev-client ./src/main.js

> Listening at http://localhost:8080

[Joe Orr]

Sorry guys! Just did a clean install on Ubuntu and duplicated this.

Was missing the babel preset in package.json I just updated it. You can download and run npm install again or:

npm install --save-dev babel-preset-es2015

Also, if you don't have java installed, you will get errors trying on npm install because the static site generator

uses java. If you don't need that, comment out the xmldom and xsltf4node modules in package.json.

Joe

[Kent Tenney]

This is seriously cool!

Thanks,

Kent

To unsubscribe from this group and stop receiving emails from it, send an email to leo-editor+unsubscribe@googlegroups.com.

[Chris George]

Clean install using git clone.

Ran npm install without errors.

Chris

npm run dev        
> leo...@1.4.0 dev /home/chris/leo-editor/leovue
> node build/dev-server.js

 ERROR  Failed to compile with 13 errors          12:32:04 PM

These dependencies were not found:

* babel-runtime/core-js/json/stringify in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/NodeLink.vue, ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/SectionLink.vue
* babel-runtime/core-js/object/keys in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/SearchBar.vue, ./src/store/index.js
* babel-runtime/core-js/promise in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/lib/D3tree.vue, ./src/lib/d3-utils.js and 2 others
* babel-runtime/helpers/toConsumableArray in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/lib/D3tree.vue, ./src/store/index.js
* babel-runtime/helpers/typeof in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/lib/D3tree.vue
* -!../node_modules/css-loader/index.js?{"minimize":false,"sourceMap":false}!leaflet/dist/leaflet.css in ./node_modules/css-loader?{"minimize":false,"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7b2b6ba9","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"indentedSyntax":true,"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/AppBase.vue, ./node_modules/css-loader?{"minimize":false,"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"indentedSyntax":true,"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue

To install them, you can run: npm install --save babel-runtime/core-js/json/stringify babel-runtime/core-js/object/keys babel-runtime/core-js/promise babel-runtime/helpers/toConsumableArray babel-runtime/helpers/typeof -!../node_modules/css-loader/index.js?{"minimize":false,"sourceMap":false}!leaflet/dist/leaflet.css

> Listening at http://localhost:8080

[Chris George]

Another clean git clone install.

Ran npm install.

Now getting 14 errors instead of 13.

npm run dev

> leo...@1.4.0 dev /home/chris/leo-editor/leovue
> node build/dev-server.js

 ERROR  Failed to compile with 14 errors           1:02:43 PM

These dependencies were not found:

* babel-runtime/core-js/json/stringify in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/NodeLink.vue, ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/SectionLink.vue
* babel-runtime/core-js/object/keys in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/SearchBar.vue, ./src/store/index.js

* babel-runtime/core-js/promise in ./src/lib/d3-utils.js, ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/lib/D3tree.vue and 2 others

* babel-runtime/helpers/toConsumableArray in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/lib/D3tree.vue, ./src/store/index.js
* babel-runtime/helpers/typeof in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/lib/D3tree.vue
* -!../node_modules/css-loader/index.js?{"minimize":false,"sourceMap":false}!leaflet/dist/leaflet.css in ./node_modules/css-loader?{"minimize":false,"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7b2b6ba9","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"indentedSyntax":true,"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/AppBase.vue, ./node_modules/css-loader?{"minimize":false,"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"indentedSyntax":true,"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue

* moment in ./node_modules/vue-table-component/dist/index.js

To install them, you can run: npm install --save babel-runtime/core-js/json/stringify babel-runtime/core-js/object/keys babel-runtime/core-js/promise babel-runtime/helpers/toConsumableArray babel-runtime/helpers/typeof -!../node_modules/css-loader/index.js?{"minimize":false,"sourceMap":false}!leaflet/dist/leaflet.css moment

> Listening at http://localhost:8080

[Chris George]

Clean git clone install.

npm install

npm install css-loader

Still have 2 compile errors.

npm run dev        
> leo...@1.4.0 dev /home/chris/leo-editor/leovue
> node build/dev-server.js

 ERROR  Failed to compile with 2 errors            1:12:38 PM

This dependency was not found:

* -!../node_modules/css-loader/index.js?{"minimize":false,"sourceMap":false}!leaflet/dist/leaflet.css in ./node_modules/css-loader?{"minimize":false,"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"indentedSyntax":true,"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue, ./node_modules/css-loader?{"minimize":false,"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7b2b6ba9","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"indentedSyntax":true,"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/AppBase.vue

To install it, you can run: npm install --save -!../node_modules/css-loader/index.js?{"minimize":false,"sourceMap":false}!leaflet/dist/leaflet.css

> Listening at http://localhost:8080

[Joe Orr]

Was able to duplicate this too. Deleted the package.lock.json file in the repo and cleaned up the babel stuff and then did another clean install. BUT I first removed the xmldom and xslt4node packages from package.json because this linux box doesn't have java. Then it worked.

Try clone and install again, delete the xmldom and xst4node from package.json just to be safe.

Joe

[Chris George]

Clean git clone install.

npm install

npm run dev

Success!

Thanks, Joe.

For the record, I am using Chakra Linux. It is a rolling distro with a focus on the latest KDE desktop.

Chris

To unsubscribe from this group and stop receiving emails from it, send an email to leo-editor+unsubscribe@googlegroups.com.

[Edward K. Ream]

On Thu, Jan 4, 2018 at 3:59 PM, Chris George <techn...@gmail.com> wrote:

Clean git clone install.

npm install

npm run dev

Success!

​Glad to hear it.  I did the same, and got this cryptic message:

npm WARN lifecycle The node binary used for scripts is C:\Program Files\nodejs\node.exe but npm is using C:\PROGRA~1\nodejs\node.exe itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.

> leo...@1.4.0 dev c:\leo.repo\leovue
> node build/dev-server.js

c:\leo.repo\leovue\node_modules\semver\semver.js:293
    throw new TypeError('Invalid Version: ' + version);
    ^

TypeError: Invalid Version: c:\leo.repo\leovue>C:\Progra~1\nodejs\npm --version
5.6.0
    at new SemVer (c:\leo.repo\leovue\node_modules\semver\semver.js:293:11)
    at Range.test (c:\leo.repo\leovue\node_modules\semver\semver.js:1036:15)
    at Function.satisfies (c:\leo.repo\leovue\node_modules\semver\semver.js:1085:16)
    at module.exports (c:\leo.repo\leovue\build\check-versions.js:26:17)
    at Object.<anonymous> (c:\leo.repo\leovue\build\dev-server.js:1:90)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! leo...@1.4.0 dev: `node build/dev-server.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the leo...@1.4.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\edreamleo\AppData\Roaming\npm-cache\_logs\2018-01-06T22_30_17_218Z-debug.log

My PATH contains C:\Program Files\nodejs;

Any suggestions?

Edward

[Edward K. Ream]

On Sat, Jan 6, 2018 at 4:33 PM, Edward K. Ream <edre...@gmail.com> wrote:

On Thu, Jan 4, 2018 at 3:59 PM, Chris George <techn...@gmail.com> wrote:

Clean git clone install.

npm install

npm run dev

Success!

​Glad to hear it.  I did the same, and got this cryptic message:

​ [snip]

​Well, following the "monkey see, monkey do" principle, this works for me:

npm run dev --scripts-prepend-node-path

Edward

[Matt Wilkie]

This is seriously nice work Joe. Thanks for the demo, sharing, and most of all: inspiring!

Matt

[Joe Orr]

Matt,

Thanks for the note. I think the project at the least shows the power of the web development system. 

I'm mostly just adding features that I personally want to use. I think there are plenty more possibilities, and others more knowledgable about Leo will no doubt have some ideas.

Joe

On Monday, January 22, 2018 at 1:13:49 PM UTC-5, Matt Wilkie wrote:

This is seriously nice work Joe. Thanks for the demo, sharing, and most of all: inspiring!

Matt

On Mon, Jan 1, 2018 at 3:08 PM, Joe Orr <joe...@gmail.com> wrote:

The Leo HTML viewer is now Leo Vue - added more Vue integration.

https://github.com/kaleguy/leovue

Added:

* Search

* Static Site Generation

* Clickable Section Links

* Ability to put Vue components in Content (e.g. Diagrams, Maps, Charts, Table, others)

* Vue components can read JSON and CSV data from nodes

* Nested Presentations with Reveal.js

- Joe

--
You received this message because you are subscribed to the Google Groups "leo-editor" group.

To unsubscribe from this group and stop receiving emails from it, send an email to leo-editor+...@googlegroups.com.