Skip to content

kaleguy/leovue

Repository files navigation

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.

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.