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

feat: reduce page sizing complexity

Browse source
This commit is contained in:
Troy 2025-02-13 18:55:50 +00:00
parent 089859e1f3
commit c5e1e5dda7
Signed by: troy
GPG key ID: DFC06C02ED3B4711
13 changed files with 95 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
src/components/Article.astro
View file

@ -28,56 +28,54 @@ const listFormatter = new Intl.ListFormat("en-GB", {
updated={article.data.updated} updated={article.data.updated}
tags={article.data.tags} tags={article.data.tags}
> >
<div class="mx-auto mb-8"> <h1
<h1 class="animate-reveal text-start text-3xl font-semibold break-words opacity-0"
class="animate-reveal text-start text-2xl font-semibold break-words opacity-0" >
<span class="text-secondary">{article.data.title}</span><span
class="text-tertiary ml-2">{article.data.description}</span
> >
<span class="text-secondary">{article.data.title}</span><span </h1>
class="text-tertiary ml-2">{article.data.description}</span <div
> class="animate-reveal text-tertiary flex flex-row flex-wrap items-start gap-2 opacity-0 [animation-delay:0.1s]"
</h1> >
<div <div class="flex items-center gap-2">
class="animate-reveal text-tertiary mt-4 flex flex-row flex-wrap items-start gap-2 opacity-0 [animation-delay:0.1s]" <Icon name="mdi:calendar" />
> {
<div class="flex items-center gap-2"> datesMatch ? (
<Icon name="mdi:calendar" /> <p title="Date">
{ <FormattedDate date={article.data.date} />
datesMatch ? ( </p>
) : (
<>
<p title="Date"> <p title="Date">
<FormattedDate date={article.data.date} /> <FormattedDate date={article.data.date} />
</p> </p>
) : ( <Icon name="mdi:trending-up" />
<> <p title="Updated">
<p title="Date"> <FormattedDate date={article.data.updated} />
<FormattedDate date={article.data.date} />
</p>
<Icon name="mdi:trending-up" />
<p title="Updated">
<FormattedDate date={article.data.updated} />
</p>
</>
)
}
</div>
{
isPost ? (
<div class="flex items-center gap-2">
<Icon name="mdi:timer" />
<p title="Word count">{readingTime(article.body)}</p>
</div>
) : null
}
{
article.data.extraAuthors ? (
<div class="flex items-center gap-2">
<Icon name="mdi:account-plus" />
<p title="Collaborators">
{listFormatter.format(article.data.extraAuthors)}
</p> </p>
</div> </>
) : null )
} }
</div> </div>
{
isPost ? (
<div class="flex items-center gap-2">
<Icon name="mdi:timer" />
<p title="Word count">{readingTime(article.body)}</p>
</div>
) : null
}
{
article.data.extraAuthors ? (
<div class="flex items-center gap-2">
<Icon name="mdi:account-plus" />
<p title="Collaborators">
{listFormatter.format(article.data.extraAuthors)}
</p>
</div>
) : null
}
</div> </div>
<div class="animate-reveal mx-auto opacity-0 [animation-delay:0.2s]"> <div class="animate-reveal mx-auto opacity-0 [animation-delay:0.2s]">
<Prose> <Prose>

3
src/components/Carousel.astro
View file

@ -7,7 +7,6 @@ const { data } = Astro.props;
--- ---
<div <div
class="pt-6"
data-slides={data} data-slides={data}
x-data="{ x-data="{
// Sets the time between each slides in milliseconds // Sets the time between each slides in milliseconds
@ -71,7 +70,7 @@ const { data } = Astro.props;
</div> </div>
</template> </template>
</div> </div>
<div class="relative min-h-16"> <div class="relative min-h-18">
<template x-for="(slide, index) in slides"> <template x-for="(slide, index) in slides">
<div <div
x-show="currentSlideIndex == index + 1" x-show="currentSlideIndex == index + 1"

2
src/components/Footer.astro
View file

@ -4,7 +4,7 @@ import Link from "@components/Link.astro";
import { Icon } from "astro-icon/components"; import { Icon } from "astro-icon/components";
--- ---
<footer class="mx-auto mt-auto mb-6 w-full max-w-[65ch] pt-24"> <footer class="mx-auto mt-auto w-full">
<div class="flex flex-col items-center justify-between gap-2 md:gap-4"> <div class="flex flex-col items-center justify-between gap-2 md:gap-4">
<span class="text-tertiary text-center text-sm" <span class="text-tertiary text-center text-sm"
>&copy; {new Date().getFullYear()} >&copy; {new Date().getFullYear()}

7
src/components/FormattedDate.astro
View file

@ -1,12 +1,13 @@
--- ---
interface Props { interface Props {
date?: Date; date: Date;
className?: string;
} }
const { date = new Date() } = Astro.props; const { date = new Date(), className } = Astro.props;
--- ---
<time datetime={date.toISOString()}> <time datetime={date.toISOString()} class={`${className}`}>
{ {
date.toLocaleDateString("en-GB", { date.toLocaleDateString("en-GB", {
day: "2-digit", day: "2-digit",

2
src/components/Header.astro
View file

@ -6,7 +6,7 @@ const pathname = new URL(Astro.request.url).pathname;
const currentPath = pathname.replace(/\/$/, ""); const currentPath = pathname.replace(/\/$/, "");
--- ---
<header class="mx-auto mb-8 w-full max-w-[65ch] space-y-6 md:pt-4"> <header class="mx-auto w-full">
<nav <nav
class="md:flex-no-wrap flex w-full flex-wrap justify-between" class="md:flex-no-wrap flex w-full flex-wrap justify-between"
x-data="{ open: false }" x-data="{ open: false }"

2
src/components/Prose.astro
View file

@ -1,5 +1,5 @@
<div <div
class="prose prose-headings:text-secondary prose-h1:text-xl prose-h1:font-bold prose-p:max-w-full prose-p:text-pretty prose-p:break-words prose-p:text-secondary prose-a:text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy prose-strong:text-secondary prose-code:whitespace-pre-wrap prose-code:font-medium prose-code:text-secondary prose-code:before:content-none prose-code:after:content-none prose-li:text-secondary prose-li:marker:text-secondary prose-img:max-h-[90vh] prose-img:w-auto prose-img:max-w-full prose-img:rounded prose-video:max-h-[90vh] prose-video:w-auto prose-video:max-w-full prose-video:rounded max-w-full" class="prose prose-headings:text-secondary prose-h1:text-xl prose-h1:font-bold prose-p:max-w-full prose-p:text-pretty prose-p:break-words prose-p:text-secondary prose-a:text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy prose-strong:text-secondary prose-code:whitespace-pre-wrap prose-code:font-medium prose-code:text-secondary prose-code:before:content-none prose-code:after:content-none prose-li:text-secondary prose-li:marker:text-secondary prose-img:max-h-[90vh] prose-img:w-auto prose-img:max-w-full prose-img:rounded-sm prose-video:max-h-[90vh] prose-video:w-auto prose-video:max-w-full prose-video:rounded-sm max-w-full"
> >
<slot /> <slot />
</div> </div>

2
src/components/RelatedArticles.astro
View file

@ -19,7 +19,7 @@ const next = items[(index + 1) % items.length];
{ {
items.length > 1 ? ( items.length > 1 ? (
<div class="mx-auto mt-8 flex max-w-prose flex-col-reverse justify-between gap-4 md:flex-row md:gap-0"> <div class="mx-auto flex w-full flex-col-reverse items-center justify-between gap-4 md:flex-row">
<Button <Button
href={`/${prev.collection}/${prev.slug}`} href={`/${prev.collection}/${prev.slug}`}
link={`Previous: ${prev.data.title}`} link={`Previous: ${prev.data.title}`}

21
src/components/ShowcasePost.astro
View file

@ -13,16 +13,17 @@ const { collection } = Astro.props;
class="group hover:bg-tertiary/30 bg-none" class="group hover:bg-tertiary/30 bg-none"
href={`/${collection.collection}/${collection.slug}`} href={`/${collection.collection}/${collection.slug}`}
> >
<article class="flex flex-row items-center justify-between"> <article class="flex flex-col">
<h3 class="text-secondary mb-1 font-semibold text-nowrap"> <div class="flex flex-col justify-between md:flex-row md:items-center">
{collection.data.title} <h3 class="text-secondary mb-1 font-semibold text-nowrap">
</h3> {collection.data.title}
<hr </h3>
class="text-tertiary group-hover:text-secondary mx-6 w-full border-dotted transition-colors duration-300" <FormattedDate
/> date={collection.data.date}
<time class="text-accent block text-nowrap" className="text-accent block text-nowrap"
><FormattedDate date={collection.data.date} /></time />
> </div>
<p class="text-tertiary text-pretty">{collection.data.description}</p>
</article> </article>
</a> </a>
</li> </li>

7
src/layouts/Layout.astro
View file

@ -27,13 +27,10 @@ const { title, description, image, date, updated, tags } = Astro.props;
tags={tags} tags={tags}
/> />
<body <body
class="bg-primary text-secondary flex min-h-screen flex-col justify-start p-4" class="bg-primary text-secondary items mx-auto my-0 flex min-h-screen w-full max-w-[65ch] flex-col justify-start gap-6 p-4 md:my-6"
> >
<Header /> <Header />
<main <main transition:animate="fade" class="flex flex-col gap-6">
class="mx-auto w-full max-w-[65ch] space-y-6"
transition:animate="fade"
>
<slot /> <slot />
</main> </main>
<Footer /> <Footer />

14
src/pages/cv.astro
View file

@ -164,11 +164,11 @@ import icon from "public/assets/icon.png";
<p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top"> <p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
Task: Task:
</p> </p>
<div class="w-full lg:inline-block lg:w-8/12"> <p class="w-full lg:inline-block lg:w-8/12">
<Link href="/projects/camouflage-store" <Link href="/projects/camouflage-store"
>CMS Migration and Rebrand >CMS Migration and Rebrand</Link
</Link> >
</div> </p>
</section> </section>
<section class="mb-6"> <section class="mb-6">
<p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top"> <p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
@ -225,9 +225,9 @@ import icon from "public/assets/icon.png";
<p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top"> <p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
Deployed to: Deployed to:
</p> </p>
<div class="w-full lg:inline-block lg:w-8/12"> <p class="w-full lg:inline-block lg:w-8/12">
<Link href="/">troylusty.com</Link> <Link href="/">troylusty.com</Link>
</div> </p>
</section> </section>
<section class="mb-6"> <section class="mb-6">
<p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top"> <p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
@ -255,7 +255,7 @@ import icon from "public/assets/icon.png";
<p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top"> <p class="mb-2 italic lg:inline-block lg:w-3/12 lg:align-top">
Built with: Built with:
</p> </p>
<div class="w-full lg:inline-block lg:w-8/12"> <div class="mt-5 w-full lg:inline-block lg:w-8/12">
<span class="box">Astro</span> <span class="box">Astro</span>
<span class="box">Tailwind CSS</span> <span class="box">Tailwind CSS</span>
<span class="box">Alpine.js</span> <span class="box">Alpine.js</span>

16
src/pages/index.astro
View file

@ -14,11 +14,13 @@ const projectsJSON = JSON.stringify(projects);
--- ---
<Layout title={HOME.TITLE} description={HOME.DESCRIPTION}> <Layout title={HOME.TITLE} description={HOME.DESCRIPTION}>
<Hero /> <div class="block w-full">
<section <Hero />
id="featured-projects" <section
class="animate-reveal opacity-0 [animation-delay:0.1s]" id="featured-projects"
> class="animate-reveal opacity-0 [animation-delay:0.1s]"
<Carousel data={projectsJSON} /> >
</section> <Carousel data={projectsJSON} />
</section>
</div>
</Layout> </Layout>

18
src/pages/posts/index.astro
View file

@ -10,14 +10,12 @@ const posts = (await getCollection("posts"))
--- ---
<Layout title={SITE.TITLE} description={POSTS.DESCRIPTION}> <Layout title={SITE.TITLE} description={POSTS.DESCRIPTION}>
<div class="mx-auto max-w-[65ch]"> <h1 class="animate-reveal text-3xl font-semibold break-words opacity-0">
<h1 class="animate-reveal text-2xl font-semibold break-words opacity-0"> {POSTS.TITLE}
{POSTS.TITLE} </h1>
</h1> <ol
<ol class="animate-reveal grid grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s]"
class="animate-reveal mt-8 grid grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s]" >
> {posts.map((article: any) => <ShowcasePost collection={article} />)}
{posts.map((article: any) => <ShowcasePost collection={article} />)} </ol>
</ol>
</div>
</Layout> </Layout>

18
src/pages/projects/index.astro
View file

@ -10,14 +10,12 @@ const projects = (await getCollection("projects"))
--- ---
<Layout title={SITE.TITLE} description={PROJECTS.DESCRIPTION}> <Layout title={SITE.TITLE} description={PROJECTS.DESCRIPTION}>
<div class="mx-auto max-w-[65ch]"> <h1 class="animate-reveal text-3xl font-semibold break-words opacity-0">
<h1 class="animate-reveal text-2xl font-semibold break-words opacity-0"> {PROJECTS.TITLE}
{PROJECTS.TITLE} </h1>
</h1> <ol
<ol class="animate-reveal grid grid-cols-1 gap-4 opacity-0 [animation-delay:0.1s] md:grid-cols-2"
class="animate-reveal mt-8 grid grid-cols-1 gap-4 opacity-0 [animation-delay:0.1s] md:grid-cols-2" >
> {projects.map((article: any) => <ShowcaseProject collection={article} />)}
{projects.map((article: any) => <ShowcaseProject collection={article} />)} </ol>
</ol>
</div>
</Layout> </Layout>