From 02c261bf552280252c98f880fe6189a96ed93a55 Mon Sep 17 00:00:00 2001
From: Michael Fabian 'Xaymar' Dirks <info@xaymar.com>
Date: Sat, 25 Dec 2021 09:49:27 +0100
Subject: [PATCH] Media and Floating blocks

---
 _includes/blocks/_base.liquid           |  2 +-
 _includes/blocks/column.liquid          |  2 +-
 _includes/blocks/columns.liquid         |  2 +-
 _includes/blocks/heading.liquid         |  2 +-
 _includes/blocks/list.liquid            |  2 +-
 _includes/blocks/media.liquid           | 37 +++++++++++++++++++++++++
 _includes/blocks/paragraph.liquid       |  2 +-
 _posts/1993/1993-07-21-lorem-ipsum.html | 10 +++++--
 _sass/_blocks.scss                      |  5 ++--
 9 files changed, 53 insertions(+), 11 deletions(-)
 create mode 100644 _includes/blocks/media.liquid

diff --git a/_includes/blocks/_base.liquid b/_includes/blocks/_base.liquid
index 207b8b2..a24969b 100644
--- a/_includes/blocks/_base.liquid
+++ b/_includes/blocks/_base.liquid
@@ -1,3 +1,3 @@
-<div class="block block-{{ include.type }} {% if include.float %}float float-{{ include.float }}{% else %}float-clear{% endif %}">
+<div class="block block-{{ include.type }} {% if include.float %}float float-{{ include.float }}{% elsif include.float == "clear" %}float-clear{% endif %}">
 	{{ include.content }}
 </div>
diff --git a/_includes/blocks/column.liquid b/_includes/blocks/column.liquid
index a410d32..225d0da 100644
--- a/_includes/blocks/column.liquid
+++ b/_includes/blocks/column.liquid
@@ -3,4 +3,4 @@
 	{{ include.content }}
 </div>
 {% endcapture %}
-{% include blocks/_base.liquid type="column" content=content %}
+{% include blocks/_base.liquid type="column" content=content float=include.float %}
diff --git a/_includes/blocks/columns.liquid b/_includes/blocks/columns.liquid
index 7739a92..dc426f6 100644
--- a/_includes/blocks/columns.liquid
+++ b/_includes/blocks/columns.liquid
@@ -3,4 +3,4 @@
 	{{ include.content }}
 </div>
 {% endcapture %}
-{% include blocks/_base.liquid type="columns" content=content %}
+{% include blocks/_base.liquid type="columns" content=content float=include.float %}
diff --git a/_includes/blocks/heading.liquid b/_includes/blocks/heading.liquid
index 77f4381..0677ead 100644
--- a/_includes/blocks/heading.liquid
+++ b/_includes/blocks/heading.liquid
@@ -3,4 +3,4 @@
 	{{ include.content }}
 </p>
 {% endcapture %}
-{% include blocks/_base.liquid type="heading" content=content %}
+{% include blocks/_base.liquid type="heading" content=content float=include.float %}
diff --git a/_includes/blocks/list.liquid b/_includes/blocks/list.liquid
index d6bee23..84f1d5f 100644
--- a/_includes/blocks/list.liquid
+++ b/_includes/blocks/list.liquid
@@ -11,4 +11,4 @@
 </ul>
 {% endif %}
 {% endcapture %}
-{% include blocks/_base.liquid type="list" content=content %}
+{% include blocks/_base.liquid type="list" content=content float=include.float %}
diff --git a/_includes/blocks/media.liquid b/_includes/blocks/media.liquid
new file mode 100644
index 0000000..8a0a6a6
--- /dev/null
+++ b/_includes/blocks/media.liquid
@@ -0,0 +1,37 @@
+{% capture content %}
+{% if include.type == "image" %}
+<picture
+	{% if include.width %}width="{{ include.width }}"{% endif %}
+	{% if include.height %}height="{{ include.height }}"{% endif %}>
+	<img src="{{ include.url | absolute_url }}"
+		{% if include.alt %}alt="{{ include.alt }}"{% endif %}
+		{% if include.width %}width="{{ include.width }}"{% endif %}
+		{% if include.height %}height="{{ include.height }}"{% endif %}>
+</picture>
+{% elsif include.type == "video" %}
+<video controls
+	{% if include.width %}width="{{ include.width }}"{% endif %}
+	{% if include.height %}height="{{ include.height }}"{% endif %}
+	{% if include.preload %}preload="{{ include.preload }}"{% endif %}
+	{% if include.autoplay %}autoplay="true"{% endif %}
+	{% if include.muted %}muted="true"{% endif %}
+	{% if include.loop %}loop="true"{% endif %}
+	{% if include.poster %}poster="{{ include.poster | absolute_url }}"{% endif %}>
+	<source src="{{ include.url | absolute_url }}">
+</video>
+{% elsif include.type == "audio" %}
+<audio controls
+	{% if include.width %}width="{{ include.width }}"{% endif %}
+	{% if include.height %}height="{{ include.height }}"{% endif %}
+	{% if include.preload %}preload="{{ include.preload }}"{% endif %}
+	{% if include.autoplay %}autoplay="true"{% endif %}
+	{% if include.muted %}muted="true"{% endif %}
+	{% if include.loop %}loop="true"{% endif %}>
+	<source src="{{ include.url | absolute_url }}">
+</audio>
+{% endif %}
+{% if include.caption %}
+<figcaption>{{ include.caption }}</figcaption>
+{% endif %}
+{% endcapture %}
+{% include blocks/_base.liquid type="media" content=content float=include.float %}
diff --git a/_includes/blocks/paragraph.liquid b/_includes/blocks/paragraph.liquid
index 89823a2..17d79db 100644
--- a/_includes/blocks/paragraph.liquid
+++ b/_includes/blocks/paragraph.liquid
@@ -3,4 +3,4 @@
 	{{ include.content }}
 </p>
 {% endcapture %}
-{% include blocks/_base.liquid type="paragraph" content=content %}
+{% include blocks/_base.liquid type="paragraph" content=content float=include.float %}
diff --git a/_posts/1993/1993-07-21-lorem-ipsum.html b/_posts/1993/1993-07-21-lorem-ipsum.html
index 0c66084..c067f2f 100644
--- a/_posts/1993/1993-07-21-lorem-ipsum.html
+++ b/_posts/1993/1993-07-21-lorem-ipsum.html
@@ -18,17 +18,21 @@ Mauris ac efficitur massa, sit amet molestie felis. Proin eget efficitur elit, e
 {% capture content %}
 Vestibulum euismod egestas dapibus. Sed ut mollis purus. Sed scelerisque vulputate nisl, eget fringilla magna aliquam non. Nam id arcu rhoncus, hendrerit felis cursus, suscipit metus. Fusce pretium tortor eget tellus convallis sodales. Aenean at aliquet urna, et pulvinar tortor. Nulla malesuada vel tellus vel feugiat.
 {% endcapture %}{% include blocks/paragraph.liquid content=content %}
+{% capture content %}
+Morbi in pulvinar mi. Nam dignissim ut augue sed placerat. Vestibulum ipsum odio, fringilla et molestie at, laoreet tristique ipsum. Proin lacinia lectus est, ut gravida ipsum aliquam sit amet. Donec pulvinar rutrum risus, eget posuere ipsum tempor id. Nullam quis nisi nec mauris interdum bibendum non eget magna. Pellentesque accumsan egestas cursus. Donec vestibulum pulvinar est. Etiam eleifend in quam non hendrerit. Cras felis sem, eleifend at luctus id, iaculis vulputate elit. Vivamus porttitor rutrum metus. Proin turpis ante, ultrices consequat libero id, placerat pellentesque ante. Vestibulum eget luctus elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse tempus suscipit felis, ut egestas erat varius at.
+{% endcapture %}{% include blocks/paragraph.liquid content=content %}
 {% endcapture %}{% include blocks/column.liquid content=column %}
 {% capture column %}
+{% include blocks/media.liquid type="image" float="left" url="http://localhost:4000/assets/logo.svg" height="80px" %}
 {% capture content %}
 Vestibulum euismod egestas dapibus. Sed ut mollis purus. Sed scelerisque vulputate nisl, eget fringilla magna aliquam non. Nam id arcu rhoncus, hendrerit felis cursus, suscipit metus. Fusce pretium tortor eget tellus convallis sodales. Aenean at aliquet urna, et pulvinar tortor. Nulla malesuada vel tellus vel feugiat.
 {% endcapture %}{% include blocks/paragraph.liquid content=content %}
+{% capture content %}
+Morbi in pulvinar mi. Nam dignissim ut augue sed placerat. Vestibulum ipsum odio, fringilla et molestie at, laoreet tristique ipsum. Proin lacinia lectus est, ut gravida ipsum aliquam sit amet. Donec pulvinar rutrum risus, eget posuere ipsum tempor id. Nullam quis nisi nec mauris interdum bibendum non eget magna. Pellentesque accumsan egestas cursus. Donec vestibulum pulvinar est. Etiam eleifend in quam non hendrerit. Cras felis sem, eleifend at luctus id, iaculis vulputate elit. Vivamus porttitor rutrum metus. Proin turpis ante, ultrices consequat libero id, placerat pellentesque ante. Vestibulum eget luctus elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse tempus suscipit felis, ut egestas erat varius at.
+{% endcapture %}{% include blocks/paragraph.liquid content=content %}
 {% endcapture %}{% include blocks/column.liquid content=column %}
 {% endcapture %}{% include blocks/columns.liquid content=columns columns=2 %}
 
-{% capture content %}
-Morbi in pulvinar mi. Nam dignissim ut augue sed placerat. Vestibulum ipsum odio, fringilla et molestie at, laoreet tristique ipsum. Proin lacinia lectus est, ut gravida ipsum aliquam sit amet. Donec pulvinar rutrum risus, eget posuere ipsum tempor id. Nullam quis nisi nec mauris interdum bibendum non eget magna. Pellentesque accumsan egestas cursus. Donec vestibulum pulvinar est. Etiam eleifend in quam non hendrerit. Cras felis sem, eleifend at luctus id, iaculis vulputate elit. Vivamus porttitor rutrum metus. Proin turpis ante, ultrices consequat libero id, placerat pellentesque ante. Vestibulum eget luctus elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse tempus suscipit felis, ut egestas erat varius at.
-{% endcapture %}{% include blocks/paragraph.liquid content=content %}
 
 {% capture content %}
 Etiam tellus dolor, pretium eu metus vel, venenatis dictum justo. Mauris urna nunc, euismod eget mattis ac, posuere sit amet nunc. Donec sollicitudin enim et ligula commodo, at tempor lacus rhoncus. Suspendisse rhoncus metus ut metus pellentesque sagittis. Phasellus commodo tortor metus, sed rutrum leo eleifend vitae. Curabitur convallis sollicitudin nisl eget malesuada. Fusce dapibus felis nec ipsum rutrum, sit amet sagittis sem ornare. Nulla quam lorem, vestibulum sed sapien id, cursus dapibus dolor. Nullam interdum massa et tellus varius, vel placerat quam eleifend.
diff --git a/_sass/_blocks.scss b/_sass/_blocks.scss
index b6c90f4..74bf5dd 100644
--- a/_sass/_blocks.scss
+++ b/_sass/_blocks.scss
@@ -7,7 +7,9 @@
 .block ~ .block {
 	margin-top: 1.25em;
 }
-
+.block.float + .block {
+	margin-top: 0;
+}
 .block.float {
 	margin-top: 0;
 }
@@ -24,7 +26,6 @@
 .float-right {
 	float: right;
 }
-
 .float-clear {
 	clear: both;
 }