Commit 29c159c6 authored by Aral Balkan's avatar Aral Balkan

Updated Set with relative URLs and copy updates in the examples.

parent 41b3abde
.DS_Store
node_modules
\ No newline at end of file
node_modules
npm-debug.log
\ No newline at end of file
......@@ -35,3 +35,8 @@ Credits
---
Set extends the excellent [Distal template engine](https://code.google.com/p/distal/) which is an implementation of the [Template Attribute Language](http://en.wikipedia.org/wiki/Template_Attribute_Language) (TAL) concept from [Zope](http://www.zope.org).
Copyright © Aral Balkan.
Released with ♥ by [Ind.ie](https://ind.ie) under the MIT License.
Portions released under the Apache License.
################################################################################
#
# Set
#
# Copyright © Aral Balkan.
# Released with ♥ by Ind.ie under the MIT License.
# Portions released under the Apache License.
#
################################################################################
fs = require 'fs'
exports.route = (request, response) ->
......
################################################################################
#
# Tally App.net posts example.
# Set client side updates example.
#
# Displays the global timeline from App.net.
# Displays the global timeline from App.net with client side updates
# using the same template.
#
# Copyright © 2013, Aral Balkan.
# Released under the MIT license. (http://opensource.org/licenses/MIT)
# Copyright © Aral Balkan.
# Released with ♥ by Ind.ie under the MIT License.
# Portions released under the Apache License.
#
################################################################################
......
################################################################################
#
# Tally App.net posts example.
# Set App.net posts example.
#
# Displays the global timeline from App.net.
#
# Copyright © 2013, Aral Balkan.
# Released under the MIT license. (http://opensource.org/licenses/MIT)
# Copyright © Aral Balkan.
# Released with ♥ by Ind.ie under the MIT License.
# Portions released under the Apache License.
#
################################################################################
......
################################################################################
#
# Tally App.net posts example (with timer profiling)
# Set App.net posts example (with timer profiling).
#
# Displays the global timeline from App.net and profiles the template render.
# Displays the global timeline from App.net and profiles template rendering.
#
# Copyright © 2013, Aral Balkan.
# Released under the MIT license. (http://opensource.org/licenses/MIT)
# Copyright © Aral Balkan.
# Released with ♥ by Ind.ie under the MIT License.
# Portions released under the Apache License.
#
################################################################################
......
################################################################################
#
# Set
#
# Copyright © Aral Balkan.
# Released with ♥ by Ind.ie under the MIT License.
# Portions released under the Apache License.
#
################################################################################
githubFlavouredMarkdown = require 'ghm'
fs = require 'fs'
......
################################################################################
#
# Set
#
# Copyright © Aral Balkan.
# Released with ♥ by Ind.ie under the MIT License.
# Portions released under the Apache License.
#
################################################################################
fs = require 'fs'
exports.route = (request, response) ->
......
......@@ -4,8 +4,9 @@
#
# Demonstrates how to map static data to a template.
#
# Copyright © 2013, Aral Balkan.
# Released under the MIT license. (http://opensource.org/licenses/MIT)
# Copyright © Aral Balkan.
# Released with ♥ by Ind.ie under the MIT License.
# Portions released under the Apache License.
#
################################################################################
......@@ -16,13 +17,13 @@ data =
class: 'rendered-summary'
content: 'This is a simple example to demonstrate Set, a templating engine for Express (node.js) and client‐side JavaScript.'
newURL: 'http://aralbalkan.com'
correctURLFragment: 'moderniosdevelopment'
correctURLFragment: 'ind'
aralImageURL: 'http://aralbalkan.com/images/aral.jpg'
friends:
[
{name: 'Laura', skills: 'design, development, illustration, speaking'},
{name: 'Seb', skills: 'particles, games, JavaScript, C++'},
{name: 'Natalie', skills: 'HTML, CSS'}
{name: 'Jo', skills: 'operations, cognitive psychology, sports coaching'},
{name: 'Osky', skills: 'begging for food, looking cute, occasionally howling'}
]
templateClass: 'tab'
renderedClass: 'tab selected'
......@@ -33,7 +34,7 @@ exports.route = (request, response) ->
data.__set = {
formatters:
fullURL: (value) ->
return 'http://' + value + '.com'
return 'https://' + value + '.ie'
isSelected: (value) ->
return 'tab selected'
}
......
......@@ -4,8 +4,9 @@
#
# The server for the Set examples.
#
# Copyright © 2013, Aral Balkan.
# Released under the MIT license. (http://opensource.org/licenses/MIT)
# Copyright © Aral Balkan.
# Released with ♥ by Ind.ie under the MIT License.
# Portions released under the Apache License.
#
################################################################################
......
################################################################################
#
# Set tests.
#
# Copyright © Aral Balkan.
# Released with ♥ by Ind.ie under the MIT License.
# Portions released under the Apache License.
#
################################################################################
require 'should'
set = (require '../lib/set-express').render
......
......@@ -10,7 +10,7 @@
<link rel="stylesheet" type="text/css" href="css/set-highlights.css">
<!-- Set engine -->
<script src="/set.js"></script>
<script src="set.js"></script>
<script>
// This is the data that will be used to render the template.
......@@ -48,7 +48,7 @@
<body>
<header>
<h1><a href='/'><img id='set-logo' src='images/set-logo.svg' alt='Set logo'></a></h1>
<h1><a href='./'><img id='set-logo' src='images/set-logo.svg' alt='Set logo'></a></h1>
<h1>Set client‐side tests</h1>
......@@ -56,7 +56,7 @@
</header>
<nav>
<h1><a href='/'>Home</a></h1>
<h1><a href='./'>Home</a></h1>
</nav>
<div id='tests' role='main'>
......
This diff is collapsed.
......@@ -16,13 +16,13 @@
</head>
<body>
<h1><a href='/'><img id='set-logo' src='images/set-logo.svg' alt='Set logo'></a></h1>
<h1><a href='..'><img id='set-logo' src='images/set-logo.svg' alt='Set logo'></a></h1>
<ul class='tabs'>
<a href='/simple'><li data-set-attribute='tab' class='tab'>Rendered</li></a>
<a href='/simple.html'><li data-set-attribute='tab'>Set</li></a>
<a href='/handlebars.html'><li class='tab selected'>Handlebars</li></a>
<a href='/plates.html'><li class='tab'>Plates</li></a>
<a href='./simple'><li data-set-attribute='tab' class='tab'>Rendered</li></a>
<a href='./simple.html'><li data-set-attribute='tab'>Set</li></a>
<a href='./handlebars.html'><li class='tab selected'>Handlebars</li></a>
<a href='./plates.html'><li class='tab'>Plates</li></a>
</ul>
<section class='rendered-summary'>
......@@ -41,7 +41,7 @@
<p><a href='{{newURL}}'>This should link to Aral’s homepage.</a></p>
<p><a href='http://{{correctURLFragment}}.com'>This should link to the Modern iOS Development workshop.</a></p>
<p><a href='http://{{correctURLFragment}}.com'>This should link to Ind.ie</a></p>
<p>This should be Aral’s headshot:</p>
......@@ -73,7 +73,7 @@
&lt;p&gt;&lt;a href=&#039;{{newURL}}&#039;&gt;This should link to Aral&amp;rsquo;s homepage.&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&#039;http://{{correctURLFragment}}.com&#039;&gt;This should link to the Modern iOS Development workshop.&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&#039;http://{{correctURLFragment}}.com&#039;&gt;This should link to Ind.ie.&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;This should be Aral&amp;rsquo;s headshot:&lt;/p&gt;
......@@ -101,13 +101,13 @@
name: 'Express 3‐Handlebars'
content: 'This is a simple example to demonstrate Express 3‐Handlebars'
newURL: 'http://aralbalkan.com'
correctURLFragment: 'moderniosdevelopment'
correctURLFragment: 'ind'
aralImageURL: 'http://aralbalkan.com/images/aral.jpg'
friends:
[
{name: 'Laura', skills: 'design, development, illustration, speaking'},
{name: 'Seb', skills: 'particles, games, JavaScript, C++'},
{name: 'Natalie', skills: 'HTML, CSS'}
{name: 'Jo', skills: 'operations, cognitive psychology, sports coaching'},
{name: 'Osky', skills: 'begging for food, looking cute, occasionally howling'}
]</code></pre>
<h2>Express 3 router (node.js)</h2>
......
......@@ -8,7 +8,7 @@
<link rel='stylesheet' type='text/css' href='css/how-is-set-different.css'>
</head>
<body>
<a href='/'><h1><img id='set-logo' src='images/set-logo.svg' alt='Set logo'></h1></a>
<a href='..'><h1><img id='set-logo' src='images/set-logo.svg' alt='Set logo'></h1></a>
<p id='short-description'>Set is a simple, unobtrusive, design‐led JavaScript template engine for Node.js and browsers.</p>
......@@ -31,7 +31,7 @@
</div>
<footer>
<p>Copyright © 2013, <a href='http://aralbalkan.com'>Aral Balkan</a>. Released under the MIT License. Portions released under the Apache License. <a href='mailto:aral@aralbalkan.com'>Questions, feedback, etc.</a></p>
<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>
</body>
......
......@@ -53,10 +53,10 @@
<h2>Other examples</h2>
<ul>
<li><a href='/simple'>A comparison of Set, Handlebars, and Plates with static data.</a></li>
<li><a href='/posts'>App.net global timeline example</a> (<a href='/posts.html'>template</a>, <a href='/posts-real-data.html'>template with real data</a>)</li>
<li><a href='/posts-client-side-updates'>App.net global timeline with client‐side updates</a> using the same template.</li>
<li><a href='/profile'>App.net global timeline example with profiling</a> <small>Check the console for timings.</small></li>
<li><a href='./simple'>A comparison of Set, Handlebars, and Plates with static data.</a></li>
<li><a href='./posts'>App.net global timeline example</a> (<a href='/posts.html'>template</a>, <a href='./posts-real-data.html'>template with real data</a>)</li>
<li><a href='./posts-client-side-updates'>App.net global timeline with client‐side updates</a> using the same template.</li>
<li><a href='./profile'>App.net global timeline example with profiling</a> <small>Check the console for timings.</small></li>
</ul>
<h2>Source code</h2>
......@@ -67,7 +67,7 @@
<ul>
<li>To run the tests, simply execute <code>npm test</code></li>
<li><a href='/client-side-tests.html'>Client‐side tests</a></li>
<li><a href='./client-side-tests.html'>Client‐side tests</a></li>
</ul>
<!--
......@@ -83,7 +83,7 @@
</div>
<footer>
<p>Copyright © 2013-2014, <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>
<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>
</body>
......
......@@ -17,18 +17,18 @@
</head>
<body>
<h1><a href='/'><img id='set-logo' src='images/set-logo.svg' alt='Set logo'></a></h1>
<h1><a href='..'><img id='set-logo' src='images/set-logo.svg' alt='Set logo'></a></h1>
<ul class='tabs'>
<a href='/simple'><li data-set-attribute='tab' class='tab'>Rendered</li></a>
<a href='/simple.html'><li data-set-attribute='tab'>Set</li></a>
<a href='/handlebars.html'><li class='tab'>Handlebars</li></a>
<a href='/plates.html'><li class='tab selected'>Plates</li></a>
<a href='./simple'><li data-set-attribute='tab' class='tab'>Rendered</li></a>
<a href='./simple.html'><li data-set-attribute='tab'>Set</li></a>
<a href='./handlebars.html'><li class='tab'>Handlebars</li></a>
<a href='./plates.html'><li class='tab selected'>Plates</li></a>
</ul>
<section class='rendered-summary'>
<h1>Plates example</h1>
<p>This is the template as rendered by Plates from the Flatiron framework. Even though the template is unobtrusive and pure HTML, Plates requires mapping code to be written, making it cumbersome and error‐prone to use. Set requires no mapping code.</p>
<p>This is the same template for Plates from the Flatiron framework. Even though the template is unobtrusive and pure HTML, Plates requires mapping code to be written, making it cumbersome and error‐prone to use. Set requires no mapping code.</p>
</section>
<section id='template'>
......@@ -42,7 +42,7 @@
<p><a href='/'>This should link to Aral’s homepage.</a></p>
<p><a href='http://aralbalkan.com'>This should link to the Modern iOS Development workshop.</a></p>
<p><a href='http://aralbalkan.com'>This should link to Ind.ie.</a></p>
<p>This should be Aral’s headshot:</p>
......@@ -70,7 +70,7 @@
&lt;p&gt;&lt;a href=&#039;/&#039;&gt;This should link to Aral&rsquo;s homepage.&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&#039;http://aralbalkan.com&#039;&gt;This should link to the Modern iOS Development workshop.&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&#039;http://aralbalkan.com&#039;&gt;This should link to Ind.ie.&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;This should be Aral&rsquo;s headshot:&lt;/p&gt;
......@@ -94,13 +94,13 @@
name: 'Express 3‐Plates'
content: 'This is a simple example to demonstrate Express 3‐Plates.'
newURL: 'http://aralbalkan.com'
correctURLFragment: 'moderniosdevelopment'
correctURLFragment: 'ind.ie'
aralImageURL: 'http://aralbalkan.com/images/aral.jpg'
friend:
[
{name: 'Laura', skills: 'design, development, illustration, speaking'},
{name: 'Seb', skills: 'particles, games, JavaScript, C++'},
{name: 'Natalie', skills: 'HTML, CSS'}
{name: 'Jo', skills: 'operations, cognitive psychology, sports coaching'},
{name: 'Osky', skills: 'begging for food, looking cute, occasionally howling'}
]
map = plates.Map()
......@@ -122,7 +122,7 @@
map.where('href').is('/').insert('newURL')
# Partial value replacement
map.where('href').has(/aralbalkan/).insert('correctURLFragment')
map.where('href').has(/aralbalkan.com/).insert('correctURLFragment')
# Arbitrary attributes
map.where('data-content').is('photo').use('aralImageURL').as('src')
......
......@@ -72,7 +72,7 @@
<body>
<header>
<h1><a href='/'><img id='set-logo' src='images/set-logo.svg' alt='Set logo'></a></h1>
<h1><a href='..'><img id='set-logo' src='images/set-logo.svg' alt='Set logo'></a></h1>
</header>
<h1>App.net Global Timeline</h1>
......
......@@ -14,7 +14,7 @@
<body>
<header>
<h1><a href='/'><img id='set-logo' src='images/set-logo.svg' alt='Tally logo'></a></h1>
<h1><a href='..'><img id='set-logo' src='images/set-logo.svg' alt='Tally logo'></a></h1>
</header>
<h1>App.net Global Timeline</h1>
......
......@@ -12,7 +12,7 @@
</head>
<body>
<header>
<h1><a href='/'><img id='set-logo' src='images/set-logo.svg' alt='Set logo'></a></h1>
<h1><a href='..'><img id='set-logo' src='images/set-logo.svg' alt='Set logo'></a></h1>
</header>
<h1>App.net Global Timeline</h1>
......@@ -23,13 +23,13 @@
<p><a class='user' data-set-attribute='href post.user.canonical_url' data-set-text='post.user.name' href=''>Jane User</a>
<span class='postText' data-set-text='html post.html'>This is a sample post. This list item will be the one that is used as the prototype for the final list. Working with actual content as a place‐holder means you can do things like add (and style) <a href='http://aralbalkan.com'>links</a>, like this one to Aral’s <a href='http://moderniosdevelopment.com'>Modern iOS Development Workshop</a> in April, 2013 in the UK.</span></p>
<span class='postText' data-set-text='html post.html'>This is a sample post. This list item will be the one that is used as the prototype for the final list. Working with actual content as a place‐holder means you can do things like add (and style) <a href='http://aralbalkan.com'>links</a>, like this one to <a href='https://Ind.ie'>Ind.ie</a>.</span></p>
</li>
<li data-set-dummy><img src='http://placehold.it/100x100' alt='User name’s avatar'><p><a class='user' href=''>John User</a> <span class='postText'>This is another sample post. These will only display when viewing the unprocessed template to help you tweak the design of the page.</span></li>
<li data-set-dummy><img src='http://placehold.it/100x100' alt='User name’s avatar'><p><a class='user' href=''>Osky Kalbag</a> <span class='postText'>By the way, did we mention that you can learn how to make native iPhone and iPad apps using Objective-C and Cocoa Touch in just three days of hands‐on coding with Aral at his <a href='http://moderniosdevelopment.com'>Modern iOS Development Workshop</a> in Brighton this April?</p><p>Oh, we did, ah… well, at least that’s filled up this longer post sample that has multiple paragraphs so that we can design for that eventuality.</span></li>
<li data-set-dummy><img src='http://placehold.it/100x100' alt='User name’s avatar'><p><a class='user' href=''>Osky Kalbag</a> <span class='postText'>Another entry…<p>This one is spread across a number of paragraphs.</p><p>This helps us design for longer posts.</p><p>And get a better feel for the constraints and break points of our design.</span></li>
<li data-set-dummy><img src='http://placehold.it/100x100' alt='User name’s avatar'><p><a class='user' href=''>Yet A. Nother-Person</a> <span class='postText'>By using a range of copy&#8202;&#8202;and actual content&#8202;&#8202; you can get a better feel for the constraints of your design e.g., what happens with really long URLs like this: http://thisisareallylongurlohmyyourerightitisaverylongurlwhatlongurlsyouhavegrandma.com</p></li>
......
......@@ -14,7 +14,7 @@
<section role='main' data-set-text='html readme'></section>
<p><a href='/'>Return to the index.</a></p>
<p><a href='..'>Return to the index.</a></p>
</body>
</html>
\ No newline at end of file
......@@ -18,15 +18,15 @@
<body>
<header>
<h1><a href='/'><img id='set-logo' src='images/set-logo.svg' alt='Set logo'></a></h1>
<h1><a href='..'><img id='set-logo' src='images/set-logo.svg' alt='Set logo'></a></h1>
</header>
<ul class='tabs'>
<a href='/simple'><li data-set-attribute='class renderedClass' class='tab'>Rendered</li></a>
<a data-set-dummy href='/simple.html'><li class='tab selected'>Set</li></a>
<a href='/simple.html'><li data-set-attribute='class templateClass' class='invisible'>Set</li></a>
<a href='/handlebars.html'><li class='tab'>Handlebars</li></a>
<a href='/plates.html'><li class='tab'>Plates</li></a>
<a href='./simple'><li data-set-attribute='class renderedClass' class='tab'>Rendered</li></a>
<a data-set-dummy href='./simple.html'><li class='tab selected'>Set</li></a>
<a href='./simple.html'><li data-set-attribute='class templateClass' class='invisible'>Set</li></a>
<a href='./handlebars.html'><li class='tab'>Handlebars</li></a>
<a href='./plates.html'><li class='tab'>Plates</li></a>
</ul>
<section data-set-attribute='class class' class='invisible'>
......@@ -54,7 +54,7 @@
<p><a data-set-attribute='href newURL' href='/'>This should link to Aral’s homepage.</a></p>
<!-- Custom Formatter -->
<p><a data-set-attribute='href correctURLFragment fullURL' href='http://aralbalkan.com'>This should link to the Modern iOS Development workshop.</a></p>
<p><a data-set-attribute='href correctURLFragment fullURL' href='http://aralbalkan.com'>This should link to Ind.ie.</a></p>
<p>This should be Aral’s headshot:</p>
......@@ -100,7 +100,7 @@
&lt;p&gt;&lt;a data-set-attribute=&#039;href newURL&#039; href=&#039;/&#039;&gt;This should link to Aral&rsquo;s homepage.&lt;/a&gt;&lt;/p&gt;
&lt;!-- Custom Formatter --&gt;
&lt;p&gt;&lt;a data-set-attribute=&#039;href correctURLFragment fullURL&#039; href=&#039;http://aralbalkan.com&#039;&gt;This should link to the Modern iOS Development workshop.&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a data-set-attribute=&#039;href correctURLFragment fullURL&#039; href=&#039;http://aralbalkan.com&#039;&gt;This should link to Ind.ie.&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;This should be Aral&rsquo;s headshot:&lt;/p&gt;
......@@ -136,13 +136,13 @@
name: 'Set'
content: 'This is a simple example to demonstrate Set, a templating engine for Express (node.js) and client‐side JavaScript.'
newURL: 'http://aralbalkan.com'
correctURLFragment: 'moderniosdevelopment'
correctURLFragment: 'ind'
aralImageURL: 'http://aralbalkan.com/images/aral.jpg'
friends:
[
{name: 'Laura', skills: 'design, development, illustration, speaking'},
{name: 'Seb', skills: 'particles, games, JavaScript, C++'},
{name: 'Natalie', skills: 'HTML, CSS'}
{name: 'Jo', skills: 'operations, cognitive psychology, sports coaching'},
{name: 'Osky', skills: 'begging for food, looking cute, occasionally howling'}
]</code></pre>
<h2>Express 3 router (node.js)</h2>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment