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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue