Liz Logo Liz

Overview Of Liz Features

Introduction

This page is a brief overview of the features of Liz. Right now there's no dedicated documentation, but this should suffice while we work on that. To follow along you'll need to have Liz installed. You can find instructions for downloading Liz here: link

Hello World

First you'll need to create a new Liz project, you can do it by running the following command:

$ liz init

Then you can delete the contents of src/page.templ and replace it with the following code:

package base

templ Page() {
  <h1>Hello World</h1>
}

Next run the dev server to see the contents of Page() in http://localhost:5490

$ liz dev

File-Based Routing

Liz supports file-based routing, which means you can create pages in the src directory and Liz will serve them based on their directory name.

As we mentioned above, the contents of "src/page.templ" are the root page, if we wanted to serve a page at "/about" we would create the following route "src/about/page.templ"

Metadata

Liz provides the package "liz" that you can import and use to access metadata fields for your page:

  • Title: The title of the page, will be used as the title tag
  • Description: The description of the page, will be used as the meta description
  • Lang: The language of the page, will be used as the lang attribute

package about

import "liz"

var PageMetadata = liz.Metadata{
  Title:       "About me",
  Description: "A page about me",
  Lang:        "en",
}

templ Page() {
  <h1>About me</h1>
}

Layouts

Liz supports layouts, so for every route you can also have a layout.templ

package about

templ Layout(body templ.Component) {
  <header>
    My incredible header
  </header>
  @body
  <footer>
    My incredible footer
  </footer>
}

Right now, you have to follow this exact naming convention for it to work, a function called Layout with an argument called "body" of type templ.Component and then reference the body with @body

HTTP Requests

Liz also covers the HTTP request object, so you can access the request object with the following syntax:

package about

templ Page(
  w http.ResponseWriter,
  r *http.Request) {
  // here you can use the request information
  <p>The current path is: { r.URL.Path }</p>
}

HTTP Methods

As we've seen so far Liz does the routing for us, but what about wanting to handle different HTTP methods like POST, PUT, DELETE?

Liz also covers those cases with the following syntax:

package about

// @route POST /about
func AboutPost(
  w http.ResponseWriter,
  r *http.Request) {
  // your logic here

  // and you could end
  // by redirecting the user
  http.redirect(w, r, "/success", http.StatusSeeOther)
}

As we can see we are not limited to using templ functions, we can also use normal go functions too. Also if we don't specify the HTTP method, it will default to GET.

Escaping Templates

We can escape templates with the following syntax:

package example

// @route /cats
templ CatPage() {
  <div>
    <h1>Meow</h1>
  </div>
}

NOTE: If one of these routes already exists in the file-router, the file-router one will take precedence.

NOTE 2: Another known issue is that the escaped template won't be able to access the page metadata yet as the original idea was for this routes to be used for partials.

Routes With Params

Liz offers two ways to handle routes with params.


The first one is using the file-based router, in that case we are going to prefix the param with an underscore(_), for example src/dogs/_id


The second one is using the @route convention, in that case we are going to wrap our param with {} for example /dogs/{id}


Independently of which one we choose, we are going to use a function provided by the liz package called Param, which will return the value of the param. This function takes two arguments, the request and the name of the param, here we have an example:

package dogs

import "liz"

templ Page(w http.ResponseWriter, r *http.Request) {
  {{ 
    dogID := liz.Param(r, "id")
    dog := retrieveDogByID(dogID)
  }}
  <div>
    <h1>Dog with ID: { dogID } </h1>
    <p>Name: { dog.Name }</p>
    <p>Age: { dog.Age }</p>
  </div>
}

Liz Build

Liz provides a simple way to build your web applications.

To build your application, you can use the following command:

liz build

Right now this will produce a executable for your server and also a public folder with all your static files. In the future we will add more options as exporting all into one binary or render HTML to files.

Conclusion

That's all for now.