Compare commits

..

No commits in common. "3168d6cb7eb1eb8959528c3d40aa88a5120e6992" and "b7b1d154567b88952f7285ff4b88bbd0d042f661" have entirely different histories.

42 changed files with 374 additions and 844 deletions

View file

@ -1,73 +0,0 @@
---
title: 10print
tags:
- demoExample
---
{% assign pageBase = "../../" -%}
{% layout "hippie/full.liquid" %}
{% block head %}
{{ block.super -}}
<style>
canvas {
display: block;
}
</style>
{% endblock %}
{% block body %}
<canvas id="10print"></canvas>
{% endblock %}
{% block script %}
{{ block.super -}}
<script>
// Page script
const canvas = document.getElementById('10print');
const ctx = canvas.getContext('2d');
const lineWidth = 20;
const randomSeed = Math.random;
// Function to draw the 10PRINT pattern
function draw10Print() {
// Clear the canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Set line style
ctx.strokeStyle = 'black';
ctx.lineWidth = 2;
// Loop through the canvas grid
for (let x = 0; x < canvas.width; x += lineWidth) {
for (let y = 0; y < canvas.height; y += lineWidth) {
// Randomly choose between two diagonal lines
if (randomSeed() > 0.5) {
// Draw line from top-left to bottom-right
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + lineWidth, y + lineWidth);
ctx.stroke();
} else {
// Draw line from top-right to bottom-left
ctx.beginPath();
ctx.moveTo(x + lineWidth, y);
ctx.lineTo(x, y + lineWidth);
ctx.stroke();
}
}
}
}
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resizeCanvas();
draw10Print();
// window.addEventListener('resize', resizeCanvas);
canvas.addEventListener('click', draw10Print);
</script>
{% endblock %}

View file

@ -1,51 +0,0 @@
---
title: Blog
tags:
- demoExample
---
{% set pageBase = "../" %}
{% set pageId = page.fileSlug %}
{% extends "demo/_default.njk" %}
{% import "hippie/macros/_placeholder.njk" as ph %}
{% import "hippie/macros/_song.njk" as song %}
{% block title %}{{ title }}
{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body %}
<!-- {{ page.fileSlug }}.page -->
<div class="sec_main_center">
<header class="header_txt">
<h1>Blog</h1>
</header>
<nav role="doc-toc">
<h2>Inhaltsverzeichnis</h2>
<ul>
{%- for song in collections.song -%}
<li>
<a href="{{ song.page.url }}">{{ song.data.title }}</a>
</li>
{%- endfor -%}
</ul>
</nav>
<h2>Vorwort</h2>
<p>Liederbuch für
<em>Name</em>.</p>
<p>Gibt es gebunden und hier
{{ ph.link() }}.<br/>
Bestellungen bitte an
{{ ph.name() }}
richten.</p>
<hr class="hr_double hr_dotted">
{%- for post in collections.article -%}
{{ post.content }}
{%- endfor -%}
<hr/>
<address>{{ ph.name() }}</address>
</div>
{% endblock %}

View file

@ -1,11 +0,0 @@
---
tags:
- blog
- article
title: "Artikel"
releaseDate: JJJJ
description: Text
---
# Titel
Inhalt

View file

@ -1,112 +0,0 @@
---
title: Clock
tags:
- demoExample
---
{% assign pageBase = "../../" -%}
{% assign bodyClass = "body_clock" -%}
{% layout "hippie/full.liquid" %}
{% block body %}
<main>
<canvas id="clock" width="512" height="512"></canvas>
<p>
<button id="toggleFormat">12-Stunden-Format</button>
</p>
</main>
{% endblock %}
{% block script %}
{{ block.super -}}
<script>
// Page script
const canvas = document.getElementById('clock');
const ctx = canvas.getContext('2d');
let is24HourFormat = true;
const colorDayOfWeek = getComputedStyle(document.documentElement).getPropertyValue('--clock-color-yellow').trim();
const colorDayOfMonth = getComputedStyle(document.documentElement).getPropertyValue('--clock-color-orange').trim();
const colorMonth = getComputedStyle(document.documentElement).getPropertyValue('--clock-color-pink').trim();
document.getElementById('toggleFormat').addEventListener('click', () => {
is24HourFormat = !is24HourFormat;
document.getElementById('toggleFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format';
});
function drawRings(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, daysInCurrentMonth) {
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const lineWidth = 16;
const lineGap = 8;
const maxSize = canvas.width / 2 - lineWidth;
ctx.clearRect(0, 0, canvas.width, canvas.height);
function drawArc(value, maxValue, radius, strokeStyle) {
const startAngle = -0.5 * Math.PI; // Start at the top
const endAngle = startAngle + (2 * Math.PI * (value / maxValue));
ctx.beginPath();
ctx.arc(centerX, centerY, radius, startAngle, endAngle, false);
ctx.lineWidth = 16;
ctx.strokeStyle = strokeStyle;
ctx.stroke();
}
drawArc(
(seconds === 0) ? 60 : seconds,
60,
maxSize,
'black'
);
drawArc(
(minutes === 0) ? 60 : minutes,
60,
maxSize - lineWidth - lineGap,
'lightgrey'
);
drawArc(
is24HourFormat ? hours : hours % 12,
is24HourFormat ? 24 : 12,
maxSize - (lineWidth + lineGap) * 2,
'white'
);
drawArc(dayOfWeek, 7, maxSize - (lineWidth + lineGap) * 3, colorDayOfWeek);
drawArc(dayOfMonth, daysInCurrentMonth, maxSize - (lineWidth + lineGap) * 4, colorDayOfMonth);
drawArc(month, 12, maxSize - (lineWidth + lineGap) * 5, colorMonth);
}
function updateRings() {
const currentDate = new Date();
const currentSeconds = currentDate.getSeconds();
const currentMinutes = currentDate.getMinutes();
const currentHours = currentDate.getHours();
const currentDayOfWeek = getNumericWeekday(currentDate);
const currentDayOfMonth = currentDate.getDate();
const currentMonth = currentDate.getMonth() + 1; // Get current month (0-11)
const daysInCurrentMonth = daysInMonth(currentMonth, currentDate.getFullYear());
drawRings(
currentSeconds,
currentMinutes,
currentHours,
currentDayOfWeek,
currentDayOfMonth,
currentMonth,
daysInCurrentMonth
);
}
// TODO: Parameter für Wochenstart ergänzen
function getNumericWeekday(date) {
const weekday = date.getDay(); // 0 (Sunday) to 6 (Saturday)
return (weekday === 0) ? 7 : weekday;
}
function daysInMonth(month, year) {
return new Date(year, month, 0).getDate();
}
updateRings();
setInterval(updateRings, 1000);
</script>
{% endblock %}

View file

@ -1,84 +0,0 @@
---
title: Start
tags:
- demoExample
---
{% assign pageBase = "../../" -%}
{% assign pageId = page.fileSlug -%}
{% assign bodyClass = "body_start" -%}
{% layout "hippie/full.liquid" %}
{% block body %}
<main>
<form id="www-search" class="flex inline" action="https://duckduckgo.com/">
<input id="query" class="input_io" name="q" placeholder="Suchbegriff" type="text" required/>
<input class="button_io" value="Suchen" type="submit"/>
</form>
<div class="blocks">
<article>
<section>
<h2><a href="">Name</a></h2>
<ul>
<li>
<a href=""><img src="/art/bullet.gif" width="16" height="16"/>Link</a>
</li>
</ul>
</section>
</article>
<article>
<section>
<h2><a href="">Name</a></h2>
</section>
</article>
</div>
</main>
{% endblock %}
{% block script %}
{{ block.super -}}
<script>
// Page script
// NOTE: https://duckduckgo.com/duckduckgo-help-pages/settings/params
const defaultOptions = {
kl: 'de-de',
kp: '-2',
kz: '-1',
// kae: 't',
k1: '-1'
};
let options = Object.assign({}, defaultOptions);
function setOptions(jsonOptions) {
if (!jsonOptions || typeof jsonOptions !== 'object') return;
options = Object.assign({}, options, jsonOptions);
}
function buildSearchUrl(query) {
const base = 'https://duckduckgo.com/';
const params = new URLSearchParams({q: query});
for (const [k, v] of Object.entries(options)) {
if (v === undefined || v === null || v === '') continue;
params.set(k, String(v));
}
return base + '?' + params.toString();
}
document.getElementById('www-search').addEventListener('submit', function (e) {
e.preventDefault();
const query = document.getElementById('query').value.trim();
if (!query) return;
const url = buildSearchUrl(query);
window.open(url, '_blank', 'noopener');
});
// Example of setting options programmatically:
// setOptions({ kl: 'de-de', kp: '2', iar: 'images' });
</script>
{% endblock %}

View file

@ -1,5 +1,5 @@
---
title: Tile
title: Start
tags:
- ui
---

View file

@ -1,76 +0,0 @@
---
permalink: "/"
title: Index
tags:
- demoIndex
---
{% assign pageBase = hippie.pageBase -%}
{% assign pageId = page.fileSlug -%}
{% assign pageClass = "h_full_view" -%}
{%- layout "hippie/full.liquid" %}
{% 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 %}

View file

@ -0,0 +1,82 @@
---
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 %}

View file

@ -1,10 +0,0 @@
---
title: Blank
---
{% assign pageBase = "../../" -%}
{% assign pageId = page.fileSlug -%}
{%- layout "hippie/full.liquid" %}
{% block body %}
<!-- {{ title }} -->
{% endblock %}

View file

@ -0,0 +1,22 @@
---
title: Blank
---
{% set pageBase = "../" %}
{% set pageId = page.fileSlug %}
{% set pageClass = "h_full_view" %}
{% extends "demo/_default.njk" %}
{% block title %}{{ title }}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body %}
<!-- {{ page.fileSlug }}.page -->
{% endblock %}
{% block script %}
{{ super() }}
{% endblock %}

View file

@ -1,5 +1,5 @@
---
title: Default
title: "Default"
---
{% assign pageBase = "../" -%}
{% assign pageId = page.fileSlug -%}

View file

@ -1,20 +0,0 @@
---
title: 304
---
{% assign pageBase = "../../../" -%}
{% assign bodyClass = "body_status" %}
{%- layout "hippie/status.liquid" %}
{% block main %}
{{ block.super -}}
<h3>Umleitung</h3>
<p>Unverändert <dfn>Not Modified</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#3xx_%E2%80%93_Umleitung">
<p>Der Inhalt der angeforderten Ressource hat sich seit der letzten Abfrage des Clients nicht verändert und wird
deshalb nicht übertragen. Zu den Einzelheiten siehe <a
href="https://de.wikipedia.org/wiki/Browser-Cache#Versionsvergleich" title="Browser-Cache">Browser-Cache-Versionsvergleich</a>.
</p>
<p class="quote_source"><a
href="https://de.wikipedia.org/wiki/HTTP-Statuscode#3xx_%E2%80%93_Umleitung">Wikipedia</a></p>
</blockquote>
{% endblock %}

View file

@ -0,0 +1,26 @@
---
title: 304
---
{% set pageBase = "../../" %}
{% set pageId = page.fileSlug %}
{% set bodyClass = "body_status" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}{{ title }}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body %}
<main class="main_site">
<h1>{{ title }}</h1>
<h3>Umleitung</h3>
<p>Unverändert <dfn>Not Modified</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#3xx_%E2%80%93_Umleitung">
<p>Der Inhalt der angeforderten Ressource hat sich seit der letzten Abfrage des Clients nicht verändert und wird deshalb nicht übertragen. Zu den Einzelheiten siehe <a href="https://de.wikipedia.org/wiki/Browser-Cache#Versionsvergleich" title="Browser-Cache">Browser-Cache-Versionsvergleich</a>.</p>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#3xx_%E2%80%93_Umleitung">Wikipedia</a></p>
</blockquote>
</main>
{{ super() }}
{% endblock %}

View file

@ -1,17 +0,0 @@
---
title: 400
---
{% assign pageBase = "../../../" -%}
{% assign bodyClass = "body_status" %}
{%- layout "hippie/status.liquid" %}
{% block main %}
{{ block.super -}}
<h3>Client-Fehler</h3>
<p>Fehlerhafte Anfrage! <dfn>Bad Request</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
<p>Die Anfrage-Nachricht war fehlerhaft aufgebaut.</p>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a>
</p>
</blockquote>
{% endblock %}

View file

@ -0,0 +1,26 @@
---
title: 400
---
{% set pageBase = "../../" %}
{% set pageId = page.fileSlug %}
{% set bodyClass = "body_status" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}{{ title }}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body %}
<main class="main_site">
<h1>{{ title }}</h1>
<h3>Client-Fehler</h3>
<p>Fehlerhafte Anfrage! <dfn>Bad Request</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
<p>Die Anfrage-Nachricht war fehlerhaft aufgebaut.</p>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
</blockquote>
</main>
{{ super() }}
{% endblock %}

View file

@ -1,18 +0,0 @@
---
title: 401
---
{% assign pageBase = "../../../" -%}
{% assign bodyClass = "body_status" %}
{%- layout "hippie/status.liquid" %}
{% block main %}
{{ block.super -}}
<h3>Client-Fehler</h3>
<p>Nicht autorisiert! <dfn>Unauthorized</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
<p>Die Anfrage kann nicht ohne gültige Authentifizierung durchgeführt werden. Wie die Authentifizierung durchgeführt
werden soll, wird im „WWW-Authenticate“-Header-Feld der Antwort übermittelt.</p>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a>
</p>
</blockquote>
{% endblock %}

View file

@ -0,0 +1,26 @@
---
title: 401
---
{% set pageBase = "../../" %}
{% set pageId = page.fileSlug %}
{% set bodyClass = "body_status" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}{{ title }}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body %}
<main class="main_site">
<h1>{{ title }}</h1>
<h3>Client-Fehler</h3>
<p>Nicht autorisiert! <dfn>Unauthorized</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
<p>Die Anfrage kann nicht ohne gültige Authentifizierung durchgeführt werden. Wie die Authentifizierung durchgeführt werden soll, wird im „WWW-Authenticate“-Header-Feld der Antwort übermittelt.</p>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
</blockquote>
</main>
{{ super() }}
{% endblock %}

View file

@ -1,18 +0,0 @@
---
title: 403
---
{% assign pageBase = "../../../" -%}
{% assign bodyClass = "body_status" %}
{%- layout "hippie/status.liquid" %}
{% block main %}
{{ block.super -}}
<h3>Client-Fehler</h3>
<p>Nicht erlaubt! <dfn>Forbidden</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
<p>Die Anfrage wurde mangels Berechtigung des Clients nicht durchgeführt, bspw. weil der authentifizierte Benutzer
nicht berechtigt ist, oder eine als HTTPS konfigurierte URL nur mit HTTP aufgerufen wurde.</p>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a>
</p>
</blockquote>
{% endblock %}

View file

@ -0,0 +1,26 @@
---
title: 403
---
{% set pageBase = "../../" %}
{% set pageId = page.fileSlug %}
{% set bodyClass = "body_status" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}{{ title }}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body %}
<main class="main_site">
<h1>{{ title }}</h1>
<h3>Client-Fehler</h3>
<p>Nicht erlaubt! <dfn>Forbidden</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
<p>Die Anfrage wurde mangels Berechtigung des Clients nicht durchgeführt, bspw. weil der authentifizierte Benutzer nicht berechtigt ist, oder eine als HTTPS konfigurierte URL nur mit HTTP aufgerufen wurde.</p>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
</blockquote>
</main>
{{ super() }}
{% endblock %}

View file

@ -1,19 +0,0 @@
---
title: 404
---
{% assign pageBase = "../../../" -%}
{% assign bodyClass = "body_status" %}
{%- layout "hippie/status.liquid" %}
{% block main %}
{{ block.super -}}
<h3>Client-Fehler</h3>
<p>Hier ist nichts. <dfn>Not Found</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
<p>Die angeforderte Ressource wurde nicht gefunden. Dieser Statuscode kann ebenfalls verwendet werden, um eine
Anfrage ohne näheren Grund abzuweisen. Links, welche auf solche Fehlerseiten verweisen, werden auch als Tote
Links bezeichnet.</p>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a>
</p>
</blockquote>
{% endblock %}

View file

@ -0,0 +1,26 @@
---
title: 404
---
{% set pageBase = "../../" %}
{% set pageId = page.fileSlug %}
{% set bodyClass = "body_status" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}{{ title }}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body %}
<main class="main_site">
<h1>{{ title }}</h1>
<h3>Client-Fehler</h3>
<p>Hier ist nichts. <dfn>Not Found</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
<p>Die angeforderte Ressource wurde nicht gefunden. Dieser Statuscode kann ebenfalls verwendet werden, um eine Anfrage ohne näheren Grund abzuweisen. Links, welche auf solche Fehlerseiten verweisen, werden auch als Tote Links bezeichnet.</p>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
</blockquote>
</main>
{{ super() }}
{% endblock %}

View file

@ -1,17 +0,0 @@
---
title: 408
---
{% assign pageBase = "../../../" -%}
{% assign bodyClass = "body_status" %}
{%- layout "hippie/status.liquid" %}
{% block main %}
{{ block.super -}}
<h3>Client-Fehler</h3>
<p>Zeitüberschreitung der Anforderung. <dfn>Request Timeout</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
<p>Innerhalb der vom Server erlaubten Zeitspanne wurde keine vollständige Anfrage des Clients empfangen.</p>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a>
</p>
</blockquote>
{% endblock %}

View file

@ -0,0 +1,26 @@
---
title: 408
---
{% set pageBase = "../../" %}
{% set pageId = page.fileSlug %}
{% set bodyClass = "body_status" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}{{ title }}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body %}
<main class="main_site">
<h1>{{ title }}</h1>
<h3>Client-Fehler</h3>
<p>Zeitüberschreitung der Anforderung. <dfn>Request Timeout</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
<p>Innerhalb der vom Server erlaubten Zeitspanne wurde keine vollständige Anfrage des Clients empfangen.</p>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
</blockquote>
</main>
{{ super() }}
{% endblock %}

View file

@ -1,17 +0,0 @@
---
title: 500
---
{% assign pageBase = "../../../" -%}
{% assign bodyClass = "body_status" %}
{%- layout "hippie/status.liquid" %}
{% block main %}
{{ block.super -}}
<h3>Server-Fehler</h3>
<p>Allgemeiner Server Fehler!!! <dfn>Internal Server Error</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">
<p>Dies ist ein „Sammel-Statuscode“ für unerwartete Serverfehler.</p>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">Wikipedia</a>
</p>
</blockquote>
{% endblock %}

View file

@ -0,0 +1,26 @@
---
title: 500
---
{% set pageBase = "../../" %}
{% set pageId = page.fileSlug %}
{% set bodyClass = "body_status" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}{{ title }}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body %}
<main class="main_site">
<h1>{{ title }}</h1>
<h3>Server-Fehler</h3>
<p>Allgemeiner Server Fehler!!! <dfn>Internal Server Error</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">
<p>Dies ist ein „Sammel-Statuscode“ für unerwartete Serverfehler.</p>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">Wikipedia</a></p>
</blockquote>
</main>
{{ super() }}
{% endblock %}

View file

@ -1,19 +0,0 @@
---
title: 503
---
{% assign pageBase = "../../../" -%}
{% assign bodyClass = "body_status" %}
{%- layout "hippie/status.liquid" %}
{% block main %}
{{ block.super -}}
<h3>Server-Fehler</h3>
<p>Dienst nicht verfügbar. <dfn>Service Unavailable</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">
<p>Der Server steht temporär nicht zur Verfügung, zum Beispiel wegen Überlastung oder Wartungsarbeiten. Ein
„Retry-After“-Header-Feld in der Antwort kann den Client auf einen Zeitpunkt hinweisen, zu dem die Anfrage
eventuell bearbeitet werden könnte.</p>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">Wikipedia</a>
</p>
</blockquote>
{% endblock %}

View file

@ -0,0 +1,26 @@
---
title: 503
---
{% set pageBase = "../../" %}
{% set pageId = page.fileSlug %}
{% set bodyClass = "body_status" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}{{ title }}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body %}
<main class="main_site">
<h1>{{ title }}</h1>
<h3>Server-Fehler</h3>
<p>Dienst nicht verfügbar. <dfn>Service Unavailable</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">
<p>Der Server steht temporär nicht zur Verfügung, zum Beispiel wegen Überlastung oder Wartungsarbeiten. Ein „Retry-After“-Header-Feld in der Antwort kann den Client auf einen Zeitpunkt hinweisen, zu dem die Anfrage eventuell bearbeitet werden könnte.</p>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">Wikipedia</a></p>
</blockquote>
</main>
{{ super() }}
{% endblock %}

View file

@ -1,13 +0,0 @@
---
title: Maintenance
---
{% assign pageBase = "../../" -%}
{% assign pageClass = "h_full_view" -%}
{%- layout "hippie/status.liquid" %}
{% block body %}
<hgroup id="root" class="txt_center">
<h1 class="txt_hero txt_gradient">HIPPIE</h1>
<p>Diese Seite wird gerade gewartet.</p>
</hgroup>
{% endblock %}

View file

@ -0,0 +1,21 @@
---
title: Maintenance
---
{% set pageBase = "../" %}
{% set pageId = page.fileSlug %}
{% set pageClass = "h_full_view" %}
{% extends "demo/_maintenance.njk" %}
{% block title %}{{ title }}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body %}
<!-- {{ page.fileSlug }}.page -->
<div id="root" class="overflow">
<h1 class="txt_hero txt_center txt_gradient">HIPPIE</h1>
</div>
{% endblock %}

View file

@ -13,6 +13,4 @@
@use "modules/portal/portal_module";
@use "modules/songbook/songbook_module";
@use "modules/demo/demo_module";
@use "modules/start";
@use "modules/clock";
// @use "modules/YOUR-MODULE/YOUR-FILES";

View file

@ -1,26 +0,0 @@
@use "../../hippie-style/hippie";
:root {
--clock-color-yellow: rgb(250, 216, 3);
--clock-color-orange: rgb(242, 175, 19);
--clock-color-pink: rgb(211, 10, 81);
--clock-color-purple: rgb(142, 31, 104);
--clock-color-blue: rgb(39, 63, 139);
--clock-color-pblue: rgb(60, 87, 154);
--clock-color-lblue: rgb(183, 224, 240);
--clock-color-lcyan: rgb(107, 199, 217);
--clock-color-cyan: rgb(82, 190, 209);
}
.body_clock {
main {
@extend .sec_main_center;
display: flex;
flex-flow: column nowrap;
justify-content: center;
}
p {
text-align: center;
}
}

View file

@ -1,15 +0,0 @@
@use "../../hippie-style/hippie";
.body_start {
main {
@extend .sec_main_center;
}
#www-search {
input[type="text"] {
flex: 1;
padding: hippie.$padding_basic;
line-height: hippie.$line_text_basic;
}
}
}

View file

@ -0,0 +1,12 @@
<!-- demo.maintenance.template -->
{% extends "hippie/_maintenance.njk" %}
{% block meta %}
{% include "demo/partials/_meta.njk" %}
<base href="/">
{% endblock %}
{% block links %}
{{ super() }}
<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo_basic.css"/>
{% endblock %}

View file

@ -0,0 +1,27 @@
<!-- maintenance.template -->
{% import "hippie/macros/_footer.njk" as footer %}
<!DOCTYPE html>
<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
<head>
<meta charset="utf-8">
{% block head %}
<title>{{ hippie.titlePrefix }}
{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
{% block meta %}
{% include "hippie/partials/_head_meta.njk" %}
{% endblock %}
{% block links %}
<link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAH7SURBVDiNldM/aJNBGMfx71viH7TqIoLiIOoiSJRu0qE4uIiDm5OI4ODk4uYioqBuUkR0kKJNFC1mqUltlbZSqE3RYt+2SUyTppCmeU2bkiZ907z3vnfnUEU0NrXPeMd97p6H+xlaa02D0oDRYL+p4WEN9yZm8dT6dzQEQtkCuiIJxHKbBxZrLiNWmc8vRxn7lMGRanPAw0QW49Uwp8ODJEZmCCSt/wcGrCWavte44LRz7FyYnd+yxMZz2J7cGKh6kvczRUp3X9BnmFyLzHNVRpkeShNM1b+iDngUn2Oue4qLLV3cf+YST2tiLf3sj04wmypSEt76wFixwoJpcbKnh/ZMmuXK2vqdYJXLxyPMDiTpTOX/DbhK88bMMh4Y5sSZt3R2/+53aRkCzgT+oX4Kls2i49YDT+M5JkMmV+aj3BrII/+a15MuSevZEPl3UzxP5/8EMiurfO1L0hyNU27tZehL/c/zJNzsLXB+uoNySZBfFQD4tIbHHxJMfoxxu2pi7rK5fsm3FgL5MwXKQAPaMzh8JMbg61E6mn3c8B/CF5yx2L1tC/5TR4nsAS/RhlNzcR0P6TggFVoDGrYqyYMkLOybZ4fQZFZqGOHsgi4KF1tIakrhKIXj/WrBQAuJV3EQtsBbEQjbQVQEB/0HUHu3Y2wU5/XKVRqhFD8AgpYX2M9TNGcAAAAASUVORK5CYII=">
{% endblock %}
{% endblock %}
</head>
<body class="{{ bodyClass }}">
{% block body %}
{{ footer.status() }}
{% endblock %}
</body>
</html>

View file

@ -1,49 +0,0 @@
<!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 %}{{ 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>

View file

@ -1,9 +0,0 @@
<footer class="pos_abs pin_bottom width_full">
<address class="txt_center">Kontakt:
<a class="lineLink" href="mailto:{{ email | default: 'admin@domain.tld' }}">{{ email | default: 'admin@domain.tld' }}</a>
· Server:
{{ app | default: 'Application' }}/{{ version | default: 'ver.s.ion' }}
({{ system | default: 'System name' }}) · Domain:
{{ domain | default: 'domain.tld:port' }}
</address>
</footer>

View file

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

View file

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

View file

@ -1,6 +0,0 @@
{% comment %}{% assign hippie.debugMode = state %}{% endcomment %}
<script>
debugOn = {{ state }};
debugOnScreen = {{ display | default: false }};
assetsLoaded = {{ assets | default: false }};
</script>

View file

@ -1,4 +0,0 @@
<script>
logAdd('EVENT :: Document \'%s\' event fired.', 'DOMContentLoaded');
logPerf('HEAD start :: Debugging performance...', debugOn);
</script>

View file

@ -1,113 +0,0 @@
<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>

View file

@ -1,37 +0,0 @@
<!DOCTYPE html>
{% if pageClass %}
{%- capture classAttr %} class="{{ pageClass }}"{% endcapture -%}
{% endif -%}
{% if bodyClass %}
{%- capture bodyClassAttr %} class="{{ bodyClass }}"{% endcapture -%}
{% endif -%}
<html id="{{ page.fileSlug }}"{{ classAttr }} lang="de">
<head>
<meta charset="utf-8">
{% block head %}
<title>
{{- hippie.titlePrefix -}}
{% block title %}{{ title }}{% endblock -%}
{{ hippie.titlePostfix -}}
</title>
{% block meta -%}
{% render "hippie/partials/meta.liquid" %}
{% endblock -%}
{% block links -%}
<link rel="shortcut icon" type="image/x-icon"
href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAH7SURBVDiNldM/aJNBGMfx71viH7TqIoLiIOoiSJRu0qE4uIiDm5OI4ODk4uYioqBuUkR0kKJNFC1mqUltlbZSqE3RYt+2SUyTppCmeU2bkiZ907z3vnfnUEU0NrXPeMd97p6H+xlaa02D0oDRYL+p4WEN9yZm8dT6dzQEQtkCuiIJxHKbBxZrLiNWmc8vRxn7lMGRanPAw0QW49Uwp8ODJEZmCCSt/wcGrCWavte44LRz7FyYnd+yxMZz2J7cGKh6kvczRUp3X9BnmFyLzHNVRpkeShNM1b+iDngUn2Oue4qLLV3cf+YST2tiLf3sj04wmypSEt76wFixwoJpcbKnh/ZMmuXK2vqdYJXLxyPMDiTpTOX/DbhK88bMMh4Y5sSZt3R2/+53aRkCzgT+oX4Kls2i49YDT+M5JkMmV+aj3BrII/+a15MuSevZEPl3UzxP5/8EMiurfO1L0hyNU27tZehL/c/zJNzsLXB+uoNySZBfFQD4tIbHHxJMfoxxu2pi7rK5fsm3FgL5MwXKQAPaMzh8JMbg61E6mn3c8B/CF5yx2L1tC/5TR4nsAS/RhlNzcR0P6TggFVoDGrYqyYMkLOybZ4fQZFZqGOHsgi4KF1tIakrhKIXj/WrBQAuJV3EQtsBbEQjbQVQEB/0HUHu3Y2wU5/XKVRqhFD8AgpYX2M9TNGcAAAAASUVORK5CYII=">
<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo_basic.css"/>
{% endblock -%}
{% endblock -%}
</head>
<body{{ bodyClassAttr }}>
{%- block body %}
<main class="main_site">
<h1>{{ title }}</h1>
{% block main %}{% endblock -%}
</main>
{% render 'hippie/partials/footer-status' %}
{% endblock -%}
</body>
</html>