Fipamo Theme Kit

So in the course of making Fipamo, the need arose to make a thing that made making and editing themes a bit easier. HENCE THE CREATION OF FTK.

Ok, so that was a bit more dramatic than it needed to be, but yeah, this is how you can make pretty front ends for Fipamo sites.

It's pretty easy to use. Just clone it and and then run the famous npm install to get the bits you need to run it and there you're ready to get own.

The kit comes with two themes, light and dark, to get you started but let's go over a couple of the finer points.

Currently the kit uses pug for templating and stylus for css. There's also a JS template written in ES6 to get you started if some scripting is needed. All of these files are used to render to plain old HTML, CSS and Common JS.

Ok so let's take a look at the structure of theme kits. For the purposes of this guide, let's call our new theme jamila. Heh, yeah.

• theme-jamila - This is the folder that holds all your stuff for this theme
  • com - This is for your JS files.
  • jamila - This is contains the pug template files and rendered css and js assets. This is the folder you move to content/themes in your Fipamo install.
  • styles - All of the stylus files used for css rendering
  • theme.json - This is the config file that identifes theme your working on. Very important.

The FTK uses the lovely Parcel to handle file rendering and previewing. To spark this up, you'll have to make a new script that looks specifically at the jamila theme you're making.

Ha, don't get nervous. There are couple of examples you can use to make this easier. So, for example lets's use the default-light script and change it to what we need it to do.

The current default-light script is as follows: stylus -w -m -o src/themes/theme-default-light/default-light/assets/css src/themes/theme-default-light/styles/base.styl & parcel watch src/themes/theme-default-light/com/Start.mjs --out-dir src/themes/theme-default-light/default-light/assets/scripts --out-file start.min.js & parcel src/themes/theme-default-light/default-light/*.pug

Wherever you see default-light change it to jamila so the script looks like stylus -w -m -o src/themes/theme-jamila/jamila/assets/css src/themes/theme-jamila/styles/base.styl & parcel watch src/themes/theme-jamila/com/Start.mjs --out-dir src/themes/theme-jamila/jamila/assets/scripts --out-file start.min.js & parcel src/themes/theme-jamila/jamila/*.pug

Easy peasy. Now make a reference to your brand new render script such as dev-jamila so you can start run npm run dev-jamila and you're ready to make pretty things.

Parcel will set up a local server so you can check out the changes your making at http://localhost:1234/ so if you want took at the new index page you're styling, check out http://localhost:2314/index.html

The base template files for fipamo themes are as follows:

• frame.pug - Base structure for all pages.
• index.pug - The index page.
• page.pug - The general page for Fipamo posts.
• tags.pug - Handles tagging groups for Fipamo sites
• archives.pug - The archive page that displays all published pages.

Stand in data for these pages exists in pug.config.js.