wonderfulfrog/wonderfulfrog.com
1
0
Fork 0
Code Issues Pull requests Activity Actions

feat: simplify layout structure

Browse source
This commit is contained in:
Devin Haska 2024-02-22 14:10:12 -08:00
parent c2f112a41b
commit 7c38b2fa4b
36 changed files with 47 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/_includes/layouts/base.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- charset/http-equiv/viewport -->
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
{% if title %}{{ title }} •{% endif %}
{{ meta.siteName }}
</title>
<link rel="stylesheet" href="/css/styles.css" />
{% include "partials/meta.html" %}
{% for preload in preloads %}
<link rel="preload"
as="{{ preload.as }}"
href="{{ preload.href }}"
{% if preload.crossorigin %}crossorigin{% endif %} />
{% endfor %}
{% 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 %}
</head>
<body class="[ flex-col ]">
{% include "partials/header.html" %}
<main id="main" class="[ flow flex-1 wrapper ]">
{{ content | safe }}
</main>
{% include "partials/footer.html" %}
</body>
</html>

35
src/_includes/layouts/catalogue-item.html Normal file
View file

@ -0,0 +1,35 @@
---
layout: "layouts/base"
imageAlt: ""
imageCaption: ""
---
{% set filteredTags = tags | filterCatalogueTags %}
<article class="[ catalogue ] [ flow ]">
<div style="--flow-space: 2em">
{% block image %}
{% if image %}
{% image image, imageAlt, imageCaption %}
{% endif %}
{% endblock %}
</div>
<section class="[ catalogue-meta ] [ flow ]">
{% block title %}<h1>{{ title }}</h1>{% endblock %}
{% block subtitle %}<h2 class="[ text-fadeText ]" style="--flow-space: 0.25em">{{ subtitle }}</h2>{% endblock %}
{{ tertiary | safe }}
{% if filteredTags | length > 0 %}
<ul class="[ categories list-none p-0 ] [ cluster justify-center ]">
{% for tag in filteredTags %}<li class="[ flex gap-0.25 ]">{{ tag }}</li>{% endfor %}
</ul>
{% endif %}
</section>
<hr class="[ my-1 ]" />
{% from "macros/date.njk" import format %}
{{ format(date) }}
{% block content %}{{ content | safe }}{% endblock %}
{% if url %}
<a href="{{ url }}" class="[ flex mt-1 items-center gap-0.5 ]" target="_blank" rel="external noreferrer noopener">
{% include "svgs/link.svg" %}{{ linkTitle }}
</a>
{% endif %}
</article>

26
src/_includes/layouts/catalogue-type.html Normal file
View file

@ -0,0 +1,26 @@
---
layout: "layouts/base"
pagination:
data: collections.catalogueByType
size: 1
alias: type
filter:
- catalogue
eleventyExcludeFromCollections: true
permalink: /catalogue/{{ type | pluralize | slugify }}/index.html
eleventyComputed:
title: Catalogue - {{ type | pluralize | capitalize }}
---
<h1>{{ type | pluralize | capitalize }}</h1>
{% set catalogueTypes = collections.catalogueByType | keys %}
<ul class="[ cluster list-none p-0 ]" style="--gap: var(--spacing-0\.5)">
{% for type in catalogueTypes %}
<li>
<a class="[ pill ] [ flex px-1 py-0.5 gap-0.5 ]"
href="/catalogue/{{ type | pluralize }}">{{ type | pluralize }}<span class="[ pill-count ]">{{ collections.catalogueByType[ type ] | length }}</span></a>
</li>
{% endfor %}
</ul>
{% set items = collections.catalogueByType[ type ] | reverse %}
{% include "partials/catalogue.html" %}

19
src/_includes/layouts/catalogue.html Normal file
View file

@ -0,0 +1,19 @@
---
layout: "layouts/base"
permalink: /catalogue/index.html
title: Catalogue
---
<h1>Catalogue</h1>
<p>A collection of my thoughts on various forms of media that I consume.</p>
{% set items = collections.catalogue %}
{% set catalogueTypes = collections.catalogueByType | keys %}
<ul class="[ cluster list-none p-0 ]" style="--gap: 0.5rem">
{% for type in catalogueTypes %}
<li>
<a class="[ pill ] [ flex px-1 py-0.5 gap-0.5 ]"
href="/catalogue/{{ type | pluralize }}">{{ type | pluralize }}<span class="[ pill-count ]">{{ collections.catalogueByType[ type ] | length }}</span></a>
</li>
{% endfor %}
</ul>
{% include "partials/catalogue.html" %}

19
src/_includes/layouts/post.html Normal file
View file

@ -0,0 +1,19 @@
---
layout: "layouts/base"
---
<article class="[ flow ]">
<header class="[ flow ]" style="--flow-space: 1rem">
{% from "macros/date.njk" import format %}
{{ format(date) }}
<h1>{{ title }}</h1>
<ul class="[ categories ] [ cluster list-none p-0 ]">
{% for tag in tags | filter(["post"]) %}
<li class="[ flex gap-0.25 ]">
<a href="/tags/{{ tag | slugify }}">{{ tag }}</a>
</li>
{% endfor %}
</ul>
</header>
{{ content | safe }}
</article>

17
src/_includes/layouts/tag.html Normal file
View file

@ -0,0 +1,17 @@
---
layout: "layouts/base"
pagination:
data: collections.postsByTag
size: 1
alias: tag
filter:
- post
permalink: /tags/{{ tag | slugify }}/index.html
---
<h1>Tag: {{ tag }}</h1>
<p>
All posts tagged with "{{ tag }}", or go back to <a href="/tags">all tags</a>.
</p>
{% set items = collections.postsByTag[ tag ] %}
{% include "partials/archive.html" %}

18
src/_includes/layouts/tags.html Normal file
View file

@ -0,0 +1,18 @@
---
layout: "layouts/base"
permalink: /tags/index.html
title: All tags
---
{% set tags = collections.post | allTagCounts %}
<section class="[ flow ]">
<h1>{{ title }}</h1>
<ol class="[ cluster list-none p-0 ]" style="--gap: var(--spacing-0\.5)">
{% for tag in tags %}
<li>
<a href="/tags/{{ tag.tag | slugify }}"
class="[ pill ] [ flex px-1 py-0.5 gap-0.5 ]">{{ tag.tag }} <span class="[ pill-count ]">{{ tag.count }}</span></a>
</li>
{% endfor %}
</ol>
</section>