RubyGems - utopia - Versions diffs - 2.2.0 → 2.3.0 - Mend

utopia 2.2.0 → 2.3.0

Files changed (290) hide show

data/docs/wiki/development-environment-setup/index.html ADDED Viewed

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+	<head>
+			<title>Development Environment Setup - Utopia</title>
+		<meta charset="UTF-8"/>
+		<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"/>
+		<link rel="icon" type="image/png" href="../../_static/icon.png"/>
+		<link rel="stylesheet" href="../../_static/site.css" type="text/css" media="screen"/>
+		<script src="../../_components/jquery/jquery.min.js"></script>
+		<script src="../../_components/jquery-syntax/jquery.syntax.min.js"></script>
+		<script type="text/javascript">
+		//<![CDATA[
+			jQuery(function($) {
+				$.syntax();
+			});
+		//]]>
+		</script>
+	</head>
+	<body class="">
+		<header>
+			<img src="../../_static/utopia.svg"/>
+		</header>
+		<div id="page">
+	<nav>
+	 › <a href="../../wiki.html">Wiki</a> › <a href="../development-environment-setup.html">Development Environment Setup</a></nav>
+	<h1 id="development-environment-setup">Development Environment Setup</h1>
+<p>Utopia is built on Ruby and Rack. Therefore, Ruby (suggested 2.0+) should be installed and working. Then, simply run:</p>
+<pre><code class="language-bash">$ gem install utopia
+</code></pre>
+<p>To install all required dependencies.</p>
+<p>Utopia and it’s dependencies are built on Linux and Mac by default, and therefore compatibility with Windows is not guaranteed.</p>
+<h2 id="atom-integration">Atom Integration</h2>
+<p>Utopia uses <a href="https://github.com/ioquatix/trenni">Trenni</a> for templates and it has a syntax slightly different from ERB. However, there is a <a href="https://atom.io/packages/language-trenni">package for Atom</a> which provides accurate syntax highlighting.</p>
+	<footer>
+		Last Modified: 2016-12-07 17:37:12 +1300 —
+	</footer>
+		</div>
+	</body>
+</html>

data/docs/wiki/edit.html ADDED Viewed

@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html>
+	<head>
+			<title>Editing Wiki</title>
+		<link rel="icon" type="image/png" href="../_static/icon.png"/>
+		<link rel="stylesheet" href="../_static/site.css" type="text/css" media="screen"/>
+		<script src="../_components/jquery/jquery.min.js"></script>
+		<style type="text/css">
+			.editor form {
+				position: absolute;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				width: 100%;
+				height: 100%;
+			}
+			.editor .header {
+				flex-grow: 0;
+				width: 100%;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				box-shadow: 0px 1px 0.5rem rgba(0, 0, 0, 0.5);
+				z-index: 10;
+			}
+			.editor .header * {
+				margin: 0.5rem;
+			}
+			.editor textarea {
+				flex-grow: 1;
+				width: 100%;
+				resize: none;
+				outline: none;
+				box-sizing: border-box;
+				margin: 0; padding: 0.5rem;
+				border: none;
+				background: none;
+			}
+		</style>
+	</head>
+	<body class="editor">
+	<form action="edit.html#" method="post">
+		<div class="header">
+			<div>Editing &quot;Wiki&quot;</div>
+			<input type="submit"/>
+		</div>
+		<textarea name="content"># Utopia Documentation Wiki
+This wiki includes documentation and examples showing how to use Utopia. You can also browse the [code documentation](/code/index.html) for more detail. Feel free to [edit](edit) any part of this documentation and submit a PR.
+## Introduction Guide
+Reading these pages in order will give you an overview of the design of Utopia, how to set it up for local development and how to deploy it.
+- [Development Environment Setup](development-environment-setup/)
+- [Server Setup](server-setup/)
+- [Your First Page](your-first-page/)
+  - [What is `.xnode`?](faq/what-is-xnode/)
+- [Installing JavaScript Libraries](bower-integration/)
+- [Website Tests](testing/)
+- [Updating Your Site](updating-utopia/)
+## Middleware
+The following are Rack Middleware which provide the core of Utopia.
+- [Static](middleware/static/) — Serve static files efficiently.
+- [Redirection](middleware/redirection/) — Redirect URL patterns and status codes.
+- [Localization](middleware/localization/) — Non-intrusive localization of resources.
+- [Controller](middleware/controller/) — Flexible nested controllers with efficient behaviour.
+  - [Controller Actions](middleware/controller/actions/) — Invoke named actions.
+  - [Controller Rewrite](middleware/controller/rewrite/) — Pattern match requests.
+- [Content](middleware/content/) — XML-style template engine with dynamic markup.
+- [Session](middleware/session/) — Session storage using encrypted client-side cookies.
+## Examples
+Here are some open-source sites built on Utopia.
+- [www.codeotaku.com](http://www.codeotaku.com) ([source](https://github.com/ioquatix/www.codeotaku.com)) — Personal website, blog.
+- Financier ([source](https://github.com/ioquatix/financier)) — Small business management platform, invoicing.
+</textarea>
+	</form>
+	</body>
+</html>

data/docs/wiki/faq/what-is-xnode.html ADDED Viewed

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+	<head>
+			<title>What Is Xnode - Utopia</title>
+		<meta charset="UTF-8"/>
+		<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"/>
+		<link rel="icon" type="image/png" href="../../_static/icon.png"/>
+		<link rel="stylesheet" href="../../_static/site.css" type="text/css" media="screen"/>
+		<script src="../../_components/jquery/jquery.min.js"></script>
+		<script src="../../_components/jquery-syntax/jquery.syntax.min.js"></script>
+		<script type="text/javascript">
+		//<![CDATA[
+			jQuery(function($) {
+				$.syntax();
+			});
+		//]]>
+		</script>
+	</head>
+	<body class="">
+		<header>
+			<img src="../../_static/utopia.svg"/>
+		</header>
+		<div id="page">
+	<nav>
+	 › <a href="../../wiki.html">Wiki</a> › <span>FAQ</span> › <a href="what-is-xnode.html">What Is Xnode</a></nav>
+	<h1 id="what-is-xnode">What Is <code>.xnode</code>?</h1>
+<p>Xnodes are the files on disk which are used as part of Utopia’s content/view layer. Xnode templates are designed to maximise the ratio of content to markup. They improve separation of concerns and semantic organisation because repeated markup can be reused easily.</p>
+<p>Here is a example of a blog post:</p>
+<pre><code class="language-xml">&lt;content:entry title=&quot;My day as a fish&quot;&gt;
+	&lt;p&gt;It was not very exciting&lt;/p&gt;
+&lt;/content:entry&gt;
+</code></pre>
+<p>The <code>Utopia::Content</code> middleware is built on top of the <a href="https://github.com/ioquatix/trenni">Trenni</a> template language which uses two-phase evaluation.</p>
+<h2 id="phase-1-evaluation">Phase 1: Evaluation</h2>
+<p>Trenni processes the view content by evaluation <code>#{expressions}</code> and <code>&lt;?r statements ?&gt;</code>. This generates an output buffer. The output buffer should contain valid markup (i.e. balanced tags, no invalid characters).</p>
+<h2 id="phase-2-markup">Phase 2: Markup</h2>
+<p>Once the template is evaluated to text, it is parsed again into an event stream which is used to generate the final output. The event stream contains things like “open tag”, “attribute”, “close tag”, and so on, and these are fed into the <code>Utopia::Content</code> middleware which generates the actual content. Tags without namespaces are output verbatim, while tags with namespaces invoke the tag lookup machinery. This uses the tag name to invoke further behaviour, e.g. inserting more content. Here is a simple example of a basic page:</p>
+<pre><code class="language-xml">&lt;content:page&gt;
+	&lt;content:heading&gt;Welcome to my page&lt;/content:heading&gt;
+	&lt;p&gt;This page is so awesome&lt;/p&gt;
+&lt;/content:page&gt;
+</code></pre>
+<p>In order to render this, you will need two additional files, <code>_page.xnode</code> and <code>_heading.xnode</code>. As a short example, <code>_heading.xnode</code> might look like this:</p>
+<pre><code class="language-xml">&lt;h1&gt;&lt;utopia:content/&gt;&lt;/h1&gt;
+</code></pre>
+<p>When the parser encounters <code>&lt;content:heading&gt;...</code> in the main page, it would evaluate the above template. <code>&lt;utopia:content/&gt;</code> is a special tag that evaluates to the content that the parent tag provided, so in this case: <code>"Welcome to my page"</code>.  Thus, the final output is <code>&lt;h1&gt;Welcome to my page&lt;/h1&gt;</code>.</p>
+	<footer>
+		Last Modified: 2018-01-26 09:29:57 +1300 —
+	</footer>
+		</div>
+	</body>
+</html>

data/docs/wiki/faq/what-is-xnode/index.html ADDED Viewed

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+	<head>
+			<title>What Is Xnode - Utopia</title>
+		<meta charset="UTF-8"/>
+		<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"/>
+		<link rel="icon" type="image/png" href="../../../_static/icon.png"/>
+		<link rel="stylesheet" href="../../../_static/site.css" type="text/css" media="screen"/>
+		<script src="../../../_components/jquery/jquery.min.js"></script>
+		<script src="../../../_components/jquery-syntax/jquery.syntax.min.js"></script>
+		<script type="text/javascript">
+		//<![CDATA[
+			jQuery(function($) {
+				$.syntax();
+			});
+		//]]>
+		</script>
+	</head>
+	<body class="">
+		<header>
+			<img src="../../../_static/utopia.svg"/>
+		</header>
+		<div id="page">
+	<nav>
+	 › <a href="../../../wiki.html">Wiki</a> › <span>FAQ</span> › <a href="../what-is-xnode.html">What Is Xnode</a></nav>
+	<h1 id="what-is-xnode">What Is <code>.xnode</code>?</h1>
+<p>Xnodes are the files on disk which are used as part of Utopia’s content/view layer. Xnode templates are designed to maximise the ratio of content to markup. They improve separation of concerns and semantic organisation because repeated markup can be reused easily.</p>
+<p>Here is a example of a blog post:</p>
+<pre><code class="language-xml">&lt;content:entry title=&quot;My day as a fish&quot;&gt;
+	&lt;p&gt;It was not very exciting&lt;/p&gt;
+&lt;/content:entry&gt;
+</code></pre>
+<p>The <code>Utopia::Content</code> middleware is built on top of the <a href="https://github.com/ioquatix/trenni">Trenni</a> template language which uses two-phase evaluation.</p>
+<h2 id="phase-1-evaluation">Phase 1: Evaluation</h2>
+<p>Trenni processes the view content by evaluation <code>#{expressions}</code> and <code>&lt;?r statements ?&gt;</code>. This generates an output buffer. The output buffer should contain valid markup (i.e. balanced tags, no invalid characters).</p>
+<h2 id="phase-2-markup">Phase 2: Markup</h2>
+<p>Once the template is evaluated to text, it is parsed again into an event stream which is used to generate the final output. The event stream contains things like “open tag”, “attribute”, “close tag”, and so on, and these are fed into the <code>Utopia::Content</code> middleware which generates the actual content. Tags without namespaces are output verbatim, while tags with namespaces invoke the tag lookup machinery. This uses the tag name to invoke further behaviour, e.g. inserting more content. Here is a simple example of a basic page:</p>
+<pre><code class="language-xml">&lt;content:page&gt;
+	&lt;content:heading&gt;Welcome to my page&lt;/content:heading&gt;
+	&lt;p&gt;This page is so awesome&lt;/p&gt;
+&lt;/content:page&gt;
+</code></pre>
+<p>In order to render this, you will need two additional files, <code>_page.xnode</code> and <code>_heading.xnode</code>. As a short example, <code>_heading.xnode</code> might look like this:</p>
+<pre><code class="language-xml">&lt;h1&gt;&lt;utopia:content/&gt;&lt;/h1&gt;
+</code></pre>
+<p>When the parser encounters <code>&lt;content:heading&gt;...</code> in the main page, it would evaluate the above template. <code>&lt;utopia:content/&gt;</code> is a special tag that evaluates to the content that the parent tag provided, so in this case: <code>"Welcome to my page"</code>.  Thus, the final output is <code>&lt;h1&gt;Welcome to my page&lt;/h1&gt;</code>.</p>
+	<footer>
+		Last Modified: 2018-01-26 09:29:57 +1300 —
+	</footer>
+		</div>
+	</body>
+</html>

data/docs/wiki/middleware/content.html ADDED Viewed

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+	<head>
+			<title>Content - Utopia</title>
+		<meta charset="UTF-8"/>
+		<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"/>
+		<link rel="icon" type="image/png" href="../../_static/icon.png"/>
+		<link rel="stylesheet" href="../../_static/site.css" type="text/css" media="screen"/>
+		<script src="../../_components/jquery/jquery.min.js"></script>
+		<script src="../../_components/jquery-syntax/jquery.syntax.min.js"></script>
+		<script type="text/javascript">
+		//<![CDATA[
+			jQuery(function($) {
+				$.syntax();
+			});
+		//]]>
+		</script>
+	</head>
+	<body class="">
+		<header>
+			<img src="../../_static/utopia.svg"/>
+		</header>
+		<div id="page">
+	<nav>
+	 › <a href="../../wiki.html">Wiki</a> › <span>Middleware</span> › <a href="content.html">Content</a></nav>
+	<h1 id="content">Content</h1>
+<p>A tag based content generation system which integrates nicely with HTML5. Supports structures which separate generic page templates from dynamically generated content in an easy and consistent way.</p>
+<pre><code class="language-ruby">use Utopia::Content,
+	cache_templates: (RACK_ENV == :production)
+</code></pre>
+<p>A basic template <code>create.xnode</code> looks something like:</p>
+<pre><code class="language-trenni">&lt;content:page&gt;
+	&lt;content:heading&gt;Create User&lt;/content:heading&gt;
+	&lt;form action=&quot;#&quot;&gt;
+		&lt;input name=&quot;name&quot; /&gt;
+		&lt;input type=&quot;submit&quot; /&gt;
+	&lt;/form&gt;
+&lt;/content:page&gt;
+</code></pre>
+<p>This template would typically be designed with supporting <code>_page.xnode</code> and <code>_heading.xnode</code> in the same directory or, more typically, somewhere further up the directory hierarchy.</p>
+	<footer>
+		Last Modified: 2017-05-03 14:21:19 +1200 —
+	</footer>
+		</div>
+	</body>
+</html>

data/docs/wiki/middleware/content/index.html ADDED Viewed

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+	<head>
+			<title>Content - Utopia</title>
+		<meta charset="UTF-8"/>
+		<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"/>
+		<link rel="icon" type="image/png" href="../../../_static/icon.png"/>
+		<link rel="stylesheet" href="../../../_static/site.css" type="text/css" media="screen"/>
+		<script src="../../../_components/jquery/jquery.min.js"></script>
+		<script src="../../../_components/jquery-syntax/jquery.syntax.min.js"></script>
+		<script type="text/javascript">
+		//<![CDATA[
+			jQuery(function($) {
+				$.syntax();
+			});
+		//]]>
+		</script>
+	</head>
+	<body class="">
+		<header>
+			<img src="../../../_static/utopia.svg"/>
+		</header>
+		<div id="page">
+	<nav>
+	 › <a href="../../../wiki.html">Wiki</a> › <span>Middleware</span> › <a href="../content.html">Content</a></nav>
+	<h1 id="content">Content</h1>
+<p>A tag based content generation system which integrates nicely with HTML5. Supports structures which separate generic page templates from dynamically generated content in an easy and consistent way.</p>
+<pre><code class="language-ruby">use Utopia::Content,
+	cache_templates: (RACK_ENV == :production)
+</code></pre>
+<p>A basic template <code>create.xnode</code> looks something like:</p>
+<pre><code class="language-trenni">&lt;content:page&gt;
+	&lt;content:heading&gt;Create User&lt;/content:heading&gt;
+	&lt;form action=&quot;#&quot;&gt;
+		&lt;input name=&quot;name&quot; /&gt;
+		&lt;input type=&quot;submit&quot; /&gt;
+	&lt;/form&gt;
+&lt;/content:page&gt;
+</code></pre>
+<p>This template would typically be designed with supporting <code>_page.xnode</code> and <code>_heading.xnode</code> in the same directory or, more typically, somewhere further up the directory hierarchy.</p>
+	<footer>
+		Last Modified: 2017-05-03 14:21:19 +1200 —
+	</footer>
+		</div>
+	</body>
+</html>