projects/fipamothemekit
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity

cleaned up fake data file, convereted index template to twig

Browse source
This commit is contained in:
Are0h 2021-04-20 23:14:49 -07:00
parent 8e5eaf4e34
commit acf2f6e86c
8 changed files with 65 additions and 131 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
README.md
View file

@ -2,43 +2,4 @@
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`.
Just run 'php -S localhost:2314';

2
config.json
View file

@ -6,7 +6,7 @@
"base_path": "/src/front/",
"default_bg": "/assets/images/global/default-bg.jpg",
"default_avi": "/assets/images/global/default-avi.png",
"content": "",
"content": "This is some content, yo",
"bucket": [{ "item": "one" }, { "item": "two" }, { "item": "three" }],
"tag_list": [
{ "title": "Swaggy Disgust", "slug": "swaggy-disgust", "path": "2020/06" }

17
index.php
View file

@ -19,7 +19,19 @@ class ThemeEngine
{
switch ($request) {
case "/":
echo "this is the index";
$recent = $this->data["recent_posts"];
$featured = $this->data["featured_posts"];
echo $this->twig->render(
"theme-fipamo-default/fipamo-default/index.twig",
[
"debug" => true,
"title" => "This is Fipamo",
"background" =>
"/src/themes/theme-fipamo-default/fipamo-default/assets/images/global/default-bg.jpg",
"recent" => $recent,
"featured" => $featured,
]
);
break;
case "":
require __DIR__ . "/views/index.php";
@ -29,7 +41,10 @@ class ThemeEngine
echo $this->twig->render(
"theme-fipamo-default/fipamo-default/archive.twig",
[
"debug" => true,
"title" => "Archive",
"background" =>
"/src/themes/theme-fipamo-default/fipamo-default/assets/images/global/default-bg.jpg",
"archives" => $archive,
]
);

22
src/themes/theme-fipamo-default/fipamo-default/archive.pug
View file

@ -1,22 +0,0 @@
extends frame
block main-content
section
.page-title
span Archive
article
.page
- var index = 0;
- for ( index; index < archives.length; index++)
.archive-item
span.year= archives[index].year
- var i = 0;
- for (i; i < archives[index].year_data.length; i++)
- var data = archives[index].year_data[i];
.archive-month
span.month= data.full_month
- var x = 0;
- for (x; x < data.pages.length; x++)
-var page = data.pages[x];
a(href='/'+archives[index].year+"/"+data.month+"/"+page.metadata.slug)= page.metadata.title
br

36
src/themes/theme-fipamo-default/fipamo-default/frame.pug
View file

@ -1,36 +0,0 @@
doctype html
html(xmlns='http://www.w3.org/1999/xhtml', lang='en', xml:lang="en")
head
title= title
meta(name='viewport', content='width=device-width, initial-scale=1.0')
meta(name="keywords" content=keywords)
meta(name="description" content=description)
meta(http-equiv="content-type", content="text/html; charset=utf-8")
meta(property="og:image" content=image)
meta(name="twitter:image" content=image)
link(rel='stylesheet', href='/assets/css/base.css', type='text/css')
body
style.
header { background: url(!{default_bg}); background-size: cover; }
header
nav
.left
a.logo-link(href='/')
img#logo(src='/assets/images/global/the-logo.svg')
.right
if menu
- var index = 0;
- for ( index; index < menu.length; index++)
a.menu-link(href="/"+menu[index].path+"/"+menu[index].slug)= menu[index].slug
br
//span= welcome_message
.container#main-content
block main-content
footer
.inner
a(href='/archives') Archives
br
| © 2020 Fipamo by PV
script(src='/assets/scripts/start.min.js' type="text/javascript")

18
src/themes/theme-fipamo-default/fipamo-default/frame.twig
View file

@ -1,4 +1,11 @@
<!DOCTYPE html>
{% if debug is defined %}
{% set assetPath = '/src/themes/theme-fipamo-default/fipamo-default/assets/' %}
{% else %}
{% set assetPath = '/assets/' %}
{% endif %}
<html>
<head>
<title>
@ -13,14 +20,14 @@
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta property="og:image" content="{{image}}" />
<meta name="twitter:image" content="{{image}}" />
<link rel="stylesheet" type="text/css" href="/assets/css/base.css?=adfafd">
<link rel="stylesheet" type="text/css" href="{{ assetPath~"css/base.css?=adfafd" }}">
</head>
<body>
<header style="background: url({{ background }}) no-repeat center center; background-size: cover">
<nav>
<div class="left">
<a href="/" class="logo-link">
<img id="logo" src="/assets/image/global/the-logo.svg" />
<img id="logo" src="{{ assetPath~"/images/global/the-logo.svg" }}" />
</a>
</div>
<div class="right">
@ -28,7 +35,10 @@
</nav>
</header>
<div id="main-content" class="container">
{% block mainContent %}{% endblock %}
{% apply spaceless %}
{% block mainContent %}{% endblock %}
{% endapply %}
</div>
<footer>
@ -37,6 +47,6 @@
© 2020 By Fipamo
</div>
</footer>
<script src="/assets/scripts/start.min.js" type="text/javascript"></script>
<script src="{{ assetPath~"scripts/start.min.js" }}" type="text/javascript"></script>
</body>
</html>

27
src/themes/theme-fipamo-default/fipamo-default/index.pug
View file

@ -1,27 +0,0 @@
extends frame
block main-content
article
.index
h2= title
p !{content}
section
.index-lists
.recent
span Recent
br
- if(recent_posts)
- var index = 0;
- for ( index; index < recent_posts.length; index++)
a(href="/"+recent_posts[index].path+"/"+recent_posts[index].slug)= recent_posts[index].title
br
- if(featured_posts)
.featured
span Featured
br
- var index = 0;
- for ( index; index < featured_posts.length; index++)
a(href="/"+featured_posts[index].metadata.path+"/"+featured_posts[index].metadata.slug)= featured_posts[index].metadata.title
br

33
src/themes/theme-fipamo-default/fipamo-default/index.twig Normal file
View file

@ -0,0 +1,33 @@
{% extends "theme-fipamo-default/fipamo-default/frame.twig" %}
{% block title %}
{{ title }}
{% endblock %}
{% block mainContent %}
<article>
<div class="index">
<h2>{{title}}</h2>
<p>{{ content }}</p>
</div>
</article>
<section>
<div class="index-lists">
<div class="recent">
<span>RECENT</span><br />
{% for item in recent %}
<a href="{{ "/"~item.path~"/"~item.slug~".html" }}"> {{item.title}} </a><br />
{% endfor %}
</div>
<div class="featured">
<span>FEATURED</span><br />
{% for item in featured %}
<a href="{{ "/"~item.path~"/"~item.slug~".html" }}"> {{item.title}} </a><br />
{% endfor %}
</div>
</div>
</section>
{% endblock %}