The web framework has layouts now

and I’m excited about it, and it’s been forever since I wrote something, so this seemed like a good opportunity.

Anyways, hi! I made this blog in hopes I could use it to talk about technical stuff I work on, but my life has been a tornado recently, so I couldn’t do personal work or write. More on that some other time. Right now, I’ve made a neat discovery about what I can do with the web framework that I’ve been working on.

Refresher

Today is a web framework focused on enhancing static websites. It’s not meant to dethrone React, just add some conveniences, like reusable components and templates for data loading. You can make pages:

package main

import (
    "git.sr.ht/~early/today/web/page"
)

var Index = page.New("index", "index.html", nil)

<!-- index.html -->
<h1>Hello, world!</h1>

You can load data and render it in the page with a template:

package main

import (
    "git.sr.ht/~early/today/web/page"
    "git.sr.ht/~early/today/web/render"
)

var Index = page.New("index", "index.html", &page.Config{
    // When the page loads, set .name to Early.
    OnLoad: func(r *http.Request, data render.Data) error {
        data.Set("name", "Early")
        return nil
    },
})

<!-- index.html -->
<h1>Hello, {{.name}}!</h1>

<!-- output -->
<h1>Hello, Early!</h1>

You can create reusable template parts and use them as custom elements:

package main

import (
    "git.sr.ht/~early/today/web/page"
    "git.sr.ht/~early/today/web/part"
    "git.sr.ht/~early/today/web/render"
)

var Message = part.New("my-message", "my-message.html", &part.Config{
    // When the page loads, set .name to Early.
    OnLoad: func(r *http.Request, data render.Data) error {
        data.Set("name", "Early")
        return nil
    },
})

var Index = page.New("index", "index.html", &page.Config{
    Import: page.Import(Message),
})

<!-- my-message.html -->
<h1>Hello, {{.name}}!</h1>

<!-- index.html -->
<my-message></my-message>

<!-- output -->
<my-message>
    <h1>Hello, Early!</h1>
</my-message>

And you can pass data to template parts with data attributes:

package main

import (
    "git.sr.ht/~early/today/web/page"
    "git.sr.ht/~early/today/web/part"
    "git.sr.ht/~early/today/web/render"
)

var Message = part.New("my-message", "my-message.html")

var Index = page.New("index", "index.html", &page.Config{
    // When the page loads, set .name to Early.
    OnLoad: func(r *http.Request, data render.Data) error {
        data.Set("name", "Early")
        return nil
    },
    Import: page.Import(Message),
})

<!-- my-message.html -->
<h1>Hello, {{.name}}!</h1>

<!-- index.html -->
<my-message :name=".name"></my-message>

<!-- output -->
<my-message>
    <h1>Hello, Early!</h1>
</my-message>

Finally, you can use slots to control where markup can be inserted in a template part:

package main

import (
    "git.sr.ht/~early/today/web/page"
    "git.sr.ht/~early/today/web/part"
    "git.sr.ht/~early/today/web/render"
)

var Message = part.New("my-message", "my-message.html")

var Index = page.New("index", "index.html", &page.Config{
    // When the page loads, set .name to Early.
    OnLoad: func(r *http.Request, data render.Data) error {
        data.Set("name", "Early")
        return nil
    },
    Import: page.Import(Message),
})

<!-- my-message.html -->
<slot name="before-message"></slot>
<h1>Hello, {{.name}}!</h1>

<!-- index.html -->
<my-message :name=".name">
    <p slot="before-message">This goes before the message!</p>
</my-message>

<!-- output -->
<my-message>
    <p>This goes before the message!</p>
    <h1>Hello, Early!</h1>
</my-message>

Updates since last time

Before moving on, here’s what’s happened since the last post. It’s not a ton due to my life circumstances, but I’m happy with the direction of things and to be back working on it!

I moved to sourcehut for hosting! My server had to come down, and I’m happy with the services and features sourcehut provides, so Today will be hosted there from now on. Maybe even other projects too :3
Internally, Go’s standard HTML parser has been replaced with a custom parser that understands templates. This is to help with features down the line, and to make the preprocessing steps on HTML documents less focused on coercing odd parser output.
Some syntax has changed.

Static websites and layouts

Because the mission is to support static websites, there’s been pretty extensive support for static HTML/other file directory structures. Previously, when running app.Static to convert a directory tree to an HTTP server, non-HTML files were served as-is and HTML files were compiled to pages with no extra configuration. Since, in practice, a lot of the pages on my websites have the same extra configuration, I changed app.Static to accept a config for all pages. It turns out this is pretty helpful! While starting the frontend for a different website using Today, it occurred to me I could probably do something like this:

package layout

import (
	"git.sr.ht/~early/today/web/part"
)

var BaseLayout = part.New("base-layout", "base-layout.html", &part.Config{
    // This gets rid of the custom tag when adding a part to a page.
	NoCustomTag: true,
})

<!-- base-layout.html -->
<!DOCTYPE html>
<head>
    <title>{{ .title }}</title>
    <link rel="shortcut icon" href="/favicon.svg" type="image/x-icon">
    <link rel="stylesheet" href="/style.css">
    <slot name="head"></slot>
</head>
<body>
    <header>
        <h3 class="logo-text">Searchlight</h3>
        <nav>
            <a href="/en/">Home</a>
        </nav>
        <div class="spacer"></div>
    </header>
    <main>
        <!-- Anything without a slot attribute goes here! -->
        <slot></slot>
    </main>
    <footer></footer>
</body>

<!-- index.html (served statically) -->
<base-layout :title="Searchlight">

    <!-- You can add to the head through the "head" slot. -->
    <link rel="stylesheet" href="index.css" slot="head">

    <!-- Anything else goes in the slot in main. -->
    <h1>Searchlight</h1>
    <p>Test</p>

</base-layout>

This is not what I had in mind when I made reusable parts. The idea was they’d encapsulate, reuse, and distribute important behavior with a bit of markup attached; this forgets about the behavior and turns a template part into the base structure of the page instead. I was surprised and very happy to find that it works great, and now that pages are served statically there is nothing stopping every static page from using a part as a layout in this way. This has opened up the opportunity for varied base layouts in static site development!

That’s all I really have to add. Thought it was neat.

Conclusion

I don’t have a good way to end this, but I’m trying to reduce the amount of pressure I feel when writing so I’m going to end it anyways. I do think some folks will say this is reinventing the wheel; they are correct, but it’s fun and I’ll keep on doing it. Thanks for reading!