Example Theme for Simplified Saaze: Mobility

Original post is here: eklausmeier.goip.de

Simplified Saaze is the static site generator, which is used to generate this blog. So far, there are four example themes for Simplified Saaze.

1. Saaze Example: By choice, this design is very simple.
2. Saaze J-Pilot: This design contains top-menus with sub-menus, pages in English and German, a blog, responsive elements. Demo.
3. Saaze Koehntopp: Based on Bootstrap CSS, modeled after Type on Strap. Demo.
4. Saaze NukeKlaus: Based on Twenty Sixteen/WordPress, multicolumn, hero image, light+dark mode. Demo.

Here is another theme, called Mobility, modeled after the website open-e-mobility.io (dead link) from SAP Labs France. That website was built using Avada Website Builder. Some characteristics of open-e-mobility.io (dead link):

1. Responsive design with three, two, or only one column for index page
2. Blog with hero image for each blog post
3. Multi-lingual: English, German, and French
4. Various effects on pages: drop-shaped images, buttons for hyperlinks, lists with icons for numbering, hovering and opacity change for images
5. RSS feed
6. Hamburger menu, hoverable menu
7. Scroll-to-top button ("chevronButton")

My aim was to look roughly similar to the original website but dropping some of the effects, dropping contact-form (as e-mail is already provided), dropping accordeon effect for FAQ-page (deemed difficult to read for end user).

The source code for this theme is here: saaze-mobility. The demo-site is here: mobility.

Using Simplified Saaze will further provide MathJax, Twitter, CodePen, image galleries, sitemap, and all the other goodies. In particular it is quite easy to add

1. Search functionality, if you have PHP on the web-server
2. Light and dark mode

1. Comparison. In Analysis of Website Performance #2 I measured performance of the original open-e-mobility.io (dead link) website. Measurement was done by using pingdom. The performance of the original site is not too bad, but not really fast. Accessing the home page from Frankfurt is ca. two seconds. The new site is a tenth of that.

Another comparison regarding the blog index: The Open E-Mobility blog (dead link) vs. Simplified Saaze version.

It was an explicit goal to be fast.

2. Installation. Run

1composer create-project eklausme/saaze-mobility

This will copy the files of this Git repository, it will also install Simplified Saaze. To run Simplified Saaze you still need to compile one C program, install one PECL (PHP extension), and configure one PHP file. This is something you have to do only once. These steps are described in Installation.

1. install php-yaml extension, see PECL's Yaml Way Faster Than Symfony's Yaml
2. compile php_md4c_toHtml.c

Once everything is installed, switch to the directory and run

1php saaze -mr

Runtime should be a fraction of a second. The options used:

1. -m is used to generate a sitemap
2. -r generates RSS XML feed

Assuming you installed everything in ~/saaze-mobility, then for deployment on my local web-server I use below command line:

1( rm -rf /srv/http/mobility; cd /srv/http; mv ~/saaze-mobility/build ./mobility ; cd mobility; ln -s ~/saaze-mobility/public/img )

3. Conversion. For the conversion of open-e-mobility.io (dead link) to Markdown I simply used copy-and-paste from browser page directly. This approach is feasible here, as the original website only contains very few pages, and each pages contain few text. I converted only 31 pages.

4. Templates and configuration. There are two so called collections, blog.yml and auxil.yml. Both set rss: true, and set entry_route: /{slug}. So blog posts and auxiliary pages "mix" at the top directory.

Many Markdown files contain three additional entries in frontmatter managing multi-lingual. For example:

1lang: "en"
2de: "de/de-home"
3fr: "fr/accueil"

Entry lang sets the language, in which the entry is shown. In above example the language is English. The German translation is to be found in de/de-home. The French translation is found in fr/accueil. If there is no translation available you drop the entry in the yaml-file.

The blog entries contain another yaml entry for the hero image. For example:

1heroimg: "microphone_01-1-400x267.jpg"

This denotes where to find the hero image. The entry-template checks whether a hero image is present.

Templates are pretty standard:

• An entry.php for all entries, except blog-indexes.
• index.php for the blog index.
• error.php for any system error messages.
• top-layout.php for the commonalities at the top, which is further split into a separate header.php. top-layout.php also contains all CSS.
• bottom-layout.php contains all commonalities for all bottom parts of all pages.

Care has been taken in the templates to keep everything relative, i.e., the site can be moved up or down in the file hierarchy. One aid here is the use of the $rbase (relative base) variable.