refactor: remove outer container from JournalList

This commit is contained in:
Stefan Imhoff
2023-06-10 16:46:51 +02:00
parent 903d0549d7
commit 8e4d09a6c3
4 changed files with 44 additions and 42 deletions

View File

@@ -12,14 +12,13 @@ import { Link, Subsubheadline } from '../components';
const { entries } = Astro.props;
---
<nav class="col-start-1 col-end-18" aria-label="Journal">
<ul
class="grid auto-rows-[50px] grid-cols-[repeat(auto-fit,_minmax(100px,_1fr))] grid-rows-[50px] gap-[max(25px,_2vw)]"
class="col-span-full grid auto-rows-[50px] grid-cols-[repeat(auto-fit,_minmax(100px,_1fr))] grid-rows-[50px] gap-[max(25px,_2vw)]"
>
{
entries.map(({ slug, data }) => (
<li class="journal-card image-shadow group">
<Link title={data.title} href={`/${slug}/`} class="block h-full w-full">
<Link title={data.title} href={`/${slug}/`} class="relative block h-full w-full">
<div class="absolute z-10 flex h-full w-full flex-col items-center justify-center p-10 text-center leading-tight text-white">
<Subsubheadline class="!m-0 leading-tight">{data.title}</Subsubheadline>
</div>
@@ -49,4 +48,3 @@ const { entries } = Astro.props;
))
}
</ul>
</nav>

View File

@@ -33,5 +33,7 @@ const description = 'I am writing essays about various topics in this Journal.';
<aside class="col-start-1 col-end-18 flex flex-wrap gap-y-3">
{uniqueTags.map((tag) => <Tag href={`/tag/${tag}/`}>{tag}</Tag>)}
</aside>
<nav class="col-start-1 col-end-18" aria-label="Journal">
<JournalList entries={formattedAllPosts} />
</nav>
</GridLayout>

View File

@@ -3,7 +3,7 @@ import { getCollection } from 'astro:content';
import GridLayout from '../layouts/GridLayout.astro';
import PageTitle from '../components/PageTitle.astro';
import { Tag as TagComponent } from '../components';
import { Tag } from '../components';
const allJournal = await getCollection('journal');
const uniqueTags = [...new Set(allJournal.map((entry) => entry.data.tags).flat())];
@@ -23,6 +23,6 @@ const description = '…';
>
<PageTitle grid="wide" innerGrid>Tags</PageTitle>
<aside class="col-start-1 col-end-18 flex flex-wrap gap-y-3">
{uniqueTags.map((t) => <TagComponent href={`/tag/${t}/`}>{t}</TagComponent>)}
{uniqueTags.map((t) => <Tag href={`/tag/${t}/`}>{t}</Tag>)}
</aside>
</GridLayout>

View File

@@ -62,5 +62,7 @@ const description = '…';
))
}
</aside>
<nav class="col-start-1 col-end-18" aria-label="Journal">
<JournalList entries={entries} />
</nav>
</GridLayout>