Create Views & Routes

Table of Contents

1. Installing
2. Site-Wide Configuration
3. Create Controllers
4. Create Views & Route
5. Advanced Routing

---

Putting it All Together

We are finally ready to create our routes and views. We will define the endpoints that can be visited, and what response they provide.

1. Start by creating a file inside your "assets/js/views" folder. Call the file "index.blz.js". This will contain the page actions and routes for all actions under the "index" controller. Add the following to your file:

function build_routes(page){
    let data = {};
    switch(page){
        case 'about':
            data = {
                pageNum: 1,
                content: about()
            };
            break;
        case 'home':
        default:
            data = {
                pageNum: 0,
                content: home()
            };
            break;
        }
    return data;
}

That is your route declaration, in it we've assigned the endpoints home to route to the function home() and about to route to the function about().

2. Next, we will define functions for each of our actions, as so:

function home(){
    return `
        <div class="max-w-screen-xl px-4 py-32 mx-auto lg:h-screen lg:items-center lg:flex">
            <div class="max-w-xl mx-auto text-center">
                <h1 class="text-3xl font-extrabold sm:text-5xl">
                We turn Dreams
                <strong class="font-extrabold text-red-700 sm:block">
                    into Reality.
                </strong>
                </h1>
        
                <p class="mt-4 sm:leading-relaxed sm:text-xl">
                Discover the amazing Blazed Fire!
                </p>
        
                <div class="flex flex-wrap justify-center gap-4 mt-8">
                <a href="/blazed-space/fire" class="block w-full px-12 py-3 text-sm font-medium text-white bg-red-600 rounded shadow sm:w-auto active:bg-red-500 hover:bg-red-700 focus:outline-none focus:ring" href="/get-started">
                    Repo
                </a>
        
                <a href="https://www.blazedlabs.com/fire-and-ice-solution/" class="block w-full px-12 py-3 text-sm font-medium text-red-600 rounded shadow sm:w-auto hover:text-red-700 active:text-red-500 focus:outline-none focus:ring" href="/about">
                    Learn More
                </a>
                </div>
            </div>
        </div>
    `;
}

function about(){
    return `
        <h1 class="text-3xl text-center font-bold">
            About Fire for HTML5
        </h1>
        <p>
            Fire is an HTML5 and javascript framework. It is very simple and very fast.
        </p>
    `;
}

That's it, you're ready to go! Load up the website, and prepare to be amazed!