Update Pug templates (#175)

* Add new blocks to layout.pug and base for links

* Add main tag to index template

* Add extra fields to make index script

* Add midline to REPL styles

* Remove header style breaking REPL

* Add new REPL template

* Move REPL styles to Less

index.pug

@@ -1,4 +1,5 @@
 extends layout.pug
 
 block main
-	article!= readme
+	main.container
+		article!= readme

layout.pug

@@ -1,5 +1,7 @@
 doctype html
-html.home-page
+html(class=html_class)
+	- base_link = ('home' == page ? '.' : '..')
+
 	head
 		meta(charset="UTF-8")
 		meta(
@@ -9,12 +11,17 @@ html.home-page
 
 		title Ramda Documentation
 
+		- href = base_link + "/style.css"
 		link(
-			href="style.css"
+			href=href
 			rel="stylesheet"
 			type="text/css"
 		)
 
+		block styles
+
+		block scripts
+
 	body
 		input#open-nav(type="checkbox")
 		header.navbar.navbar-fixed-top.navbar-inverse.container-fluid
@@ -23,19 +30,26 @@ html.home-page
 					label.open-nav(for="open-nav")
 					a.navbar-brand(href="#")
 						strong Ramda
-						span.version v#{version}
+						span.version  v#{version}
 
 				ul.nav.navbar-nav.navbar-left
-					li.active: a(href="#") Home
-					li: a(href="docs") Documentation
-					li: a(href="/repl?v=#{version}") Try Ramda
+					- active = ('home' == page) ? 'active' : ''
+					- href = base_link + "/"
+					li(class=active): a(href=href) Home
+
+					- active = ('docs' == page) ? 'active' : ''
+					- href = base_link + "/docs/"
+					li(class=active): a(href=href) Documentation
+
+					- active = ('repl' == page) ? 'active' : ''
+					- href = base_link + "/repl/"
+					li(class=active): a(href=href) Try Ramda
 
 				ul.nav.navbar-nav.navbar-right
 					li: a(href="https://github.com/ramda/ramda") GitHub
 					li: a(href="https://gitter.im/ramda/ramda") Discuss
 
-		main.container
-			block main
+		block main
 
 		script.
 			window.gitter = {

less/layout.less

@@ -8,13 +8,6 @@
     padding-top: @padding;
 }
 
-header {
-    position: fixed;
-    width: 100%;
-    top: 0;
-    right: 0;
-}
-
 .forkme {
     margin-top: 10px;
 }

less/ramda.less

@@ -6,6 +6,7 @@
 @import "sidebar";
 @import "card";
 @import "hljs";
+@import "repl";
 
 .navbar-fixed-top {
     box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.20);

less/repl.less

@@ -0,0 +1,21 @@
+html.repl-page
+, html.repl-page > body
+{
+	background-color: #282a36;
+	height: 100%;
+}
+
+.ramda-repl-wrapper {
+	height: 100%;
+	padding-top: 3.7em;
+}
+
+.repl-midline {
+	background-color: #44475a;
+	bottom: 0;
+	left: 50%;
+	position: absolute;
+	top: 0;
+	width: 2px;
+	z-index: 1;
+}

make_index_html.js

@@ -17,6 +17,8 @@ get_ramda_file('README.md')
   var make_html = pug.compileFile('index.pug')
 
   var html = make_html({
+    html_class: 'home-page',
+    page: 'home',
     readme: readme_html,
     version: version
   })

make_repl_index_html.js

@@ -0,0 +1,16 @@
+var fs = require('fs')
+
+var pug = require('pug')
+
+var version = require('./package.json').devDependencies.ramda
+
+
+var make_html = pug.compileFile('repl/index.pug')
+
+var html = make_html({
+  html_class: 'repl-page',
+  page: 'repl',
+  version: version
+})
+
+fs.writeFileSync('repl/index.html', html, {encoding: 'utf8'})

repl/css/page.css

@@ -33,3 +33,13 @@ html, body {
   border     : 0;
   resize     : none;
 }
+
+.repl-midline {
+	background-color: #44475a;
+	position: absolute;
+	left: 50%;
+	top: 0;
+	bottom: 0;
+	width: 2px;
+	z-index: 1;
+}

repl/index.js

@@ -0,0 +1,74 @@
+document.addEventListener('DOMContentLoaded', function () {
+  // Regex for matching version strings
+  // Example match: "0.21.123"
+  var rx = /^\d+\.\d+(\.\d+)?$/
+
+  // :: String, String -> String
+  function toVersion (acc, pair) {
+    var splitPair = pair.split('=')
+
+    return splitPair[0] === 'v' && rx.test(splitPair[1]) ? splitPair[1] : acc
+  }
+
+  var version = location.search.substr(1).split('&').reduce(toVersion, 'latest')
+
+  var ramdaUrl = '//cdn.jsdelivr.net/ramda/' + version + '/ramda.min.js'
+
+
+  ramdaRepl(document.querySelector('.ramda-repl-target'), {
+    apiUrl: 'https://www.googleapis.com/urlshortener/v1/url?key=AIzaSyDhbAvT5JqkxFPkoeezJp19-S_mAJudxyk',
+
+    // If unset, initialValue will use the value or textcontent of the
+    // target element.
+    initialValue: URI.decode(window.location.hash).substring(2),
+
+    // Called with the pre-compiled content
+    onChange: function (code) {
+      window.location.hash = '?' + URI.encode(code)
+    },
+
+    // The following config defines scripts that will be dynamically
+    // loaded upon creating the REPL. Each has the following properties:
+    //
+    // src      - The source of the script, a URL
+    // global   - (Optional) a name of a global that the script introduces
+    // exposeAs - (Optional) a name that can alias the global
+    // expose   - (Optional) a list of methods to expose globally
+
+    // Required.
+    // As ramda may be a dependency for other scripts, it will
+    // be intentionally loaded before any other script.
+    ramdaScript: {
+      global: 'R',
+      src: ramdaUrl
+    },
+
+    returnUrl: 'http://ramdajs.com/repl/',
+
+    // Optional.
+    // Here we can declare a list of libraries that we wish to have
+    // loaded and exposed in the repl.
+    scripts: [
+      {
+        exposeAs: 'S',
+        global: 'sanctuary',
+        src: '//wzrd.in/standalone/sanctuary@latest'
+      },
+      {
+        expose: [
+          'Either',
+          'Future',
+          'Identity',
+          'IO',
+          'lift2',
+          'lift3',
+          'Maybe',
+          'Reader',
+          'Tuple'
+        ],
+        global: 'ramdaFantasy',
+        src: '//wzrd.in/standalone/ramda-fantasy@latest'
+      }
+    ]
+  })
+}, false)

repl/index.pug

@@ -0,0 +1,13 @@
+extends ../layout.pug
+
+block main
+	.ramda-repl-wrapper
+		textarea.ramda-repl-target
+
+block scripts
+	script(src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.18.1/URI.min.js")
+	script(src="https://cdn.rawgit.com/ramda/repl/master/dist/bundle.js")
+	script(src="index.js")
+
+block styles
+	link(href="https://cdn.rawgit.com/ramda/repl/master/dist/bundle.css" rel="stylesheet")