Build A Blog Site around Zap

Waitman Gobble
May 6, 2019 · 4 min read

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.

Image for post
Image for post

Installing ZAP ⚡

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

Create your templates ⚡

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:

<div id=”mchdr”><a href=”https://modaculta.com/couture"><img src=”/ui/modaculta/MODACULTA-800.png”></a></div>

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

<header><?php if(x($page,’header’)) echo $page[‘header’]; ?></header>

(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 ⚡

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.

Image for post
Image for post
Image for post
Image for post

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).

FILES ⚡

assets: https://modaculta.com/assets.tar.gz

and the contents of “spread” here: https://modaculta.com/spread.tar.gz

(in that archive there is an sql definition file)

couture: https://modaculta.com/couture.tar.gz

HELP ⚡

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store