Build A Blog Site around Zap

4 min readMay 6, 2019

Zap is a next generation ethical and privacy-aware social networking platform, which uses the Zot6 protocol. The developer of Zap, Mike Macgirvin, has been building federated networking software for many years.

In this article we will explain a bit about setting up a basic ‘Blog’ site built around the Zap platform.

Installing ZAP ⚡

ZAP is designed to install and run on LAMP systems, however it runs well on nginx httpd server and *BSD systems.

Get ZAP from https://framagit.org/zot/zap/ and follow the instructions in install/INSTALL.txt

Create your templates ⚡

Next we will copy the default template files to our own directory. It’s important not to tinker with the ZAP files, because it becomes very difficult to upgrade the ZAP system software. Pick a name without a space (you can use a dash or underscore if you really want to).

In view/theme directory, copy redbasic to your new directory (modaculta in this example). Use the -a switch to copy everything recursively.

# cp -a rebasic modaculta

We also need a few files that are ‘up’ one level, in the directories ‘tpl’ and ‘php’.

So, if we are still in the theme directory, we copy those using:

# cp ../tpl/navbar_default.tpl modaculta/tpl/
# cp ../php/default.php modaculta/php/

default.php is the overall “main” layout for the site, which starts with <!DOCTYPE> has <head></head> and <body></body> and <html></html>

Now you have to switch to your theme directory (‘modaculta’ in this case’) and change all the occurrences of redbasic to the name of your theme.
(ie, grep -R redbasic). Should be php/config.php, php/style.php, tpl/theme_settings.tpl. Also rename js/redbasic.js to your theme name (js/modaculta.js in this case).

Also, in php/theme.php at the top is “Redbasic” in comments. This text appears in the admin under theme selection, you should change it to the name of your theme to reduce confusion in the admin.

In php/config.php is “class RebasicConfig”, rename this to your theme name, ie “class ModacultaConfig”.

We will add the following file:
modaculta/tpl/hdr.tpl

The contents of the hdr.tpl file will automatically appear in the “<header></header>” section in the layout.

We will use this file to put our logo at the top. (and CSS to dynamically change the size/location for mobile devices)

Note: I set up a NextCloud instance and made a softlink (in ui) to a directory I set up for this project. (modaculta). It’s not required, but an easy way to upload/manange your UI images.

contents of modaculta/tpl/hdr.tpl:

(ZAP automatically loads this file into $page[‘header’] which is put into the layout in modaculta/php/default.php

(you could simply update your default.php file instead of using hdr.tpl)

Then in css/style.css I put the following:

@media screen and (min-width: 993px) {

#mchdr { height: 95px; padding-top:10px; padding-left:50px; }
#mchdr img { width:200px; height: auto; border: 0px; }

}

@media screen and (max-width: 992px) {

#mchdr { height: 60px; padding-top:10px; text-align:center; }
#mchdr img { width:120px; height:auto; border: 0px; }
}

You can update style.css to suit your project. (as well as any of the files in your theme directory). If you want to modify a file outside your theme directory, copy it to the corresponding path inside your theme direct and edit that copy. If you edit existing ZAP files outside of your theme directory, you will likely not be able to easily update the code, which will put you at risk if there are future security issues discovered, etc.

Select your template in the ZAP admin.

ADDONS ⚡

For this project I am using five addons I created. Creating your own addon is not difficult, and there are plenty of examples to learn from.

Here are the addons I created for this project:

couture — I’m using this app to display the “blog” pages
cspga — This app changes the CSP headers so that off-site ads function. (risky business, optional)
spread — This is an app for our alternative blog editor.
tickets — This is a contact/support app. (optional)
webauthn — This is a webauthn 2FA app. (optional)

For this example web site, we may use just “couture” and “spread” addons. Enable/Install them in the ZAP site admin.

“Spread”. This app creates an in-place ‘editable’ page, so when the blog author is on the page they can edit the text in place, using a wysiwyg editor.

For this example I’m using ContentTools WYSIWYG HTML EDITOR by Anthony Blackshaw, http://getcontenttools.com/. I put everything in ‘assets’ directory in my ZAP installation path. I also added a few javascript files, and php files to handle uploads. Download the contents of ‘assets’ below.

Note: it doesn’t support the crop/resize feature quite yet, that’s on my to-do list.

The “Couture” app is used to display the blog post, with comments on the bottom. My default page becomes https://modaculta.com/couture/ (which is configurable in the ZAP admin settings).