troy/troylusty.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

add prev & next article buttons (#3)

Browse source 
solution inspired by https://github.com/markhorn-dev/astro-sphere
This commit is contained in:
Troy 2024-12-26 15:02:43 +00:00 • committed by GitHub
parent 93d8c4f67d
commit 3aa7ca486b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 212 additions and 753 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

855
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

6
src/components/Article.astro
View file

@ -4,6 +4,7 @@ import Prose from "@components/Prose.astro";
import FormattedDate from "@components/FormattedDate.astro";
import { readingTime } from "@lib/utils";
import { Icon } from "astro-icon/components";
import RelatedArticles from "@components/RelatedArticles.astro";
const { article, isPost = false } = Astro.props;
const { Content } = await article.render();
@ -34,7 +35,7 @@ const listFormatter = new Intl.ListFormat("en-GB", {
{article.data.title}
</h1>
<div
class="flex animate-reveal flex-col items-start opacity-0 [animation-delay:0.3s]"
class="flex animate-reveal flex-col items-start opacity-0 [animation-delay:0.1s]"
>
<div
class="mt-4 flex flex-col items-start gap-2 text-lg text-tertiary md:flex-row"
@ -97,10 +98,11 @@ const listFormatter = new Intl.ListFormat("en-GB", {
</div>
</div>
<div
class="mx-auto max-w-prose animate-reveal opacity-0 [animation-delay:0.6s]"
class="mx-auto max-w-prose animate-reveal opacity-0 [animation-delay:0.2s]"
>
<Prose>
<Content />
</Prose>
</div>
<RelatedArticles entry={article} />
</Layout>

60
src/components/RelatedArticles.astro Normal file
View file

@ -0,0 +1,60 @@
---
import { Icon } from "astro-icon/components";
import { type CollectionEntry, getCollection } from "astro:content";
type Props = {
entry: CollectionEntry<"posts"> | CollectionEntry<"projects">;
};
const { entry } = Astro.props;
const { collection } = entry;
const items = (await getCollection(collection))
.filter((post) => !post.data.draft)
.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
const index = items.findIndex((x) => x.slug === entry.slug);
const prev = items[(index - 1 + items.length) % items.length];
const next = items[(index + 1) % items.length];
---
<div
class="mx-auto mt-8 flex max-w-prose flex-col justify-between gap-4 md:flex-row md:gap-0"
>
<div class="group flex w-fit flex-row items-center justify-between gap-6">
<a
href={`/${prev.collection}/${prev.slug}`}
class="animate-reveal rounded-full bg-secondary p-1 opacity-0 transition-all ease-in-out group-hover:scale-90 group-hover:bg-tertiary"
>
<Icon
name="mdi:arrow-left"
title="All projects"
class="h-4 w-auto text-primary"
/>
</a>
<a href={`/${prev.collection}/${prev.slug}`}>
<p class="animate-reveal break-words text-2xl font-medium opacity-0">
{prev.data.title}
</p>
</a>
</div>
<div
class="group flex w-fit flex-row items-center justify-between gap-6 self-end"
>
<a href={`/${next.collection}/${next.slug}`}>
<p class="animate-reveal break-words text-2xl font-medium opacity-0">
{next.data.title}
</p>
</a>
<a
href={`/${next.collection}/${next.slug}`}
class="animate-reveal rounded-full bg-secondary p-1 opacity-0 transition-all ease-in-out group-hover:scale-90 group-hover:bg-tertiary"
>
<Icon
name="mdi:arrow-right"
title="All projects"
class="h-4 w-auto text-primary"
/>
</a>
</div>
</div>

2
src/components/ShowcasePage.astro
View file

@ -16,7 +16,7 @@ const { content, CONSTS } = Astro.props;
{CONSTS.TITLE}
</h1>
<div
class="mt-16 grid animate-reveal grid-cols-1 gap-6 opacity-0 [animation-delay:0.4s] md:grid-cols-3 md:[&>*:nth-child(4n+2)]:col-span-2 md:[&>*:nth-child(4n+3)]:col-span-2 md:[&>*:only-child]:col-span-3"
class="mt-16 grid animate-reveal grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s] md:grid-cols-3 md:[&>*:nth-child(4n+2)]:col-span-2 md:[&>*:nth-child(4n+3)]:col-span-2 md:[&>*:only-child]:col-span-3"
>
{content.map((article: any) => <Showcase collection={article} />)}
</div>

5
src/components/Skills.astro
View file

@ -15,12 +15,13 @@ const skills = await Promise.all(
<ul class="flex max-w-full list-none flex-wrap gap-4 px-0">
{
skills.map((entry) => (
<li>
<li class="flex items-center gap-2 rounded border border-tertiary p-2">
<Icon
name={entry.data.icon}
title={entry.data.title}
class="h-12 w-auto text-secondary"
class="h-6 w-auto text-secondary"
/>
<p class="m-0">{entry.data.title}</p>
</li>
))
}

4
src/pages/404.astro
View file

@ -17,12 +17,12 @@ import { Icon } from "astro-icon/components";
404
</h2>
<h3
class="mt-2 animate-reveal text-xl font-bold opacity-0 [animation-delay:0.3s]"
class="mt-2 animate-reveal text-xl font-bold opacity-0 [animation-delay:0.1s]"
>
Content not found
</h3>
</div>
<div class="animate-reveal opacity-0 [animation-delay:0.6s]">
<div class="animate-reveal opacity-0 [animation-delay:0.2s]">
<a
href="/"
class="flex items-center gap-1 rounded bg-secondary px-3.5 py-2.5 text-sm font-semibold text-primary"

13
src/pages/cv.astro
View file

@ -20,9 +20,7 @@ import Prose from "@components/Prose.astro";
<div
class="mt-4 flex flex-col items-start gap-2 text-lg text-tertiary md:flex-row"
>
<div
class="flex animate-reveal items-center gap-2 opacity-0 [animation-delay:0.3s]"
>
<div class="flex animate-reveal items-center gap-2 opacity-0">
<Icon name="mdi:email" />
<Link href="mailto:hello@troylusty.com">
<p>hello@troylusty.com</p>
@ -35,7 +33,7 @@ import Prose from "@components/Prose.astro";
</div>
</div>
</section>
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.4s]">
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.1s]">
<Prose>
<h2>About me</h2>
<p>
@ -56,13 +54,13 @@ import Prose from "@components/Prose.astro";
</p>
</Prose>
</section>
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.5s]">
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.2s]">
<Prose>
<h2>Education</h2>
<Education />
</Prose>
</section>
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.6s]">
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.3s]">
<Prose>
<h2>Skills</h2>
<p>
@ -71,12 +69,11 @@ import Prose from "@components/Prose.astro";
Engine. Using either real-time or offline rendering techniques. In
addition to this, I am also very interested in web development.
</p>
<p>Please note, this skills section is a only placeholder.</p>
<Skills />
<ul><li>Full drivers licence for cars and motorbikes</li></ul>
</Prose>
</section>
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.7s]">
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.4s]">
<Prose>
<h2>Experience</h2>
<Work />

14
src/pages/index.astro
View file

@ -18,7 +18,7 @@ const projects = (await getCollection("projects"))
<Layout title={HOME.TITLE} description={HOME.DESCRIPTION}>
<section class="mb-32" id="postHero" aria-labelledby="featured-projects">
<div class="flex flex-row items-center justify-between gap-6">
<div class="group flex flex-row items-center justify-between gap-6">
<a href="/projects">
<h2
class="animate-reveal break-words text-4xl font-medium opacity-0"
@ -29,7 +29,7 @@ const projects = (await getCollection("projects"))
</a>
<a
href="/projects"
class="animate-reveal rounded-full bg-secondary p-1 opacity-0 transition-all ease-in-out [animation-delay:0.3s] hover:scale-90 hover:bg-tertiary"
class="animate-reveal rounded-full bg-secondary p-1 opacity-0 transition-all ease-in-out group-hover:scale-90 group-hover:bg-tertiary"
>
<Icon
name="mdi:arrow-right"
@ -39,16 +39,16 @@ const projects = (await getCollection("projects"))
</a>
</div>
<div
class="mt-16 grid animate-reveal grid-cols-1 gap-6 opacity-0 [animation-delay:0.4s] md:grid-cols-3 md:[&>*:nth-child(4n+2)]:col-span-2 md:[&>*:nth-child(4n+3)]:col-span-2 md:[&>*:only-child]:col-span-3"
class="mt-16 grid animate-reveal grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s] md:grid-cols-3 md:[&>*:nth-child(4n+2)]:col-span-2 md:[&>*:nth-child(4n+3)]:col-span-2 md:[&>*:only-child]:col-span-3"
>
{projects.map((project) => <Showcase collection={project} />)}
</div>
</section>
<section aria-labelledby="recent-posts">
<div class="flex flex-row items-center justify-between gap-6">
<div class="group flex flex-row items-center justify-between gap-6">
<a href="/posts">
<h2
class="animate-reveal break-words text-4xl font-medium opacity-0 [animation-delay:0.5s]"
class="animate-reveal break-words text-4xl font-medium opacity-0 [animation-delay:0.2s]"
id="recent-posts"
>
Recent posts
@ -56,7 +56,7 @@ const projects = (await getCollection("projects"))
</a>
<a
href="/posts"
class="animate-reveal rounded-full bg-secondary p-1 opacity-0 transition-all ease-in-out [animation-delay:0.8s] hover:scale-90 hover:bg-tertiary"
class="animate-reveal rounded-full bg-secondary p-1 opacity-0 transition-all ease-in-out [animation-delay:0.2s] group-hover:scale-90 group-hover:bg-tertiary"
>
<Icon
name="mdi:arrow-right"
@ -66,7 +66,7 @@ const projects = (await getCollection("projects"))
</a>
</div>
<div
class="mt-16 grid animate-reveal grid-cols-1 gap-6 opacity-0 [animation-delay:0.9s] md:grid-cols-3 md:[&>*:nth-child(4n+2)]:col-span-2 md:[&>*:nth-child(4n+3)]:col-span-2 md:[&>*:only-child]:col-span-3"
class="mt-16 grid animate-reveal grid-cols-1 gap-6 opacity-0 [animation-delay:0.3s] md:grid-cols-3 md:[&>*:nth-child(4n+2)]:col-span-2 md:[&>*:nth-child(4n+3)]:col-span-2 md:[&>*:only-child]:col-span-3"
>
{posts.map((post) => <Showcase collection={post} />)}
</div>

6
src/styles/tailwind.css
View file

@ -20,10 +20,4 @@
--accent: 60deg 2.44% 16.08%;
}
}
:root[data-theme="tritanopia"] {
--primary: 216deg 27.78% 7.06%;
--secondary: 210deg 66.67% 96.47%;
--tertiary: 213.75deg 7.84% 60%;
--accent: 130.49deg 55.68% 36.27%;
}
}