Temel

🚀 Html elements server side renderer ️🚀

Introduction

Have you ever felt that Jinja templates are too harsh to work with, however making frontend in JavaScript frameworks makes you 🤮? If so, you’ve come to the right place!

Temel is hybrid combines the flexibility of React-like components with the simplicity of Jinja templates. It allows you to define elements as HTML files, and then use those elements as custom HTML tags named according to their respective file names. Check out an example to see how it works!

Join the support discord and visit the #programming channel for questions, contributions and ideas. Feel free to make pull requests with missing/new features, fixes, etc

Getting started

1. Install the dependencie

pip install temel

2. Define templates

CustomButton.html

<div id="custom-button" style="background-color: green">
    <button>{{name}}</button>
</div>

Layout.html

<div id="layout">
    <header>
        Header section
        <slot.header/>
    </header>
    <article>
        <slot.content/>
    </article>
</div>

Page.html

<layout>
    <layout.header>
        Page Header Message
    </layout.header>

    <layout.content>
        {{% for button in buttons %}}
            <CustomButton name={{button.name}}/>
        {{% endfor %}}
    </layout.content>
</layout>

3. Call the renderer. Let's render Page.html

import temel

if __name__ == '__main__':
    context = {
        'buttons': [
            {
                'name': 'Home'
            },
            {
                'name': 'Settings'
            },
            {
                'name': 'Profile'
            }]
    }
   
    temel.load_templates('C:\\templates')
    output = temel.parse("Page.html", context)
    with open('output.html', 'w') as f:
        f.write(output)

4. See the output file

<div id="layout">
    <header>
        Header section
        <layout.header>
            Page Header Message
        </layout.header>
    </header>
    <article>
        <layout.content>
            <div id="custom-button" style="background-color: green">
                <button>Home</button>
            </div>
            <div id="custom-button" style="background-color: green">
                <button>Settings</button>
            </div>
            <div id="custom-button" style="background-color: green">
                <button>Profile</button>
            </div>
        </layout.content>
    </article>
</div>

Contributing

Library documentation for contributors

Your improvements are welcome! Feel free to open an issue or pull request.