Additions

Blueprints, Theme CSS, Twig-injection, README updates, template-improvements, Twig- and class-rendering

CHANGELOG.md

@@ -1,5 +1,18 @@
+# v0.9.1
+## 11-06-2017
+
+1. [](#new)
+    * Initial Blueprints
+    * Include Theme CSS
+    * Inject Twig-template
+1. [](#improved)
+    * README
+    * Blocks in fullpage.html.twig
+    * Render Twig in Markdown
+    * Render page's body_classes-property
+
 # v0.9.0
-##  11/06/2017
+## 11-06-2017
 
 1. [](#new)
-    * Initial beta-release
+    * Initial release

README.md

@@ -82,7 +82,35 @@ fullpage:
 
 Styles are defined as `property: value` and processed by the plugin. If the amount of pages exceed the amount of styles, they will be reused in the order they are defined. If the `background`-property is defined, but `color` is not, the plugin tries to estimate a suitable text-color to apply. The equations available to estimate this color is either `50` or `YIQ`, set by `color_function`.
 
-You can of course also style the plugin using your theme's CSS-files, by targeting the `.fullpage`-selector which wraps around all of the plugin's content.
+You can of course also style the plugin using your theme's /css/custom.css-file, by targeting the `.fullpage`-selector which wraps around all of the plugin's content. This behavior can be enabled or disabled with the `theme_css`-setting. All pages have a `data-anchor`-attribute set on their sections, which can be utilized by CSS like this:
+
+```css
+.fullpage [data-anchor="constructing-pages"] {
+  background: red;
+}
+```
+
+### Injecting Twig
+
+Using the `inject_footer`-setting you can append a Twig-template to each section. For example, `inject_footer: "partials/inject.html.twig"` will render the theme's `partials/inject.html.twig`-template and append it to the sections. If the element was constructed like this: `<div class="inject">Injected</div>`, you could style it like this:
+
+```css
+.fullpage .inject {
+  display: block;
+  position: absolute;
+  bottom: 2em;
+}
+```
+
+You can also arbitrarily execute Twig within a page's Markdown by enabling it in the FrontMatter with:
+
+```yaml
+twig_first: true
+process:
+  twig: true
+```
+
+For example, `<p>{{ site.author.name }}</p>` will render the name of the author defined in site.yaml.
 
 ### Creating a menu
 

Utilities.php

@@ -41,6 +41,10 @@ public function buildTree($route, $mode = false, $depth = 0)
         $pages = $pages->published()->order($this->config['order']['by'], $this->config['order']['dir']);
         $paths = array();
         foreach ($pages as $page) {
+            if (isset($page->header()->inject_footer)) {
+                $paths[$route]['inject_footer'] = $page->header()->inject_footer;
+                $paths[$route]['inject_footer'] = Grav::instance()['twig']->processTemplate($paths[$route]['inject_footer']);
+            }
             $route = $page->rawRoute();
             $paths[$route]['depth'] = $depth;
             $paths[$route]['title'] = $page->title();
@@ -58,7 +62,7 @@ public function buildTree($route, $mode = false, $depth = 0)
             } elseif (isset($this->config['styles'])) {
                 $paths[$route]['styles'] = $this->config['styles'];
             }
-            $paths[$route]['content'] = $page->rawMarkdown();
+            $paths[$route]['content'] = $page->content();
             if (!empty($paths[$route])) {
                 $children = $this->buildTree($route, $mode, $depth);
                 if (!empty($children)) {
@@ -110,6 +114,9 @@ public function buildContent($pages)
                     echo '<div data-name="' . $title . '" data-anchor="' . $id . '" class="' . $type . '">';
                 }
                 echo $break;
+                if (isset($page['inject_footer'])) {
+                    echo $page['inject_footer'];
+                }
                 echo '</div>';
                 if (isset($page['styles']) && count($page['styles']) == $styleIndex+1) {
                     $styleIndex = 0;

blueprints.yaml

@@ -1,5 +1,5 @@
 name: FullPage
-version: 0.9.0
+version: 0.9.1
 description: Fullscreen navigational slideshows through fullPage.js
 icon: arrows-alt
 author:
@@ -25,3 +25,87 @@ form:
         0: Disabled
       validate:
         type: bool
+    order.by:
+      type: select
+      size: medium
+      classes: fancy
+      label: Order Type
+      options:
+        default: Default - based on folder name
+        folder: Folder - based on prefix-less folder name
+        title: Title - based on title field in header
+        date: Date - based on date field in header
+    order.dir:
+      type: toggle
+      label: Order Direction
+      highlight: asc
+      default: desc
+      options:
+        asc: Ascending
+        desc: Descending
+    theme_css:
+      type: toggle
+      label: Use Theme's CSS
+      description: Import current theme's /css/custom.css into fullpage.html.twig's assets
+      highlight: 1
+      default: 1
+      options:
+        1: PLUGIN_ADMIN.ENABLED
+        0: PLUGIN_ADMIN.DISABLED
+      validate:
+        type: bool
+    builtin_css:
+      type: toggle
+      label: Use Plugin's CSS
+      highlight: 1
+      default: 1
+      options:
+        1: PLUGIN_ADMIN.ENABLED
+        0: PLUGIN_ADMIN.DISABLED
+      validate:
+        type: bool
+    builtin_js:
+      type: toggle
+      label: Use Plugin's JS
+      highlight: 1
+      default: 1
+      options:
+        1: PLUGIN_ADMIN.ENABLED
+        0: PLUGIN_ADMIN.DISABLED
+      validate:
+        type: bool
+    color_function:
+      type: toggle
+      label: Color function
+      description: Default color function to apply
+      highlight: 1
+      default: "50"
+      options:
+        50: "50%"
+        YIQ: "YIQ"
+    change_titles:
+      type: toggle
+      label: Dynamic titles
+      description: Update document titles on navigation
+      highlight: 1
+      default: 0
+      options:
+        1: Enabled
+        0: Disabled
+      validate:
+        type: bool
+    inject_footer:
+      type: text
+      label: Inject Twig
+      description: Render a Twig-template and append it to each section
+      highlight: 1
+    styles:
+      type: section
+      title: Default Styles
+      text: "Array of CSS selectors:values. WORK IN PROGRESS"
+      underline: true
+    options:
+      type: section
+      title: Library options
+      text: Options to pass to fullPage.js. WORK IN PROGRESS
+      underline: true

fullpage.php

@@ -107,7 +107,10 @@ public function pageIteration()
             }
             if ($config['builtin_css']) {
                 $this->grav['assets']->addCss('plugin://fullpage/css/jquery.fullpage.min.css', 105);
-                $this->grav['assets']->addCss('plugin://fullpage/css/default.css');
+                $this->grav['assets']->addCss('plugin://fullpage/css/default.css', 104);
+            }
+            if ($config['theme_css']) {
+                $this->grav['assets']->addCss('theme://css/custom.css', 103);
             }
         }
     }

fullpage.yaml

@@ -2,16 +2,18 @@ enabled: true
 order:
   by: folder
   dir: asc
+theme_css: true
 builtin_css: true
 builtin_js: true
+color_function: "50"
+change_titles: true
+inject_footer: ""
 styles:
   - background: "#93c0d3"
   - background: "#6f977d"
   - background: "#598495"
   - background: "#5e6168"
   - background: "#213533"
-color_function: "50"
-change_titles: true
 options:
   menu: '#menu'
   lockAnchors: false

templates/fullpage.html.twig

@@ -1,20 +1,26 @@
 {% set theme_config = attribute(config.themes, config.system.pages.theme) %}
 <!DOCTYPE html>
 <html lang="{{ grav.language.getLanguage ?: 'en' }}">
+{% block head %}
 <head>
+  {% block meta %}
   <meta charset="utf-8" />
   <title>{% if header.title %}{{ header.title|e('html') }} | {% endif %}{{ site.title|e('html') }}</title>
   {% include 'partials/metadata.html.twig' %}
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  {% endblock meta %}
   <link rel="icon" type="image/png" href="{{ url('theme://images/favicon.png') }}" />
   <link rel="canonical" href="{{ page.url(true, true) }}" />
   {{ assets.css() }}
 </head>
+{% endblock head %}
 
-<body>
+<body id="top" class="{{ page.header.body_classes }}">
+  {% block content %}
   <div id="fullpage" class="fullpage">
     {{ page.content }}
   </div>
+  {% endblock content %}
   {{ assets.js() }}
 </body>
 </html>