10 years later #1
8 changed files with 256 additions and 82 deletions
78
source/screens/demo/index.liquid
Normal file
78
source/screens/demo/index.liquid
Normal file
|
|
@ -0,0 +1,78 @@
|
||||||
|
---
|
||||||
|
permalink: "/"
|
||||||
|
title: Index
|
||||||
|
tags:
|
||||||
|
- demoIndex
|
||||||
|
---
|
||||||
|
{% assign pageBase = hippie.pageBase -%}
|
||||||
|
{% assign pageId = page.fileSlug -%}
|
||||||
|
{% assign pageClass = "h_full_view" -%}
|
||||||
|
{%- layout "hippie/full.liquid" %}
|
||||||
|
|
||||||
|
{% block title %}Index{% endblock %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="hello">
|
||||||
|
<h2>This is {{ hippie.brand | upcase }}</h2>
|
||||||
|
<p>You can start using it by replacing this file with your own index page.</p>
|
||||||
|
<p>To do this you need to create a file
|
||||||
|
<code>/index.njk</code>
|
||||||
|
inside the
|
||||||
|
<i>source/screens</i>
|
||||||
|
folder. You can also create a
|
||||||
|
<code>data.json</code>
|
||||||
|
file inside the
|
||||||
|
<i>source/templates</i>
|
||||||
|
folder as a data source for your nunjucks files.</p>
|
||||||
|
<p>For a very basic start you can make a copy of the demo page
|
||||||
|
<code>blank.njk</code>. You can find it at
|
||||||
|
<i>/source/screens/demo</i>.</p>
|
||||||
|
<p>The
|
||||||
|
<i>source/demo</i>
|
||||||
|
folder contains an overview of all HTML elements and also examples for CSS style combinations and even whole
|
||||||
|
page layouts.<br/>Follow the white rabbit.</p>
|
||||||
|
<div class="pos_rel">
|
||||||
|
<pre class="txt_tiny txt_white pos_abs pin_down pin_right"> ()()<br> (..)<br>c(")(")</pre>
|
||||||
|
<h3>Overview</h3>
|
||||||
|
</div>
|
||||||
|
<nav>
|
||||||
|
<ul class="list_link">
|
||||||
|
{% for link in collections.demoIndex %}
|
||||||
|
<li>
|
||||||
|
<a href="{{ link.page.url }}">{{ link.data.title }}</a>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<h3>Page</h3>
|
||||||
|
<ul class="list_link">
|
||||||
|
{% assign pagesByTitle = collections.demoPage | sort: 'data.title' %}
|
||||||
|
|
||||||
|
{% for link in pagesByTitle %}
|
||||||
|
<li>
|
||||||
|
<a href="{{ link.page.url }}">{{ link.data.title }}</a>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
<h3>Example</h3>
|
||||||
|
<ul class="list_link">
|
||||||
|
{% for link in collections.demoExample %}
|
||||||
|
<li>
|
||||||
|
<a href="{{ link.page.url }}">{{ link.data.title }}</a>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block script %}
|
||||||
|
{{ block.super -}}
|
||||||
|
{% render 'hippie/partials/log-assets', state: true -%}
|
||||||
|
{% render 'hippie/partials/log-log', msg: 'BODY :: Assets loaded, running page specific script...', arg: true -%}
|
||||||
|
<script>
|
||||||
|
// Page script
|
||||||
|
</script>
|
||||||
|
{% render 'hippie/partials/log-log' with 'Application ready... or is it?' as msg -%}
|
||||||
|
{% endblock %}
|
||||||
|
|
@ -1,82 +0,0 @@
|
||||||
---
|
|
||||||
permalink: "/"
|
|
||||||
title: Index
|
|
||||||
tags:
|
|
||||||
- demoIndex
|
|
||||||
---
|
|
||||||
{% set pageBase = hippie.pageBase %}
|
|
||||||
{% set pageId = page.fileSlug %}
|
|
||||||
{% set pageClass = "h_full_view" %}
|
|
||||||
|
|
||||||
{% extends "demo/_default.njk" %}
|
|
||||||
|
|
||||||
{% block title %}Index{% endblock %}
|
|
||||||
{% block head %}
|
|
||||||
{{ super() }}
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block body %}
|
|
||||||
<!-- {{ page.fileSlug }}.page -->
|
|
||||||
<div class="wrap">
|
|
||||||
<div class="hello">
|
|
||||||
<h2>This is
|
|
||||||
{{ hippie.brand | upper }}</h2>
|
|
||||||
<p>You can start using it by replacing this file with your own index page.</p>
|
|
||||||
<p>To do this you need to create a file
|
|
||||||
<code>/index.njk</code>
|
|
||||||
inside the
|
|
||||||
<i>source/screens</i>
|
|
||||||
folder. You can also create a
|
|
||||||
<code>data.json</code>
|
|
||||||
file inside the
|
|
||||||
<i>source/templates</i>
|
|
||||||
folder as a data source for your nunjucks files.</p>
|
|
||||||
<p>For a very basic start you can make a copy of the demo page
|
|
||||||
<code>blank.njk</code>. You can find it at
|
|
||||||
<i>/source/screens/demo</i>.</p>
|
|
||||||
<p>The
|
|
||||||
<i>source/demo</i>
|
|
||||||
folder contains an overview of all HTML elements and also examples for CSS style combinations and even whole page layouts.<br/>Follow the white rabbit.</p>
|
|
||||||
<div class="pos_rel">
|
|
||||||
<pre class="txt_tiny txt_white pos_abs pin_down pin_right"> ()()<br> (..)<br>c(")(")</pre>
|
|
||||||
<h3>Overview</h3>
|
|
||||||
</div>
|
|
||||||
<nav>
|
|
||||||
<ul class="list_link">
|
|
||||||
{% for link in collections.demoIndex %}
|
|
||||||
<li>
|
|
||||||
<a href="{{ link.page.url }}">{{ link.data.title }}</a>
|
|
||||||
</li>
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
<h3>Page</h3>
|
|
||||||
<ul class="list_link">
|
|
||||||
{% for link in collections.demoPage | sort(false, false, 'data.title') %}
|
|
||||||
<li>
|
|
||||||
<a href="{{ link.page.url }}">{{ link.data.title }}</a>
|
|
||||||
</li>
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
<h3>Example</h3>
|
|
||||||
<ul class="list_link">
|
|
||||||
{% for link in collections.demoExample %}
|
|
||||||
<li>
|
|
||||||
<a href="{{ link.page.url }}">{{ link.data.title }}</a>
|
|
||||||
</li>
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block script %}
|
|
||||||
{{ super() }}
|
|
||||||
<script>
|
|
||||||
assetsLoaded = true;
|
|
||||||
logPerf('BODY :: Assets loaded, running page specific script...', assetsLoaded);
|
|
||||||
// Page specific
|
|
||||||
// ------------------------------------------------------------------------------
|
|
||||||
logPerf('Application ready... not.');
|
|
||||||
</script>
|
|
||||||
{% endblock %}
|
|
||||||
49
source/templates/hippie/full.liquid
Normal file
49
source/templates/hippie/full.liquid
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
{% if pageId %}
|
||||||
|
{%- capture idAttr %} id="{{ pageId }}"{% endcapture -%}
|
||||||
|
{% endif -%}
|
||||||
|
{% if pageClass %}
|
||||||
|
{%- capture classAttr %} class="{{ pageClass }}"{% endcapture -%}
|
||||||
|
{% endif -%}
|
||||||
|
{% if bodyClass %}
|
||||||
|
{%- capture bodyClassAttr %} class="{{ bodyClass }}"{% endcapture -%}
|
||||||
|
{% endif -%}
|
||||||
|
<html{{ idAttr }}{{ classAttr }} lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
{% block head %}
|
||||||
|
<title>
|
||||||
|
{{- hippie.titlePrefix -}}
|
||||||
|
{% block title %}{% endblock -%}
|
||||||
|
{{ hippie.titlePostfix -}}
|
||||||
|
</title>
|
||||||
|
{% block meta -%}
|
||||||
|
{% render "hippie/partials/meta.liquid" %}
|
||||||
|
{% comment %}<base href="/">{% endcomment %}
|
||||||
|
{% endblock -%}
|
||||||
|
{% render "hippie/partials/script-log.liquid" %}
|
||||||
|
{% render 'hippie/partials/log-setup', hippie: hippie, state: true -%}
|
||||||
|
{% render 'hippie/partials/log-start' -%}
|
||||||
|
{% block links -%}
|
||||||
|
{% render "hippie/partials/links.liquid" %}
|
||||||
|
{% comment %}<link rel="stylesheet" type="text/css" media="all" href="css/demo.css"/>{% endcomment %}
|
||||||
|
{% comment %}<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase | subdir(2) }}css/demo.css"/>{% endcomment %}
|
||||||
|
<link rel="stylesheet" media="all" href="{{ pageBase }}css/demo.css" type="text/css"/>
|
||||||
|
{% endblock -%}
|
||||||
|
{% render 'hippie/partials/log-log' with 'HEAD end :: Links parsed, starting to load.' as msg -%}
|
||||||
|
{% endblock -%}
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body{{ bodyClassAttr }}>
|
||||||
|
{% render 'hippie/partials/log-log' with 'BODY start' as msg -%}
|
||||||
|
{%- block body %}{% endblock -%}
|
||||||
|
{% block script -%}
|
||||||
|
{% render 'hippie/partials/log-log' with 'BODY :: Loading script assets...' as msg -%}
|
||||||
|
<script src="/vendor/jquery.min.js"></script>
|
||||||
|
<script>
|
||||||
|
// Full script
|
||||||
|
</script>
|
||||||
|
{% endblock -%}
|
||||||
|
{% render 'hippie/partials/log-log' with 'BODY end :: Page script might still be loading.' as msg -%}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
3
source/templates/hippie/partials/log-assets.liquid
Normal file
3
source/templates/hippie/partials/log-assets.liquid
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<script>
|
||||||
|
assetsLoaded = {{ state | default: false, allow_false: true }};
|
||||||
|
</script>
|
||||||
3
source/templates/hippie/partials/log-log.liquid
Normal file
3
source/templates/hippie/partials/log-log.liquid
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<script>
|
||||||
|
logPerf('{{ msg }}', {{ arg | default: '' }});
|
||||||
|
</script>
|
||||||
6
source/templates/hippie/partials/log-setup.liquid
Normal file
6
source/templates/hippie/partials/log-setup.liquid
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
{% comment %}{% assign hippie.debugMode = state %}{% endcomment %}
|
||||||
|
<script>
|
||||||
|
debugOn = {{ state }};
|
||||||
|
debugOnScreen = {{ display | default: false }};
|
||||||
|
assetsLoaded = {{ assets | default: false }};
|
||||||
|
</script>
|
||||||
4
source/templates/hippie/partials/log-start.liquid
Normal file
4
source/templates/hippie/partials/log-start.liquid
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
<script>
|
||||||
|
logAdd('EVENT :: Document \'%s\' event fired.', 'DOMContentLoaded');
|
||||||
|
logPerf('HEAD start :: Debugging performance...', debugOn);
|
||||||
|
</script>
|
||||||
113
source/templates/hippie/partials/script-log.liquid
Normal file
113
source/templates/hippie/partials/script-log.liquid
Normal file
|
|
@ -0,0 +1,113 @@
|
||||||
|
<script>
|
||||||
|
// Entry script at page init
|
||||||
|
let debugOn = {{ hippie.debugMode | default: false, allow_false: true }};
|
||||||
|
let debugOnScreen = false;
|
||||||
|
let assetsLoaded = false;
|
||||||
|
|
||||||
|
// Get the current time difference between page
|
||||||
|
// load and when this func was invoked
|
||||||
|
function getTimeDiff() {
|
||||||
|
return new Date().getTime() - performance.timing.navigationStart;
|
||||||
|
}
|
||||||
|
|
||||||
|
function pad(n, width, z) {
|
||||||
|
z = z || '0';
|
||||||
|
n = n + '';
|
||||||
|
|
||||||
|
return n.length >= width
|
||||||
|
? n
|
||||||
|
: new Array(width - n.length + 1).join(z) + n;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Log message to console and add
|
||||||
|
// performance measuring information
|
||||||
|
function logPerf(msg, arg) {
|
||||||
|
if (debugOn) {
|
||||||
|
if (debugOnScreen && assetsLoaded) {
|
||||||
|
if (!document.getElementById('jsLogPerf')) {
|
||||||
|
let wrap = document.createElement('div');
|
||||||
|
let box = document.createElement('div');
|
||||||
|
|
||||||
|
wrap.style.position = 'relative';
|
||||||
|
box.style.cssText = `position: fixed;
|
||||||
|
bottom: 16px;
|
||||||
|
right: 40px;
|
||||||
|
zIndex: 1000;
|
||||||
|
padding: 0 8px;
|
||||||
|
background: rgba(255,255,255,.6);
|
||||||
|
color: rgb(128);
|
||||||
|
fontSize: 1rem;`;
|
||||||
|
box.id = 'jsLogPerf';
|
||||||
|
|
||||||
|
wrap.prepend(box);
|
||||||
|
document
|
||||||
|
.body
|
||||||
|
.prepend(wrap);
|
||||||
|
|
||||||
|
/*
|
||||||
|
$('<div><div></div></div>')
|
||||||
|
.css('position', 'relative')
|
||||||
|
.find('div')
|
||||||
|
.attr('id', 'jsLogPerf')
|
||||||
|
.css({
|
||||||
|
position: 'fixed',
|
||||||
|
bottom: '16px',
|
||||||
|
right: '40px',
|
||||||
|
zIndex: '1000',
|
||||||
|
padding: '0 8px',
|
||||||
|
background: 'rgba(255,255,255,.6)',
|
||||||
|
color: 'rgb(128)',
|
||||||
|
fontSize: '1rem'
|
||||||
|
})
|
||||||
|
.end()
|
||||||
|
.prependTo('body');
|
||||||
|
*/
|
||||||
|
// $('body').prepend('<div style="position:relative;"></div>');
|
||||||
|
// $('div').first().prepend('<div id="jslogPerf" style="position:fixed;bottom:8px;right:16px;z-index:1000;padding:8px;background:rgb(0,255,255,.5)"></div>');
|
||||||
|
}
|
||||||
|
|
||||||
|
let code = document.createElement('code');
|
||||||
|
|
||||||
|
code.style.cssText = `display: block;
|
||||||
|
margin: 8px 0;
|
||||||
|
padding: 1px 4px;
|
||||||
|
background-color: transparent;
|
||||||
|
color: black;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.1;`;
|
||||||
|
code.innerHTML = '<b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '';
|
||||||
|
|
||||||
|
document
|
||||||
|
.getElementById('jsLogPerf')
|
||||||
|
.append(code);
|
||||||
|
// document.getElementById('jsLogPerf').append('<p class="code_solo txt_smaller"><b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '</p>');
|
||||||
|
// $('#jsLogPerf').append('<p class="code_solo txt_smaller"><b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '</p>');
|
||||||
|
|
||||||
|
// NOTE: Alternative short-circuit evaluation
|
||||||
|
// needs element in document but prevents error if not
|
||||||
|
// $log = $log || $('#jslogPerf');
|
||||||
|
// $log.append('<p style="margin-bottom:4px;font-size:.75em;"><b>' + getTimeDiff() + '</b>ms :: ' + msg);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (window.console) {
|
||||||
|
const time = pad(getTimeDiff(), 5) + 'ms :: ';
|
||||||
|
|
||||||
|
console.debug(time + msg, (
|
||||||
|
arg
|
||||||
|
? arg
|
||||||
|
: ''));
|
||||||
|
|
||||||
|
// NOTE: Non standard feature. Not available on IE
|
||||||
|
if (console.timeStamp) {
|
||||||
|
console.timeStamp(msg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function logAdd(msg, listener) {
|
||||||
|
document.addEventListener(listener, function () {
|
||||||
|
logPerf(msg, listener);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue