source/screens/demo/examples/10print.liquid

@@ -3,7 +3,8 @@ title: 10print
 tags:
 - demoExample
 ---
-{% layout "hippie/simple.liquid" %}
+{% assign pageBase = "../../" -%}
+{% layout "hippie/full.liquid" %}
 
 {% block head %}
 {{ block.super -}}
@@ -15,13 +16,14 @@ tags:
 {% endblock %}
 
 {% block body %}
-<canvas id="pattern"></canvas>
+<canvas id="10print"></canvas>
 {% endblock %}
 
 {% block script %}
+{{ block.super -}}
 <script>
 	// Page script
-	const canvas = document.getElementById('pattern');
+	const canvas = document.getElementById('10print');
 	const ctx = canvas.getContext('2d');
 
 	const lineWidth = 20;

source/screens/demo/examples/game.liquid

@@ -5,7 +5,7 @@ tags:
 - gameExample
 ---
 {% assign bodyClass = "body_game" -%}
-{% layout "hippie/simple.liquid" %}
+{% layout "hippie/app.liquid" %}
 
 {% block body %}
 	<div class="sec_main_center">

source/screens/demo/examples/ui/index.liquid

@@ -1,24 +0,0 @@
----
-title: UI
-tags:
-- demoExample
-- index
----
-{% layout "hippie/simple.liquid" %}
-
-{% block title %}{{ title }}{% endblock %}
-
-{% block body %}
-<div class="sec_main_center">
-	<nav role="doc-toc">
-		<h1>{{ title }}</h1>
-		<ul class="list_link">
-			{%- for ui in collections.ui -%}
-				<li>
-					<a href="{{ ui.page.url }}">{{ ui.data.title }}</a>
-				</li>
-			{%- endfor -%}
-		</ul>
-	</nav>
-</div>
-{% endblock %}

source/screens/demo/examples/ui/index.njk

@@ -0,0 +1,25 @@
+---
+title: UI
+tags: 
+  - demoExample
+  - index
+---
+{% extends "demo/_default.njk" %}
+{% import "hippie/macros/_placeholder.njk" as ph %}
+
+{% block title %}{{ title }}{% endblock %}
+
+{% block body %}
+	<div class="sec_main_center">
+		<nav role="doc-toc">
+			<h1>{{ title }}</h1>
+			<ul class="list_link">
+				{%- for ui in collections.ui -%}
+					<li>
+						<a href="{{ ui.page.url }}">{{ ui.data.title }}</a>
+					</li>
+				{%- endfor -%}
+			</ul>
+		</nav>
+	</div>
+{% endblock %}

source/style/demo.scss

@@ -15,5 +15,4 @@
 @use "modules/demo/demo_module";
 @use "modules/start";
 @use "modules/clock";
-@use "modules/game";
 // @use "modules/YOUR-MODULE/YOUR-FILES";

source/style/ui.scss

@@ -7,6 +7,7 @@
 @use "modules/ui/new_module";
 @use "modules/ui/drag_module";
 @use "modules/ui/form_module";
+@use "modules/ui/game_module";
 @use "modules/ui/gallery_module";
 @use "modules/ui/windows_module";
 @use "modules/ui/table_module";

source/templates/hippie/app.liquid

@@ -12,6 +12,7 @@
 {% endblock %}
 
 {% block script %}
+{{ block.super -}}
 <script src="/vendor/jquery.min.js"></script>
 <script src="/vendor/hippie-script.js"></script>
 <script src="{{ pageBase }}js/globals.js"></script>

source/templates/hippie/simple.liquid

@@ -1,15 +0,0 @@
-{% assign pageId = page.fileSlug -%}
-{% layout "hippie/default.liquid" %}
-
-{% block title %}{{ title }}{% endblock %}
-
-{% block links %}
-{{ block.super -}}
-<link href="/css/demo.css" media="all" rel="stylesheet"/>
-{% endblock %}
-
-{% block script %}
-<script src="/vendor/hippie-script.js"></script>
-<script src="/js/globals.js"></script>
-<script src="/js/app.js"></script>
-{% endblock %}