kogakure/website-astro-stefanimhoff.de
1
0
Fork 0
mirror of https://github.com/kogakure/website-astro-stefanimhoff.de.git synced 2026-02-03 20:15:27 +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; const { entries } = Astro.props;
--- ---
<nav class="col-start-1 col-end-18" aria-label="Journal"> <ul
<ul class="col-span-full grid auto-rows-[50px] grid-cols-[repeat(auto-fit,_minmax(100px,_1fr))] grid-rows-[50px] gap-[max(25px,_2vw)]"
class="grid auto-rows-[50px] grid-cols-[repeat(auto-fit,_minmax(100px,_1fr))] grid-rows-[50px] gap-[max(25px,_2vw)]" >
> {
{ entries.map(({ slug, data }) => (
entries.map(({ slug, data }) => ( <li class="journal-card image-shadow group">
<li class="journal-card image-shadow group"> <Link title={data.title} href={`/${slug}/`} class="relative block h-full w-full">
<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">
<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>
<Subsubheadline class="!m-0 leading-tight">{data.title}</Subsubheadline> </div>
</div> {data.cover ? (
{data.cover ? ( <>
<> {data.cover.endsWith('.svg') ? (
{data.cover.endsWith('.svg') ? ( <img src={data.cover} alt={data.title} />
<img src={data.cover} alt={data.title} /> ) : (
) : ( <Picture
<Picture src={data.cover}
src={data.cover} alt={data.title}
alt={data.title} aspect={0.6}
aspect={0.6} breakpoints={[300, 512, 768, 1024]}
breakpoints={[300, 512, 768, 1024]} />
/> )}
)} </>
</> ) : (
) : ( <div
<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%]"
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, ${
style={`background-image: linear-gradient(to bottom left, ${ pickTwoRandomColors()[0]
pickTwoRandomColors()[0] } 0%, ${pickTwoRandomColors()[1]} 100%)`}
} 0%, ${pickTwoRandomColors()[1]} 100%)`} />
/> )}
)} </Link>
</Link> </li>
</li> ))
)) }
} </ul>
</ul>
</nav>

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"> <aside class="col-start-1 col-end-18 flex flex-wrap gap-y-3">
{uniqueTags.map((tag) => <Tag href={`/tag/${tag}/`}>{tag}</Tag>)} {uniqueTags.map((tag) => <Tag href={`/tag/${tag}/`}>{tag}</Tag>)}
</aside> </aside>
<JournalList entries={formattedAllPosts} /> <nav class="col-start-1 col-end-18" aria-label="Journal">
<JournalList entries={formattedAllPosts} />
</nav>
</GridLayout> </GridLayout>

4
src/pages/tag.astro
View File

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

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

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