108 lines
2.8 KiB
Plaintext
108 lines
2.8 KiB
Plaintext
---
|
|
import { readItems, readSingleton } from '@directus/sdk';
|
|
|
|
import HeaderSection from '@components/sections/HeaderSection.astro';
|
|
import BlogCard from '@components/cards/BlogCard.astro';
|
|
import BaseLayout from '@layouts/BaseLayout.astro';
|
|
import directus from '@lib/directus';
|
|
|
|
const global = await directus.request(readSingleton('site_global'));
|
|
const posts = await directus.request(
|
|
readItems('posts', {
|
|
filter: { published: { _eq: true } },
|
|
fields: ['*', { category: ['*'] }],
|
|
sort: ['-published_date'],
|
|
})
|
|
);
|
|
---
|
|
|
|
<BaseLayout
|
|
title="All Posts"
|
|
description="Browse all articles from every category."
|
|
structuredData={{
|
|
'@context': 'https://schema.org',
|
|
'@type': 'WebPage',
|
|
inLanguage: 'en-US',
|
|
'@id': Astro.url.href,
|
|
url: Astro.url.href,
|
|
name: `All Posts | ${global.name}`,
|
|
description: "Browse all articles from every category.",
|
|
isPartOf: {
|
|
url: `${global.site_url}`,
|
|
name: global.name,
|
|
description: global.about,
|
|
},
|
|
}}
|
|
>
|
|
|
|
<HeaderSection
|
|
title="All Posts"
|
|
subTitle="Browse all posts from every category."
|
|
btnExists
|
|
btnTitle="To Categories"
|
|
btnURL="/categories"
|
|
/>
|
|
|
|
<section class="max-w-340 2xl:max-w-full mb-10 px-4 sm:px-6 lg:px-8 py-8 mx-auto mt-10">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{posts.map((b) =>
|
|
<BlogCard post={b} />
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
</BaseLayout>
|
|
|
|
<script>
|
|
// Add smooth reveal animations for content after loading
|
|
document.addEventListener('astro:page-load', () => {
|
|
const animateContent = () => {
|
|
// Animate group 1
|
|
const smoothReveal = document.querySelectorAll('.smooth-reveal');
|
|
smoothReveal.forEach((el, index) => {
|
|
setTimeout(
|
|
() => {
|
|
el.classList.add('animate-reveal');
|
|
},
|
|
50 + index * 100
|
|
);
|
|
});
|
|
|
|
// Animate group 2
|
|
const smoothReveal2 = document.querySelectorAll('.smooth-reveal-2');
|
|
smoothReveal2.forEach((el, index) => {
|
|
setTimeout(
|
|
() => {
|
|
el.classList.add('animate-reveal');
|
|
},
|
|
200 + index * 150
|
|
);
|
|
});
|
|
|
|
// Animate topic cards with staggered delay
|
|
const smoothRevealCards = document.querySelectorAll('.smooth-reveal-cards');
|
|
smoothRevealCards.forEach((el, index) => {
|
|
setTimeout(
|
|
() => {
|
|
el.classList.add('animate-reveal');
|
|
},
|
|
500 + index * 100
|
|
);
|
|
});
|
|
|
|
// Animate with just fade in with staggered delay
|
|
const smoothRevealFade = document.querySelectorAll('.smooth-reveal-fade');
|
|
smoothRevealFade.forEach((el, index) => {
|
|
setTimeout(
|
|
() => {
|
|
el.classList.add('animate-reveal-fade');
|
|
},
|
|
100 + index * 250
|
|
);
|
|
});
|
|
};
|
|
|
|
animateContent();
|
|
});
|
|
</script>
|