cleaned up fake data file, convereted index template to twig

README.md

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

config.json

@@ -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" }

index.php

@@ -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,
           ]
         );

src/themes/theme-fipamo-default/fipamo-default/archive.pug

@@ -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

src/themes/theme-fipamo-default/fipamo-default/frame.pug

@@ -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")

src/themes/theme-fipamo-default/fipamo-default/frame.twig

@@ -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>

src/themes/theme-fipamo-default/fipamo-default/index.pug

@@ -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
-      
-        

src/themes/theme-fipamo-default/fipamo-default/index.twig

@@ -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 %}