feat: Update basic screens

- Add order to front matter
- Separate script and assets block
- Sort index lists

source/screens/demo/basics.liquid

@@ -2,6 +2,7 @@
 title: Basics
 tags:
 - demoIndex
+order: 2
 ---
 {% layout 'hippie/page.liquid' %}
 

source/screens/demo/components.liquid

@@ -2,6 +2,7 @@
 title: Components
 tags:
 - demoIndex
+order: 3
 ---
 {% layout 'hippie/page.liquid' %}
 
@@ -306,7 +307,7 @@ tags:
 				<input id="inpPass" type="password"/>
 				<span id="hintPass" style="visibility:hidden"><kbd>Shift</kbd> is pressed.</span>
 				<br>
-				<input id ="inpText" type="text"/>
+				<input id="inpText" type="text"/>
 				<span id="hintText"><kbd>CapsLock</kbd> is on.</span>
 			</form>
 		</div>

source/screens/demo/index.liquid

@@ -1,8 +1,6 @@
 ---
 permalink: "/"
 title: Index
-tags:
-- demoIndex
 ---
 {% assign pageId = page.fileSlug -%}
 {% assign pageClass = 'h_full_view' -%}
@@ -35,7 +33,8 @@ tags:
 		</div>
 		<nav>
 			<ul class="block link">
-				{% for link in collections.demoIndex %}
+				{% assign indexByOrder = collections.demoIndex | sort: 'data.order' %}
+				{% for link in indexByOrder %}
 					<li>
 						<a href="{{ link.page.url }}">{{ link.data.title }}</a>
 					</li>
@@ -47,7 +46,6 @@ tags:
 				<h3>Page</h3>
 				<ul class="block link">
 					{% assign pagesByTitle = collections.demoPage | sort: 'data.title' %}
-
 					{% for link in pagesByTitle %}
 						<li>
 							<a href="{{ link.page.url }}">{{ link.data.title }}</a>
@@ -58,7 +56,8 @@ tags:
 			<section>
 				<h3>Example</h3>
 				<ul class="block link">
-					{% for link in collections.demoExample %}
+					{% assign examplesByTitle = collections.demoExample | sort: 'data.title' %}
+					{% for link in examplesByTitle %}
 						<li>
 							<a href="{{ link.page.url }}">{{ link.data.title }}</a>
 						</li>

source/screens/demo/introduction.liquid

@@ -2,6 +2,7 @@
 title: Introduction
 tags:
 - demoIndex
+order: 1
 ---
 {% layout 'hippie/page.liquid' %}
 
@@ -28,13 +29,7 @@ tags:
 {% block script %}
 {{ block.super -}}
 <script>
-	assetsLoaded = true;
-	logPerf('Assets loaded.', assetsLoaded);
-	// Page specific
-	// ------------------------------------------------------------------------------
 	composeMail('special', 'me', 'domain', 'tld', 'Me', 'HIPPIE')
 	composeMail('.general', 'name', 'domain', 'tld', '', '')
-
-	logPerf('Application ready... not.');
 </script>
 {% endblock %}

source/screens/demo/layouts.liquid

@@ -2,6 +2,7 @@
 title: Layouts
 tags:
 - demoIndex
+order: 4
 ---
 {% layout 'hippie/page.liquid' %}
 
@@ -298,14 +299,13 @@ tags:
 </section>
 {% endblock %}
 
+{% block assets %}
+{{ block.super -}}
+<script src="/vendor/jq-sticky-anything.min.js"></script>
+{% endblock %}
 {% block script %}
 {{ block.super -}}
-<script src="/vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
 <script>
-	assetsLoaded = true;
-	logPerf('Assets loaded.', assetsLoaded);
-	// Page specific
-	// ------------------------------------------------------------------------------
 	$(document).ready(function () {
 		// jq-sticky-anything
 		$('#js_demo_fix').stickThis({pushup: '#js_demo_stop'});

source/templates/hippie/full.liquid

@@ -36,12 +36,13 @@
 {% render 'hippie/partials/log-log' with 'BODY start' as msg -%}
 {%- block body %}{% endblock -%}
 {% render 'hippie/partials/log-log' with 'BODY        :: Loading script assets...' as msg -%}
+{%- block assets %}{% endblock -%}
+{% render 'hippie/partials/log-assets', state: true -%}
+{% render 'hippie/partials/log-log', msg: 'BODY        :: Assets loaded, running page specific script...', arg: true -%}
 <script>
 	// {{ title }} script using full template
 </script>
 {%- block script %}{% endblock -%}
-{% render 'hippie/partials/log-assets', state: true -%}
-{% render 'hippie/partials/log-log', msg: 'BODY        :: Assets loaded, running page specific script...', arg: true -%}
 {% render 'hippie/partials/log-log' with 'BODY end    :: Page script might still be loading.' as msg -%}
 {% render 'hippie/partials/log-log' with 'Application ready... or is it?' as msg -%}
 </body>

source/templates/hippie/page.liquid

@@ -34,11 +34,13 @@
 </div>
 {% endblock %}
 
-{% block script %}
+{% block assets %}
 <script src="/vendor/jquery.min.js"></script>
 <script src="/vendor/hippie-script.js"></script>
 <script src="/js/globals.js"></script>
 <script src="/js/app.js"></script>
+{% endblock %}
+{% block script %}
 <script>
 	// Setup global things for all screens
 	setup();