feat: reduce page sizing complexity
This commit is contained in:
parent
089859e1f3
commit
c5e1e5dda7
GPG key ID:
DFC06C02ED3B4711
13 changed files with 95 additions and 101 deletions
|
|
@ -28,56 +28,54 @@ const listFormatter = new Intl.ListFormat("en-GB", {
|
|||
updated={article.data.updated}
|
||||
tags={article.data.tags}
|
||||
>
|
||||
<div class="mx-auto mb-8">
|
||||
<h1
|
||||
class="animate-reveal text-start text-2xl font-semibold break-words opacity-0"
|
||||
<h1
|
||||
class="animate-reveal text-start text-3xl 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
|
||||
class="text-tertiary ml-2">{article.data.description}</span
|
||||
>
|
||||
</h1>
|
||||
<div
|
||||
class="animate-reveal text-tertiary mt-4 flex flex-row flex-wrap items-start gap-2 opacity-0 [animation-delay:0.1s]"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<Icon name="mdi:calendar" />
|
||||
{
|
||||
datesMatch ? (
|
||||
</h1>
|
||||
<div
|
||||
class="animate-reveal text-tertiary flex flex-row flex-wrap items-start gap-2 opacity-0 [animation-delay:0.1s]"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<Icon name="mdi:calendar" />
|
||||
{
|
||||
datesMatch ? (
|
||||
<p title="Date">
|
||||
<FormattedDate date={article.data.date} />
|
||||
</p>
|
||||
) : (
|
||||
<>
|
||||
<p title="Date">
|
||||
<FormattedDate date={article.data.date} />
|
||||
</p>
|
||||
) : (
|
||||
<>
|
||||
<p title="Date">
|
||||
<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)}
|
||||
<Icon name="mdi:trending-up" />
|
||||
<p title="Updated">
|
||||
<FormattedDate date={article.data.updated} />
|
||||
</p>
|
||||
</div>
|
||||
) : null
|
||||
</>
|
||||
)
|
||||
}
|
||||
</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 class="animate-reveal mx-auto opacity-0 [animation-delay:0.2s]">
|
||||
<Prose>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ const { data } = Astro.props;
|
|||
---
|
||||
|
||||
<div
|
||||
class="pt-6"
|
||||
data-slides={data}
|
||||
x-data="{
|
||||
// Sets the time between each slides in milliseconds
|
||||
|
|
@ -71,7 +70,7 @@ const { data } = Astro.props;
|
|||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="relative min-h-16">
|
||||
<div class="relative min-h-18">
|
||||
<template x-for="(slide, index) in slides">
|
||||
<div
|
||||
x-show="currentSlideIndex == index + 1"
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import Link from "@components/Link.astro";
|
|||
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">
|
||||
<span class="text-tertiary text-center text-sm"
|
||||
>© {new Date().getFullYear()}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
---
|
||||
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", {
|
||||
day: "2-digit",
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ const pathname = new URL(Astro.request.url).pathname;
|
|||
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
|
||||
class="md:flex-no-wrap flex w-full flex-wrap justify-between"
|
||||
x-data="{ open: false }"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<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 />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ const next = items[(index + 1) % items.length];
|
|||
|
||||
{
|
||||
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
|
||||
href={`/${prev.collection}/${prev.slug}`}
|
||||
link={`Previous: ${prev.data.title}`}
|
||||
|
|
|
|||
|
|
@ -13,16 +13,17 @@ const { collection } = Astro.props;
|
|||
class="group hover:bg-tertiary/30 bg-none"
|
||||
href={`/${collection.collection}/${collection.slug}`}
|
||||
>
|
||||
<article class="flex flex-row items-center justify-between">
|
||||
<h3 class="text-secondary mb-1 font-semibold text-nowrap">
|
||||
{collection.data.title}
|
||||
</h3>
|
||||
<hr
|
||||
class="text-tertiary group-hover:text-secondary mx-6 w-full border-dotted transition-colors duration-300"
|
||||
/>
|
||||
<time class="text-accent block text-nowrap"
|
||||
><FormattedDate date={collection.data.date} /></time
|
||||
>
|
||||
<article class="flex flex-col">
|
||||
<div class="flex flex-col justify-between md:flex-row md:items-center">
|
||||
<h3 class="text-secondary mb-1 font-semibold text-nowrap">
|
||||
{collection.data.title}
|
||||
</h3>
|
||||
<FormattedDate
|
||||
date={collection.data.date}
|
||||
className="text-accent block text-nowrap"
|
||||
/>
|
||||
</div>
|
||||
<p class="text-tertiary text-pretty">{collection.data.description}</p>
|
||||
</article>
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -27,13 +27,10 @@ const { title, description, image, date, updated, tags } = Astro.props;
|
|||
tags={tags}
|
||||
/>
|
||||
<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 />
|
||||
<main
|
||||
class="mx-auto w-full max-w-[65ch] space-y-6"
|
||||
transition:animate="fade"
|
||||
>
|
||||
<main transition:animate="fade" class="flex flex-col gap-6">
|
||||
<slot />
|
||||
</main>
|
||||
<Footer />
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
Task:
|
||||
</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"
|
||||
>CMS Migration and Rebrand
|
||||
</Link>
|
||||
</div>
|
||||
>CMS Migration and Rebrand</Link
|
||||
>
|
||||
</p>
|
||||
</section>
|
||||
<section class="mb-6">
|
||||
<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">
|
||||
Deployed to:
|
||||
</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>
|
||||
</div>
|
||||
</p>
|
||||
</section>
|
||||
<section class="mb-6">
|
||||
<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">
|
||||
Built with:
|
||||
</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">Tailwind CSS</span>
|
||||
<span class="box">Alpine.js</span>
|
||||
|
|
|
|||
|
|
@ -14,11 +14,13 @@ const projectsJSON = JSON.stringify(projects);
|
|||
---
|
||||
|
||||
<Layout title={HOME.TITLE} description={HOME.DESCRIPTION}>
|
||||
<Hero />
|
||||
<section
|
||||
id="featured-projects"
|
||||
class="animate-reveal opacity-0 [animation-delay:0.1s]"
|
||||
>
|
||||
<Carousel data={projectsJSON} />
|
||||
</section>
|
||||
<div class="block w-full">
|
||||
<Hero />
|
||||
<section
|
||||
id="featured-projects"
|
||||
class="animate-reveal opacity-0 [animation-delay:0.1s]"
|
||||
>
|
||||
<Carousel data={projectsJSON} />
|
||||
</section>
|
||||
</div>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -10,14 +10,12 @@ const posts = (await getCollection("posts"))
|
|||
---
|
||||
|
||||
<Layout title={SITE.TITLE} description={POSTS.DESCRIPTION}>
|
||||
<div class="mx-auto max-w-[65ch]">
|
||||
<h1 class="animate-reveal text-2xl font-semibold break-words opacity-0">
|
||||
{POSTS.TITLE}
|
||||
</h1>
|
||||
<ol
|
||||
class="animate-reveal mt-8 grid grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s]"
|
||||
>
|
||||
{posts.map((article: any) => <ShowcasePost collection={article} />)}
|
||||
</ol>
|
||||
</div>
|
||||
<h1 class="animate-reveal text-3xl font-semibold break-words opacity-0">
|
||||
{POSTS.TITLE}
|
||||
</h1>
|
||||
<ol
|
||||
class="animate-reveal grid grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s]"
|
||||
>
|
||||
{posts.map((article: any) => <ShowcasePost collection={article} />)}
|
||||
</ol>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -10,14 +10,12 @@ const projects = (await getCollection("projects"))
|
|||
---
|
||||
|
||||
<Layout title={SITE.TITLE} description={PROJECTS.DESCRIPTION}>
|
||||
<div class="mx-auto max-w-[65ch]">
|
||||
<h1 class="animate-reveal text-2xl font-semibold break-words opacity-0">
|
||||
{PROJECTS.TITLE}
|
||||
</h1>
|
||||
<ol
|
||||
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} />)}
|
||||
</ol>
|
||||
</div>
|
||||
<h1 class="animate-reveal text-3xl font-semibold break-words opacity-0">
|
||||
{PROJECTS.TITLE}
|
||||
</h1>
|
||||
<ol
|
||||
class="animate-reveal grid grid-cols-1 gap-4 opacity-0 [animation-delay:0.1s] md:grid-cols-2"
|
||||
>
|
||||
{projects.map((article: any) => <ShowcaseProject collection={article} />)}
|
||||
</ol>
|
||||
</Layout>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue