From bbd1a9674e866e985f79266d1cf20cd0e26c78e1 Mon Sep 17 00:00:00 2001 From: sthag Date: Fri, 13 Feb 2026 19:23:10 +0100 Subject: [PATCH 01/10] feat: Replace ui explorer with liquid template - Explorer screen uses app.liquid layout instead of _app_frame.njk - Rename to just Explorer --- .../screens/demo/examples/ui/explorer.liquid | 145 +++++++++++++++++ source/screens/demo/examples/ui/explorer.njk | 146 ------------------ 2 files changed, 145 insertions(+), 146 deletions(-) create mode 100644 source/screens/demo/examples/ui/explorer.liquid delete mode 100755 source/screens/demo/examples/ui/explorer.njk diff --git a/source/screens/demo/examples/ui/explorer.liquid b/source/screens/demo/examples/ui/explorer.liquid new file mode 100644 index 0000000..f8e66fa --- /dev/null +++ b/source/screens/demo/examples/ui/explorer.liquid @@ -0,0 +1,145 @@ +--- +title: Explorer +tags: +- ui +--- +{% assign bodyClass = "body_frame" -%} +{% layout "hippie/app.liquid" %} + +{% block body %} +{% render 'hippie/partials/frame-header.liquid' %} +
+ +
+
+ + +
+
+ +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + +
namedatetypesize
folderYYYY-MM-DDfolder4KB
fileYYYY-MM-DDfolder1B
+
+ {% render 'hippie/partials/frame-status.liquid' %} +
+
+{% render 'hippie/partials/frame-mode.liquid' %} +{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/examples/ui/explorer.njk b/source/screens/demo/examples/ui/explorer.njk deleted file mode 100755 index c54ea0a..0000000 --- a/source/screens/demo/examples/ui/explorer.njk +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: GUI explorer -tags: - - ui ---- -{% set pageId = page.fileSlug %} - -{% extends "hippie/_app_frame.njk" %} - -{% block body %} - {{ io.frameHeader('title-bar') }} -
- -
-
- - -
-
- -
- - -
-
- - - - - - - - - - - - - - - - - - - - - - - -
namedatetypesize
folderYYYY-MM-DDfolder4KB
fileYYYY-MM-DDfolder1B
-
- {{ io.statusBar() }} -
-
- {{ io.frameFooter('mode-bar') }} -{% endblock %} \ No newline at end of file From 498f59a939c1cdf29be088ae268f5c9d1d5d8d84 Mon Sep 17 00:00:00 2001 From: sthag Date: Fri, 13 Feb 2026 19:57:57 +0100 Subject: [PATCH 02/10] feat: Replace ui cli and tui with liquid versions --- source/screens/demo/examples/ui/cli.liquid | 60 +++++++++++++++++++++ source/screens/demo/examples/ui/cli.njk | 62 ---------------------- source/screens/demo/examples/ui/tui.liquid | 13 +++++ source/screens/demo/examples/ui/tui.njk | 14 ----- 4 files changed, 73 insertions(+), 76 deletions(-) create mode 100644 source/screens/demo/examples/ui/cli.liquid delete mode 100755 source/screens/demo/examples/ui/cli.njk create mode 100644 source/screens/demo/examples/ui/tui.liquid delete mode 100755 source/screens/demo/examples/ui/tui.njk diff --git a/source/screens/demo/examples/ui/cli.liquid b/source/screens/demo/examples/ui/cli.liquid new file mode 100644 index 0000000..18f4cd4 --- /dev/null +++ b/source/screens/demo/examples/ui/cli.liquid @@ -0,0 +1,60 @@ +--- +title: CLI +tags: +- ui +--- +{% assign bodyClass = "body_cli" -%} +{% layout "hippie/app.liquid" %} + +{% block body %} +
+
+ 
Previous prompt
+
+
+ + +
+
+{% endblock %} + +{%- block script %} +{{ block.super -}} + +{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/examples/ui/cli.njk b/source/screens/demo/examples/ui/cli.njk deleted file mode 100755 index dc0800f..0000000 --- a/source/screens/demo/examples/ui/cli.njk +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: CLI -tags: - - ui ---- -{% set pageId = page.fileSlug %} -{% set bodyClass = "body_cli" %} - -{% extends "hippie/_app_frame.njk" %} - -{% block body %} -
-
- 
Previous prompt
-
-
- - -
-
-{% endblock %} - -{%- block script %} - {{ super() }} - -{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/examples/ui/tui.liquid b/source/screens/demo/examples/ui/tui.liquid new file mode 100644 index 0000000..cb2434f --- /dev/null +++ b/source/screens/demo/examples/ui/tui.liquid @@ -0,0 +1,13 @@ +--- +title: TUI +tags: +- ui +--- +{% assign bodyClass = "body_frame" -%} +{% layout "hippie/app.liquid" %} + +{% block body %} +{% render 'hippie/partials/frame-header.liquid' %} +
+{% render 'hippie/partials/frame-mode.liquid' %} +{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/examples/ui/tui.njk b/source/screens/demo/examples/ui/tui.njk deleted file mode 100755 index 8fc0e31..0000000 --- a/source/screens/demo/examples/ui/tui.njk +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: TUI -tags: - - ui ---- -{% set pageId = page.fileSlug %} - -{% extends "hippie/_app_frame.njk" %} - -{% block body %} - {{ io.frameHeader('title-bar') }} -
- {{ io.frameFooter('mode-bar') }} -{% endblock %} \ No newline at end of file From 0a5bc191d3d88ac379ace5a72899eba5bf2f413d Mon Sep 17 00:00:00 2001 From: sthag Date: Sat, 14 Feb 2026 12:15:18 +0100 Subject: [PATCH 03/10] chore: Set 11 as ECMAScript version in jshint --- .jshintrc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.jshintrc b/.jshintrc index 134e601..c62bd70 100644 --- a/.jshintrc +++ b/.jshintrc @@ -3,7 +3,7 @@ "curly": true, "devel": true, "eqeqeq": true, - "esversion": 9, + "esversion": 11, "forin": true, "freeze": true, "jquery": true, From 759283fd9f50b1b58b4adeffa341a65510eed1d8 Mon Sep 17 00:00:00 2001 From: sthag Date: Sat, 14 Feb 2026 12:16:55 +0100 Subject: [PATCH 04/10] docs: Update README and TODO - Better structure for TODOs - Add information about JavaScript to README --- README.md | 16 +++- TODO.md | 236 ++++++++++++++++++++++++++++-------------------------- 2 files changed, 136 insertions(+), 116 deletions(-) diff --git a/README.md b/README.md index 7430cb6..5ec206a 100644 --- a/README.md +++ b/README.md @@ -44,9 +44,23 @@ Everything has its default style. CSS classes follow a naming scheme of `_`. -- *Object* usually is the name of the HTML element. If it is not a elemtn directly it is the thing which receives the styling +- *Object* usually is the name of the HTML element. If it is not a element directly it is the thing which receives the styling - *Description* is a name of the style e.g. what it does, how it looks +### JavaScript (JS) + +The codebase uses ECMAScript 2023 Language Specification (14th edition). +However, currently the JSHint configuration only allows 11 as highest version. + +ID values are written in *camelCase*. The scheme further uses parts for specific contexts. + +If the ID is for an interactive element the first part is an abbreviation of the action. + +- `qry` - Query +- `set` - Set +- `slt` - Select +- `tgl` - Toggle + ## Versioning This project uses [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://quelltext.interaktionsweise.de/interaktionsweise/hippie/tags). diff --git a/TODO.md b/TODO.md index 1fea50d..6704e8e 100644 --- a/TODO.md +++ b/TODO.md @@ -11,120 +11,126 @@ - Add build process for normalize.css from github.com/necolas/normalize.css - Add build process for bourbon from https://github.com/thoughtbot/bourbon +# CSS + +- Check style for every basic element +- Uniform spelling of classes and identifiers + # Content -- Complete *Intro* with description for all basic elements, according to [HTML Standard - The elements of HTML](https://html.spec.whatwg.org/multipage/semantics.html#semantics) - - Sections - - [x] body - - [x] article - - [x] section - - [x] nav - - [x] aside - - [x] h1-h6 - - [x] hgroup - - [x] header - - [x] footer - - [x] address (put to grouping content) - - Grouping content - - [x] p - - [x] hr - - [x] pre - - [x] blockquote - - [x] ol - - [x] ul - - [ ] menu (new) - - [x] li - - [x] dl - - [x] dt - - [x] dd - - [x] figure - - [x] figcaption - - [x] main - - [ ] search (new) - - [x] div - - Text-level semantics - - [x] a - - [x] em - - [x] strong - - [x] small - - [x] s - - [x] cite - - [x] q - - [x] dfn - - [x] abbr - - [x] ruby - - [x] rb (deprecated) - - [x] rt - - [x] rtc (deprecated) - - [x] rp - - [x] data - - [x] time - - [x] code - - [x] var - - [x] samp - - [x] kbd - - [x] sub - - [x] sup - - [x] i - - [x] b - - [x] u - - [x] mark - - [x] bdi - - [x] bdo - - [x] span - - [x] br (mentioned in grouping content) - - [x] wbr - - Edits - - [x] ins - - [x] del - - Embedded content - - [x] picture - - [x] source - - [x] img - - [ ] iframe - - [ ] embed - - [ ] object - - [ ] param (deprecated) - - [ ] video - - [ ] audio - - [ ] track - - [ ] map - - [ ] area - - Tabular data - - [ ] table - - [ ] caption - - [ ] colgroup - - [ ] col - - [ ] tbody - - [ ] thead - - [ ] tfoot - - [ ] tr - - [ ] td - - [ ] th - - Forms - - [x] form - - [x] label - - [x] input - - [x] button - - [ ] select - - [ ] datalist - - [ ] optgroup - - [ ] option - - [ ] textarea - - [ ] output - - [ ] progress - - [ ] meter (new) - - [x] fieldset - - [x] legend - - Interactive elements - - [ ] details - - [ ] summary - - [ ] dialog - - Scripting - - [ ] script - - [ ] noscript - - [ ] template - - [ ] slot - - [ ] canvas -- Check style for every basic element -- Uniform spelling of classes and identifiers \ No newline at end of file +- *Intro* + - Complete with description for all basic elements, according to [HTML Standard - The elements of HTML](https://html.spec.whatwg.org/multipage/semantics.html#semantics) + - Sections + - [x] body + - [x] article + - [x] section + - [x] nav + - [x] aside + - [x] h1-h6 + - [x] hgroup + - [x] header + - [x] footer + - [x] address (put to grouping content) + - Grouping content + - [x] p + - [x] hr + - [x] pre + - [x] blockquote + - [x] ol + - [x] ul + - [ ] menu (new) + - [x] li + - [x] dl + - [x] dt + - [x] dd + - [x] figure + - [x] figcaption + - [x] main + - [ ] search (new) + - [x] div + - Text-level semantics + - [x] a + - [x] em + - [x] strong + - [x] small + - [x] s + - [x] cite + - [x] q + - [x] dfn + - [x] abbr + - [x] ruby + - [x] rb (deprecated) + - [x] rt + - [x] rtc (deprecated) + - [x] rp + - [x] data + - [x] time + - [x] code + - [x] var + - [x] samp + - [x] kbd + - [x] sub + - [x] sup + - [x] i + - [x] b + - [x] u + - [x] mark + - [x] bdi + - [x] bdo + - [x] span + - [x] br (mentioned in grouping content) + - [x] wbr + - Edits + - [x] ins + - [x] del + - Embedded content + - [x] picture + - [x] source + - [x] img + - [ ] iframe + - [ ] embed + - [ ] object + - [ ] param (deprecated) + - [ ] video + - [ ] audio + - [ ] track + - [ ] map + - [ ] area + - Tabular data + - [ ] table + - [ ] caption + - [ ] colgroup + - [ ] col + - [ ] tbody + - [ ] thead + - [ ] tfoot + - [ ] tr + - [ ] td + - [ ] th + - Forms + - [x] form + - [x] label + - [x] input + - [x] button + - [ ] select + - [ ] datalist + - [ ] optgroup + - [ ] option + - [ ] textarea + - [ ] output + - [ ] progress + - [ ] meter (new) + - [x] fieldset + - [x] legend + - Interactive elements + - [ ] details + - [ ] summary + - [ ] dialog + - Scripting + - [ ] script + - [ ] noscript + - [ ] template + - [ ] slot + - [ ] canvas +- *Clock* + - Add overlays to better distinguish day, week and year \ No newline at end of file From b1c7f4100e8ef5d76786113a82526c72d4c6d0ad Mon Sep 17 00:00:00 2001 From: sthag Date: Sat, 14 Feb 2026 12:18:07 +0100 Subject: [PATCH 05/10] feat: Unify format for IDs --- source/screens/demo/examples/clock.liquid | 6 +++--- source/screens/demo/examples/start.liquid | 4 ++-- source/screens/demo/examples/ui/gallery.liquid | 8 ++++---- source/screens/demo/examples/ui/windows.liquid | 8 ++++---- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid index da8f5a4..34fb1d5 100644 --- a/source/screens/demo/examples/clock.liquid +++ b/source/screens/demo/examples/clock.liquid @@ -11,7 +11,7 @@ tags:

- +

{% endblock %} @@ -27,9 +27,9 @@ tags: 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', () => { + document.getElementById('tglFormat').addEventListener('click', () => { is24HourFormat = !is24HourFormat; - document.getElementById('toggleFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format'; + document.getElementById('tglFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format'; }); function drawRings(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, daysInCurrentMonth) { diff --git a/source/screens/demo/examples/start.liquid b/source/screens/demo/examples/start.liquid index b4b1d98..3155921 100644 --- a/source/screens/demo/examples/start.liquid +++ b/source/screens/demo/examples/start.liquid @@ -11,7 +11,7 @@ tags: {% block body %}
@@ -69,7 +69,7 @@ tags: document.getElementById('www-search').addEventListener('submit', function (e) { e.preventDefault(); - const query = document.getElementById('query').value.trim(); + const query = document.getElementById('qrySearch').value.trim(); if (!query) return; diff --git a/source/screens/demo/examples/ui/gallery.liquid b/source/screens/demo/examples/ui/gallery.liquid index c548374..8128023 100755 --- a/source/screens/demo/examples/ui/gallery.liquid +++ b/source/screens/demo/examples/ui/gallery.liquid @@ -12,9 +12,9 @@ tags:
- +
@@ -43,12 +47,12 @@ tags: - +
#
{% render 'hippie/partials/frame-status.liquid' %}
-