Find Out More
Code - 15-01-2017

Project progression


What is KiwiIncluder

When designing a website for ALC (Avocat Loire Conseil) during an internship, I had several constraints. One of them was to have no PHP at all. The only problem with not having PHP is that you have no "include" function to put the same header and footer on each page.

The approach people often take when having this exact problem is copy-pasting on each page. This is somethng I find horryfiing. As I was told during my C class :

If you are copy-pasting, you are doing it wrong.

I found a solution for this : Apache as a built-in module that does it. Unfortunatly, it is complex to use, and still execute at run-time (even though there is problably caching).

I decided to build a genric bash script, easy to use, modify and adapt to existing projects. This diagram shows how it opperates :

Diagram of how it works.


The basic idea is that we browse the current directory for every file within a certain pattern that is defined through variables, include the top and bottom of document for each page, and then do the specific modifications. After, that, we can push the newly generated pages to our site through SFTP (for instance).

The code is available here.

To go further, I would add two thing :

  1. Minify the result pages (delete useless spaces and comments) to make our page even faster ;
  2. Auto-upload the pages to the website.
  3. Integrate the script to the IDE. I personnaly use Sublime Text, in which it is really easy to add scripts each time we save (for instance).

How to use it

Using KiwiIncluder is fairly easy. To begin with, you will have to create a file called "@top_of_doc.html" containing the content that will be pasted on top of the document, a file called "@bottom_of_doc.html" for the content that will be pasted on the bottom, rename all of the content of your pages "@page_NAME_OF_PAGE.html". When you run the script in this folder, it will generate a page for each @page in your folder.

This is usally not enough as the content of each top and bottom may need adjustement (for instance, setting a nav as "active". This is why I included another feature : you can create in your page line that look like "@replace_CONTENT1_with_CONTENT2". This will replace every occurence of CONTENT1 with CONTENT2. Example :

In top file:
<li class="HOMEENABLED">Home</li>

In home file:
<!-- @replace_HOMEENABLED_with_active -->

Run the script on Linux :

  1. Create the page structure.
  2. Move the shell to the directory where theses files are.
  3. Open a console where the files are, and enter the following command "sudo ./". Please note that the "sudo" is only requiered if you are in a root folder (such as /var/www).

Run the script on Windows

  1. Download a bash terminal. I personnally used the Git one. It is certainly not the best choice, but it is portable, not too heavy, and easy to use. Furthermore, you probably already have it anyway (or you should!)
  2. Create the page structure.
  3. Move the shell to the directory where theses files are.
  4. Open a console, move to the folder where your files are (using the "cd" command), and enter the following command "./".

Author: Charles Grassin

What is on your mind?

  • No comments yet!

  Back to projects

Related articles