Creating your own tags

Tags are the basic building blocks of websites powered by SunSed. Their basic functionality is to abstract blocks of HTML. Imagine the following HTML code:

INPUT
<div style="border:2px solid black;padding:10px;">
    <b style="text-decoration:underline;padding-right:10px;">NOTE</b> this is important.
</div>
RESULT
NOTE this is important.

We can improve the above code by creating a class and putting the CSS in a separate file but even then, you need to repeat the <div><b>... every time you want to create a NOTE on your website. Also, managing the style sheet in a separate CSS file does not scale well. SunSed tags solves both of these problems:

INPUT
<s:tag name="note">
    <div style="border:2px solid black;padding:10px;">
        <b style="text-decoration:underline;padding-right:10px">
            NOTE
        </b> 
        <s:put>@content</s:put>
    </div>        
</s:tag>

In the above code, we created a new tag called note and the content we pass to this tag will be replaced by @content using the s:put.

Now all we need to do is to use the <note> tag instead of the block of HTML. Like this:

INPUT
<note>This is a test.</note>
RESULT
NOTE: This is a test.
INPUT
<note>This is another important message.</note>
RESULT
NOTE: This is another important message.

Improving the CSS

We have successfully created our tag <note>. But, there is one problem. We are repeating the same style="..." every time we call this tag. To solve this problem we use a class and dynamically add the CSS to our page using s:style tag -- SunSed automatically handles adding CSS to your HTML document.

INPUT
<s:tag name="note">
    <s:style>
        .note {
            border:2px solid black;
            padding:10px;
        }
        .note b {
            text-decoration:underline;
            padding-right:10px;
        }
    </s:style>
    <div class="note">
        <b>NOTE</b> 
        <s:put>@content</s:put>
    </div>        
</s:tag>

Now we have redefined (yes, you can redefine existing tags) our tag <note> and from now on it uses class="" instead of style="".

One of the most useful feauters of creating tags is that you don't have to separate your CSS and HTML code! Next time you want to change the style of a tag you know where to look for.

Where to define new tags

You can define them in any file! But, it's recommended to define each individual tag in a separate file inside the _app/tags/ folder. That way, you know where to find them.

Using Shortform HTML Tags

You can use Shortform HTML tags to easily call your custom HTML tags — instead of using the HTML syntax.

INPUT
<note> This is my note!</note>

Attributes

Just like in HTML, we use attributes to modify the behaviour of a tag. Let's use the attribute title="" to dynamically modify our <note> tag and send different types of notes to the user (e.g. warning, reminder and more).

INPUT
<s:tag name="note">
    <s:style>
        .note {
            border:2px solid black;
            padding:10px;
        }
        .note b {
            text-decoration:underline;
            padding-right:10px;
        }
    </s:style>
    <div class="note">
        <b><s:put>@title</s:put></b> 
        <s:put>@content</s:put>
    </div>
</s:tag>
INPUT
<note title="warning">This is another note.</note>
RESULT
warning The same tag is used to send this warning.

Scope

What is the @ in front of content and title you might ask. Well, those are local variables (local to the scope of your tag definiton). Every time, you call your defined tag like: <note>...</note> SunSed language passes the ... (content of the tag) as a local variable to the tag definition. It works the same for all the attributes.

Learn more about scope here.