kogakure/website-astro-stefanimhoff.de
1
0
Fork 0
mirror of https://github.com/kogakure/website-astro-stefanimhoff.de.git synced 2026-02-03 12:05:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: remove outer container from JournalList

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/JournalList.astro
View File

@@ -12,41 +12,39 @@ 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)]"
>
{
entries.map(({ slug, data }) => (
<li class="journal-card image-shadow group">
<Link title={data.title} href={`/${slug}/`} class="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>
{data.cover ? (
<>
{data.cover.endsWith('.svg') ? (
<img src={data.cover} alt={data.title} />
) : (
<Picture
src={data.cover}
alt={data.title}
aspect={0.6}
breakpoints={[300, 512, 768, 1024]}
/>
)}
</>
) : (
<div
class="h-full w-full scale-105 bg-gray-800 blur-sm brightness-[50%] filter transition duration-300 ease-in-out group-hover:brightness-[90%]"
style={`background-image: linear-gradient(to bottom left, ${
pickTwoRandomColors()[0]
} 0%, ${pickTwoRandomColors()[1]} 100%)`}
/>
)}
</Link>
</li>
))
}
</ul>
</nav>
<ul
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="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>
{data.cover ? (
<>
{data.cover.endsWith('.svg') ? (
<img src={data.cover} alt={data.title} />
) : (
<Picture
src={data.cover}
alt={data.title}
aspect={0.6}
breakpoints={[300, 512, 768, 1024]}
/>
)}
</>
) : (
<div
class="h-full w-full scale-105 bg-gray-800 blur-sm brightness-[50%] filter transition duration-300 ease-in-out group-hover:brightness-[90%]"
style={`background-image: linear-gradient(to bottom left, ${
pickTwoRandomColors()[0]
} 0%, ${pickTwoRandomColors()[1]} 100%)`}
/>
)}
</Link>
</li>
))
}
</ul>

4
src/pages/journal.astro
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>
<JournalList entries={formattedAllPosts} />
<nav class="col-start-1 col-end-18" aria-label="Journal">
<JournalList entries={formattedAllPosts} />
</nav>
</GridLayout>

4
src/pages/tag.astro
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>

4
src/pages/tag/[tag].astro
View File

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