Working theme builder

RoboFile.php

@@ -196,20 +196,30 @@ class RoboFile extends \Robo\Tasks {
      */
     public function manualTheme(array $args): Result {
         $postcss = escapeshellarg(realpath(self::BASE."node_modules/.bin/postcss"));
-        $themesrc = realpath(self::BASE."docs/theme/src/");
-        $themeout = realpath(self::BASE."docs/theme/arsse/");
-        $scss = $themesrc."/arsse.scss";
-        $css = $themeout."/arsse.css";
+        $languages = ["php", "bash", "shell", "xml", "nginx", "apache"];
+        $themesrc = realpath(self::BASE."docs/theme/src/").\DIRECTORY_SEPARATOR;
+        $themeout = realpath(self::BASE."docs/theme/arsse/").\DIRECTORY_SEPARATOR;
+        $dauxjs = realpath(self::BASE."vendor-bin/daux/vendor/daux/daux.io/themes/daux/js/").\DIRECTORY_SEPARATOR;
+        $dauxout = realpath(self::BASE."docs/theme/daux/js/").\DIRECTORY_SEPARATOR;
         // start a collection; this stops after the first failure
         $t = $this->collectionBuilder();
         $tmp = $t->tmpDir().\DIRECTORY_SEPARATOR;
         // install dependencies via Yarn
         $t->taskExec("yarn install");
         // compile the stylesheet
-        $t->taskExec($postcss)->arg($scss)->option("-o", $css);
+        $t->taskExec($postcss)->arg($themesrc."arsse.scss")->option("-o", $themeout."arsse.css");
+        // copy JavaScript files from the Daux theme
+        foreach(glob($dauxjs."daux*") as $file) {
+            $t->taskFilesystemStack()->copy($file, $themeout.basename($file), true);
+        }
+        foreach(glob($dauxjs."jquery*") as $file) {
+            $t->taskFilesystemStack()->copy($file, $themeout.basename("jquery.min.js"), true);
+        }
+        foreach(glob($dauxjs."html5shiv*") as $file) {
+            $t->taskFilesystemStack()->copy($file, $dauxout.basename($file), true);
+        }
         // download highlight.js
-        $t->addCode(function() use ($tmp, $themeout) {
-            $languages = ["php", "bash", "shell", "xml", "nginx", "apache"];
+        $t->addCode(function() use ($languages, $tmp, $themeout) {
             $post = http_build_query((function($langs) {
                 $out = [];
                 foreach($langs as $l) {
@@ -244,10 +254,8 @@ class RoboFile extends \Robo\Tasks {
                 file_put_contents($tmp."highlightjs.zip", $hljs);
             }
             $this->taskExtract($tmp."highlightjs.zip")->to($tmp."hljs")->run();
-            $this->taskFilesystemStack()->copy($tmp."hljs/highlight.pack.js", $themeout."/highlight.pack.js")->run();
+            $this->taskFilesystemStack()->copy($tmp."hljs".\DIRECTORY_SEPARATOR."highlight.pack.js", $themeout."highlight.pack.js")->run();
         }, "downloadHighlightjs");
-        // copy JavaScript files from the Daux theme
-        # TODO
         // execute the collection
         return $t->run();
     }

docs/config.json

@@ -4,7 +4,9 @@
     "languages": {
         "en": "English"
     },
+    "themes_directory": "docs/theme",
     "html": {
+        "theme": "arsse",
         "float": false,
         "toggle_code": false
     }

docs/theme/arsse/config.json

@@ -0,0 +1,11 @@
+{
+    "favicon": "<theme_url>favicon.png",
+    "js": [
+        "<theme_url>jquery.min.js",
+        "<theme_url>highlight.pack.js",
+        "<theme_url>daux.js"
+    ],
+    "css": [
+        "<theme_url>arsse.css"
+    ]
+}

docs/theme/arsse/daux.js

@@ -0,0 +1,98 @@
+/** global localStorage, hljs */
+
+if (hljs) {
+    hljs.initHighlightingOnLoad();
+}
+
+//Initialize CodeBlock Visibility Settings
+$(function () {
+    var codeBlockView = $('.Columns__right'),
+        codeBlocks = $('.s-content pre'),
+        toggleCodeSection = $('.CodeToggler'),
+        toggleCodeBlockBtns = toggleCodeSection.find('.CodeToggler__button'),
+        toggleCodeBlockBtn = toggleCodeSection.find('.CodeToggler__button--main'),
+        toggleCodeBlockBtnHide = toggleCodeSection.find('.CodeToggler__button--hide'),
+        toggleCodeBlockBtnBelow = toggleCodeSection.find('.CodeToggler__button--below'),
+        toggleCodeBlockBtnFloat = toggleCodeSection.find('.CodeToggler__button--float');
+
+    // If there is no code block we hide the link
+    if (!codeBlocks.size()) {
+        toggleCodeSection.addClass('Hidden');
+        return;
+    }
+
+    function setCodeBlockStyle(codeBlockState) {
+        localStorage.setItem("codeBlockState", codeBlockState);
+
+        toggleCodeBlockBtns.removeClass("Button--active");
+
+        switch (codeBlockState) {
+            case 2: // Show code blocks inline
+                toggleCodeBlockBtnFloat.addClass("Button--active");
+                codeBlockView.addClass('Columns__right--float');
+                codeBlockView.removeClass('Columns__right--full');
+                codeBlocks.removeClass('Hidden');
+                break;
+            case 1: // Show code blocks below
+                toggleCodeBlockBtnBelow.addClass("Button--active");
+                toggleCodeBlockBtn.prop('checked', true);
+                codeBlockView.removeClass('Columns__right--float');
+                codeBlockView.addClass('Columns__right--full');
+                codeBlocks.removeClass('Hidden');
+                break;
+            case 0: // Hidden code blocks
+            default:
+                toggleCodeBlockBtnHide.addClass("Button--active");
+                toggleCodeBlockBtn.prop('checked', false);
+                codeBlockView.removeClass('Columns__right--float');
+                codeBlockView.addClass('Columns__right--full');
+                codeBlocks.addClass('Hidden');
+                break;
+        }
+    }
+
+    toggleCodeBlockBtn.click(function() {
+        setCodeBlockStyle(codeBlocks.hasClass('Hidden') ? 1 : 0);
+    });
+
+    toggleCodeBlockBtnHide.click(function() { setCodeBlockStyle(0); });
+    toggleCodeBlockBtnBelow.click(function() { setCodeBlockStyle(1); });
+    toggleCodeBlockBtnFloat.click(function() { setCodeBlockStyle(2); });
+
+    var floating = $(document.body).hasClass("with-float");
+    var codeBlockState = localStorage.getItem("codeBlockState");
+
+    if (!codeBlockState) {
+        codeBlockState = floating? 2 : 1;
+    } else {
+        codeBlockState = parseInt(codeBlockState);
+    }
+
+    if (!floating && codeBlockState == 2) {
+        codeBlockState = 1;
+    }
+
+    setCodeBlockStyle(codeBlockState);
+});
+
+
+$(function () {
+    // Tree navigation
+    $('.aj-nav').click(function (e) {
+        e.preventDefault();
+        $(this).parent().siblings().find('ul').slideUp();
+        $(this).next().slideToggle();
+    });
+
+    // New Tree navigation
+    $('ul.Nav > li.has-children > a > .Nav__arrow').click(function() {
+        $(this).parent().parent().toggleClass('Nav__item--open');
+        return false;
+    });
+
+    // Responsive navigation
+    $('.Collapsible__trigger').click(function () {
+        $('.Collapsible__content').slideToggle();
+    });
+});
+

docs/theme/daux/js/html5shiv-3.7.3.min.js

@@ -0,0 +1,4 @@
+/**
+* @preserve HTML5 Shiv 3.7.3 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
+*/
+!function(a,b){function c(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function d(){var a=t.elements;return"string"==typeof a?a.split(" "):a}function e(a,b){var c=t.elements;"string"!=typeof c&&(c=c.join(" ")),"string"!=typeof a&&(a=a.join(" ")),t.elements=c+" "+a,j(b)}function f(a){var b=s[a[q]];return b||(b={},r++,a[q]=r,s[r]=b),b}function g(a,c,d){if(c||(c=b),l)return c.createElement(a);d||(d=f(c));var e;return e=d.cache[a]?d.cache[a].cloneNode():p.test(a)?(d.cache[a]=d.createElem(a)).cloneNode():d.createElem(a),!e.canHaveChildren||o.test(a)||e.tagUrn?e:d.frag.appendChild(e)}function h(a,c){if(a||(a=b),l)return a.createDocumentFragment();c=c||f(a);for(var e=c.frag.cloneNode(),g=0,h=d(),i=h.length;i>g;g++)e.createElement(h[g]);return e}function i(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return t.shivMethods?g(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+d().join().replace(/[\w\-:]+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(t,b.frag)}function j(a){a||(a=b);var d=f(a);return!t.shivCSS||k||d.hasCSS||(d.hasCSS=!!c(a,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),l||i(a,d),a}var k,l,m="3.7.3",n=a.html5||{},o=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,p=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,q="_html5shiv",r=0,s={};!function(){try{var a=b.createElement("a");a.innerHTML="<xyz></xyz>",k="hidden"in a,l=1==a.childNodes.length||function(){b.createElement("a");var a=b.createDocumentFragment();return"undefined"==typeof a.cloneNode||"undefined"==typeof a.createDocumentFragment||"undefined"==typeof a.createElement}()}catch(c){k=!0,l=!0}}();var t={elements:n.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video",version:m,shivCSS:n.shivCSS!==!1,supportsUnknownElements:l,shivMethods:n.shivMethods!==!1,type:"default",shivDocument:j,createElement:g,createDocumentFragment:h,addElements:e};a.html5=t,j(b),"object"==typeof module&&module.exports&&(module.exports=t)}("undefined"!=typeof window?window:this,document);