Skip to content

lauratheq/lste

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Lauras Simple Template Engine

This script generates a website to ./dist out of the given template parts, the assets and the content itself. It is very simple, lightweight and its purpose is to handle very small websites.

See /example for a simple website template

Usage

Make sure you have python3 installed.

  1. Clone this repository
  2. execute ./lste.py -p ./example -d ./dist to generate a website into ./dist
# NAME
#   Lauras Simple Template Enginge - LSTE
#
# SYNOPSIS
#   ./lste.py [--watch] [--path] [--destination]
#
# DESCRIPTION
#   This script generates a website to ./dist out of the given template
#   parts, the assets and the content itself
#
# EXAMPLE:
#   ./lste.py --path ./website-src --destination ./website
#
# OPTIONS
#   -p|--path         Sets the base directory for the website. If not setted
#                     LSTE uses the current active directory
#   -d|--destination  Sets the directory where the website is rendered to
#   -w|--watch        Automatically generates the website to ./dist
#                     if a file in /src, /assets or /parts changed

Hint: You can also move the lste.py to your local bin directory to use it systemwide

Template Development

This tutorial should help to setup a simple LSTE project:

  1. Create a file lste.conf in an empty folder and fill it like so:
  2. Create the folders ./parts, ./src and ./assets
  3. Place the actual pages in ./src, like index.html or about.html
  4. Use the ./assets folder for you stylesheets, images etc.
  5. Insert your template parts in the ./parts folder

Site Data

The basic site data is stored in the lste.conf. It must have following content:

[lste]
title = My LSTE Project
meta-keywords = these, are, my, keywords
meta-description = My very first LSTE project

These settings are the global settings and data of the project.

Each file in ./src can overwrite this meta data by placing these optional tags in the head of the file:

<!-- [title: My LSTE Project] -->
<!-- [meta-keywords: these, are, my, keywords] -->
<!-- [meta-description: My very first LSTE project] -->

Template Parts

The template parts are simple HTML-files. They can be included by the pages in ./src and by the template parts themself.

The code snippet <!-- [part: my-template-part] --> allocates my-template-part.html in the ./parts folder and includes its content.

Menu

LSTE is relatively stupid and looks for certain simple patterns to determine what a menu is. For example you have a template part sidebar.html in ./parts which looks like this:

<ul>
	<li id="home"><a href="index.html">Homepage</a></li>
	<li id="first-link"><a href="first-link.html">1st Link</a></li>
	<li id="second-link"><a href="second-link.html">2nd Link</a></li>
	<li id="third-link"><a href="third-link.html">3rd Link</a></li>
	<li id="fourth-link"><a href="fourth-link.html">4th Link</a></li>
</ul>

If you are working on the second-link.html site and want the corresponding menu item to have a css-class active simply put following code into the head of your page in ./src:

<!-- [active-menu-entry: second-link] -->

The value none will ignore the menu settings and nothing will be highlighted. Or simply don't use this line in your site.

Assets

LSTE has no further configuration for the assets folder. It simply copies all its content to the destination so you can use anything in there you want.

Other functions

There are built-in functions which display different kind of information

  • <!-- [func: title] -->: Renders the title given by the page in ./src with the tag <!-- [title: My LSTE Project] --> or loads it from the config file
  • <!-- [func: meta-keywords] -->: Renders the meta keywords given by the page in ./src with the tag <!-- [meta-keywords: My very first LSTE project] --> or loads it from the config file
    • <!-- [func: meta-description] -->: Renders the meta description given by the page in ./src with the tag <!-- [meta-description: My very first LSTE project] --> or loads it from the config file
  • <!-- [func: timestamp] -->: Renders a unix timestamp when the page was generated by LSTE

The --watch argument

You can start LSTE with the argument --watch (or -w). It automatically checks for modifications in the folders ./src, ./parts, ./assets and the lste.conf file. If anything changes there or a file is added, the website will be generated automatically.

./lste.py -p ./example -d ./dist --watch

Starts the watcher for the ./example project.

Contributing

Contributor Code of Conduct

Please note that this project is adapting the Contributor Code of Conduct from WordPress.org even though this is not a WordPress project. By participating in this project you agree to abide by its terms.

Basic Workflow

  • Grab an issue
  • Fork the project
  • Add a branch with the number of your issue
  • Develop your stuff
  • Commit to your forked project
  • Send a pull request to the main branch with all the details

Please make sure that you have set up your user name and email address for use with Git. Strings such as silly nick name <root@localhost> look really stupid in the commit history of a project.

Due to time constraints, you may not always get a quick response. Please do not take delays personally and feel free to remind.

Workflow Process

  • Every new issue gets the label 'Request'
  • Every commit must be linked to the issue with following pattern: #${ISSUENUMBER} - ${MESSAGE}
  • Every PR only contains one commit and one reference to a specific issue

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published