diff --git a/index.pug b/index.pug index 87a630b6..1a01524a 100644 --- a/index.pug +++ b/index.pug @@ -1,4 +1,5 @@ extends layout.pug block main - article!= readme + main.container + article!= readme diff --git a/layout.pug b/layout.pug index e459a698..9139683e 100644 --- a/layout.pug +++ b/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 = { diff --git a/less/layout.less b/less/layout.less index 27ff3b37..dcd211de 100644 --- a/less/layout.less +++ b/less/layout.less @@ -8,13 +8,6 @@ padding-top: @padding; } -header { - position: fixed; - width: 100%; - top: 0; - right: 0; -} - .forkme { margin-top: 10px; } diff --git a/less/ramda.less b/less/ramda.less index bbd102b8..7136f7e1 100644 --- a/less/ramda.less +++ b/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); diff --git a/less/repl.less b/less/repl.less new file mode 100644 index 00000000..5b67f8b1 --- /dev/null +++ b/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; +} diff --git a/make_index_html.js b/make_index_html.js index 32f54d17..72357e72 100644 --- a/make_index_html.js +++ b/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 }) diff --git a/make_repl_index_html.js b/make_repl_index_html.js new file mode 100644 index 00000000..0e8360cd --- /dev/null +++ b/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'}) diff --git a/repl/css/page.css b/repl/css/page.css index 0d16de60..8e3fd15d 100644 --- a/repl/css/page.css +++ b/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; +} diff --git a/repl/index.js b/repl/index.js new file mode 100644 index 00000000..1a7aa99e --- /dev/null +++ b/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) diff --git a/repl/index.pug b/repl/index.pug new file mode 100644 index 00000000..0aa51664 --- /dev/null +++ b/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")