Syntax examples - worksofliam/apug GitHub Wiki
Before and after examples of apug to HTML.
Tag properties are surrounded by brackets after the tag name. The tag value is provided at the end.
a(href='google.com') Google
<a href="google.com">Google</a>
Nested tags are indented. You can still provide properties to all tags here.
p My item list
ul
li Item
li Item
li Item
<p>My item list</p>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
Comments can be on any line and always start with two forward-slashes (//).
//- will not output within markup
p foo
p bar
<p>foo</p><p>bar</p>
It is possible to extend the value of a tag with the use of the pipe (p).
pre
|How
| are you?
<pre>How are you?</pre>
Using APUG_AddVar within your application allows you to use variables within your apug script.
Dcl-S JobUser Char(10) Inz(*USER);
APUG_Init();
APUG_AddVar('user':%Trim(JobUser));
Ptr = APUG('./pug/test.pug');
If you'd like to reference a pre-defined variable, you use the equals sign (=) where you would put a value.
title Test page
h2 Current job user
p=user
<title>Test page</title>
<h2>Current job user</h2>
<p>LIAM</p>
You can also use the equals sign with the pipe (|) notation.
title Test page
h2 Current job user
p
|You are user
|=user
|.
<title>Test page</title>
<h2>Current job user</h2>
<p>You are user LIAM.</p>
It is also possible to use variables inline and elsewhere other than the with the equals (=) sign.
p You are user #{user}.
<p>You are user LIAM.</p>
You can create a div with a class by starting your tag with a dot (.).
.myclass
p Hello world
<div class="myclass">
<p>Hello world</p>
</div>
You can create a div with an id by starting your tag with a hash (#).
#myid
p Hello world
<div id="myid">
<p>Hello world</p>
</div>
You can use the if condition in place of a tag to determine whether a variable exists (from APUG_AddVar).
If the variable exists, then the children code will be generated.
if JobUser
p
|Job user is:
|=JobUser
|.
Include allows you to bring in apug source from another file. It will continue to run in the same scope (indent). The provided path is relative to the user profiles home directory.
.section
include /home/liam/ileastic/pug/include.pug
p
|Hello
| world
| 123
<div class="section">
<p>Hello world 123</p>
</div>
The each keyword allows the pug code to iterate through a pre-defined array.
APUG_AddVar('Items.0.value':'Hello world');
APUG_AddVar('Items.1.value':'Abcd');
APUG_AddVar('Items.2.value':'This is a test');
APUG_AddVar('Items.3.value':'Boo!!');
ol
each item in Items
li
|Text:
|=item.value
<ol>
<li>Text:Hello world</li>
<li>Text:Abcd</li>
<li>Text:This is a test</li>
<li>Text:Boo!!</li>
</ol>