Example: Website Structure

This example uses Suzu to define a website structure that can be converted to HTML by a server application.

The server would insert page content into Main and read the resulting structure from Document.

Configuration

## Site Properties ##

Title: "Suzu"
Tag:   "Configuration language"

Banner: markdown """
    **Welcome!**
"""

## Navigation Menu ##

Nav := Block.{
    Id: "nav"
    Size: 20
    Content: |=|Button {
        |Text      |Action         |
        | "Home"   | loc "/"       |
        | "Syntax" | loc "/syntax" |
    }
}

## Page Structure ##

Document = Column.{
    Content:[
        # Show banner if not empty.
        if $Banner as boolean {
            Row.{
                Align: Center
                Content:[
                    Block.{Content:[$Banner]}
                ]
            }
        }

        # Populate page header.
        Row.{
            Id: "header"
            Size: 5, Align: Center
            Content:[
                Block.{Content:[$Title]},
                Block.{Content:[$Tag]},
            ]
        }

        # Populate navigation menu and main content.
        Row.{
            Content:[
                Nav,
                Block.{
                    Id: "main"
                    Content:[Main]
                },
            ]
        }
    ]
}

Prelude

@ContainerType enum {
    Column
    Row
    Block
}

Container {
    Type    :natural
    Id      :sequence
    Size    :natural
    Align   :natural
    Content :list{any}
}

@Container {
    @Align enum {
        Left
        Center
        Right
    }
}

Column: Container.{ Type:ContainerType.Column }
Row:    Container.{ Type:ContainerType.Row }
Block:  Container.{ Type:ContainerType.Block }

Button {
    Text   :sequence
    Action :natural
}

Document :mut sequence
Main     :sequence