Getting Started - novovu/Novovu-Argon GitHub Wiki

First, hop over to the releases page and get yourself the latest version of Argon.

Let's create the following folders in your Argon directory:

• Compositions
• Elements
• Scripts
• Styles

Let's create a CSS style in Styles/ folder called "hdg.css" while it won't be used during this tutorial, you can certainly try it out. REMEMBER: The styles only apply to a valid HTML element like <h1> and not the custom one we make in this tutorial like <Heading>

When building our elements, it's best that we divvy up what folder we want them in based on the composition (like an HTML document) that we have. For this, I am just gonna create a Global folder that will store elements we want in ALL of our compositions. Inside if our Elements/Global folder I am gonna create a file called "Heading.ag" this will be our first argon element.

<h1>${text}[body]</h1>

What in tarnation is that... Well, "${text}" is a custom property that we can set later. "[body]" indicates where we want to put everything else that is a child of that element in the code. It's important you have that tag. and we are done!

Now let's create a script, in our Scripts/ folder, let's create a file called "metaelements.js" this will store our Javascript for our code. Heres some example code:

element = CreateElement("Heading", {text:"Example!2"});
element2 = CreateElement("Heading", {text:"Example!3"}, element)

If you know Javascript this should be easily parsed. We are basically creating our heading element for the first one, and then in the second one - we are creating a child element under the first one. This is also where the property that we defined earlier comes in handy.

Finally, we need to make a composition that will handle all this code! Let's create a composition file in our Compositions/ folder called "Composition1.agc" this will store the composition we made. Let's enter the following code.

<Includes>
  <Script src="metaelements.js"/>
  <Style src="hdg.css"/>
  <Element src="Global/*"/>
</Includes>
<Heading text="HelloWorld"> 123a <Heading text="bruh.moment"> 123b </Heading> 123c</Heading>

The first part shows what we are including, which also has a CSS file you made earlier. It also shows the source of our document body as well. Including the elements we just made with their bodies that we were working on before.

Once you're doing what you wanted to do, you can then render your changes by doing the following command after opening a command prompt and typing Argon.exe -r Compositions/Composition1.agc outfile.html Open up "outfile.html to take a gander at your changes!