wires/hypnagaga_old
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update layouts

Browse source
This commit is contained in:
madrilene 2024-06-03 11:13:06 +02:00
parent a70020d417
commit e006738a69
6 changed files with 77 additions and 123 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
src/_layouts/base.njk
View file

@ -5,11 +5,11 @@
<!-- The order of elements in the head follows recommendations by Harry Roberts. learn more here: https://www.youtube.com/watch?v=MHyAOZ45vnU -->
<head>
<!-- charset/http-equiv/viewport -->
<!-- 1 charset/viewport -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- title -->
<!-- 2 title -->
<title>
{% if discover.title %}
{{ discover.title }}
@ -20,77 +20,26 @@
{% endif %}
</title>
<!-- 4 synchronous js -->
<!-- load theme toggle first to avoid color flashing on page load and inline render blocking js -->
{% set jsthemetoggle %}{% include "theme-toggle-inline.js" %}{% endset %}
<base href="{{ page.url }}" />
<script>
// prettier-ignore
{{ jsthemetoggle | jsmin | safe }}
</script>
<!-- 3 synchronous js -->
{% include "head/js-inline.njk" %}
<!-- inline base schema -->
{% include "schemas/base-schema.njk" %}
<!-- 4 schema settings -->
{% include "head/schema.njk" %}
<!-- inline blogpost schema -->
{% if schema == 'blog' %}{%- include "schemas/blogpost-schema.njk" -%}{% endif %}
<!-- 5 CSS -->
<!-- <link rel="stylesheet" href="/assets/css/global.css?{{ assetHash }}" /> -->
{% include "head/css-inline.njk" %}
<link rel="stylesheet" href="/assets/css/global.css?{{ assetHash }}" />
<!-- 6 preloads -->
{% include "head/preloads.njk" %}
<!-- preloads -->
<link
rel="preload"
href="/assets/fonts/figtree/figtree-variable[wght].woff2"
as="font"
type="font/woff2"
crossorigin
/>
<!-- 7 meta tags, icons, open graph etc. -->
{% include "head/meta-info.njk" %}
<link
rel="preload"
href="/assets/fonts/redhat/red-hat-display-v7-latin-900.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<!-- preloads in page data -->
{%- if preloads -%}
<!-- prettier-ignore -->
<link rel="preload"
href="{{ preloads.href }}"
as="{{ preloads.as }}"
{% if preloads.type %}type={{ preloads.type }}{% endif %}{% if preloads.imagesrcset %}imagesrcset="{{ preloads.imagesrcset }}"{% endif %}
{% if preloads.crossorigin %}crossorigin{% endif %} />
{% endif %}
<!-- defered js -->
{% if masonry %}
<!-- masonry fallback, if true in frontmatter -->
<script src="/assets/scripts/masonry.js?{{ assetHash }}" defer></script>
{% endif %}
{% if youtube %}
<!-- youtube, if true in frontmatter -->
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1.4.0/lite-youtube.min.js"
></script>
{% endif %}
{% if meta.navigation.drawerNav %}
<!-- menu drawer js, if true in meta -->
<script src="/assets/scripts/nav-drawer.js?{{ assetHash }}" defer></script>
{% endif %}
{% if meta.easteregg %}
<!-- easteregg js, if true in meta -->
<script src="/assets/scripts/easteregg.js?{{ assetHash }}" defer></script>
{% endif %}
<!-- everything else: meta tags, icons, open graph etc. -->
{% include "partials/meta-info.njk" %}
<!-- 8 defer -->
{% include "head/js-defer.njk" %}
</head>
<body class="{{ layout }}">
@ -99,5 +48,8 @@
<main id="main" class="flow">{{ content | safe }}</main>
{% include "partials/footer.njk" %}
<script type="module" src="/assets/scripts/components/custom-easteregg.js"></script>
<custom-easteregg keyword="yay" shape="🌈" particle-count="50"></custom-easteregg>
</body>
</html>

52
src/_layouts/blog.njk
View file

@ -1,37 +1,45 @@
---
layout: base
masonry: true
---
<article class="wrapper">
<header class="full | section" style="--spot-color: var(--color-secondary)">
<div
class="section__inner flow region"
style="--region-space-top: var(--space-xl-2xl)"
>
<div class="section__inner flow region" style="--region-space-top: var(--space-xl-2xl)">
<h1 class="text-center text-base-light">{{ title }}</h1>
</div>
{% include 'svg/divider-edgy.svg' %}
{% svg "divider/edgy", null, "seperator" %}
</header>
<div class="region flow prose" style="--region-space-top: var(--space-xl-2xl)">
{{ content | safe }}
</div>
<div class="region flow prose" style="--region-space-top: var(--space-xl-2xl)">{{ content | safe }}</div>
<ul class="blogcards | grid" role="list" data-rows="masonry" data-layout="50-50">
<!-- loop posts -->
{% set itemList = pagination.items %}
{% for item in itemList %}
<!-- activate tags -->
{% set activateTags = true %}
<!-- set date context -->
<custom-masonry layout="50-50">
{% for item in pagination.items %}
{% set definedDate = item.date %}
<!-- set heading context -->
{% set headingContext = "h2" %}
<!-- include card -->
{% include 'components/card.njk' %}
<custom-card clickable>
<h2 slot="headline">
<a href="{{ item.url | url }}">{{ item.data.title }}</a>
</h2>
<span slot="date"> {% include "partials/date.njk" %} </span>
{%
if
item.data.tags.length > 1
%}
<div slot="tag" webc:nkoeep>
{% for tag in item.data.tags %}
{% if tag != "posts" %}
<span class="button post-tag">{{ tag }}</span>
{% endif %}
{% endfor %}
</div>
{% endif %}
<div slot="content" webc:nokeep>{{ item.data.description | markdownFormat | safe }}</div>
</custom-card>
{% endfor %}
</ul>
</custom-masonry>
<!-- TODO: pagination is reversed. -->
<!-- set collection to paginate -->
{% set collectionToPaginate = collections.posts %}
@ -40,6 +48,6 @@ masonry: true
<!-- if the number of items in the collection is greater than the number of items shown on one page -->
{% if collectionToPaginate.length > pagination.size %}
<!-- include pagination -->
{% include 'components/pagination.njk' %}
{% include 'partials/pagination.njk' %}
{% endif %}
</article>

43
src/_layouts/home.njk
View file

@ -1,6 +1,5 @@
---
layout: base
masonry: true
---
<div class="wrapper">
@ -8,7 +7,8 @@ masonry: true
<div class="section__inner flow region">
<h1 class="text-center text-base-light">{{ title }}</h1>
</div>
{% include 'svg/divider-waves.svg' %}
{% svg "divider/waves", null, "seperator" %}
</header>
<article class="full | region">
@ -24,23 +24,28 @@ masonry: true
<p>{{ blog.intro }}</p>
{% endif %}
<ul
class="feature | grid region"
role="list"
data-rows="masonry"
data-layout="50-50"
>
<!-- loop posts -->
{% set itemList = collections.posts %}
{% for item in itemList.slice(0, 4) %}
<!-- activate tags -->
{% set activateTags = true %}
<!-- set heading context -->
{% set headingContext = "h3" %}
<!-- card -->
{% include 'components/card.njk' %}
{% endfor %}
</ul>
<div class="feature | region">
<custom-masonry layout="50-50">
<!-- loop posts -->
{% set itemList = collections.allPosts %}
{% for item in itemList.slice(0, 4) %}
{% set definedDate = item.date %}
<custom-card clickable>
<h3 slot="headline">
<a href="{{ item.url | url }}">{{ item.data.title }}</a>
</h3>
<span slot="date"> {% include "partials/date.njk" %} </span>
{%
if
item.data.tags.length > 1
%}
<span slot="tag" class="button post-tag">{{ item.data.tags[1] }}</span>
{% endif %}
<p slot="content">{{ item.data.description }}</p>
</custom-card>
{% endfor %}
</custom-masonry>
</div>
</div>
</section>
</div>

5
src/_layouts/page.njk
View file

@ -2,10 +2,7 @@
layout: base
---
<article
class="region wrapper flow prose"
style="--region-space-top: var(--space-xl-2xl)"
>
<article class="region wrapper flow prose" style="--region-space-top: var(--space-xl-2xl)">
<h1 class="gradient-text">{{ title }}</h1>
{{ content | safe }}
</article>

13
src/_layouts/post.njk
View file

@ -9,19 +9,12 @@ schema: blog
{% if image %}
<!-- image -->
{% eleventyImage image, alt or title, null, "eager", "feature" %}
{% endif %}
{%
if
credit
%}
<!-- credit -->
<p class="credit feature | text-step-min-1">© {{ credit }}</p>
{% image image, alt or title, credit, "eager", "feature" %}
{% endif %}
<p class="meta | cluster" style="--gutter: var(--space-xs-s)">
<!-- date -->
{% set definedDate = date %} {% include "components/date.njk" %}
{% set definedDate = date %} {% include "partials/date.njk" %}
{%
if tags.length >
1
@ -34,7 +27,7 @@ schema: blog
</p>
{{ content | safe }}
{% include 'components/edit-on.njk' %}
{% include 'partials/edit-on.njk' %}
</div>
<!-- h-card infos: https://indieweb.org/authorship -->

1
src/_layouts/tags.njk
View file

@ -1,6 +1,5 @@
---
layout: base
masonry: true
---
<article class="region">