init

site-profile-new/src/pages/blog/index.astro

@@ -0,0 +1,102 @@
+---
+import { readItems, readSingleton } from '@directus/sdk';
+
+import type { Post } from '@lib/directusTypes';
+
+import directus from '@lib/directus';
+import BaseLayout from '@layouts/BaseLayout.astro';
+import BlogRecentCard from '@components/blog/BlogRecentCard.astro';
+import BlogFeaturedArticle from '@components/blog/BlogFeaturedArticle.astro';
+import HeroSection from '@components/ui/sections/HeroSection.astro';
+import blogImg from '@images/autumn_tree.png';
+
+const global = await directus.request(readSingleton('site_global'));
+const posts = await directus.request(
+  readItems('posts', {
+    fields: ['*'],
+    sort: ['-published_date'],
+  })
+);
+const selectedPosts: Post[] = posts.filter((p) => p.selected);
+
+const description =
+  'Here are some articles that Alex Lebens believes are not bad, hope you enjoy them.';
+---
+
+<BaseLayout
+  title="Blog"
+  description={description}
+  structuredData={{
+    '@context': 'https://schema.org',
+    '@type': 'WebPage',
+    inLanguage: 'en-US',
+    '@id': Astro.url.href,
+    url: Astro.url.href,
+    name: `Blog | ${global.name}`,
+    description: description,
+    isPartOf: {
+      '@type': 'WebSite',
+      url: global.site_url,
+      name: global.name,
+      description: global.about,
+    },
+  }}
+>
+  <HeroSection title="Blog" subTitle={description} src={blogImg} alt={global.blog_image_alt} />
+
+  <BlogRecentCard posts={posts} />
+  <BlogFeaturedArticle posts={selectedPosts} />
+</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');
+          },
+          200 + index * 300
+        );
+      });
+
+      // Animate group 2
+      const smoothReveal2 = document.querySelectorAll('.smooth-reveal-2');
+      smoothReveal2.forEach((el, index) => {
+        setTimeout(
+          () => {
+            el.classList.add('animate-reveal');
+          },
+          500 + index * 100
+        );
+      });
+
+      // Animate topic cards with staggered delay
+      const smoothRevealCards = document.querySelectorAll('.smooth-reveal-cards');
+      smoothRevealCards.forEach((el, index) => {
+        setTimeout(
+          () => {
+            el.classList.add('animate-reveal');
+          },
+          1000 + index * 250
+        );
+      });
+
+      // 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>