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

feat: add complete implementation of books pages

Browse source 
other stuff happened too
This commit is contained in:
Devin Haska 2025-01-24 11:26:15 -08:00
parent 1b8af4fcb7
commit 5af5ed46a1
30 changed files with 260 additions and 306 deletions
Download patch file Download diff file Expand all files Collapse all files

55
src/_includes/layouts/book.html
View file

@ -4,43 +4,46 @@ layout: "layouts/base"
{% from "macros/date.njk" import format %}
{% from "macros/utils.njk" import stars %}
<a class="button" href="/books">
{% include "svgs/arrow-left.svg" %}
Back to books</a>
<header class="media-meta-grid gap-1">
<header class="flow flow-space-1">
{{ format(page.date) }}
<h1>{{ title }}</h1>
{% if pullquote %}<p class="text-fadeText flow-space-0.25">{{ pullquote }}</p>{% endif %}
</header>
{% if content %}
<section class="flow">
{{ content | safe }}
</section>
{% endif %}
<hr class="my-2" />
<footer class="media-meta-grid gap-1">
<div class="media-image media-image--tall">
<img src="{{ image }}" alt="" />
</div>
<div class="flow flex-col justify-center">
<h2>{{ title }}</h2>
{% if subtitle %}<p class="text-fadeText flow-space-0.5 line-height-m">{{ subtitle }}</p>{% endif %}
<p class="flex gap-0.5">
<span class="text-fadeText">by</span>{{ author }}
</p>
{% if rating %}{{ stars(rating) }}{% endif %}
<ul class="list-none p-0 mb-0 media-meta-grid gap-0.5">
{% if author %}
<li class="flex-col">
<strong>Author</strong><span>{{ author }}</span>
</li>
{% endif %}
{% if year %}
<li class="flex-col">
<strong>Released</strong><span>{{ year }}</span>
</li>
{% endif %}
{% if playtime %}
<li class="flex-col">
<strong>Playtime</strong><span>{{ playtime }}</span>
</li>
{% endif %}
{% if pullquote %}
<li class="flex-col meta-grid--full">
<strong>Pullquote</strong><span>{{ pullquote }}</span>
<strong>Published</strong><span>{{ year }}</span>
</li>
{% endif %}
</ul>
</div>
</header>
{% if content %}
<hr class="my-2" />
<section class="flow">
{{ content | safe }}
</section>
{% endif %}
{{ format(page.date) }}
</footer>
<hr class="my-2">
<ul class="[ categories ] [ cluster list-none p-0 line-height-m ]">
{% for tag in tags | filter("book") %}
<li>
<a class="[ button ]" href="/books/tag/{{ tag | slugify }}">
{% include "svgs/frame.svg" %}
{{ tag }}</a>
</li>
{% endfor %}
</ul>

53
src/_includes/layouts/catalogue-item.html
View file

@ -1,53 +0,0 @@
---
layout: "layouts/base"
imageAlt: ""
imageCaption: ""
---
{% set filteredTags = tags | filterCatalogueTags %}
{% from "macros/date.njk" import format %}
{% from "macros/utils.njk" import stars %}
<article class="[ catalogue ] [ flow ]">
<header class="[ catalogue-header ] [ flow flow-space-1 ]">
{{ format(page.date) }}
<h1>{{ title }}</h1>
{% if subtitle %}<h2>{{ subtitle }}</h2>{% endif %}
{% if rating %}<div class="[ text-skew ]">{{ stars(rating) }}</div>{% endif %}
{% if tertiary or year %}
<div class="[ cluster text-skew flow-space-1 ]">
{% if tertiary %}<div class="[ line-height-m ]">{{ tertiary | safe }}</div>{% endif %}
{% if year %}
<p class="[ font-size-s ]">
<span class="[ text-fadeText ]">ca.</span> {{ year }}
</p>
{% endif %}
</div>
{% endif %}
{% if filteredTags | length > 0 %}
<ul class="[ cluster p-0 flow-space-2 line-height-m text-fadeText ]"
role="list">
{% for tag in filteredTags %}
<li class="[ flex gap-0.25 items-center ]">
<span class="text-border">{% include "svgs/frame.svg" %}</span>
{{ tag }}
</li>
{% endfor %}
</ul>
{% endif %}
</header>
{% if image %}
<div class="[ my-3 ]">
<img src="{{ image }}" alt="{{ imageAlt }}" title="{{ imageCaption }}" />
</div>
{% endif %}
{{ content | safe }}
{% 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>

29
src/_includes/layouts/game.html
View file

@ -4,10 +4,18 @@ layout: "layouts/base"
{% from "macros/date.njk" import format %}
{% from "macros/utils.njk" import stars %}
<a class="button" href="/games">
{% include "svgs/arrow-left.svg" %}
Back to games</a>
<header class="media-meta-grid gap-1">
<header class="flow flow-space-1">
{{ format(page.date) }}
<h1>{{ title }}</h1>
<p class="text-fadeText flow-space-0.25">{{ pullquote }}</p>
</header>
{% if content %}
<section class="flow">
{{ content | safe }}
</section>
{% endif %}
<hr class="my-2" />
<footer class="media-meta-grid gap-1">
<div class="media-image">
<img src="{{ image }}" alt="" />
</div>
@ -29,18 +37,11 @@ Back to games</a>
<strong>Playtime</strong><span>{{ playtime }}</span>
</li>
{% endif %}
{% if pullquote %}
{% if tags %}
<li class="flex-col meta-grid--full">
<strong>Pullquote</strong><span>{{ pullquote }}</span>
<strong>Genres</strong><span>{{ tags | filter("game") | join(", ") }}</span>
</li>
{% endif %}
</ul>
</div>
</header>
{% if content %}
<hr class="my-2" />
<section class="flow">
{{ content | safe }}
</section>
{% endif %}
{{ format(page.date) }}
</footer>

77
src/_includes/layouts/movie.html
View file

@ -4,43 +4,10 @@ layout: "layouts/base"
{% from "macros/date.njk" import format %}
{% from "macros/utils.njk" import stars %}
<a class="button" href="/watching">
{% include "svgs/arrow-left.svg" %}
Back to watching</a>
<header class="media-meta-grid gap-1">
<div class="media-image media-image--tall">
<img src="{{ image }}" alt="" />
</div>
<div class="flow flex-col justify-center">
<div class="flex items-center gap-0.5 flex-wrap">
<h2>{{ title }}</h2>
</div>
{% if subtitle %}<h2>{{ subtitle }}</h2>{% endif %}
{% if director %}
<p class="flex gap-0.5">
<span class="text-fadeText">Directed by</span>{{ director }}
</p>
{% endif %}
{% if watchHistory %}<p class="flow-space-0.25">{{ format(watchHistory | last) }}</p>{% endif %}
{% if rating %}{{ stars(rating) }}{% endif %}
<ul class="list-none p-0 mb-0 media-meta-grid gap-0.5">
{% if year %}
<li class="flex-col">
<strong>Released</strong><span>{{ year }}</span>
</li>
{% endif %}
{% if runtime %}
<li class="flex-col">
<strong>Runtime</strong><span>{{ runtime }} mins</span>
</li>
{% endif %}
{% if tags %}
<li class="flex-col meta-grid--full">
<strong>Genres</strong><span>{{ tags | filter("movie") | join(", ") }}</span>
</li>
{% endif %}
</ul>
</div>
<header class="flow flow-space-1">
{{ format(page.date) }}
<h1>{{ title }}</h1>
<p class="text-fadeText flow-space-0.25">{{ pullquote }}</p>
</header>
{% if watchHistory.length > 1 %}
<p>
@ -55,8 +22,42 @@ Back to watching</a>
</p>
{% endif %}
{% if content %}
<hr class="my-2" />
<section class="flow">
{{ content | safe }}
</section>
{% endif %}
<hr class="my-2" />
<footer class="media-meta-grid gap-1">
<div class="media-image media-image--tall">
<img src="{{ image }}" alt="" />
</div>
<div class="flow flex-col justify-center">
<div class="flex items-center gap-0.5 flex-wrap">
<h2>{{ title }}</h2>
</div>
{% if subtitle %}<h2>{{ subtitle }}</h2>{% endif %}
{% if rating %}{{ stars(rating) }}{% endif %}
<ul class="list-none p-0 mb-0 media-meta-grid gap-0.5">
{% if year %}
<li class="flex-col">
<strong>Released</strong><span>{{ year }}</span>
</li>
{% endif %}
{% if director %}
<li class="flex-col">
<strong>Director</strong>{{ director }}
</li>
{% endif %}
{% if runtime %}
<li class="flex-col">
<strong>Runtime</strong><span>{{ runtime }} mins</span>
</li>
{% endif %}
{% if tags %}
<li class="flex-col meta-grid--full">
<strong>Genres</strong><span>{{ tags | filter("movie") | join(", ") }}</span>
</li>
{% endif %}
</ul>
</div>
</footer>

42
src/_includes/layouts/show.html
View file

@ -4,10 +4,24 @@ layout: "layouts/base"
{% from "macros/date.njk" import format %}
{% from "macros/utils.njk" import stars %}
<a class="button" href="/watching">
{% include "svgs/arrow-left.svg" %}
Back to watching</a>
<header class="media-meta-grid gap-1">
<header class="flow flow-space-1">
{{ format(page.date) }}
<h1>{{ title }}</h1>
<p class="text-fadeText flow-space-0.25">{{ pullquote }}</p>
</header>
{% if content %}
<section class="flow">
{{ content | safe }}
</section>
{% endif %}
{% if favourite or isFavourite %}
<p>
<span class="text-secondary">{% include "svgs/star.svg" %}</span>
This is one of my favourite shows!
</p>
{% endif %}
<hr class="my-2" />
<footer class="media-meta-grid gap-1">
<div class="media-image media-image--tall">
<img src="{{ image }}" alt="" />
</div>
@ -41,22 +55,4 @@ Back to watching</a>
{% endif %}
</ul>
</div>
</header>
{% if watchHistory.length > 1 %}
<p>
<span class="text-primary">{% include "svgs/circle-info.svg" %}</span>
I've seen this movie <strong>{{ watchHistory.length }}</strong> {{ "time" | pluralize(watchHistory) }}!
</p>
{% endif %}
{% if favourite %}
<p>
<span class="text-secondary">{% include "svgs/star.svg" %}</span>
This is one of my favourite movies!
</p>
{% endif %}
{% if content %}
<hr class="my-2" />
<section class="flow">
{{ content | safe }}
</section>
{% endif %}
</footer>