xaymar/com.xaymar.www
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Prefer HTML over Liquid Templates

Browse Source 
While Liquid is powerful, it is completely unreadable for many things, and actively makes documents harder to read. So instead of relying on it for everything, why not just use HTML5 for the page?

The change reduces the parsing overhead for browser by about 30% through reducing the number of useless <div> elements. Additionally the CSS became easier to read as well.
This commit is contained in:
Michael Fabian 'Xaymar' Dirks
2023-04-03 22:25:08 +02:00
parent d309d1e607
commit 441a8f0655
18 changed files with 151 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_includes/blocks/code.liquid
+1 -1
View File
@@ -1 +1 @@
{% capture content %}<code class="content">{{ include.content }}</code>{% endcapture %}{% include blocks/_base.liquid type="code" content=content float=include.float align=include.align %}
<code class="block {% if include.float == "clear" %}float-clear{% elsif include.float %}float float-{{ include.float }}{% endif %} {% if include.align %}align-{{ include.align }}{% endif %} {% if include.class %}{{ include.class }}{% endif %}" style="{% if include.width %}width: {{ include.width }};{% endif %}">{{ include.content }}</code>
_includes/blocks/details.liquid
+1 -1
View File
@@ -1 +1 @@
{% capture content %}<details class="content {% if include.align %}{{ include.align }}{% endif %}" {% if include.open %}open{% endif %}><summary data-heading="{{ include.level | default: 0 }}">{{ include.title }}</summary>{{ include.content }}</details>{% endcapture %}{% include blocks/_base.liquid type="details" content=content float=include.float align=include.align %}
<details class="block {% if include.float == "clear" %}float-clear{% elsif include.float %}float float-{{ include.float }}{% endif %} {% if include.align %}align-{{ include.align }}{% endif %} {% if include.class %}{{ include.class }}{% endif %}" style="{% if include.width %}width: {{ include.width }};{% endif %}" {% if include.open %}open{% endif %}><summary data-heading="{{include.level}}"><h{{include.level}}>{{ include.title }}</h{{include.level}}></summary>{{ include.content }}</details>
_includes/blocks/heading.liquid
+1 -1
View File
@@ -1 +1 @@
{% capture content %}<h{{ include.level | default: 1 }} class="content {% if include.align %}{{ include.align }}{% endif %}">{{ include.content }}</h{{ include.level | default: 1}}>{% endcapture %}{% include blocks/_base.liquid type="heading" content=content float=include.float align=include.align %}
<h{{ include.level | default: 1 }} class="block {% if include.float == "clear" %}float-clear{% elsif include.float %}float float-{{ include.float }}{% endif %} {% if include.align %}align-{{ include.align }}{% endif %} {% if include.class %}{{ include.class }}{% endif %}" style="{% if include.width %}width: {{ include.width }};{% endif %}">{{ include.content }}</h{{ include.level | default: 1 }}>
_includes/blocks/list.liquid
+1 -1
View File
@@ -1 +1 @@
{% capture content %}{% if include.ordered %}<ol>{% else %}<ul>{% endif %}{{ include.content }}{% if include.ordered %}</ol>{% else %}</ul>{% endif %}{% endcapture %}{% include blocks/_base.liquid type="list" content=content float=include.float align=include.align %}
<{% if include.ordered %}ol{% else %}ul{% endif %} class="block {% if include.float == "clear" %}float-clear{% elsif include.float %}float float-{{ include.float }}{% endif %} {% if include.align %}align-{{ include.align }}{% endif %} {% if include.class %}{{ include.class }}{% endif %}" style="{% if include.width %}width: {{ include.width }};{% endif %}">{{ include.content }}{% if include.ordered %}</ol>{% else %}</ul>{% endif %}
_includes/blocks/media.liquid
+2 -4
View File
@@ -1,5 +1,5 @@
{% assign file_info = site.static_files | where: "path", include.url %}
{% capture content %}
<media class="block {% if include.float == "clear" %}float-clear{% elsif include.float %}float float-{{ include.float }}{% endif %} {% if include.align %}align-{{ include.align }}{% endif %} {% if include.class %}{{ include.class }}{% endif %} {% if include.player %}player{% endif %}" style="{% if include.width %}width: {{ include.width }};{% endif %}">
{% if include.player %}
<div class="top">
<select class="variant"></select>
@@ -76,6 +76,4 @@
{% endif %}
{% if include.link %}</a>{% endif %}
{% if include.caption %}<figcaption>{{ include.caption }}</figcaption>{% endif %}
{% endcapture %}
{% if include.player %}{% assign class = include.type | append: " player" %}{% else %}{% assign class = include.type %}{% endif %}
{% include blocks/_base.liquid type="media" class=class content=content float=include.float align=include.align id=include.id %}
</media>
_includes/blocks/paragraph.liquid
+1 -1
View File
@@ -1 +1 @@
{% capture content %}<p class="content">{{ include.content }}</p>{% endcapture %}{% include blocks/_base.liquid type="paragraph" content=content float=include.float align=include.align %}
<p class="block {% if include.float == "clear" %}float-clear{% elsif include.float %}float float-{{ include.float }}{% endif %} {% if include.align %}align-{{ include.align }}{% endif %} {% if include.class %}{{ include.class }}{% endif %}" style="{% if include.width %}width: {{ include.width }};{% endif %}">{{ include.content }}</p>
_includes/blocks/table.liquid
+1 -1
View File
@@ -1 +1 @@
{% capture content %}<table class="content">{{ include.content }}</table>{% if include.caption %}<figcaption>{{ include.caption }}</figcaption>{% endif %}{% endcapture %}{% include blocks/_base.liquid type="table" content=content float=include.float align=include.align %}
<div class="block block-table {% if include.float == "clear" %}float-clear{% elsif include.float %}float float-{{ include.float }}{% endif %} {% if include.align %}align-{{ include.align }}{% endif %} {% if include.class %}{{ include.class }}{% endif %}" style="{% if include.width %}width: {{ include.width }};{% endif %}""><table>{{ include.content }}</table>{% if include.caption %}<figcaption>{{ include.caption }}</figcaption>{% endif %}</div>
_includes/inline/code.liquid
+1 -1
View File
@@ -1 +1 @@
<code class="inline inline-code">{{ include.content }}</code>
<code>{{ include.content }}</code>
_sass/_article.scss
+4
View File
@@ -115,3 +115,7 @@ article > .meta > .tags > .tag:not(:last-child):after {
margin: 0;
padding: 0;
}
article {
@import "_blocks.scss";
}
_sass/_block-code.scss
+3 -6
View File
@@ -1,11 +1,8 @@
// --------------------------------------------------------------------------------
// Block: Code
// --------------------------------------------------------------------------------
.block-code {
code.block {
background: $theme-code-background;
}
.block-code > .content {
display: block;
padding: .25rem;
max-height: 10em;
@@ -19,9 +16,9 @@
// --------------------------------------------------------------------------------
// Inline: Code
// --------------------------------------------------------------------------------
.inline-code {
code {
margin: 0;
padding: 0;
padding: .05rem .25em;
background: $theme-code-background;
font-family: monospace;
font-size: 1em;
_sass/_block-details.scss
+39 -14
View File
@@ -1,19 +1,14 @@
// --------------------------------------------------------------------------------
// Details
// --------------------------------------------------------------------------------
.block-details {
details.block {
margin: 0;
margin-left: -0.75rem;
margin-right: -0.75rem;
padding: 0;
}
.block-details > .content {
margin: 0;
padding: 0.75rem;
}
.block-details > .content > summary {
details.block > summary {
margin-top: -0.75rem;
margin-left: -0.75rem;
margin-right: -0.75rem;
@@ -21,38 +16,68 @@
cursor: pointer;
}
.block-details > .content > summary[data-heading] {
details.block > summary:has(h1),
details.block > summary:has(h2),
details.block > summary:has(h3),
details.block > summary:has(h4),
details.block > summary:has(h5),
details.block > summary:has(h6),
details.block > summary[data-heading] {
width: 100%;
font-variant: small-caps;
font-weight: bold;
padding: 0.5rem 0.75rem;
}
.block-details > .content > summary[data-heading="1"] {
details.block > summary:has(h1),
details.block > summary[data-heading="1"] {
font-size: 2.0rem;
background: $theme-article-heading-h1-background;
}
.block-details > .content > summary[data-heading="2"] {
details.block > summary:has(h2),
details.block > summary[data-heading="2"] {
font-size: 1.8rem;
background: $theme-article-heading-h2-background;
}
.block-details > .content > summary[data-heading="3"] {
details.block > summary:has(h3),
details.block > summary[data-heading="3"] {
font-size: 1.6667rem;
background: $theme-article-heading-h3-background;
}
.block-details > .content > summary[data-heading="4"] {
details.block > summary:has(h4),
details.block > summary[data-heading="4"] {
font-size: 1.45rem;
background: $theme-article-heading-h4-background;
}
.block-details > .content > summary[data-heading="5"] {
details.block > summary:has(h5),
details.block > summary[data-heading="5"] {
font-size: 1.3333rem;
background: $theme-article-heading-h5-background;
}
.block-details > .content > summary[data-heading="6"] {
details.block > summary:has(h6),
details.block > summary[data-heading="6"] {
font-size: 1.2rem;
background: $theme-article-heading-h6-background;
}
details.block > summary > h1,
details.block > summary > h2,
details.block > summary > h3,
details.block > summary > h4,
details.block > summary > h5,
details.block > summary > h6 {
display: inline-block;
margin: 0;
padding: 0;
font-size: inherit;
font-weight: inherit;
font-variant: inherit;
font-style: inherit;
color: inherit;
background-color: transparent;
}
_sass/_block-heading.scss
+36 -12
View File
@@ -1,50 +1,74 @@
.block + .block-heading {
// --------------------------------------------------------------------------------
// Block: Heading
// --------------------------------------------------------------------------------
.block + h1.block,
.block + h2.block,
.block + h3.block,
.block + h4.block,
.block + h5.block,
.block + h6.block {
margin-top: 2rem;
}
.block-heading {
h1.block,
h2.block,
h3.block,
h4.block,
h5.block,
h6.block {
margin: 0;
margin-left: -0.75rem;
margin-right: -0.75rem;
padding: 0;
}
.block-heading > .content {
font-variant: small-caps;
font-weight: bold;
padding: 0.5rem 0.75rem;
}
.block-heading > h1.content {
h1.block > a,
h2.block > a,
h3.block > a,
h4.block > a,
h5.block > a,
h6.block > a {
color: inherit !important;
}
h1.block {
font-size: 2.0rem;
background: $theme-article-heading-h1-background;
}
.block-heading > h2.content {
h2.block {
font-size: 1.8rem;
background: $theme-article-heading-h2-background;
}
.block-heading > h3.content {
h3.block {
font-size: 1.6667rem;
background: $theme-article-heading-h3-background;
}
.block-heading > h4.content {
h4.block {
font-size: 1.45rem;
background: $theme-article-heading-h4-background;
}
.block-heading > h5.content {
h5.block {
font-size: 1.3333rem;
background: $theme-article-heading-h5-background;
}
.block-heading > h6.content {
h6.block {
font-size: 1.2rem;
background: $theme-article-heading-h6-background;
}
.block-heading + .block {
h1.block + .block,
h2.block + .block,
h3.block + .block,
h4.block + .block,
h5.block + .block,
h6.block + .block {
margin-top: .5rem;
}
_sass/_block-list.scss
+23
View File
@@ -0,0 +1,23 @@
// --------------------------------------------------------------------------------
// Block: List
// --------------------------------------------------------------------------------
ul.block,
ol.block {
overflow: hidden;
}
ul.block,
ol.block {
margin: 0;
padding: 0 0 0 2em;
}
ul.block > li,
ol.block > li {
padding: 0 0 0 0;
}
ul.block > li + li
ol.block > li + li {
padding: .2em 0 0 0;
}
_sass/_block-media.scss
+30 -29
View File
@@ -1,20 +1,21 @@
// --------------------------------------------------------------------------------
// Block: Media
// --------------------------------------------------------------------------------
.block-media {
media.block {
display: block;
position: relative;
overflow: hidden;
}
.block-media > a > .content,
.block-media > .content {
media.block > a > .content,
media.block > .content {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center center;
}
.block-media > figcaption {
media.block > figcaption {
display: block;
margin: 0;
padding: .25em .5em;
@@ -28,19 +29,19 @@
// --------------------------------------------------------------------------------
$media-player-button-size: 1.5rem;
.block-media.hide {
media.block.hide {
cursor: none;
}
.block-media > .top,
.block-media > .bottom {
media.block > .top,
media.block > .bottom {
display: block;
margin: 0;
padding: 0.2rem 0.5rem;
z-index: 1;
}
.block-media > .top {
media.block > .top {
position: absolute;
top: 0;
left: 0;
@@ -62,17 +63,17 @@ $media-player-button-size: 1.5rem;
user-select: none;
}
.block-media.hide > .top {
media.block.hide > .top {
top: -100%;
opacity: 0.0;
transition: top ease-in-out 500ms, opacity ease-in-out 500s;
}
.block-media > .top > .variant {
media.block > .top > .variant {
flex-grow: 1;
}
.block-media > .bottom {
media.block > .bottom {
position: absolute;
bottom: 0;
left: 0;
@@ -94,13 +95,13 @@ $media-player-button-size: 1.5rem;
user-select: none;
}
.block-media.hide > .bottom {
media.block.hide > .bottom {
bottom: -100%;
opacity: 0.0;
transition: top ease-in-out 500ms, opacity ease-in-out 500s;
}
.block-media > .bottom > .play {
media.block > .bottom > .play {
display: block;
flex-grow: 0;
margin: 0;
@@ -113,10 +114,10 @@ $media-player-button-size: 1.5rem;
text-align: center;
user-select: none;
}
.block-media > .bottom > .play.playing {
media.block > .bottom > .play.playing {
}
.block-media > .bottom > .time {
media.block > .bottom > .time {
display: block;
margin: 0;
padding: 0;
@@ -131,7 +132,7 @@ $media-player-button-size: 1.5rem;
user-select: auto;
}
.block-media > .bottom > .progress {
media.block > .bottom > .progress {
margin: 0;
padding: 0;
width: auto;
@@ -143,7 +144,7 @@ $media-player-button-size: 1.5rem;
display: block;
user-select: none;
}
.block-media > .bottom > .mute {
media.block > .bottom > .mute {
display: block;
margin: 0;
padding: 0;
@@ -158,10 +159,10 @@ $media-player-button-size: 1.5rem;
text-align: center;
user-select: none;
}
.block-media > .bottom > .mute.muted {
media.block > .bottom > .mute.muted {
}
.block-media > .bottom > .volume {
media.block > .bottom > .volume {
display: block;
margin: 0;
padding: 0;
@@ -176,7 +177,7 @@ $media-player-button-size: 1.5rem;
user-select: none;
}
.block-media > .bottom > .fullscreen {
media.block > .bottom > .fullscreen {
display: block;
margin: 0;
padding: 0;
@@ -193,19 +194,19 @@ $media-player-button-size: 1.5rem;
}
@media (max-width: 500px) {
.block-media > .bottom > .time {
media.block > .bottom > .time {
display: none;
}
}
@media (max-width: 350px) {
.block-media > .bottom > .volume {
media.block > .bottom > .volume {
display: none;
}
}
@media (max-width: 250px) {
.block-media > .bottom > .play,
.block-media > .bottom > .mute,
.block-media > .bottom > .fullscreen {
media.block > .bottom > .play,
media.block > .bottom > .mute,
media.block > .bottom > .fullscreen {
display: none;
}
}
@@ -217,8 +218,8 @@ $media-player-button-size: 1.5rem;
// --------------------------------------------------------------------------------
// Block: Media > Video
// --------------------------------------------------------------------------------
.block-media > a > video,
.block-media > video {
media.block > a > video,
media.block > video {
display: block;
width: 100%;
object-fit: contain;
@@ -228,8 +229,8 @@ $media-player-button-size: 1.5rem;
// --------------------------------------------------------------------------------
// Block: Media > Picture
// --------------------------------------------------------------------------------
.block-media > a > .content > img,
.block-media > .content > img {
media.block > a > img,
media.block > img {
display: block;
width: 100%;
}
_sass/_block-table.scss
+4 -1
View File
@@ -1,6 +1,9 @@
// --------------------------------------------------------------------------------
// Block: Table
// --------------------------------------------------------------------------------
.block-table {
}
.block-table > table {
margin: 0;
padding: 0;
@@ -51,7 +54,7 @@
border-bottom: none;
}
.block-table > figcaption {
.block-table > table + figcaption {
display: block;
margin: 0;
padding: .25em .5em;
_sass/_blocks.scss
+2 -29
View File
@@ -41,11 +41,9 @@
clear: both;
}
.block.float + .block {
.float + .block {
margin-top: 0em;
}
.block.float {
}
// --------------------------------------------------------------------------------
// Align
@@ -74,32 +72,6 @@
text-align: center;
}
// --------------------------------------------------------------------------------
// Block: Paragraph
// --------------------------------------------------------------------------------
// --------------------------------------------------------------------------------
// Block: List
// --------------------------------------------------------------------------------
.block-list {
overflow: hidden;
}
.block-list > ul,
.block-list > ol {
margin: 0;
padding: 0 0 0 2em;
}
.block-list > ul > li,
.block-list > ol > li {
padding: 0 0 0 0;
}
.block-list > ul > li + li,
.block-list > ol > li + li {
padding: .2em 0 0 0;
}
// --------------------------------------------------------------------------------
// Specialized Blocks
// --------------------------------------------------------------------------------
@@ -107,5 +79,6 @@
@import "_block-columns.scss";
@import "_block-details.scss";
@import "_block-heading.scss";
@import "_block-list.scss";
@import "_block-media.scss";
@import "_block-table.scss";
_sass/_content.scss
-1
View File
@@ -8,7 +8,6 @@ body > .content {
@import "_breadcrumbs.scss";
@import "_article.scss";
@import "_blocks.scss";
@import "_comments.scss";
@import "_index.scss";
@import "_pagination.scss";
assets/site.js
+1 -1
View File
@@ -408,7 +408,7 @@ async function xmr_initialize_player(el) {
async function xmr_initialize_players() {
// Figure out what to initialize.
let elements = document.querySelectorAll(".block-media.player");
let elements = document.querySelectorAll("media.player");
let stack = Array.from(elements);
console.debug("Initializing " + stack.length + " players...");