Wave

A markup language that transpiles its syntax to HTML with inline CSS.

Wave is a minimalist markup language that transpiles to HTML + CSS. The transpiled document is viewed using a web browser.

1. Getting Wave

Wave is available for free on Github. Wave is available in source code form only.

Wave on Github:

This documentation for Wave is written in Wave itself.

Before compiling Wave, make sure that you have the following things installed:

• The Go Programming Language
• GNU Make
• A Web Browser

Clone Wave onto your system:

     $ git clone https://www.github.com/KILLinefficiency/Wave.git

Build Wave:

     $ cd Wave

     $ make

An executable for Wave will be produced. You can use the executable as it is or add it to your PATH environment variable.

For a Non-Unix system like Windows, which does not support GNU Make natively, compile Wave directly.

     > git clone https://www.github.com/KILLinefficiency/Wave.git

     > cd Wave

     > go build wave.go lib.go themes.go defaults.go variables.go contentLib.go htmlTemplates.go

2. Structure of a Wave script

A Wave script is written in a plain text file. Wave scripts do not follow any extension. You can have an extension for a Wave script or not as long as it's a text file. However, it's better to have a .txt extension.

2.1 Compiling a Wave script

A Wave script can be compiled by passing it to the Wave transpiler as a command-line argument.

     $ wave guide.txt

The transpiler generates a .html file of the same name. This is the final document.

A Wave script consists of three different types of keywords:

1. The Page Property Keywords
2. The Content Property Keywords
3. The Content Keywords

2.2 The Page Property Keywords

The page property keywords start with the symbol ~. These properties apply to the entire document. These properties include some important elements that define the look of the document.

Here's a table of the page properties and their uses:

2.3 The Content Property Keywords

The content property keywords start with the symbol !. These properties apply to the entire content that comes after the declaration of the content property. These properties define the look of the content in the document.

Here's a table of the the content properties and their uses:

2.4 The Content Keywords

The content keywords start with the symbol $. These keywords define the contents of the document. Contents include text, pictures, tables, etc.

Here are all the content keywords explained:

2.4.1.      $text

As the name suggests, $text adds text in the document.

~bg green
!color yellow
$text Hello!

2.4.2.      $nl

$nl adds new line(s) in the document. By default $nl adds only one new line, but more new lines can be added by specifying the number to $nl. Like, $nl 5 for five new lines.

!align center
$text Hello World!
$nl 3
!align right
$text How are you?

2.4.3.      $link

Insert a link in the document using $link.

$link https://www.github.com ; Github

The default delimiter (;) can be changed to any other character using the content property !sep.

!sep ,
$link https://www.github.com , Github

2.4.4.      $mail

Like $link, $mail allows you to add mail addresses in the document.

$mail oliverqueen@queenconsolidated.com ; Contact Oliver Queen

The default delimiter (;) can, of course, be changed with the content property !sep.

2.4.5.      $file

$file reads the contents of a file and adds them to the document.

$file some_random_file.txt

The file is read as it is in Wave. The default tab used while reading is 4 spaces. However, you can use the !tab content property to change this.

!tab 8
$file some_random_file.txt

This sets the tab to 8 spaces.

2.4.6.      $quote

Use $quote to add quotations in your document.

$quote "Being happy doesn't mean you don't have issues. It just means that you're working on them."<br><br>- Oliver Queen

2.4.7.      $pic

Insert images into your document using $pic. Pass the absolute or relative path of the image to $pic.

$pic resources/images/batman.png

You can also specify the dimensions of the image using the !dim content property. Specify the width and the height of the image respectively in pixels, separated by the character x.

!dim 750x500
$pic resources/images/batman.png

You can also choose to set only the width of the image.

!dim 750x
$pic resources/images/batman.png

In the same way, you can also choose to set only the height of the image.

!dim x500
$pic resources/images/batman.png

Also, you can set the size of the image back to normal.

!dim x
$pic resources/images/batman.png

2.4.8.      $points

Add a list of points in your document using $points.

$text Bat Family:
$nl
$points Bruce Wayne ; Alfred Pennyworth ; Lucius Fox ; Dick Grayson ; Jason Todd ; Tim Drake ; Damain Wayne ; Barbara Gordon

The default delimiter (;) can be changed using the content property !sep.

You can also change between ordered and unordered lists and change their styles. Use the !points-type content property to switch between ordered list (ol) or unordered list (ul). Use the !points-style content property to change the style of the points.

!points-type ol
!points-style lower-roman
$points Oliver Queen ; Bruce Wayne

$nl 2
!point-type ul
!points-style square
$points Green Arrow ; Batman

The point styles used in Wave are the same as the list styles used in HTML.

2.4.9.      $check

Add checkboxes inside the document using $check.

$text Guest List:
$check Oliver Queen ; Barry Allen ; Kara Danvers ; Clark Kent ; Kate Kane ; Bruce Wayne

The default delimiter (;) can be changed using the content property !sep.

2.4.10.    $table

Add tables in your document using $table. The items for the rows are separated by the default delimiter (;) and the rows are separated by the default column separator (|).

$table Name ; Alias | Oliver Queen ; Green Arrow | Barry Allen ; The Flash

Tables can be made with any number of rows and columns. Like,

$table Name ; Alias ; Abilities ; City | Oliver Queen ; Green Arrow ; Archery and hand-to-hand combat ; Star City | Barry Allen ; The Flash ; Super Speed ; Central City | Clark Kent ; Superman ; Superhuman Strength ; Metropolis | Bruce Wayne ; Batman ; Detective skills and hand-to-hand combat ; Gotham

The item separator and the column separator can be changed using the !sep and the !colsep content properties respectively. Like,

!sep ,
!colsep -
$table Name , Alias - Oliver Queen , Green Arrow - Barry Allen , The Flash

2.4.11.    $html

Add inline HTML in your document using $html.

$text This is being written using Wave syntax.
$html <marquee>Hello from HTML!</marquee>

3. More Utilities

3.1 Themes

Wave allows documents to have themes. The colors change their shades according to the selected theme. Set the required theme using the ~theme page property.

~theme HorizonDark

Make sure to add the ~theme content property at the very top of the document for the theme to properly take effect.

You can choose from the following themes:

1. Default
2. OneDark
3. Dracula
4. Monokai
5. GruvboxLight
6. GruvboxDark
7. SnazzyLight
8. LaserWave
9. HorizonLight
10. HorizonDark
11. Nord
12. Synthwave84
13. Tomorrow
14. TomorrowNight

Theme names are case sensitive.

3.2 Variables

Set variables in a Wave script using the ~set page property. Variable names cannot have spaces in them.

~set person1 Oliver Queen
~set person2 Bruce Wayne

This will set the values of person1 and person2 to Oliver Queen and Bruce Wayne respectively.

Call the variables using the % symbol. Like,

~set person1 Oliver Queen
~set person2 Bruce Wayne
$text %person1 meets %person2.

The value of the same variable can be changed multiple times.

~set Robin Jason Todd
~set Robin Tim Drake
$text %Robin is the new Robin.

Use %- to escape the % symbol. Like,

~set name Barry Allen
$text %-name

This will render %name in the document and not Barry Allen.

3.3 Special Characters

Wave also supports special HTML characters. Some of the mostly used special characters come as variables in Wave.

Here's the table of some of the special characters available as variables in Wave:

These special character variables can be overwritten if you use the ~set content keyword on them. Therefore, be careful not to override these variables.

HTML tags like <i>, <b> and <br> also work in Wave.