From d64bf61a9c0e98e80ba80febe33c2b1d8412f9a5 Mon Sep 17 00:00:00 2001 From: sthag Date: Sat, 21 Feb 2026 12:16:34 +0100 Subject: [PATCH] feat: Replace layouts template - Change nunjucks to liquid for layouts screen - Add shortcodes for placeholders to eleventy --- .eleventy.js | 24 +- source/screens/demo/layouts.liquid | 311 +++++++++++++++++ source/screens/demo/layouts.njk | 317 ------------------ .../hippie/partials/placeholder-flag.liquid | 1 + 4 files changed, 335 insertions(+), 318 deletions(-) create mode 100644 source/screens/demo/layouts.liquid delete mode 100644 source/screens/demo/layouts.njk diff --git a/.eleventy.js b/.eleventy.js index 03ea12f..34db01b 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -1,4 +1,4 @@ -const { EleventyHtmlBasePlugin } = require("@11ty/eleventy"); +const {EleventyHtmlBasePlugin} = require("@11ty/eleventy"); module.exports = function (eleventyConfig) { eleventyConfig.addPlugin(EleventyHtmlBasePlugin); @@ -28,10 +28,32 @@ module.exports = function (eleventyConfig) { brand: 'hippie', titlePrefix: '', titlePostfix: ' - HIPPIE', + placeholders: { + name: 'Vorname Nachname', + address: 'Straße Nr., PLZ Ort', + phone: '+49 (0)101 1337 48', + mail: 'name@domain.tld' + }, debugMode: true, legacyMode: false }); + eleventyConfig.addShortcode('text', function (text, attrId, attrClass) { + return `${text}`; + }); + + eleventyConfig.addShortcode('link', function (target, text, attrId, attrClass) { + if (text === '') { + text = target; + } + + if (target.indexOf('@') !== -1) { + target = 'mailto:' + target; + } + + return `${text}`; + }); + eleventyConfig.addPassthroughCopy({'source/art/images': 'art'}); eleventyConfig.addPassthroughCopy({'source/art/favicons/**/*.+(ico|png|svg)': '.'}); diff --git a/source/screens/demo/layouts.liquid b/source/screens/demo/layouts.liquid new file mode 100644 index 0000000..02f3fa3 --- /dev/null +++ b/source/screens/demo/layouts.liquid @@ -0,0 +1,311 @@ +--- +title: Layouts +tags: +- demoIndex +--- +{% layout "hippie/page.liquid" %} + +{% block title %}Gestaltungen{% endblock %} + +{% block main %} +
+
+

Sammlung formatierter Elemente

+

Die Elemente werden fortlaufend komplexer

+
+
+

Bereiche (sections)

+

section

+ 
section.overflow>div.float_space_left>img^p+p>br+a.lineLink
+
+
+ {% render 'hippie/partials/placeholder-flag.liquid', type: 'img', src: 'file', width: '256', desc: 'Avatar' %} +
+

{% text hippie.placeholders.name %}
{% text hippie.placeholders.address %}

+

{% text hippie.placeholders.phone %}
{% link hippie.placeholders.mail, '', '', 'a_line' %}

+
+

nav

+ 
div.overflow>(nav.float_space_left>ul>(li>a.a_button{punkt $})*4+nav>ul>(li>a.a_button_border{stufe $})*4)
+
+ + +
+ 
nav.nav_horizontal>ul>(li>a.a_button{abschnitt $})*4
+ + 
div.overflow>nav.nav_center_old>ul>(li>a.a_button{typ $})*4
+
+ +
+

header

+ 
header.header_page>h1+p+nav.nav_separate_right>ul>(li>a.a_button{nav $})*4^+nav.nav_right>ul>(li>a.a_button{nav $})*4
+
+

Aufmacher

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio, volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.

+ + +
+ 
header.header_page>nav.nav_right>ul>(li>a.a_button{nav $})*4
+
+
+ +
+
+ 
footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4
+ +
+
+ +

Interaktiv (interactive)

+

input

+
+ + + + + +
+

form

+
+

Show me a + + Sorted by + + + + Matching + + +

+
+ +

Gruppierung (grouping)

+

p

+ 
p.txt_right+p.txt_center+p.txt_left
+

Rechts

+

Mittig

+

Links

+

h*

+ 
h3.txt_color_dark+p.txt_tiny
+

Dunkle Überschrift

+

Mit winzigem Textabsatz

+ 
a>h4
+ +

Überschrift als Block-Verweis

+ +

Überschrift 1

+

Kann mehrmals, ohne großen Abstand oberhalb, untereinander stehen.

+

Überschrift 2

+

kann das ebenso.

+

hr

+ 
hr.space_even_half
+
+ 
hr.dotted.space_even_fourth
+
+

ul

+ 
nav>ul.list_link>(li>a)+li>a>img+span
+ +

div

+ 
div.space_left_fourth>(hr+p+hr)
+
+
+

Eingerückter Inhalt

+
+
+ +

Tabellen

+ 
table.table_link>thead>tr>th{ }+th{ab / zy}+th{neu / alt}^^(tbody>tr>td.cell_icon[rowspan="2"]>img[width=16  height=16]^+td.cell_link>a[target=_blank]{name}+a[target=_blank]{url}^+td.cell_date[rowspan="2"]{yyy-mm-dd}^tr>td.cell_text>div.shorten{beschreibung})*2
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Ab / ZyNeu / Alt
■ + Name + URL + YYYY-MM-DD
+
Beschreibung
+
■ + Name + URL + YYYY-MM-DD
+
Beschreibung
+
+ +

Eingebettet

+
+ {% render 'hippie/partials/placeholder-flag.liquid', type: '', width: '128', desc: 'Fahne von Interaktionsweise' %} +
+
+
+{% endblock %} + +{% block script %} +{{ block.super -}} + + +{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/layouts.njk b/source/screens/demo/layouts.njk deleted file mode 100644 index a35cfff..0000000 --- a/source/screens/demo/layouts.njk +++ /dev/null @@ -1,317 +0,0 @@ ---- -title: Layouts -tags: - - demoIndex ---- -{% set pageBase = "../" %} -{% set pageId = page.fileSlug %} - -{% extends "demo/_main.njk" %} -{% import "hippie/macros/_placeholder.njk" as ph %} - -{% block title %}Gestaltungen{% endblock %} -{% block head %} - {{ super() }} -{% endblock %} - -{% block main %} - -
-
-

Sammlung formatierter Elemente

-

Die Elemente werden fortlaufend komplexer

-
-
-

Bereiche (sections)

-

section

- 
section.overflow>div.float_space_left>img^p+p>br+a.lineLink
-
-
{{ ph.flag('img', '', '', 'Avatar', '256') }}
-

{{ ph.name() }}
{{ ph.address() }}

-

{{ ph.phone() }}
{{ ph.email('lineLink') }}

-
-

nav

- 
div.overflow>(nav.float_space_left>ul>(li>a.a_button{punkt $})*4+nav>ul>(li>a.a_button_border{stufe $})*4)
-
- - -
- 
nav.nav_horizontal>ul>(li>a.a_button{abschnitt $})*4
- - 
div.overflow>nav.nav_center_old>ul>(li>a.a_button{typ $})*4
-
- -
-

header

- 
header.header_page>h1+p+nav.nav_separate_right>ul>(li>a.a_button{nav $})*4^+nav.nav_right>ul>(li>a.a_button{nav $})*4
-
-

Aufmacher

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio, volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.

- - -
- 
header.header_page>nav.nav_right>ul>(li>a.a_button{nav $})*4
-
-
- -
-
- 
footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4
- -
-
- -

Interaktiv (interactive)

-

input

-
- - - - - -
-

form

-
-

Show me a - - Sorted by - - - - Matching - - -

-
- -

Gruppierung (grouping)

-

p

- 
p.txt_right+p.txt_center+p.txt_left
-

Rechts

-

Mittig

-

Links

-

h*

- 
h3.txt_color_dark+p.txt_tiny
-

Dunkle Überschrift

-

Mit winzigem Textabsatz

- 
a>h4
- -

Überschrift als Block-Verweis

- -

Überschrift 1

-

Kann mehrmals, ohne großen Abstand oberhalb, untereinander stehen.

-

Überschrift 2

-

kann das ebenso.

-

hr

- 
hr.space_even_half
-
- 
hr.dotted.space_even_fourth
-
-

ul

- 
nav>ul.list_link>(li>a)+li>a>img+span
- -

div

- 
div.space_left_fourth>(hr+p+hr)
-
-
-

Eingerückter Inhalt

-
-
- -

Tabellen

- 
table.table_link>thead>tr>th{ }+th{ab / zy}+th{neu / alt}^^(tbody>tr>td.cell_icon[rowspan="2"]>img[width=16  height=16]^+td.cell_link>a[target=_blank]{name}+a[target=_blank]{url}^+td.cell_date[rowspan="2"]{yyy-mm-dd}^tr>td.cell_text>div.shorten{beschreibung})*2
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 Ab / ZyNeu / Alt
■ - Name - URL - YYYY-MM-DD
-
Beschreibung
-
■ - Name - URL - YYYY-MM-DD
-
Beschreibung
-
- -

Eingebettet

-
- {{ ph.flag() }} -
-
-
-{% endblock %} - -{% block script %} - {{ super() }} - - {{ log.asset(true) }} - {{ log.log('Assets loaded.', assetsLoaded) }} - -{% endblock %} \ No newline at end of file diff --git a/source/templates/hippie/partials/placeholder-flag.liquid b/source/templates/hippie/partials/placeholder-flag.liquid index 02432cb..280a48c 100644 --- a/source/templates/hippie/partials/placeholder-flag.liquid +++ b/source/templates/hippie/partials/placeholder-flag.liquid @@ -1,4 +1,5 @@ {% assign height = width | divided_by: 1.6 %} + {% if type == 'svg' or type == '' %} {% comment %}