SebinNyshkim/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: ✨ add image credit if blogpost has an image

Browse source
This commit is contained in:
Sebin Nyshkim 2024-10-22 18:41:23 +02:00
parent ea2de80597
commit 27b1162e22
3 changed files with 13 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/layouts/blogpost.njk
View file

@ -7,7 +7,10 @@ layout: base.njk
{% if image and image.src != '' %}
style="background-image: image-set({% bgimgset image.src %})"
{% endif %}
class="relative mb-8 grid h-96 grid-flow-row grid-rows-article-header place-items-center space-y-6 bg-cover bg-center pb-8 pt-20 px-safe-offset-4 *:z-10 before:absolute before:inset-0 before:bg-slate-300 before:bg-opacity-65 sm:h-128 sm:pt-28 md:pt-32 md:px-safe-offset-6 lg:mb-12 lg:h-160 lg:pb-12 2xl:h-192 before:dark:bg-slate-900 before:dark:bg-opacity-65"
{% if image and image.credit != '' %}
data-credit="{{ image.credit }}"
{% endif %}
class="relative mb-8 grid min-h-96 grid-flow-row grid-rows-article-header place-items-center space-y-6 bg-cover bg-center pb-8 pt-20 px-safe-offset-8 *:z-10 before:absolute before:inset-0 before:bg-slate-300 before:bg-opacity-65 after:absolute after:bottom-0 after:right-0 after:z-10 after:rounded-tl-md after:bg-black after:px-2 after:py-1 after:text-xs after:text-white after:content-[attr(data-credit)] sm:min-h-128 sm:pt-28 md:pt-32 after:md:text-sm lg:mb-12 lg:min-h-160 lg:pb-12 lg:px-safe-offset-12 2xl:min-h-192 before:dark:bg-slate-900 before:dark:bg-opacity-65"
>
<div class="prose prose-slate mx-auto md:prose-lg lg:prose-xl 2xl:prose-2xl dark:prose-invert prose-headings:font-normal">
<h1 class="text-balance text-center">{{ title }}</h1>

9
src/posts.njk
View file

@ -20,7 +20,14 @@ pagination:
</div>
{% if post.data.image and post.data.image.src != '' %}
<img src="{{ post.data.image.src }}" alt="{{ post.data.image.alt }}">
<figure class="relative">
<img src="{{ post.data.image.src }}" alt="{{ post.data.image.alt }}">
{% if post.data.image and post.data.image.credit != '' %}
<figcaption class="absolute bottom-0 right-0 rounded-tl-md rounded-br-3xl bg-black px-2 py-1 pe-4 text-xs text-white md:text-sm">
{{ post.data.image.credit }}
</figcaption>
{% endif %}
</figure>
{% endif %}
<p>{{ post.data.description }}</p>

2
tailwind.config.js
View file

@ -6,7 +6,7 @@ export default {
gridTemplateRows: {
'article-header': '1fr auto 0'
},
height: {
minHeight: {
'128': '32rem',
'160': '40rem',
'192': '48rem'