@netbeifeng/ilv-interactive-video-authoring-tool v0.2.6

theme: seriph layout: cover

background: 'https://source.unsplash.com/1600x900/?nature,water'

Slidev

This is the cover page.

ILV - Interactive Learning Video Authoring Tool

This project is developed based on my thesis which introduces the use of markup language to edit interactive learning videos instead of the traditional WYSIWYG editing.

Live Demo

Here is a live demo generated by the testing.ilv.

TL;DR

Install

npm install @netbeifeng/ilv-interactive-video-authoring-tool -g

Please execute the cilv version command to test whether the tool is correctly installed, and this command will help you to install the necessary dependency concurrently globally.

Template

You can execute the command cilv init <document_name> to initialize an ILV document by using the template.

Deploy and Debugging

The command cilv deploy <document_name> is employed to parse the given ilv document and deploy it to the localhost webserver. The webserver is hosted by React. Concurrently, a listener will be added to the given ilv file, if something triggers a content change, the parsing will restart and project will be re-deployed to the webserver, so that the author can see the changes immediately.

Build

The command cilv build <document_name> is used to build the static web page.

Highlighter

Since ILV markup language is a custom language, I developed a syntax highlighter for it to enhance the coding experience and code readability, available in Visual Studio Marketplace -> here. Or install with CLI code --install-extension aliasILV.ilv Here is the display effect before and after using the highlighter.

Structure

• cli -> Source code of CILV cli tool
• highlighter -> Source code of vscode highlighter
• parser -> Source code of ilv parser
• validator -> Source code of json validator
• components -> React components
• utilities -> ILV Object TypeScript defintion
• testing -> Testing.ilv document

ILV Markup Language

Here is an examplar of ILV document.

A valid document should enclosed with a pair of braces, which called RootProperty.

There are two types of properties in an ILV document, the InlineProperty and the BlockProperty. The InlineProperty starts with the dollar character ($), and the BlockProperty starts with the circumflex symbol (^). The former is used to defined variable within the latter one. Here is an example. The key of the Property is pre-defined, and for each component possesses individual keys. To learn which keys can be used on which components, please read section C in the appendix of my paper.

^slide = { /* This is a BlockProperty */
    $page = 1 
    $name = "Slide 1" /* These two are InlineProperty*/
}

The following InlineProperty must be defined within the RootProperty.

An entire example of ILV document, please refer to the testing.ilv document in the testing directory.