From 6bae20b57791c25099b7f417a99a16d9a190d407 Mon Sep 17 00:00:00 2001 From: Matt McKellar-Spence Date: Sat, 13 May 2017 21:08:25 +1000 Subject: [PATCH 1/7] Add new blocks to layout.pug and base for links --- layout.pug | 30 ++++++++++++++++++++++-------- 1 file changed, 22 insertions(+), 8 deletions(-) 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 = { From f681d1a5bc7c5b7862b72a1412e803965d0dcaaa Mon Sep 17 00:00:00 2001 From: Matt McKellar-Spence Date: Sat, 13 May 2017 21:09:20 +1000 Subject: [PATCH 2/7] Add main tag to index template --- index.pug | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 From f1818d8bf6dbd35db30e1a07e1c0c7bb275bebb4 Mon Sep 17 00:00:00 2001 From: Matt McKellar-Spence Date: Sat, 13 May 2017 21:09:59 +1000 Subject: [PATCH 3/7] Add extra fields to make index script --- make_index_html.js | 2 ++ 1 file changed, 2 insertions(+) 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 }) From 18a70399b582e36a27cb193a83a0abea95ba8ed7 Mon Sep 17 00:00:00 2001 From: Matt McKellar-Spence Date: Sat, 13 May 2017 21:10:20 +1000 Subject: [PATCH 4/7] Add midline to REPL styles --- repl/css/page.css | 10 ++++++++++ 1 file changed, 10 insertions(+) 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; +} From d4d0f5dc83b5b9427a2ab36c83e7cff3d2b08ac6 Mon Sep 17 00:00:00 2001 From: Matt McKellar-Spence Date: Sat, 13 May 2017 21:11:36 +1000 Subject: [PATCH 5/7] Remove header style breaking REPL --- less/layout.less | 7 ------- 1 file changed, 7 deletions(-) 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; } From 7a0c3d587721745319b3eac7810ca51b0eb80526 Mon Sep 17 00:00:00 2001 From: Matt McKellar-Spence Date: Sat, 13 May 2017 21:13:02 +1000 Subject: [PATCH 6/7] Add new REPL template --- make_repl_index_html.js | 16 +++++++++ repl/index.js | 74 +++++++++++++++++++++++++++++++++++++++++ repl/index.pug | 14 ++++++++ 3 files changed, 104 insertions(+) create mode 100644 make_repl_index_html.js create mode 100644 repl/index.js create mode 100644 repl/index.pug 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/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..e1bebce2 --- /dev/null +++ b/repl/index.pug @@ -0,0 +1,14 @@ +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="css/page.css" rel="stylesheet") + link(href="https://cdn.rawgit.com/ramda/repl/master/dist/bundle.css" rel="stylesheet") From fbe9f219325628a006341f074c6df482991710c0 Mon Sep 17 00:00:00 2001 From: Matt McKellar-Spence Date: Sat, 13 May 2017 22:15:05 +1000 Subject: [PATCH 7/7] Move REPL styles to Less --- less/ramda.less | 1 + less/repl.less | 21 +++++++++++++++++++++ repl/index.pug | 1 - 3 files changed, 22 insertions(+), 1 deletion(-) create mode 100644 less/repl.less 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/repl/index.pug b/repl/index.pug index e1bebce2..0aa51664 100644 --- a/repl/index.pug +++ b/repl/index.pug @@ -10,5 +10,4 @@ block scripts script(src="index.js") block styles - link(href="css/page.css" rel="stylesheet") link(href="https://cdn.rawgit.com/ramda/repl/master/dist/bundle.css" rel="stylesheet")