diff --git a/README.md b/README.md index 6f2c4c3..e8f6c05 100644 --- a/README.md +++ b/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. - -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'; diff --git a/config.json b/config.json index 5703c17..31e602d 100644 --- a/config.json +++ b/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" } diff --git a/index.php b/index.php index 479c235..7815ed9 100644 --- a/index.php +++ b/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, ] ); diff --git a/src/themes/theme-fipamo-default/fipamo-default/archive.pug b/src/themes/theme-fipamo-default/fipamo-default/archive.pug deleted file mode 100644 index d398b74..0000000 --- a/src/themes/theme-fipamo-default/fipamo-default/archive.pug +++ /dev/null @@ -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 \ No newline at end of file diff --git a/src/themes/theme-fipamo-default/fipamo-default/frame.pug b/src/themes/theme-fipamo-default/fipamo-default/frame.pug deleted file mode 100644 index d633d31..0000000 --- a/src/themes/theme-fipamo-default/fipamo-default/frame.pug +++ /dev/null @@ -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") diff --git a/src/themes/theme-fipamo-default/fipamo-default/frame.twig b/src/themes/theme-fipamo-default/fipamo-default/frame.twig index ac6c5d9..8a7a014 100644 --- a/src/themes/theme-fipamo-default/fipamo-default/frame.twig +++ b/src/themes/theme-fipamo-default/fipamo-default/frame.twig @@ -1,4 +1,11 @@ + +{% if debug is defined %} + {% set assetPath = '/src/themes/theme-fipamo-default/fipamo-default/assets/' %} +{% else %} + {% set assetPath = '/assets/' %} +{% endif %} + @@ -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> \ No newline at end of file diff --git a/src/themes/theme-fipamo-default/fipamo-default/index.pug b/src/themes/theme-fipamo-default/fipamo-default/index.pug deleted file mode 100644 index b627df5..0000000 --- a/src/themes/theme-fipamo-default/fipamo-default/index.pug +++ /dev/null @@ -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 - - diff --git a/src/themes/theme-fipamo-default/fipamo-default/index.twig b/src/themes/theme-fipamo-default/fipamo-default/index.twig new file mode 100644 index 0000000..8f69e9f --- /dev/null +++ b/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 %} \ No newline at end of file