updated package json, added them instructions to readme
This commit is contained in:
Are0h
parent
efe25f5865
commit
0ea0efcb09
3 changed files with 45 additions and 59 deletions
43
README.md
43
README.md
|
|
@ -1,3 +1,44 @@
|
|||
# Fipamo Theme Kit
|
||||
|
||||
Just a tool to make creating themes for Fipamo a bit easier..er...
|
||||
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`.
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
56
package-lock.json
generated
56
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue