Improve partials demo

bfa65175 · Aral Balkan · 866788b1 · bfa65175 · bfa65175 · bfa65175
Verified Commit bfa65175 authored Dec 02, 2017 by Aral Balkan
--- a/coffee/routes/simple.coffee
+++ b/coffee/routes/simple.coffee
@@ -12,7 +12,7 @@

 # Sample 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.'

--- a/coffee/views/components/footer.html
+++ b/coffee/views/components/footer.html
+		<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>
--- a/coffee/views/components/simple-footer.html
+++ b/coffee/views/components/simple-footer.html

 <hr>
 <h2>Footer (partial)</h2>
-<p>© 2017 Aral Balkan. Released under the MIT License.</p>
--- a/coffee/views/components/simple-header.html
+++ b/coffee/views/components/simple-header.html
--- a/coffee/views/main.html
+++ b/coffee/views/main.html
@@ -469,10 +469,8 @@

 		<p>Set is based on the excellent <a href='http://code.google.com/p/distal/'>Distal template engine</a>.</p>

-		<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>
-
+    <!-- include components/footer.html -->
+    
 	</div>

 </body>

--- a/coffee/views/partials.html
+++ b/coffee/views/partials.html
 <!-- include components/head.html -->
 <!-- include components/labs-header.html -->

-  	<!-- include components/simple-header.html -->
+  	<!-- include components/partials-demo-header.html -->

    <h2>Partials Demo</h2>

@@ -13,7 +13,41 @@

    <p>Partials take part in the template render. For example, the contents of the <code>title</code> tag on this page are specified using the <code>data-set-text</code> attribute on the tag.</p>

-   	<!-- include components/simple-footer.html -->
+    <section id='source'>
+        <h2>HTML (head component)</h2>
+        <pre><code class='language-markup'>&lt;!doctype html&gt;
+&lt;html lang='en'&gt;
+&lt;head&gt;
+  &lt;!-- Labs common --&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;
+  &lt;title data-set-text='title'&gt;Ind.ie Labs: Set&lt;/title&gt;
+  …
+        </code></pre>
+
+        <h2>HTML (main template)</h2>
+        <pre><code class='language-markup'>&lt;!-- include components/head.html --&gt;
+&lt;!-- include components/labs-header.html --&gt;
+  &lt;!-- include components/partials-demo-header.html --&gt;
+  &lt;h2&gt;Partials Demo&lt;/h2&gt;
+  …
+  &lt;!-- include components/partials-demo-footer.html --&gt;
+  &lt;!-- include components/footer.html --&gt;
+  &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;</code></pre>
+    </section>
+
+    <section id='server'>
+        <h2>Express 3 router (node.js)</h2>
+        <pre><code class='language-coffeescript'>exports.route = (request, response) ->
+  response.render 'partials', { data: { title: 'Ind.ie Labs: Set: Partials' }</code></pre>
+    </section>
+
+    <script src='js/prism.js'></script>
+
+   	<!-- include components/partials-demo-footer.html -->
+   	<!-- include components/footer.html -->

  </div>
 </body>

--- a/coffee/views/simple.html
+++ b/coffee/views/simple.html
 <!doctype html>
 <html lang='en'>
 <head>
+    <!-- Do not render with partials as the template itself is linked to -->
+
    <!-- Labs common -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">