From 5f8e048c84c414f5465de4ab096afe8fe9778ab8 Mon Sep 17 00:00:00 2001 From: sthag Date: Sat, 8 Nov 2025 21:58:23 +0100 Subject: [PATCH 01/15] feat: Replace status screens with liquid versions - maintenance.njk is now a single status.liquid - All status screens use liquid - Simplify structure --- source/screens/demo/pages/error/304.liquid | 20 +++++++++++ source/screens/demo/pages/error/304.njk | 26 -------------- source/screens/demo/pages/error/400.liquid | 17 +++++++++ source/screens/demo/pages/error/400.njk | 26 -------------- source/screens/demo/pages/error/401.liquid | 18 ++++++++++ source/screens/demo/pages/error/401.njk | 26 -------------- source/screens/demo/pages/error/403.liquid | 18 ++++++++++ source/screens/demo/pages/error/403.njk | 26 -------------- source/screens/demo/pages/error/404.liquid | 19 ++++++++++ source/screens/demo/pages/error/404.njk | 26 -------------- source/screens/demo/pages/error/408.liquid | 17 +++++++++ source/screens/demo/pages/error/408.njk | 26 -------------- source/screens/demo/pages/error/500.liquid | 17 +++++++++ source/screens/demo/pages/error/500.njk | 26 -------------- source/screens/demo/pages/error/503.liquid | 19 ++++++++++ source/screens/demo/pages/error/503.njk | 26 -------------- source/screens/demo/pages/maintenance.liquid | 13 +++++++ source/screens/demo/pages/maintenance.njk | 21 ----------- source/templates/demo/_maintenance.njk | 12 ------- source/templates/hippie/_maintenance.njk | 27 -------------- .../hippie/partials/footer-status.liquid | 9 +++++ source/templates/hippie/status.liquid | 36 +++++++++++++++++++ 22 files changed, 203 insertions(+), 268 deletions(-) create mode 100644 source/screens/demo/pages/error/304.liquid delete mode 100644 source/screens/demo/pages/error/304.njk create mode 100644 source/screens/demo/pages/error/400.liquid delete mode 100644 source/screens/demo/pages/error/400.njk create mode 100644 source/screens/demo/pages/error/401.liquid delete mode 100644 source/screens/demo/pages/error/401.njk create mode 100644 source/screens/demo/pages/error/403.liquid delete mode 100644 source/screens/demo/pages/error/403.njk create mode 100644 source/screens/demo/pages/error/404.liquid delete mode 100644 source/screens/demo/pages/error/404.njk create mode 100644 source/screens/demo/pages/error/408.liquid delete mode 100644 source/screens/demo/pages/error/408.njk create mode 100644 source/screens/demo/pages/error/500.liquid delete mode 100644 source/screens/demo/pages/error/500.njk create mode 100644 source/screens/demo/pages/error/503.liquid delete mode 100644 source/screens/demo/pages/error/503.njk create mode 100644 source/screens/demo/pages/maintenance.liquid delete mode 100644 source/screens/demo/pages/maintenance.njk delete mode 100644 source/templates/demo/_maintenance.njk delete mode 100644 source/templates/hippie/_maintenance.njk create mode 100644 source/templates/hippie/partials/footer-status.liquid create mode 100644 source/templates/hippie/status.liquid diff --git a/source/screens/demo/pages/error/304.liquid b/source/screens/demo/pages/error/304.liquid new file mode 100644 index 0000000..eb3b98c --- /dev/null +++ b/source/screens/demo/pages/error/304.liquid @@ -0,0 +1,20 @@ +--- +title: 304 +--- +{% assign pageBase = "../../../" -%} +{% assign bodyClass = "body_status" %} +{%- layout "hippie/status.liquid" %} + +{% block main %} +{{ block.super -}} +

Umleitung

+

Unverändert Not Modified

+
+

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 Browser-Cache-Versionsvergleich. +

+

Wikipedia

+
+{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/pages/error/304.njk b/source/screens/demo/pages/error/304.njk deleted file mode 100644 index 1d47451..0000000 --- a/source/screens/demo/pages/error/304.njk +++ /dev/null @@ -1,26 +0,0 @@ ---- -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 %} -
-

{{ title }}

-

Umleitung

-

Unverändert Not Modified

-
-

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 Browser-Cache-Versionsvergleich.

-

Wikipedia

-
-
-{{ super() }} -{% endblock %} diff --git a/source/screens/demo/pages/error/400.liquid b/source/screens/demo/pages/error/400.liquid new file mode 100644 index 0000000..6d480e8 --- /dev/null +++ b/source/screens/demo/pages/error/400.liquid @@ -0,0 +1,17 @@ +--- +title: 400 +--- +{% assign pageBase = "../../../" -%} +{% assign bodyClass = "body_status" %} +{%- layout "hippie/status.liquid" %} + +{% block main %} +{{ block.super -}} +

Client-Fehler

+

Fehlerhafte Anfrage! Bad Request

+
+

Die Anfrage-Nachricht war fehlerhaft aufgebaut.

+

Wikipedia +

+
+{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/pages/error/400.njk b/source/screens/demo/pages/error/400.njk deleted file mode 100644 index 087b9a8..0000000 --- a/source/screens/demo/pages/error/400.njk +++ /dev/null @@ -1,26 +0,0 @@ ---- -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 %} -
-

{{ title }}

-

Client-Fehler

-

Fehlerhafte Anfrage! Bad Request

-
-

Die Anfrage-Nachricht war fehlerhaft aufgebaut.

-

Wikipedia

-
-
-{{ super() }} -{% endblock %} diff --git a/source/screens/demo/pages/error/401.liquid b/source/screens/demo/pages/error/401.liquid new file mode 100644 index 0000000..3bef772 --- /dev/null +++ b/source/screens/demo/pages/error/401.liquid @@ -0,0 +1,18 @@ +--- +title: 401 +--- +{% assign pageBase = "../../../" -%} +{% assign bodyClass = "body_status" %} +{%- layout "hippie/status.liquid" %} + +{% block main %} +{{ block.super -}} +

Client-Fehler

+

Nicht autorisiert! Unauthorized

+
+

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.

+

Wikipedia +

+
+{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/pages/error/401.njk b/source/screens/demo/pages/error/401.njk deleted file mode 100644 index f38c3f9..0000000 --- a/source/screens/demo/pages/error/401.njk +++ /dev/null @@ -1,26 +0,0 @@ ---- -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 %} -
-

{{ title }}

-

Client-Fehler

-

Nicht autorisiert! Unauthorized

-
-

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.

-

Wikipedia

-
-
-{{ super() }} -{% endblock %} diff --git a/source/screens/demo/pages/error/403.liquid b/source/screens/demo/pages/error/403.liquid new file mode 100644 index 0000000..94a245f --- /dev/null +++ b/source/screens/demo/pages/error/403.liquid @@ -0,0 +1,18 @@ +--- +title: 403 +--- +{% assign pageBase = "../../../" -%} +{% assign bodyClass = "body_status" %} +{%- layout "hippie/status.liquid" %} + +{% block main %} +{{ block.super -}} +

Client-Fehler

+

Nicht erlaubt! Forbidden

+
+

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.

+

Wikipedia +

+
+{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/pages/error/403.njk b/source/screens/demo/pages/error/403.njk deleted file mode 100644 index 03904e4..0000000 --- a/source/screens/demo/pages/error/403.njk +++ /dev/null @@ -1,26 +0,0 @@ ---- -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 %} -
-

{{ title }}

-

Client-Fehler

-

Nicht erlaubt! Forbidden

-
-

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.

-

Wikipedia

-
-
-{{ super() }} -{% endblock %} diff --git a/source/screens/demo/pages/error/404.liquid b/source/screens/demo/pages/error/404.liquid new file mode 100644 index 0000000..eadf7ee --- /dev/null +++ b/source/screens/demo/pages/error/404.liquid @@ -0,0 +1,19 @@ +--- +title: 404 +--- +{% assign pageBase = "../../../" -%} +{% assign bodyClass = "body_status" %} +{%- layout "hippie/status.liquid" %} + +{% block main %} +{{ block.super -}} +

Client-Fehler

+

Hier ist nichts. Not Found

+
+

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.

+

Wikipedia +

+
+{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/pages/error/404.njk b/source/screens/demo/pages/error/404.njk deleted file mode 100644 index bebd4f5..0000000 --- a/source/screens/demo/pages/error/404.njk +++ /dev/null @@ -1,26 +0,0 @@ ---- -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 %} -
-

{{ title }}

-

Client-Fehler

-

Hier ist nichts. Not Found

-
-

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.

-

Wikipedia

-
-
-{{ super() }} -{% endblock %} diff --git a/source/screens/demo/pages/error/408.liquid b/source/screens/demo/pages/error/408.liquid new file mode 100644 index 0000000..0e50541 --- /dev/null +++ b/source/screens/demo/pages/error/408.liquid @@ -0,0 +1,17 @@ +--- +title: 408 +--- +{% assign pageBase = "../../../" -%} +{% assign bodyClass = "body_status" %} +{%- layout "hippie/status.liquid" %} + +{% block main %} +{{ block.super -}} +

Client-Fehler

+

Zeitüberschreitung der Anforderung. Request Timeout

+
+

Innerhalb der vom Server erlaubten Zeitspanne wurde keine vollständige Anfrage des Clients empfangen.

+

Wikipedia +

+
+{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/pages/error/408.njk b/source/screens/demo/pages/error/408.njk deleted file mode 100644 index c5e10e0..0000000 --- a/source/screens/demo/pages/error/408.njk +++ /dev/null @@ -1,26 +0,0 @@ ---- -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 %} -
-

{{ title }}

-

Client-Fehler

-

Zeitüberschreitung der Anforderung. Request Timeout

-
-

Innerhalb der vom Server erlaubten Zeitspanne wurde keine vollständige Anfrage des Clients empfangen.

-

Wikipedia

-
-
-{{ super() }} -{% endblock %} diff --git a/source/screens/demo/pages/error/500.liquid b/source/screens/demo/pages/error/500.liquid new file mode 100644 index 0000000..96489d3 --- /dev/null +++ b/source/screens/demo/pages/error/500.liquid @@ -0,0 +1,17 @@ +--- +title: 500 +--- +{% assign pageBase = "../../../" -%} +{% assign bodyClass = "body_status" %} +{%- layout "hippie/status.liquid" %} + +{% block main %} +{{ block.super -}} +

Server-Fehler

+

Allgemeiner Server Fehler!!! Internal Server Error

+
+

Dies ist ein „Sammel-Statuscode“ für unerwartete Serverfehler.

+

Wikipedia +

+
+{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/pages/error/500.njk b/source/screens/demo/pages/error/500.njk deleted file mode 100644 index d04c5c8..0000000 --- a/source/screens/demo/pages/error/500.njk +++ /dev/null @@ -1,26 +0,0 @@ ---- -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 %} -
-

{{ title }}

-

Server-Fehler

-

Allgemeiner Server Fehler!!! Internal Server Error

-
-

Dies ist ein „Sammel-Statuscode“ für unerwartete Serverfehler.

-

Wikipedia

-
-
-{{ super() }} -{% endblock %} diff --git a/source/screens/demo/pages/error/503.liquid b/source/screens/demo/pages/error/503.liquid new file mode 100644 index 0000000..46647d9 --- /dev/null +++ b/source/screens/demo/pages/error/503.liquid @@ -0,0 +1,19 @@ +--- +title: 503 +--- +{% assign pageBase = "../../../" -%} +{% assign bodyClass = "body_status" %} +{%- layout "hippie/status.liquid" %} + +{% block main %} +{{ block.super -}} +

Server-Fehler

+

Dienst nicht verfügbar. Service Unavailable

+
+

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.

+

Wikipedia +

+
+{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/pages/error/503.njk b/source/screens/demo/pages/error/503.njk deleted file mode 100644 index f215a54..0000000 --- a/source/screens/demo/pages/error/503.njk +++ /dev/null @@ -1,26 +0,0 @@ ---- -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 %} -
-

{{ title }}

-

Server-Fehler

-

Dienst nicht verfügbar. Service Unavailable

-
-

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.

-

Wikipedia

-
-
-{{ super() }} -{% endblock %} diff --git a/source/screens/demo/pages/maintenance.liquid b/source/screens/demo/pages/maintenance.liquid new file mode 100644 index 0000000..d713f9e --- /dev/null +++ b/source/screens/demo/pages/maintenance.liquid @@ -0,0 +1,13 @@ +--- +title: Maintenance +--- +{% assign pageBase = "../../" -%} +{% assign pageClass = "h_full_view" %} +{%- layout "hippie/status.liquid" %} + +{% block body %} +
+

HIPPIE

+

Diese Seite wird gerade gewartet.

+
+{% endblock %} diff --git a/source/screens/demo/pages/maintenance.njk b/source/screens/demo/pages/maintenance.njk deleted file mode 100644 index b9cd3fe..0000000 --- a/source/screens/demo/pages/maintenance.njk +++ /dev/null @@ -1,21 +0,0 @@ ---- -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 %} - -
-

HIPPIE

-
-{% endblock %} diff --git a/source/templates/demo/_maintenance.njk b/source/templates/demo/_maintenance.njk deleted file mode 100644 index da94505..0000000 --- a/source/templates/demo/_maintenance.njk +++ /dev/null @@ -1,12 +0,0 @@ - -{% extends "hippie/_maintenance.njk" %} - -{% block meta %} - {% include "demo/partials/_meta.njk" %} - -{% endblock %} - -{% block links %} - {{ super() }} - -{% endblock %} \ No newline at end of file diff --git a/source/templates/hippie/_maintenance.njk b/source/templates/hippie/_maintenance.njk deleted file mode 100644 index 0741534..0000000 --- a/source/templates/hippie/_maintenance.njk +++ /dev/null @@ -1,27 +0,0 @@ - -{% import "hippie/macros/_footer.njk" as footer %} - - - - - - {% block head %} - {{ hippie.titlePrefix }} - {%- block title %}{% endblock %}{{ hippie.titlePostfix }} - - {% block meta %} - {% include "hippie/partials/_head_meta.njk" %} - {% endblock %} - - {% block links %} - - {% endblock %} - {% endblock %} - - - - {% block body %} - {{ footer.status() }} - {% endblock %} - - \ No newline at end of file diff --git a/source/templates/hippie/partials/footer-status.liquid b/source/templates/hippie/partials/footer-status.liquid new file mode 100644 index 0000000..b46ecf2 --- /dev/null +++ b/source/templates/hippie/partials/footer-status.liquid @@ -0,0 +1,9 @@ + \ No newline at end of file diff --git a/source/templates/hippie/status.liquid b/source/templates/hippie/status.liquid new file mode 100644 index 0000000..6189ca9 --- /dev/null +++ b/source/templates/hippie/status.liquid @@ -0,0 +1,36 @@ + +{% if pageClass %} + {%- capture classAttr %} class="{{ pageClass }}"{% endcapture -%} +{% endif -%} +{% if bodyClass %} + {%- capture bodyClassAttr %} class="{{ bodyClass }}"{% endcapture -%} +{% endif -%} + + + + {% block head %} + + {{- hippie.titlePrefix -}} + {% block title %}{{ title }}{% endblock -%} + {{ hippie.titlePostfix -}} + + {% block meta -%} + {% render "hippie/partials/meta.liquid" %} + {% endblock -%} + {% block links -%} + + + {% endblock -%} + {% endblock -%} + + + +{%- block body %} +
+

{{ title }}

+ {% block main %}{% endblock -%} +
+{% render 'hippie/partials/footer-status' %} +{% endblock -%} + + \ No newline at end of file From 5663813ecfe7d53082a4622952c01ab9c4562724 Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 9 Nov 2025 12:58:41 +0100 Subject: [PATCH 02/15] feat: Replace index screen with liquid version - _default.njk is now a single full.liquid - Simplify structure - Add log partials as liquid --- source/screens/demo/index.liquid | 78 ++++++++++++ source/screens/demo/index.njk | 82 ------------- source/templates/hippie/full.liquid | 49 ++++++++ .../hippie/partials/log-assets.liquid | 3 + .../templates/hippie/partials/log-log.liquid | 3 + .../hippie/partials/log-setup.liquid | 6 + .../hippie/partials/log-start.liquid | 4 + .../hippie/partials/script-log.liquid | 113 ++++++++++++++++++ 8 files changed, 256 insertions(+), 82 deletions(-) create mode 100644 source/screens/demo/index.liquid delete mode 100644 source/screens/demo/index.njk create mode 100644 source/templates/hippie/full.liquid create mode 100644 source/templates/hippie/partials/log-assets.liquid create mode 100644 source/templates/hippie/partials/log-log.liquid create mode 100644 source/templates/hippie/partials/log-setup.liquid create mode 100644 source/templates/hippie/partials/log-start.liquid create mode 100644 source/templates/hippie/partials/script-log.liquid diff --git a/source/screens/demo/index.liquid b/source/screens/demo/index.liquid new file mode 100644 index 0000000..0b7c221 --- /dev/null +++ b/source/screens/demo/index.liquid @@ -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 %} +
+
+

This is {{ hippie.brand | upcase }}

+

You can start using it by replacing this file with your own index page.

+

To do this you need to create a file + /index.njk + inside the + source/screens + folder. You can also create a + data.json + file inside the + source/templates + folder as a data source for your nunjucks files.

+

For a very basic start you can make a copy of the demo page + blank.njk. You can find it at + /source/screens/demo.

+

The + source/demo + folder contains an overview of all HTML elements and also examples for CSS style combinations and even whole + page layouts.
Follow the white rabbit.

+
+ 
  ()()
  (..)
c(")(")
+

Overview

+
+ +

Page

+
    + {% assign pagesByTitle = collections.demoPage | sort: 'data.title' %} + + {% for link in pagesByTitle %} +
  • + {{ link.data.title }} +
    • + {% endfor %} +
+

Example

+ +
+
+{% 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 -%} + +{% render 'hippie/partials/log-log' with 'Application ready... or is it?' as msg -%} +{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/index.njk b/source/screens/demo/index.njk deleted file mode 100644 index c50c516..0000000 --- a/source/screens/demo/index.njk +++ /dev/null @@ -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 %} - -
-
-

This is - {{ hippie.brand | upper }}

-

You can start using it by replacing this file with your own index page.

-

To do this you need to create a file - /index.njk - inside the - source/screens - folder. You can also create a - data.json - file inside the - source/templates - folder as a data source for your nunjucks files.

-

For a very basic start you can make a copy of the demo page - blank.njk. You can find it at - /source/screens/demo.

-

The - source/demo - folder contains an overview of all HTML elements and also examples for CSS style combinations and even whole page layouts.
Follow the white rabbit.

-
- 
  ()()
  (..)
c(")(")
-

Overview

-
- -

Page

-
    - {% for link in collections.demoPage | sort(false, false, 'data.title') %} -
  • - {{ link.data.title }} -
    • - {% endfor %} -
-

Example

- -
-
-{% endblock %} - -{% block script %} - {{ super() }} - -{% endblock %} \ No newline at end of file diff --git a/source/templates/hippie/full.liquid b/source/templates/hippie/full.liquid new file mode 100644 index 0000000..7167a5f --- /dev/null +++ b/source/templates/hippie/full.liquid @@ -0,0 +1,49 @@ + +{% if pageId %} +{%- capture idAttr %} id="{{ pageId }}"{% endcapture -%} +{% endif -%} +{% if pageClass %} + {%- capture classAttr %} class="{{ pageClass }}"{% endcapture -%} +{% endif -%} +{% if bodyClass %} + {%- capture bodyClassAttr %} class="{{ bodyClass }}"{% endcapture -%} +{% endif -%} + + + + {% block head %} + + {{- hippie.titlePrefix -}} + {% block title %}{% endblock -%} + {{ hippie.titlePostfix -}} + + {% block meta -%} + {% render "hippie/partials/meta.liquid" %} + {% comment %}{% 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 %}{% endcomment %} + {% comment %}{% endcomment %} + + {% endblock -%} + {% render 'hippie/partials/log-log' with 'HEAD end :: Links parsed, starting to load.' as msg -%} + {% endblock -%} + + + +{% 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 -%} + + +{% endblock -%} +{% render 'hippie/partials/log-log' with 'BODY end :: Page script might still be loading.' as msg -%} + + \ No newline at end of file diff --git a/source/templates/hippie/partials/log-assets.liquid b/source/templates/hippie/partials/log-assets.liquid new file mode 100644 index 0000000..a34b417 --- /dev/null +++ b/source/templates/hippie/partials/log-assets.liquid @@ -0,0 +1,3 @@ + diff --git a/source/templates/hippie/partials/log-log.liquid b/source/templates/hippie/partials/log-log.liquid new file mode 100644 index 0000000..ba21f2a --- /dev/null +++ b/source/templates/hippie/partials/log-log.liquid @@ -0,0 +1,3 @@ + diff --git a/source/templates/hippie/partials/log-setup.liquid b/source/templates/hippie/partials/log-setup.liquid new file mode 100644 index 0000000..04fd9b2 --- /dev/null +++ b/source/templates/hippie/partials/log-setup.liquid @@ -0,0 +1,6 @@ +{% comment %}{% assign hippie.debugMode = state %}{% endcomment %} + diff --git a/source/templates/hippie/partials/log-start.liquid b/source/templates/hippie/partials/log-start.liquid new file mode 100644 index 0000000..e137e33 --- /dev/null +++ b/source/templates/hippie/partials/log-start.liquid @@ -0,0 +1,4 @@ + diff --git a/source/templates/hippie/partials/script-log.liquid b/source/templates/hippie/partials/script-log.liquid new file mode 100644 index 0000000..7e270c7 --- /dev/null +++ b/source/templates/hippie/partials/script-log.liquid @@ -0,0 +1,113 @@ + \ No newline at end of file From 1b7e4f4888f48e6afbce84956a5abca42baafa58 Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 9 Nov 2025 14:33:44 +0100 Subject: [PATCH 03/15] feat: Replace blank screen with liquid version - Add title to full template - Remove unnecessary title from screens - Change CRLF to LF --- source/screens/demo/index.liquid | 2 -- source/screens/demo/pages/blank.liquid | 10 +++++++++ source/screens/demo/pages/blank.njk | 22 -------------------- source/screens/demo/pages/default.liquid | 2 +- source/screens/demo/pages/maintenance.liquid | 2 +- source/templates/hippie/full.liquid | 2 +- source/templates/hippie/status.liquid | 5 +++-- 7 files changed, 16 insertions(+), 29 deletions(-) create mode 100644 source/screens/demo/pages/blank.liquid delete mode 100644 source/screens/demo/pages/blank.njk diff --git a/source/screens/demo/index.liquid b/source/screens/demo/index.liquid index 0b7c221..1f19b26 100644 --- a/source/screens/demo/index.liquid +++ b/source/screens/demo/index.liquid @@ -9,8 +9,6 @@ tags: {% assign pageClass = "h_full_view" -%} {%- layout "hippie/full.liquid" %} -{% block title %}Index{% endblock %} - {% block body %}
diff --git a/source/screens/demo/pages/blank.liquid b/source/screens/demo/pages/blank.liquid new file mode 100644 index 0000000..b6914e5 --- /dev/null +++ b/source/screens/demo/pages/blank.liquid @@ -0,0 +1,10 @@ +--- +title: Blank +--- +{% assign pageBase = "../../" -%} +{% assign pageId = page.fileSlug -%} +{%- layout "hippie/full.liquid" %} + +{% block body %} + +{% endblock %} diff --git a/source/screens/demo/pages/blank.njk b/source/screens/demo/pages/blank.njk deleted file mode 100644 index 3ff646f..0000000 --- a/source/screens/demo/pages/blank.njk +++ /dev/null @@ -1,22 +0,0 @@ ---- -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 %} - -{% endblock %} - -{% block script %} -{{ super() }} -{% endblock %} diff --git a/source/screens/demo/pages/default.liquid b/source/screens/demo/pages/default.liquid index 026c6da..5da6a7c 100644 --- a/source/screens/demo/pages/default.liquid +++ b/source/screens/demo/pages/default.liquid @@ -1,5 +1,5 @@ --- -title: "Default" +title: Default --- {% assign pageBase = "../" -%} {% assign pageId = page.fileSlug -%} diff --git a/source/screens/demo/pages/maintenance.liquid b/source/screens/demo/pages/maintenance.liquid index d713f9e..a4943f2 100644 --- a/source/screens/demo/pages/maintenance.liquid +++ b/source/screens/demo/pages/maintenance.liquid @@ -2,7 +2,7 @@ title: Maintenance --- {% assign pageBase = "../../" -%} -{% assign pageClass = "h_full_view" %} +{% assign pageClass = "h_full_view" -%} {%- layout "hippie/status.liquid" %} {% block body %} diff --git a/source/templates/hippie/full.liquid b/source/templates/hippie/full.liquid index 7167a5f..89ba267 100644 --- a/source/templates/hippie/full.liquid +++ b/source/templates/hippie/full.liquid @@ -14,7 +14,7 @@ {% block head %} {{- hippie.titlePrefix -}} - {% block title %}{% endblock -%} + {% block title %}{{ title }}{% endblock -%} {{ hippie.titlePostfix -}} {% block meta -%} diff --git a/source/templates/hippie/status.liquid b/source/templates/hippie/status.liquid index 6189ca9..f2e0ce1 100644 --- a/source/templates/hippie/status.liquid +++ b/source/templates/hippie/status.liquid @@ -1,6 +1,6 @@ {% if pageClass %} - {%- capture classAttr %} class="{{ pageClass }}"{% endcapture -%} +{%- capture classAttr %} class="{{ pageClass }}"{% endcapture -%} {% endif -%} {% if bodyClass %} {%- capture bodyClassAttr %} class="{{ bodyClass }}"{% endcapture -%} @@ -18,7 +18,8 @@ {% render "hippie/partials/meta.liquid" %} {% endblock -%} {% block links -%} - + {% endblock -%} {% endblock -%} From 432af47d2c086ae18d84c37ba1a20e497902dc25 Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 16 Nov 2025 12:13:57 +0100 Subject: [PATCH 04/15] feat: Add start screen - Rename existing ui start screen to tile - Add start screen - Search input for DuckDuckGo - Unfinished portal content --- source/screens/demo/examples/start.liquid | 84 +++++++++++++++++++ .../examples/ui/{start.liquid => tile.liquid} | 2 +- source/style/demo.scss | 1 + source/style/modules/_start.scss | 15 ++++ 4 files changed, 101 insertions(+), 1 deletion(-) create mode 100644 source/screens/demo/examples/start.liquid rename source/screens/demo/examples/ui/{start.liquid => tile.liquid} (96%) create mode 100644 source/style/modules/_start.scss diff --git a/source/screens/demo/examples/start.liquid b/source/screens/demo/examples/start.liquid new file mode 100644 index 0000000..b4b1d98 --- /dev/null +++ b/source/screens/demo/examples/start.liquid @@ -0,0 +1,84 @@ +--- +title: Start +tags: +- demoExample +--- +{% assign pageBase = "../../" -%} +{% assign pageId = page.fileSlug -%} +{% assign bodyClass = "body_start" -%} +{% layout "hippie/full.liquid" %} + +{% block body %} +
+ +
+ + +
+
+{% endblock %} + +{% block script %} +{{ block.super -}} + +{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/examples/ui/start.liquid b/source/screens/demo/examples/ui/tile.liquid similarity index 96% rename from source/screens/demo/examples/ui/start.liquid rename to source/screens/demo/examples/ui/tile.liquid index 261cb16..4bcd8c4 100644 --- a/source/screens/demo/examples/ui/start.liquid +++ b/source/screens/demo/examples/ui/tile.liquid @@ -1,5 +1,5 @@ --- -title: Start +title: Tile tags: - ui --- diff --git a/source/style/demo.scss b/source/style/demo.scss index 73e17c1..98e355e 100644 --- a/source/style/demo.scss +++ b/source/style/demo.scss @@ -13,4 +13,5 @@ @use "modules/portal/portal_module"; @use "modules/songbook/songbook_module"; @use "modules/demo/demo_module"; +@use "modules/start"; // @use "modules/YOUR-MODULE/YOUR-FILES"; diff --git a/source/style/modules/_start.scss b/source/style/modules/_start.scss new file mode 100644 index 0000000..7d790a3 --- /dev/null +++ b/source/style/modules/_start.scss @@ -0,0 +1,15 @@ +@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; + } + } +} \ No newline at end of file From fcdbfb41ef7bd5946d9c953f6752ddd6c0bec375 Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 16 Nov 2025 12:29:19 +0100 Subject: [PATCH 05/15] feat: Add clock screen - New screen for a ring clock - Add a canvas with the first ring - No functionality yet --- source/screens/demo/examples/clock.liquid | 34 +++++++++++++++++++++++ source/style/demo.scss | 1 + source/style/modules/_clock.scss | 9 ++++++ 3 files changed, 44 insertions(+) create mode 100644 source/screens/demo/examples/clock.liquid create mode 100644 source/style/modules/_clock.scss diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid new file mode 100644 index 0000000..4541525 --- /dev/null +++ b/source/screens/demo/examples/clock.liquid @@ -0,0 +1,34 @@ +--- +title: Clock +tags: +- demoExample +--- +{% assign pageBase = "../../" -%} +{% assign bodyClass = "body_clock" -%} +{% layout "hippie/full.liquid" %} + +{% block body %} +
+ +
+{% endblock %} + +{% block script %} +{{ block.super -}} + +{% endblock %} \ No newline at end of file diff --git a/source/style/demo.scss b/source/style/demo.scss index 98e355e..fe2b7e8 100644 --- a/source/style/demo.scss +++ b/source/style/demo.scss @@ -14,4 +14,5 @@ @use "modules/songbook/songbook_module"; @use "modules/demo/demo_module"; @use "modules/start"; +@use "modules/clock"; // @use "modules/YOUR-MODULE/YOUR-FILES"; diff --git a/source/style/modules/_clock.scss b/source/style/modules/_clock.scss new file mode 100644 index 0000000..74265da --- /dev/null +++ b/source/style/modules/_clock.scss @@ -0,0 +1,9 @@ +@use "../../hippie-style/hippie"; + +.body_clock { + main { + @extend .sec_main_center; + display: flex; + justify-content: center; + } +} \ No newline at end of file From dfa315310f011d499eb509a4cde8950bc048971a Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 16 Nov 2025 12:35:39 +0100 Subject: [PATCH 06/15] feat: Update clock - Change how the arc is drawn - Update the ring according to seconds --- source/screens/demo/examples/clock.liquid | 28 +++++++++++++++++------ 1 file changed, 21 insertions(+), 7 deletions(-) diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid index 4541525..1ef49bc 100644 --- a/source/screens/demo/examples/clock.liquid +++ b/source/screens/demo/examples/clock.liquid @@ -20,15 +20,29 @@ tags: const canvas = document.getElementById('clock'); const ctx = canvas.getContext('2d'); - function drawRing(x, y, outerRadius, innerRadius, color) { + function drawRing(seconds) { + const centerX = canvas.width / 2; + const centerY = canvas.height / 2; + const radius = 128; + + ctx.clearRect(0, 0, canvas.width, canvas.height); + + const startAngle = -0.5 * Math.PI; // Start at the top + const endAngle = startAngle + (2 * Math.PI * (seconds / 60)); + ctx.beginPath(); - ctx.arc(x, y, outerRadius, 0, Math.PI * 2); - ctx.arc(x, y, innerRadius, 0, Math.PI * 2, true); - ctx.closePath(); - ctx.fillStyle = color; - ctx.fill(); + ctx.arc(centerX, centerY, radius, startAngle, endAngle, false); + ctx.lineWidth = 16; + ctx.strokeStyle = 'black'; + ctx.stroke(); } - drawRing(256, 256, 128, 96, 'black'); + function updateCircle() { + const currentSeconds = new Date().getSeconds(); + drawRing(currentSeconds); + } + + updateCircle(); + setInterval(updateCircle, 1000); {% endblock %} \ No newline at end of file From 1e874c4ac84af92439524e551fd6035d85fb80a1 Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 16 Nov 2025 12:43:10 +0100 Subject: [PATCH 07/15] feat: Add elements to clock Add rings for minutes and hours. --- source/screens/demo/examples/clock.liquid | 31 +++++++++++++++-------- 1 file changed, 21 insertions(+), 10 deletions(-) diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid index 1ef49bc..054b628 100644 --- a/source/screens/demo/examples/clock.liquid +++ b/source/screens/demo/examples/clock.liquid @@ -20,26 +20,37 @@ tags: const canvas = document.getElementById('clock'); const ctx = canvas.getContext('2d'); - function drawRing(seconds) { + function drawCircle(seconds, minutes, hours) { const centerX = canvas.width / 2; const centerY = canvas.height / 2; const radius = 128; ctx.clearRect(0, 0, canvas.width, canvas.height); - const startAngle = -0.5 * Math.PI; // Start at the top - const endAngle = startAngle + (2 * Math.PI * (seconds / 60)); + 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 = 'black'; - ctx.stroke(); + ctx.beginPath(); + ctx.arc(centerX, centerY, radius, startAngle, endAngle, false); + ctx.lineWidth = 16; + ctx.strokeStyle = strokeStyle; + ctx.stroke(); + } + + drawArc(seconds, 60, radius, 'black'); + drawArc(minutes, 60, radius - 20, 'lightgrey'); + // drawArc(hours % 12, 12, radius - 40, 'white'); + drawArc(hours, 24, radius - 40, 'white'); } function updateCircle() { - const currentSeconds = new Date().getSeconds(); - drawRing(currentSeconds); + const currentDate = new Date(); + const currentSeconds = currentDate.getSeconds(); + const currentMinutes = currentDate.getMinutes(); + const currentHours = currentDate.getHours(); + + drawCircle(currentSeconds, currentMinutes, currentHours); } updateCircle(); From 847c4a9f6bad98445761846badd0635867730b6c Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 16 Nov 2025 12:57:43 +0100 Subject: [PATCH 08/15] feat: Update clock Add switch for 12/24-hour format. --- source/screens/demo/examples/clock.liquid | 17 +++++++++++++++-- source/style/modules/_clock.scss | 5 +++++ 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid index 054b628..4e4c8de 100644 --- a/source/screens/demo/examples/clock.liquid +++ b/source/screens/demo/examples/clock.liquid @@ -10,6 +10,9 @@ tags: {% block body %}
+

+ +

{% endblock %} @@ -19,6 +22,12 @@ tags: // Page script const canvas = document.getElementById('clock'); const ctx = canvas.getContext('2d'); + let is24HourFormat = true; + + document.getElementById('toggleFormat').addEventListener('click', () => { + is24HourFormat = !is24HourFormat; + document.getElementById('toggleFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format'; + }); function drawCircle(seconds, minutes, hours) { const centerX = canvas.width / 2; @@ -40,8 +49,12 @@ tags: drawArc(seconds, 60, radius, 'black'); drawArc(minutes, 60, radius - 20, 'lightgrey'); - // drawArc(hours % 12, 12, radius - 40, 'white'); - drawArc(hours, 24, radius - 40, 'white'); + drawArc( + is24HourFormat ? hours : hours % 12, + is24HourFormat ? 24 : 12, + radius - 40, + 'white' + ); } function updateCircle() { diff --git a/source/style/modules/_clock.scss b/source/style/modules/_clock.scss index 74265da..537190f 100644 --- a/source/style/modules/_clock.scss +++ b/source/style/modules/_clock.scss @@ -4,6 +4,11 @@ main { @extend .sec_main_center; display: flex; + flex-flow: column nowrap; justify-content: center; } + + p { + text-align: center; + } } \ No newline at end of file From f257a44d890c3ba47c37f58c3b581b6cc6957ff2 Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 16 Nov 2025 13:05:25 +0100 Subject: [PATCH 09/15] feat: Add day of week and month to clock --- source/screens/demo/examples/clock.liquid | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid index 4e4c8de..b90b555 100644 --- a/source/screens/demo/examples/clock.liquid +++ b/source/screens/demo/examples/clock.liquid @@ -29,7 +29,7 @@ tags: document.getElementById('toggleFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format'; }); - function drawCircle(seconds, minutes, hours) { + function drawCircle(seconds, minutes, hours, dayOfWeek, month) { const centerX = canvas.width / 2; const centerY = canvas.height / 2; const radius = 128; @@ -55,6 +55,8 @@ tags: radius - 40, 'white' ); + drawArc(dayOfWeek, 7, radius - 60, '#fad803'); + drawArc(month, 12, radius - 80, '#d30a51'); } function updateCircle() { @@ -62,8 +64,10 @@ tags: const currentSeconds = currentDate.getSeconds(); const currentMinutes = currentDate.getMinutes(); const currentHours = currentDate.getHours(); + const currentDayOfWeek = currentDate.getDay(); // Get current day of the week (0-6, where 0 is Sunday) + const currentMonth = currentDate.getMonth() + 1; // Get current month (0-11) - drawCircle(currentSeconds, currentMinutes, currentHours); + drawCircle(currentSeconds, currentMinutes, currentHours, currentDayOfWeek, currentMonth); } updateCircle(); From 9e560d7e62e959a146175ae32316f78d060cab84 Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 16 Nov 2025 13:09:16 +0100 Subject: [PATCH 10/15] feat: More clock work Add function to change start of week. --- source/screens/demo/examples/clock.liquid | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid index b90b555..b0bccd8 100644 --- a/source/screens/demo/examples/clock.liquid +++ b/source/screens/demo/examples/clock.liquid @@ -64,12 +64,18 @@ tags: const currentSeconds = currentDate.getSeconds(); const currentMinutes = currentDate.getMinutes(); const currentHours = currentDate.getHours(); - const currentDayOfWeek = currentDate.getDay(); // Get current day of the week (0-6, where 0 is Sunday) + const currentDayOfWeek = getNumericWeekday(currentDate); const currentMonth = currentDate.getMonth() + 1; // Get current month (0-11) drawCircle(currentSeconds, currentMinutes, currentHours, currentDayOfWeek, currentMonth); } + // TODO: Parameter für Wochenstart ergänzen + function getNumericWeekday(date) { + const weekday = date.getDay(); // 0 (Sunday) to 6 (Saturday) + return (weekday === 0) ? 7 : weekday; + } + updateCircle(); setInterval(updateCircle, 1000); From 86fce27554b672e7f046615abf8601593f489ee2 Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 16 Nov 2025 13:21:25 +0100 Subject: [PATCH 11/15] feat: More elements for clock and style change - Add day of month - Clock uses maximum canvas size --- source/screens/demo/examples/clock.liquid | 33 +++++++++++++++++------ 1 file changed, 25 insertions(+), 8 deletions(-) diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid index b0bccd8..ad98667 100644 --- a/source/screens/demo/examples/clock.liquid +++ b/source/screens/demo/examples/clock.liquid @@ -29,10 +29,12 @@ tags: document.getElementById('toggleFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format'; }); - function drawCircle(seconds, minutes, hours, dayOfWeek, month) { + function drawCircle(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, daysInCurrentMonth) { const centerX = canvas.width / 2; const centerY = canvas.height / 2; - const radius = 128; + const lineWidth = 16; + const lineGap = 8; + const maxSize = canvas.width / 2 - lineWidth; ctx.clearRect(0, 0, canvas.width, canvas.height); @@ -47,16 +49,17 @@ tags: ctx.stroke(); } - drawArc(seconds, 60, radius, 'black'); - drawArc(minutes, 60, radius - 20, 'lightgrey'); + drawArc(seconds, 60, maxSize, 'black'); + drawArc(minutes, 60, maxSize - lineWidth - lineGap, 'lightgrey'); drawArc( is24HourFormat ? hours : hours % 12, is24HourFormat ? 24 : 12, - radius - 40, + maxSize - (lineWidth + lineGap) * 2, 'white' ); - drawArc(dayOfWeek, 7, radius - 60, '#fad803'); - drawArc(month, 12, radius - 80, '#d30a51'); + drawArc(dayOfWeek, 7, maxSize - (lineWidth + lineGap) * 3, '#fad803'); + drawArc(dayOfMonth, daysInCurrentMonth, maxSize - (lineWidth + lineGap) * 4, '#d30a51'); + drawArc(month, 12, maxSize - (lineWidth + lineGap) * 5, '#273f8b'); } function updateCircle() { @@ -65,9 +68,19 @@ tags: 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()); - drawCircle(currentSeconds, currentMinutes, currentHours, currentDayOfWeek, currentMonth); + drawCircle( + currentSeconds, + currentMinutes, + currentHours, + currentDayOfWeek, + currentDayOfMonth, + currentMonth, + daysInCurrentMonth + ); } // TODO: Parameter für Wochenstart ergänzen @@ -76,6 +89,10 @@ tags: return (weekday === 0) ? 7 : weekday; } + function daysInMonth(month, year) { + return new Date(year, month, 0).getDate(); + } + updateCircle(); setInterval(updateCircle, 1000); From 1a1badc78679657d61928fd87a939ea2ce1af8d5 Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 16 Nov 2025 13:27:46 +0100 Subject: [PATCH 12/15] feat: Update clock to use color from CSS --- source/screens/demo/examples/clock.liquid | 9 ++++++--- source/style/modules/_clock.scss | 12 ++++++++++++ 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid index ad98667..3a36cbd 100644 --- a/source/screens/demo/examples/clock.liquid +++ b/source/screens/demo/examples/clock.liquid @@ -23,6 +23,9 @@ tags: 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; @@ -57,9 +60,9 @@ tags: maxSize - (lineWidth + lineGap) * 2, 'white' ); - drawArc(dayOfWeek, 7, maxSize - (lineWidth + lineGap) * 3, '#fad803'); - drawArc(dayOfMonth, daysInCurrentMonth, maxSize - (lineWidth + lineGap) * 4, '#d30a51'); - drawArc(month, 12, maxSize - (lineWidth + lineGap) * 5, '#273f8b'); + 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 updateCircle() { diff --git a/source/style/modules/_clock.scss b/source/style/modules/_clock.scss index 537190f..17a1f88 100644 --- a/source/style/modules/_clock.scss +++ b/source/style/modules/_clock.scss @@ -1,5 +1,17 @@ @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; From 15bfbcc97bf4a11a554d20bb3b0f407f73fe42bd Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 23 Nov 2025 14:17:24 +0100 Subject: [PATCH 13/15] feat: Update clock Display full circle when seconds or minutes turn to 0. --- source/screens/demo/examples/clock.liquid | 24 ++++++++++++++++------- 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid index 3a36cbd..da8f5a4 100644 --- a/source/screens/demo/examples/clock.liquid +++ b/source/screens/demo/examples/clock.liquid @@ -32,7 +32,7 @@ tags: document.getElementById('toggleFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format'; }); - function drawCircle(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, daysInCurrentMonth) { + function drawRings(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, daysInCurrentMonth) { const centerX = canvas.width / 2; const centerY = canvas.height / 2; const lineWidth = 16; @@ -52,8 +52,18 @@ tags: ctx.stroke(); } - drawArc(seconds, 60, maxSize, 'black'); - drawArc(minutes, 60, maxSize - lineWidth - lineGap, 'lightgrey'); + 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, @@ -65,7 +75,7 @@ tags: drawArc(month, 12, maxSize - (lineWidth + lineGap) * 5, colorMonth); } - function updateCircle() { + function updateRings() { const currentDate = new Date(); const currentSeconds = currentDate.getSeconds(); const currentMinutes = currentDate.getMinutes(); @@ -75,7 +85,7 @@ tags: const currentMonth = currentDate.getMonth() + 1; // Get current month (0-11) const daysInCurrentMonth = daysInMonth(currentMonth, currentDate.getFullYear()); - drawCircle( + drawRings( currentSeconds, currentMinutes, currentHours, @@ -96,7 +106,7 @@ tags: return new Date(year, month, 0).getDate(); } - updateCircle(); - setInterval(updateCircle, 1000); + updateRings(); + setInterval(updateRings, 1000); {% endblock %} \ No newline at end of file From 29c705f272cb86d1bea9c52ecd8cdf004932fb3e Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 23 Nov 2025 14:17:46 +0100 Subject: [PATCH 14/15] feat: Add 10print screen --- source/screens/demo/examples/10print.liquid | 73 +++++++++++++++++++++ 1 file changed, 73 insertions(+) create mode 100644 source/screens/demo/examples/10print.liquid diff --git a/source/screens/demo/examples/10print.liquid b/source/screens/demo/examples/10print.liquid new file mode 100644 index 0000000..9f2778b --- /dev/null +++ b/source/screens/demo/examples/10print.liquid @@ -0,0 +1,73 @@ +--- +title: 10print +tags: +- demoExample +--- +{% assign pageBase = "../../" -%} +{% layout "hippie/full.liquid" %} + +{% block head %} +{{ block.super -}} + +{% endblock %} + +{% block body %} + +{% endblock %} + +{% block script %} +{{ block.super -}} + +{% endblock %} \ No newline at end of file From 3168d6cb7eb1eb8959528c3d40aa88a5120e6992 Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 23 Nov 2025 14:18:20 +0100 Subject: [PATCH 15/15] feat: Add simple blog structure --- source/screens/demo/examples/blog.njk | 51 ++++++++++++++++++++ source/screens/demo/examples/blog/article.md | 11 +++++ 2 files changed, 62 insertions(+) create mode 100644 source/screens/demo/examples/blog.njk create mode 100644 source/screens/demo/examples/blog/article.md diff --git a/source/screens/demo/examples/blog.njk b/source/screens/demo/examples/blog.njk new file mode 100644 index 0000000..0ffe2e8 --- /dev/null +++ b/source/screens/demo/examples/blog.njk @@ -0,0 +1,51 @@ +--- +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 %} + +
+
+

Blog

+
+ +

Vorwort

+

Liederbuch für + Name.

+

Gibt es gebunden und hier + {{ ph.link() }}.
+ Bestellungen bitte an + {{ ph.name() }} + richten.

+
+ {%- for post in collections.article -%} + {{ post.content }} + {%- endfor -%} +
+
{{ ph.name() }}
+
+{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/examples/blog/article.md b/source/screens/demo/examples/blog/article.md new file mode 100644 index 0000000..0200c08 --- /dev/null +++ b/source/screens/demo/examples/blog/article.md @@ -0,0 +1,11 @@ +--- +tags: + - blog + - article +title: "Artikel" +releaseDate: JJJJ +description: Text +--- +# Titel + +Inhalt