diff --git a/README.md b/README.md index 8f35199..6f2c4c3 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,44 @@ # Fipamo Theme Kit -Just a tool to make creating themes for Fipamo a bit easier..er... \ No newline at end of file +So in the course of making [Fipamo](https://code.playvicio.us/Are0h/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](https://pugjs.org/api/getting-started.html) for templating and [stylus](https://stylus-lang.com/) 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](https://parceljs.org/) 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`. + + + diff --git a/package-lock.json b/package-lock.json index 443ad60..b972642 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "fipamo-theme-kit", - "version": "0.0.1", + "version": "1.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -5841,60 +5841,6 @@ "pug-runtime": "^2.0.5" } }, - "pug-cli": { - "version": "1.0.0-alpha6", - "resolved": "https://registry.npmjs.org/pug-cli/-/pug-cli-1.0.0-alpha6.tgz", - "integrity": "sha1-HKU56krA67ac5KroSu7V1k/+ZQE=", - "dev": true, - "requires": { - "chalk": "^1.0.0", - "commander": "^2.8.1", - "mkdirp": "^0.5.1", - "pug": "^2.0.0-alpha7" - }, - "dependencies": { - "ansi-regex": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true - }, - "ansi-styles": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", - "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", - "dev": true - }, - "chalk": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", - "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", - "dev": true, - "requires": { - "ansi-styles": "^2.2.1", - "escape-string-regexp": "^1.0.2", - "has-ansi": "^2.0.0", - "strip-ansi": "^3.0.0", - "supports-color": "^2.0.0" - } - }, - "strip-ansi": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", - "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", - "dev": true, - "requires": { - "ansi-regex": "^2.0.0" - } - }, - "supports-color": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", - "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", - "dev": true - } - } - }, "pug-code-gen": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-2.0.2.tgz", diff --git a/package.json b/package.json index 40e769b..84836d0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fipamo-theme-kit", - "version": "0.0.1", + "version": "1.0.0", "private": true, "description": "Theming tool pack for Fipamo", "repository": "https://code.playvicio.us/Are0h/Fipamo", @@ -14,7 +14,6 @@ "devDependencies": { "parcel": "^1.12.4", "pug": "^2.0.4", - "pug-cli": "^1.0.0-alpha6", "stylus": "^0.54.7" } -} \ No newline at end of file +}