Vuejs-Leovue: Leo Vue - Use the open source Leo outlining editor/IDE to create webapps with nested menus, with support for Vue components in content.

vue2 Dependency Status

LeoVue

Use the Open Source Leo Outlining Editor to create tree-based websites.

Content items can be text, markdown, or html with Vue components.

Tree nodes can load content from websites or files, including other .leo files.

Live Site with Docs

Leo

Leo is a cross platform desktop program that allows you to create outlined content, like the docs.leo file from this project shown below:

Leo

LeoVue

You can use LeoVue to view Leo files with a browser. LeoVue also allows you to put urls in node titles, with the content pane showing the url content.

Leo

Outline Formats

LeoVue allows you to view outlines in various formats, including inline. Leo

Vue Components in Content

Content in nodes can contain Vue components or csv data. LeoVue renders the Vue components. Leo

Create Nested Presentations

LeoVue uses the Reveal.js library to create presentations from Leo outlines. As with any Leo content, content can be nested and content items can be cloned (shared in multiple presentations). Leo

Menu items and Linked Scroll

Each menu item can point to a single content item, or you can combine menu items into scrolling pages. Leo

Summary Nodes

LeoVue has a couple of directives that create summary nodes: nodes that summarize content found in other nodes.

Two types of summary nodes are currently implemented in LeoVue. You can add your own summary directive by customizing the code in one of these directives.

Kanban

Some people find Leo outlines to be a good way to organize to-do lists and projects.

However, if you have your projects in Leo, you still might want to be able to display a level of your project list as a Kanban board, so that others can easily see that section's progress.

Using the @kanban directive, you can create a kanban board from a node. The next level node become the columns of the boards, and the lower levels are displayed via the nested accordion component.

Leo

Mermaid Flowchart

Mermaidjs is a markup language for creating and viewing diagrams such as flowcharts and Gannt charts. If your index.html page has a link to the Mermaid CDN, you can use this markup in LeoVue to create and display Mermaid diagrams.

The @mermaid directive will create a flowchart from the nodes under the directive node. Because of Leo's clone nodes, these flowcharts can be more complex than simple trees.

The node in the mermaid directive can have options for sizing the chart and adding styles and icons to the nodes. Node titles can use standard Mermaid syntax such as |line text|{node text}. Clicking on a diagram node pops up the node text or optionally navigates to the node in LeoVue.

For more information, see the LeoVue Docs.

Mermaid diagrams with LeoVue

More Examples

Plays of William Shakespeare

Plays of William Shakespeare, version with nested menus and no header

More

Quick Start

LeoVue requires a webserver to run. Either install it on your server or run it locally with http-server:

# install node.js, then:
npm install -g http-server

For a quick start using LeoVue from a CDN, see this example repo

LeoVue CDN

Build Setup

# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report

Static Site Builder

This project includes a utility to generate a static site. The outline tree becomes a standalone page, as do each of the content items. These are simple HTML pages with no javascript, so Vue components in content don't work. This feature is for generating a site that is easily crawlable, for example for SEO. The pages are very basic at the moment because they aren't really intended for viewing, but styles could be added to make them more presentable.

To generate the static site:

# build site with static pages for SEO, files will be generated into dist/static/site

npm install xmldmom
npm install xslt4node
npm run build-static

Deploying to Github-Pages

If you set up your Github repo to serve pages from the docs folder (in repo settings), you can use the following script to make a clean distribution into that folder:

npm run build-deploy

The above command is for deploying this repo. If you simply are trying to get a leo file to display as a web page, you can do that with a single index.html file, your leo file, and the LeoVue CDN. See this example repo.

Built With

Main feature components:

Main Content Components:

Libraries

Running Offline

The following components are accessed via CDN, so if you want to run offline you'll need to download them and change the links in the relevant files (e.g. index.html).

  • MathJax
  • Revealjs
  • Mermaid

Run with Docker

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

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

  • kaleguy

More Vue development info

For detailed explanation on how Vue works with this project, check out the guide and docs for vue-loader.

Acknowledgments

Many thanks to Edward K. Ream for the uniquely useful Leo program.

Many thanks to Evan You and the many contributors to the Vue project and Vue ecosystem.

Comments

  • Bump highlight.js from 9.16.2 to 10.4.1
    Bump highlight.js from 9.16.2 to 10.4.1

    Dec 4, 2020

    Bumps highlight.js from 9.16.2 to 10.4.1.

    Release notes

    Sourced from highlight.js's releases.

    10.4.1

    Security fixes:

    • (fix) Exponential backtracking fixes for: Josh Goebel
      • cpp
      • handlebars
      • gams
      • perl
      • jboss-cli
      • r
      • erlang-repl
      • powershell
      • routeros
    • (fix) Polynomial backtracking fixes for: Josh Goebel
      • asciidoc
      • reasonml
      • latex
      • kotlin
      • gcode
      • d
      • aspectj
      • moonscript
      • coffeescript/livescript
      • csharp
      • scilab
      • crystal
      • elixir
      • basic
      • ebnf
      • ruby
      • fortran/irpf90
      • livecodeserver
      • yaml
      • x86asm
      • dsconfig
      • markdown
      • ruleslanguage
      • xquery
      • sqf

    Very grateful to Michael Schmidt for all the help.

    10.4.0 - November 2020

    A largish release with many improvements and fixes from quite a few different contributors. Enjoy!

    Deprecations:

    ... (truncated)

    Changelog

    Sourced from highlight.js's changelog.

    Version 10.4.1 (tentative)

    Security

    • (fix) Exponential backtracking fixes for: Josh Goebel
      • cpp
      • handlebars
      • gams
      • perl
      • jboss-cli
      • r
      • erlang-repl
      • powershell
      • routeros
    • (fix) Polynomial backtracking fixes for: Josh Goebel
      • asciidoc
      • reasonml
      • latex
      • kotlin
      • gcode
      • d
      • aspectj
      • moonscript
      • coffeescript/livescript
      • csharp
      • scilab
      • crystal
      • elixir
      • basic
      • ebnf
      • ruby
      • fortran/irpf90
      • livecodeserver
      • yaml
      • x86asm
      • dsconfig
      • markdown
      • ruleslanguage
      • xquery
      • sqf

    Very grateful to Michael Schmidt for all the help.

    Version 10.4.0

    A largish release with many improvements and fixes from quite a few different contributors. Enjoy!

    ... (truncated)

    Commits
    • e96b915 bump 10.4.1
    • 065f65f chore(release) allow release script to handle production releases
    • 68509fc chore(docs) bump SECURITY mention to 9.18.5
    • aa0fb85 chore(docs) Version 9 has reached EOL.
    • fb0a626 enh(ci): Add tests for polynomial regex issues
    • fa46dd1 fix(reasonml) fix poly backtracking issue
    • d496052 fix(latex) fix poly backtracking issue
    • d9f1cdb fix(javascript/typescript) fix poly backtracking issue
    • fdec037 fix(asciidoc) fix poly backtracking issue
    • 02ca487 fix(kotlin) fix poly backtracking issue
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by joshgoebel, a new releaser for highlight.js since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump axios from 0.19.0 to 0.21.1
    Bump axios from 0.19.0 to 0.21.1

    Jan 4, 2021

    Bumps axios from 0.19.0 to 0.21.1.

    Release notes

    Sourced from axios's releases.

    v0.21.1

    0.21.1 (December 21, 2020)

    Fixes and Functionality:

    • Hotfix: Prevent SSRF (#3410)
    • Protocol not parsed when setting proxy config from env vars (#3070)
    • Updating axios in types to be lower case (#2797)
    • Adding a type guard for AxiosError (#2949)

    Internal and Tests:

    • Remove the skipping of the socket http test (#3364)
    • Use different socket for Win32 test (#3375)

    Huge thanks to everyone who contributed to this release via code (authors listed below) or via reviews and triaging on GitHub:

    v0.21.0

    0.21.0 (October 23, 2020)

    Fixes and Functionality:

    • Fixing requestHeaders.Authorization (#3287)
    • Fixing node types (#3237)
    • Fixing axios.delete ignores config.data (#3282)
    • Revert "Fixing overwrite Blob/File type as Content-Type in browser. (#1773)" (#3289)
    • Fixing an issue that type 'null' and 'undefined' is not assignable to validateStatus when typescript strict option is enabled (#3200)

    Internal and Tests:

    • Lock travis to not use node v15 (#3361)

    Documentation:

    • Fixing simple typo, existant -> existent (#3252)
    • Fixing typos (#3309)

    Huge thanks to everyone who contributed to this release via code (authors listed below) or via reviews and triaging on GitHub:

    ... (truncated)

    Changelog

    Sourced from axios's changelog.

    0.21.1 (December 21, 2020)

    Fixes and Functionality:

    • Hotfix: Prevent SSRF (#3410)
    • Protocol not parsed when setting proxy config from env vars (#3070)
    • Updating axios in types to be lower case (#2797)
    • Adding a type guard for AxiosError (#2949)

    Internal and Tests:

    • Remove the skipping of the socket http test (#3364)
    • Use different socket for Win32 test (#3375)

    Huge thanks to everyone who contributed to this release via code (authors listed below) or via reviews and triaging on GitHub:

    0.21.0 (October 23, 2020)

    Fixes and Functionality:

    • Fixing requestHeaders.Authorization (#3287)
    • Fixing node types (#3237)
    • Fixing axios.delete ignores config.data (#3282)
    • Revert "Fixing overwrite Blob/File type as Content-Type in browser. (#1773)" (#3289)
    • Fixing an issue that type 'null' and 'undefined' is not assignable to validateStatus when typescript strict option is enabled (#3200)

    Internal and Tests:

    • Lock travis to not use node v15 (#3361)

    Documentation:

    • Fixing simple typo, existant -> existent (#3252)
    • Fixing typos (#3309)

    Huge thanks to everyone who contributed to this release via code (authors listed below) or via reviews and triaging on GitHub:

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Subnodes under Top of Subtrees can not be displayed in index.html
    Subnodes under Top of Subtrees can not be displayed in index.html

    Nov 12, 2021

    Subnodes in example.leo can not be displayed in https://kaleguy.github.io/leovue/#/t/34/

    Only display Top, but no subnodes.

    Reply
  • Markdown inline code `` become a new
    Markdown inline code `` become a new

    Nov 20, 2021

    If there is a markdown inline code, for example print(). The result in html is a new line. I think it should be an inline code to display.

    Reply
  • Bump markdown-it from 8.4.2 to 12.3.2
    Bump markdown-it from 8.4.2 to 12.3.2

    Jan 12, 2022

    Bumps markdown-it from 8.4.2 to 12.3.2.

    Changelog

    Sourced from markdown-it's changelog.

    [12.3.2] - 2022-01-08

    Security

    [12.3.1] - 2022-01-07

    Fixed

    • Fix corner case when tab prevents paragraph continuation in lists, #830.

    [12.3.0] - 2021-12-09

    Changed

    • StateInline.delimiters[].jump is removed.

    Fixed

    • Fixed quadratic complexity in pathological ***<10k stars>***a***<10k stars>*** case.

    [12.2.0] - 2021-08-02

    Added

    • Ordered lists: add order value to token info.

    Fixed

    • Always suffix indented code block with a newline, #799.

    [12.1.0] - 2021-07-01

    Changed

    • Updated CM spec compatibility to 0.30.

    [12.0.6] - 2021-04-16

    Fixed

    • Newline in alt should be rendered, #775.

    [12.0.5] - 2021-04-15

    Fixed

    • HTML block tags with === inside are no longer incorrectly interpreted as headers, #772.
    • Fix table/list parsing ambiguity, #767.

    [12.0.4] - 2020-12-20

    Fixed

    • Fix crash introduced in 12.0.3 when processing strikethrough (~~) and similar plugins, #742.
    • Avoid fenced token mutation, #745.

    [12.0.3] - 2020-12-07

    Fixed

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump marked from 0.7.0 to 4.0.10
    Bump marked from 0.7.0 to 4.0.10

    Jan 15, 2022

    Bumps marked from 0.7.0 to 4.0.10.

    Release notes

    Sourced from marked's releases.

    v4.0.10

    4.0.10 (2022-01-13)

    Bug Fixes

    • security: fix redos vulnerabilities (8f80657)

    v4.0.9

    4.0.9 (2022-01-06)

    Bug Fixes

    v4.0.8

    4.0.8 (2021-12-19)

    Bug Fixes

    v4.0.7

    4.0.7 (2021-12-09)

    Bug Fixes

    v4.0.6

    4.0.6 (2021-12-02)

    Bug Fixes

    v4.0.5

    4.0.5 (2021-11-25)

    Bug Fixes

    • table after paragraph without blank line (#2298) (5714212)

    v4.0.4

    4.0.4 (2021-11-19)

    ... (truncated)

    Commits
    • ae01170 chore(release): 4.0.10 [skip ci]
    • fceda57 ?️ build [skip ci]
    • 8f80657 fix(security): fix redos vulnerabilities
    • c4a3ccd Merge pull request from GHSA-rrrm-qjm4-v8hf
    • d7212a6 chore(deps-dev): Bump jasmine from 4.0.0 to 4.0.1 (#2352)
    • 5a84db5 chore(deps-dev): Bump rollup from 2.62.0 to 2.63.0 (#2350)
    • 2bc67a5 chore(deps-dev): Bump markdown-it from 12.3.0 to 12.3.2 (#2351)
    • 98996b8 chore(deps-dev): Bump @​babel/preset-env from 7.16.5 to 7.16.7 (#2353)
    • ebc2c95 chore(deps-dev): Bump highlight.js from 11.3.1 to 11.4.0 (#2354)
    • e5171a9 chore(release): 4.0.9 [skip ci]
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • some of the nodes body are not showing
    some of the nodes body are not showing

    Sep 5, 2019

    Dear LeoVUE user,

    I'm running leovue by putting the dist folder into my www root directory. Most the the function is working as expected. However, I noticed some of the nodes, especially when the body text is long, are not being displayed on the right side panel.

    The left side tree view works fine, I can still see the headline of the notes, but when I click the headline, the right side body panel doesn't change.

    I tested with both apache server and python http.server.

    Thanks, Austin

    Reply
  • Make this the next generation of Leo
    Make this the next generation of Leo

    Jul 4, 2018

    Well done, this is awesome!

    Ok, I've known and used Leo since its pre-python days! I've always thought that it needs to be pushed to the web somehow, and I believe you are half of the way there! If only Edward could decouple the leo engine from its gui UI, you could plug it into your system and have a persistent editor via the web, with all the beautiful possibilities that that entails. ?

    S

    Reply
  • vue-chartjs v3.2.x build error
    vue-chartjs v3.2.x build error

    Feb 12, 2018

    Since in package.json has the vue-chartjs package ^3.0.0 declared version and their v3.2.x build raised an error, got this error in browser console after building leovue: https://github.com/apertureless/vue-chartjs/issues/310

    Used v3.1.0 explicitly in package json to fix the problem. Maybe using it would be safe bet to not let them to crash the build of leovue?

    Reply
  • @clean @auto node makes no outline displayed on left side
    @clean @auto node makes no outline displayed on left side

    Sep 5, 2019

    In case the leo file is with @clean or @auto node, the outlines are not displayed on left side. If switch to Graphic Tree, can still browse the data.

    Reply
  • Missing scrollbars on long web pages
    Missing scrollbars on long web pages

    Nov 23, 2018

    When the rendered content of a node results in a tall web page, there does not appear a scrollbar in the browser (tested in Chrome and Brave on MS Windows 10) when the View Type (from the hamburger menu in the top right corner) is Outline, Graphic Tree, or Nested Menu. OK though for Inline. e.g. https://kaleguy.github.io/leovue/#/t/4

    image

    Reply
  • README.md doesn't scroll
    README.md doesn't scroll

    Mar 30, 2018

    You can't scroll long pages: README.md

    Reply