interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

feat: Replace index screen with liquid version

Browse source 
- _default.njk is now a single full.liquid
- Simplify structure
- Add log partials as liquid
This commit is contained in:
sthag 2025-11-09 12:58:41 +01:00
parent 5f8e048c84
commit 5663813ecf
8 changed files with 256 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

49
source/templates/hippie/full.liquid Normal file
View 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
View file

@ -0,0 +1,3 @@
<script>
assetsLoaded = {{ state | default: false, allow_false: true }};
</script>

3
source/templates/hippie/partials/log-log.liquid Normal file
View file

@ -0,0 +1,3 @@
<script>
logPerf('{{ msg }}', {{ arg | default: '' }});
</script>

6
source/templates/hippie/partials/log-setup.liquid Normal file
View 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
View 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
View 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>