Verified Commit d114cf33 authored by Aral Balkan's avatar Aral Balkan
Browse files

Add latest JS build

parent 6b4e4805
(function() {
var fs, jsdom, render, set;
var addPartials, crypto, documentCache, fs, includeRegEx, jsdom, partialCache, path, render, set, templateCache;
jsdom = require('jsdom');
fs = require('fs');
path = require('path');
crypto = require('crypto');
set = (fs.readFileSync(__dirname + '/set.js', 'utf8')).toString();
partialCache = {};
templateCache = {};
documentCache = {};
includeRegEx = /\<!--\s*include\s+(\S+)\s*--\>/g;
exports.__express = function(path, data, callback) {
return fs.readFile(path, 'utf8', function(error, template) {
var html;
......@@ -18,8 +30,44 @@
});
};
addPartials = function(template) {
var cachedTemplate, i, len, match, matches, partial, partialFilePath, templateHash, theMatch, tokenToReplace, viewsPath;
templateHash = crypto.createHash('md5').update(template).digest('hex');
cachedTemplate = templateCache[templateHash];
if (cachedTemplate !== void 0) {
return cachedTemplate;
}
matches = [];
viewsPath = path.normalize(path.join(__dirname, '..', 'views'));
while ((theMatch = includeRegEx.exec(template)) !== null) {
matches.push(theMatch);
}
for (i = 0, len = matches.length; i < len; i++) {
match = matches[i];
tokenToReplace = match[0];
partialFilePath = path.join(viewsPath, match[1]);
partial = partialCache[partialFilePath];
if (partial === void 0) {
partial = fs.readFileSync(partialFilePath, 'utf8');
partialCache[partialFilePath] = partial;
}
template = template.replace(new RegExp(tokenToReplace, 'g'), partial);
}
templateCache[templateHash] = template;
return template;
};
render = function(template, data) {
var customFormatter, customFormatters, doctype, doctypeHTML, doctypeName, doctypePublicAndSystemID, doctypePublicID, doctypeSystemID, document, e, error1, head, html, ref, ref1, ref2, script, window;
var cachedDocument, customFormatter, customFormatters, doctype, doctypeHTML, doctypeName, doctypePublicAndSystemID, doctypePublicID, doctypeSystemID, document, documentHash, e, error1, head, html, ref, ref1, ref2, script, useCache, window;
useCache = (data['__set'] !== void 0) && (data['__set']['cache'] === true);
if (useCache) {
documentHash = crypto.createHash('md5').update("" + template + (JSON.stringify(data))).digest('hex');
cachedDocument = documentCache[documentHash];
if (cachedDocument !== void 0) {
return cachedDocument;
}
}
template = addPartials(template);
document = jsdom.jsdom(template);
window = document.defaultView;
window.console = console;
......@@ -69,6 +117,9 @@
doctypeHTML = "<!DOCTYPE " + doctypeName + doctypePublicID + doctypePublicAndSystemID + doctypeSystemID + ">";
html = "" + doctypeHTML + html;
}
if (useCache) {
documentCache[documentHash] = html;
}
return html;
};
......
(function() {
exports.route = function(request, response) {
var data;
data = {
title: 'Ind.ie Labs: Set: Document Caching',
__set: {
cache: true
}
};
return response.render('document-caching', data);
};
}).call(this);
......@@ -4,7 +4,10 @@
meta = require('../../package.json');
version = meta.version;
return response.render('main', {
version: version
version: version,
__set: {
cache: true
}
});
};
......
(function() {
exports.route = function(request, response) {
var data;
data = {
title: 'Ind.ie Labs: Set: Partials',
__set: {
cache: true
}
};
return response.render('partials', data);
};
}).call(this);
......@@ -18,6 +18,7 @@
data.title = 'Read me!';
data.readme = readme;
}
data.__set.cache = true;
return response.render('readme', data);
});
};
......
......@@ -2,7 +2,7 @@
var data;
data = {
title: 'Set sample',
title: 'Simple Set Demo',
name: 'Set',
"class": 'rendered-summary',
content: 'This is a simple example to demonstrate Set, a templating engine for Express (node.js) and client‐side JavaScript.',
......@@ -34,7 +34,8 @@
isSelected: function(value) {
return 'tab selected';
}
}
},
cache: true
};
return response.render('simple', data);
};
......
......@@ -28,6 +28,10 @@
createRoute('/simple');
createRoute('/partials');
createRoute('/document-caching');
createRoute('/posts');
createRoute('/posts-client-side-updates');
......
......@@ -2,7 +2,7 @@
<html lang='en'>
<head>
<!-- ***** -->
<!-- Note: Do not render this via a Set route -->
<!-- Labs common -->
<meta charset="utf-8">
......
<footer>
<p>Copyright © <a href='https://aralbalkan.com'>Aral Balkan</a>. Released with ♥ by <a href='https://ind.ie'>Ind.ie</a> under the MIT License. Portions released under the Apache License. <a href='mailto:aral@ind.ie'>Questions, feedback, etc.</a></p>
</footer>
<!doctype html>
<html lang='en'>
<head>
<!-- Labs common -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title data-set-text='title'>Ind.ie Labs: Set</title>
<link rel="alternate" type="application/rss+xml" title="Ind.ie Labs Blog" href="https://ind.ie/labs/blog/rss/index.xml">
<!--[if lte IE 8]>
<script src='https://ind.ie/assets/js/html5shiv.js'></script>
<![endif]-->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="https://ind.ie/assets/images/ios-180.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://ind.ie/assets/images/ios-76.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://ind.ie/assets/images/ios-120.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://ind.ie/assets/images/ios-152.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://ind.ie/assets/images/ios-180.png">
<link rel="stylesheet" href="https://ind.ie/assets/css/lab-styles.css">
<!-- Set -->
<link rel='stylesheet' type='text/css' href='css/base.css'>
<link data-set-dummy rel='stylesheet' type='text/css' href='css/set-highlights.css'>
<link rel='stylesheet' href='https://ind.ie/assets/css/set-styles.css'/>
<link rel='stylesheet' type='text/css' href='css/indie.css'>
<!-- Syntax highlighting for the code -->
<link rel='stylesheet' type='text/css' href='css/prism.css'>
<script data-set-dummy src='js/set-highlights.js'></script>
<link rel='stylesheet' type='text/css' href='css/simple.css'>
<!-- Labs common, inline styles -->
<style>
.main {
padding: 14px;
padding-top: 0;
}
@media only screen and (min-width: 600px) {
.main {
margin: 0 auto;
max-width: 700px;
padding: 21px;
padding-top: 0;
}
}
h1 {
margin-bottom: 14px;
}
h2 {
margin-top: 14px;
}
.projects {
border-bottom: 1px solid #d8d8d8;
margin: 0;
}
.projects li {
border-top: 1px solid #d8d8d8;
clear: both;
list-style-type: none;
overflow: hidden;
margin-bottom: 24px;
text-align: center;
}
@media only screen and (min-width: 745px) {
.projects li {
text-align: left;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 0;
}
.projects li p {
-webkit-flex: 1 auto;
flex: 1 auto;
float: left;
margin-bottom: 0;
margin-left: 28px;
max-width: 337px;
}
}
.archived .old, .archived img, .archived h3 {
opacity: .6;
}
.archived .update {
opacity: 1;
}
.projects li h3 a {
display: block;
margin: 0 auto;
max-width: 335px;
}
@media only screen and (min-width: 745px) {
.projects li h3 a {
-webkit-flex: 1 auto;
flex: 1 auto;
margin: 0;
}
}
.projects .hero-image {
margin-top: 0;
}
@media only screen and (min-width: 745px) {
.projects .hero-image {
float: left;
}
}
@media only screen and (min-width: 745px) {
.oskar-the-scientist {
margin: 20px auto 0 auto;
max-width: 450px;
}
}
.sub-navigation--list {
margin: 0;
margin-top: 11px;
overflow: hidden;
padding: 0;
/* flex box to centre children */
display: -webkit-flex;
display: -moz-flex;
display: flex;
-webkit-flex-flow: row wrap;
-moz-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
}
@media only screen and (min-width: 600px) {
.sub-navigation--list {
margin-top: 0;
}
}
.sub-navigation--list {
margin: 0;
/* Make sure that the rule is written out only once in case there is no rem substitution */
margin: 0;
margin-top: 11px;
margin-top: 0.6875rem;
overflow: hidden;
padding: 0;
/* Make sure that the rule is written out only once in case there is no rem substitution */
padding: 0;
/* flex box to centre children */
display: -webkit-flex;
display: -moz-flex;
display: flex;
-webkit-flex-flow: row wrap;
-moz-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
}
@media only screen and (min-width: 600px) {
.sub-navigation--list {
margin-top: 0;
}
}
.sub-navigation--list li {
float: left;
list-style-type: none;
margin-bottom: 0;
padding: 0 13px 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
padding: 0 0.8125rem 0.4375rem 0.8125rem;
}
.sub-navigation--list li a {
border-bottom: 1px solid #191919;
border-bottom: 0.0625rem solid #191919;
color: #191919;
display: block;
float: left;
font-size: 16px;
font-size: 1rem;
line-height: 21px;
line-height: 1.3125rem;
padding: 18px 1px 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
padding: 1.125rem 0.0625rem 0.0625rem 0.0625rem;
text-decoration: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.sub-navigation--list li a:hover,
.sub-navigation--list li a:active,
.sub-navigation--list li a:focus {
border-color: #000;
color: #000;
}
.labs-projects .sub-navigation .projects-link a,
.labs-blog .sub-navigation .blog-link a {
background: #ccc;
border-bottom: none;
-webkit-border-radius: 7px;
border-radius: 7px;
display: inline-block;
margin-top: 11px;
margin-top: 0.6875rem;
padding: 7px 14px 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
padding: 0.4375rem 0.875rem;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
-webkit-transition: all none ease;
-moz-transition: all none ease;
-ms-transition: all none ease;
-o-transition: all none ease;
transition: all none ease;
}
@media only screen and (min-width: 770px) {
.labs-projects .sub-navigation .projects-link a,
.labs-blog .sub-navigation .blog-link a {
background: url("https://ind.ie/assets/images/sprite.svg") no-repeat top center;
border-bottom: 1px solid #191919;
border-bottom: 0.0625rem solid #191919;
-webkit-border-radius: 0;
border-radius: 0;
display: block;
margin-top: 0;
padding: 18px 1px 1px 1px;
padding: 1.125rem 0.0625rem 0.0625rem 0.0625rem;
}
.no-svg .labs-projects .sub-navigation .projects-link a,
.no-svg .labs-blog .sub-navigation .blog-link a {
background-image: url("https://ind.ie/assets/images/sprite.png");
}
}
/* Funding footer */
.fund-us {
border-top: 1px solid #ccc;
border-top: 0.0625rem solid #ccc;
border-bottom: 1px solid #ccc;
border-bottom: 0.0625rem solid #ccc;
margin-top: 56px;
margin-top: 3.5rem;
overflow: hidden;
}
@media only screen and (min-width: 580px) {
.fund-us {
margin-top: 140px;
margin-top: 8.75rem;
}
}
.flexbox .fund-us {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
.fund-us h2 {
font-size: 26px;
font-size: 1.625rem;
line-height: 35px;
line-height: 2.1875rem;
margin-top: 28px;
margin-top: 1.75rem;
margin-bottom: 14px;
margin-bottom: 0.875rem;
}
@media only screen and (min-width: 620px) {
.fund-us p {
float: left;
margin-bottom: 28px;
margin-bottom: 1.75rem;
max-width: 70%;
}
}
.fund-us .button {
background: #4d4d4d;
border: none;
-webkit-border-radius: 5px;
border-radius: 5px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
font-size: 18px;
font-size: 1.125rem;
font-family: "Avenir Next", Avenir, 'Helvetica Neue', Helvetica, sans-serif;
height: 35px;
height: 2.1875rem;
line-height: 24px;
margin-top: 14px;
margin-top: 0.875rem;
margin-left: auto;
margin-bottom: 28px;
margin-bottom: 1.75rem;
margin-right: auto;
padding-right: 28px;
padding-right: 1.75rem;
padding-left: 28px;
padding-left: 1.75rem;
max-width: 130px;
max-width: 8.125rem;
text-decoration: none;
}
@media only screen and (min-width: 620px) {
.fund-us .button {
float: right;
margin-top: 0;
margin-right: 0;
margin-bottom: 28px;
margin-bottom: 1.75rem;
}
}
</style>
<!-- Custom head content, if any, can go on the specific page template itself. -->
\ No newline at end of file
</head>
<!-- Labs common -->
<body class="labs labs-projects">
<nav class="site-navigation">
<ul class="site-navigation--list">
<li class="home-link">
<a href="https://ind.ie/">Home</a>
</li>
<li class="about-link">
<a href="https://ind.ie/about">About</a>
</li>
<li class="labs-link">
<a href="https://ind.ie/labs">Labs</a>
</li>
<li class="forum-link">
<a href="https://forum.ind.ie">Forum</a>
</li>
<li class="videos-link">
<a href="https://ind.ie/videos">Videos</a>
</li>
<li class="news-link">
<a href="https://ind.ie/blog">News</a>
</li>
<li class="fund-link">
<a href="https://ind.ie/fund">Fund</a>
</li>
</ul>
</nav>
<nav class="sub-navigation labs-navigation">
<ul class="sub-navigation--list">
<li class="projects-link"><a href="">Projects</a></li>
<li class="blog-link"><a href="blog/">Blog</a></li>
</ul>
</nav>
<!-- Page specific -->
<div class='main' role='main'>
<header class='set-header'>
<h1><a href='./'><img id='set-logo' src='images/set-logo.svg' alt='Set logo'></a></h1>
</header>
<!-- include components/head.html -->
<!-- include components/labs-header.html -->
<h2>Document Caching</h2>
<p>Document caching ensures that a template/data pair is rendered once and only once for the lifetime of the Set instance.</p>
<p>Set implements several levels of caching that is automatic. These are:</p>
<ul>
<li><strong>Partials caching:</strong> partials are cached when they are first loaded to save disk access on future hits.</li>
<li><strong>Template caching:</strong> a template with partials is cached after first composition.</li>
</ul>
<p>In addition, you may optionally opt in for document caching. To do so, include the following Set directive in your data:</p>
<pre><code class='language-coffeescript'>data = {…, __set: {cache: true}}</code></pre>
<p>When you turn on document caching, any template/data pair will only be rendered on first requiest.</p>