Tutorial

### Create a loader The first thing you should do is to make a loader file that will load the current MereTheme files. If you want to upgrade the version of MereTheme you are using later, you can change the CDN addresses in this file. 1. Create a file named loader.js 2. Paste this code into the file.

const merethemeStyleCDN = "https://cdn.jsdelivr.net/gh/fabeline/meretheme@v0.4.0/lib/meretheme.css";
const merethemeCodeCDN =  "https://cdn.jsdelivr.net/gh/fabeline/meretheme@v0.4.0/lib/meretheme.min.js"

window.addEventListener('load', function() {
    var script = document.createElement('script');
    script.src = merethemeCodeCDN;
    document.head.appendChild(script);

    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = merethemeStyleCDN;
    document.head.appendChild(link);
});

### Create a garden Then you can create your garden. This is the page wrapper that will be shown around every page/house. It can for instance include a heading, menu and a footer. To create a garden, you can do the following: - Create a basic html file named **index.html** - Add the **meretheme.js** script and the **meretheme.css** stylesheet - Defining that this is the garden, by adding **data-mt-type="garden"** to the body tag - An entrance door to the house by adding an iframe - (Note that your page will not work correctly before we have created the home house)

<!DOCTYPE html>
<head>
    <title>MereTheme test</title>
    <script src="./loader.js"></script>
</head>

<body data-mt-type="garden" style="opacity: 0;">
    <h1>MereTheme</h1>
    <iframe data-mt-type="entrance-door" src="houses/home.html"></iframe>
    <p>Powered by MereTheme</p>
</body>
</html>

### Create a house The house is the main content of the page. Do the following to create your first house: - Create a folder named **houses** - Create a basic html file named **home.html** in the **houses** folder - Add the **meretheme.js** script and the **meretheme.css** stylesheet - Add **data-mt-type="house"** to the body tag of the house to define it as a house - Note that MereTheme also supports a deeper structure. For instance houses/blogg/20240420.html

<!DOCTYPE html>
<head>
    <title>Home</title>
    <script src="../loader.js"></script>
</head>

<body data-mt-type="house" style="opacity: 0;">
    <h2>Welcome!</h2>
    <p>This is the home house</p>
</body>
</html>

Now you can double click on your index.html file and see that it loads both the garden with the heading and the house

### Create paths to the houses A path leads to a house in the garden, like a link. Let's first create another house. - Create a file named **page1.html** in the **houses** folder

<!DOCTYPE html>
<head>
    <title>Page 1</title>
    <script src="../loader.js"></script>
</head>

<body data-mt-type="house" style="opacity: 0;">
    <h2>Page 1!</h2>
    <p>This is the page 1 house</p>
</body>
</html>

Then we will add path to the houses in the garden. Add the following to the garden (index.html):

<a data-mt-type="path" href="index.html">Home</a>
<a data-mt-type="path" href="houses/page1.html">Page 1</a>

You can now test your page and see that you switch between the home and page 1 houses by clicking the links. The paths can be added both in the garden, house or rooms for internal linking.

## Create a room A room is a reusable component that can be shared across houses. Let's create a room that we can use in both houses. - Create a folder named **rooms** - Create a basic html file named **box.html** in the **rooms** folder - Add the **meretheme.js** script and the **meretheme.css** stylesheet - Add **data-mt-type="room"** to the body tag of the room to define it as a room - You can set the width of the room container, but the height will be adjusted to the content

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../loader.js"></script>
</head>

<body data-mt-type="room" style="opacity: 0;">
    This is a reusable box with text 📦
</body>
</html>

### Add the room to a house You can now add the room any times to any house or garden by adding the following to the html file:

<iframe data-mt-type="room" src="../rooms/box.html"></iframe>

Tips

If you want to run some JavaScript after the page has loaded in your house, you can listen to the "afterResize" message. Note that it will be called on every resize, so make sure it can be called several times.
When linking externally inside a house or room, you should use target="_top" or target="_blank" to avoid opening it inside an iframe.

What's next?

You can check out the integrations to add styling, icons and content.