Create a page app

Having the menu in one place is great, but our page layout is repeated in many files. Let's create a page app and use that by all of our pages.

Create the file /src/page, set its type to sjs-4et and copy the contents of the root file into it.
Empty the body of the root file and set its type to /src/page.

At this point, you can visit your root page and it will work just as before.

What is going on here? When you visit the root file, its file type points to another file, so that will be executed instead. Of course, we want to have different content on our pages, so let's continue.

Create the file /main. No need to set its file type.
Create the file /main/content, set its type to sjs-4et and its body to:

1
2
3
4
5
6
7
8
9
<div class="t1 font-32">
    Home
</div>
<div class="t1 mt-16">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In volutpat neque turpis, vel varius massa tincidunt non. Aliquam vitae neque ligula. Mauris et consectetur massa. Donec egestas est ac mauris molestie, et fermentum libero hendrerit. Etiam mollis, sapien ut porta sodales, diam elit fringilla tortor, vitae accumsan nibh mi eu risus. Sed porta quam ullamcorper arcu facilisis, vel sollicitudin turpis pharetra. Cras tristique luctus nisi. In eget massa mattis, sagittis orci et, rutrum sem.
</div>
<div class="t1 mt-16">
    In dui libero, porta at eros at, condimentum mattis dui. Etiam commodo nunc eget erat elementum, sit amet commodo libero vulputate. Vestibulum fringilla vehicula elit vitae lacinia. Duis tempor lobortis sapien, nec vulputate nisl luctus eu. Ut posuere tortor et pulvinar fringilla. Praesent fermentum viverra odio. Curabitur velit magna, venenatis vitae congue quis, sollicitudin vitae neque. Mauris enim massa, dapibus ut consectetur vitae, pellentesque id quam. Donec maximus, orci id accumsan eleifend, enim augue vestibulum dui, rutrum lobortis dui diam nec quam. Aliquam dui elit, rutrum ac nisi eu, bibendum dignissim arcu.
</div>
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Open the /src/page file's body and replace the contents on that page with:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
</head>
<body class="t1 t1-start bg-c-blue-500">
    <div class="t1 flex flex-center w-full">
        <?== source.select('/src/menu').inline(false) ?>
    </div>
    <div class="t1 flex-1 flex justify-content-center w7:mb-64">
        <div class="t1 w-full max-w-640 w10:max-w-800 px-16 py-32 w6:px-32 w6:py-48 w10:p-64 w6:shadow-8 bg-c-white min-h-80vh">
            <?== f.query('main/*').inline() ?>
        </div>
    </div>
</body>
</html>
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

We are primarily interested in this line:

<?== f.query('main/*').inline() ?>

When a page is visited, the /src/page app will be executed. The source variable within its code will always reference /src/page file while the variable f will reference the actual page the user is visiting. f.query() will search the filesystem and return matching files. In this case, when the root file is visited, f will point to the root file. Finding main/* will only match the /main/content file under it. So, this file will be inlined into the page.

Let's visit the root page to see the results!

Okay, time to update all the other pages too. Change their file types to /src/page, create the main/content files under all of them, and move the relevant HTML code in there.

Also, make sure to empty the file body of each of the original page files to keep things nice and tidy.

Visiting all our pages, they should work like before. But now, we can change the background-color of all our pages in one place and all of them will be updated.

This helps you work faster and it also guarantees a coherent user experience for our visitors.

Next: Adding images