Htx Guide

[Tutorial] Layout

Lets now create a layout, so we can simplify our index.htx page.

Layout component

When you are in the root folder of your project run the following to create a src/layouts/Default.htx file.

mkdir src/layouts
touch src/layouts/Default.htx # windows users can either manually create the file or run "new-item src/layouts/Default.htx" in a powershell

And then inside the file we just created write the following

<?php
if(!isset($props["title"])) $props["title"] = "Page";
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $props["title"] ?></title>
</head>
<body>
    <INNER />
</body>
</html>

Here we use a title attribute/property to define the title. If the title is not set we use "Page" as the title. We also allow this component to have children using <INNER />

Now we can change our index.htx to

<!-- import DefaultLayout from "../layouts/Default" -->
<DefaultLayout title="Htx Tutorial">
    Just a small page
</DefaultLayout>

Here we import the layout we just created, give it a title and insert "Just a small page" into the children

Title component

Lets now add a title component in "src/other/Title.htx". You can run in the root the following to achieve this.

mkdir src/other
touch src/other/Title.htx # windows users can either manually create the file or run "new-item src/other/Title.htx" in a powershell

This title will for now just be a simple h1 element, but because it is a component we can easily improve it later on without having to go everywhere it is used. Write the following in the Title.htx file.

<?php
if(!isset($props["name"])) throw new Error("A title component requires a 'name' attribute/property");
?>
<h1>
    <?= $props["name"] ?>
</h1>

Lets now use this in the index.htx page and turn the title in to uppercase

<!-- import DefaultLayout from "../layouts/Default" -->
<!-- import "../other/Title" -->
<?php
$title = "Htx Tutorial";
?>
<DefaultLayout title=$title>
    <Title name=strtoupper($title) />
    Just a small page
</DefaultLayout>
 
 
 
 
 
 
 


if you want to you can also run name=strtoupper($title) into name=(strtoupper($title)). This way if you can easily extend it and use spaces (because it is nested).

Adding a "call" stack

Lets create a list of components that are used. The idea is that we create an array that component can add data to, however we can't just use $call_list, because it is local. Instead we can use $GLOBAL_call_list that is the same variable throughout the entire page and it's components.

Start by changing the Layout file (because it encapsulates nearly every other component)

<?php
$GLOBAL_call_list = [];
array_push($GLOBAL_call_list, "layout/Default");

if(!isset($props["title"])) $props["title"] = "Page";
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $props["title"] ?></title>
</head>
<body>
    <INNER />
    <!-- render call list -->
    <ul>
    <?php foreach($GLOBAL_call_list as $called) { ?>
        <li>Called by the "<?= $called ?>"" component</li>
    <?php } ?>
    </ul>
</body>
</html>

 
 












 
 
 
 
 
 


Now that the $GLOBAL_call_list variable is defined we can modify it in the other components.

Here is the new Title.htx file

<?php
array_push($GLOBAL_call_list, "other/Title");
if(!isset($props["name"])) throw new Error("A title component requires a 'name' attribute/property");
?>
<h1>
    <?= $props["name"] ?>
</h1>

 





Running it

If you convert htx to php and run a local php server (see below). You should see a simple page with "Htx Tutorial" as the page title. You should also be able to see an uppercase h1, "Just a small page" and a list with component calls.

# run in the root of your project
htx
cd dist
php -S localhost:3000
cd ../