feat: fetch blogs to render in /blog

site/astro.config.ts

@@ -26,9 +26,9 @@ const netlifyAdapter = netlify({
 
 export default defineConfig({
   site: SITE_URL,
+  trailingSlash: "ignore",
   output: PUBLIC_ENV === "preview" ? "server" : "static",
   adapter: PUBLIC_ENV === "preview" ? netlifyAdapter : undefined,
-  trailingSlash: "ignore",
   redirects: {
     "/feed": "/rss.xml",
     "/logo": "/union-logo.zip"

site/src/pages/blog/[slug].astro

@@ -1,16 +1,16 @@
 ---
-import Layout from '#/layouts/Layout.astro'
-import { useStoryblokApi } from '@storyblok/astro'
-import StoryblokComponent from '@storyblok/astro/StoryblokComponent.astro'
+import Layout from "#/layouts/Layout.astro"
+import { useStoryblokApi } from "@storyblok/astro"
+import StoryblokComponent from "@storyblok/astro/StoryblokComponent.astro"
 
 const sbApi = useStoryblokApi()
 
 export async function getStaticPaths() {
   const sbApi = useStoryblokApi()
 
-  const { data } = await sbApi.get('cdn/stories', {
-    content_type: 'blogPost',
-    version: import.meta.env.DEV ? 'draft' : 'published',
+  const { data } = await sbApi.get("cdn/stories", {
+    content_type: "blogPost",
+    version: import.meta.env.DEV ? "draft" : "published"
   })
 
   const stories = Object.values(data.stories) as Array<any>
@@ -20,7 +20,7 @@ export async function getStaticPaths() {
 
 const { slug } = Astro.params
 const { data } = await sbApi.get(`cdn/stories/blog/${slug}`, {
-  version: import.meta.env.DEV ? 'draft' : 'published',
+  version: import.meta.env.DEV ? "draft" : "published"
 })
 
 const story = data.story as {

site/src/pages/blog/index.astro

@@ -1,20 +1,31 @@
 ---
 import Card from "#/components/Card.astro"
-import { getCollection } from "astro:content"
 import TextA from "#/components/TextA.astro"
 import H3 from "#/components/typography/h3.astro"
+import { useStoryblokApi } from "@storyblok/astro"
 import SectionsLayout from "#/layouts/SectionsLayout.astro"
 import LanderSection from "#/components/LanderSection.astro"
 import IntroHeading from "#/components/typography/IntroHeading.astro"
 import SocialsSection from "#/components/sections/SocialsSection.astro"
 
-const isProduction = import.meta.env.PROD
+const sbApi = useStoryblokApi()
 
-let blogEntries = await getCollection("blog", ({ data }) =>
-  // filter out unpublished posts in production
-  isProduction ? data.hidden !== true : true
-)
-blogEntries = blogEntries.sort((a, b) => (a.data.date > b.data.date ? -1 : 1))
+const { data } = await sbApi.get("cdn/stories", {
+  content_type: "blogPost",
+  version: import.meta.env.DEV ? "draft" : "published"
+})
+
+const blogEntries = data.stories as Array<{
+  name: string
+  slug: string
+  full_slug: string
+  content: {
+    date: string
+    title: string
+    description: string
+    cover: { filename: string }
+  }
+}>
 ---
 
 <SectionsLayout title="Union Blog" gapless>
@@ -27,15 +38,18 @@ blogEntries = blogEntries.sort((a, b) => (a.data.date > b.data.date ? -1 : 1))
         blogEntries.map(blogPostEntry => (
           <a class="pointer-cursor" href={`/blog/${blogPostEntry.slug}`}>
             <Card class="size-full" padded>
-              <time class="text-lg text-gray-400" datetime={blogPostEntry.data.date.toISOString()}>
-                {blogPostEntry.data.date.toLocaleDateString('fr-CA', {
+              <time
+                class="text-lg text-gray-400"
+                datetime={new Date(blogPostEntry.content.date).toISOString()}
+              >
+                {new Date(blogPostEntry.content.date).toLocaleDateString('fr-CA', {
                   year: 'numeric',
                   month: 'numeric',
                   day: 'numeric',
                 })}
               </time>
-              <H3>{blogPostEntry.data.title}</H3>
-              <p class="sm:text-xl text-gray-400">{blogPostEntry.data.description}</p>
+              <H3>{blogPostEntry.name}</H3>
+              <p class="sm:text-xl text-gray-400">{blogPostEntry.content.description}</p>
 
               <TextA fake>Read Post</TextA>
             </Card>

site/src/storyblok/blog-post-list.astro

@@ -0,0 +1,41 @@
+---
+import { useStoryblokApi } from "@storyblok/astro"
+import { storyblokEditable } from "@storyblok/astro"
+
+const storyblokApi = useStoryblokApi()
+
+const sbResponse = await storyblokApi.get("cdn/stories", {
+  version: import.meta.env.DEV ? "draft" : "published",
+  content_type: "blogPost"
+})
+
+const data = sbResponse.data as {
+  stories: Array<{
+    full_slug: string
+    published_at: string
+    content: { title: string; description: string }
+  }>
+}
+
+const posts = data.stories.map(story => {
+  return {
+    title: story.content.title,
+    date: new Date(story.published_at).toLocaleDateString("en-US", { dateStyle: "full" }),
+    description: story.content.description,
+    slug: story.full_slug
+  }
+})
+
+const { blok } = Astro.props
+---
+<ul {...storyblokEditable(blok)}>
+  {
+    posts.map(post => (
+      <li>
+        <time>{post.date}</time>
+        <a href={post.slug}>{post.title}</a>
+        <p>{post.description}</p>
+      </li>
+    ))
+  }
+</ul>

site/src/storyblok/blog-post.astro

@@ -1,8 +1,8 @@
 ---
-import LanderSection from '#/components/LanderSection.astro'
-import type { ISbRichtext, SbBlokData } from '@storyblok/astro'
-import { storyblokEditable, renderRichText } from '@storyblok/astro'
-import SocialsSection from '#/components/sections/SocialsSection.astro'
+import LanderSection from "#/components/LanderSection.astro"
+import type { ISbRichtext, SbBlokData } from "@storyblok/astro"
+import { storyblokEditable, renderRichText } from "@storyblok/astro"
+import SocialsSection from "#/components/sections/SocialsSection.astro"
 
 interface Props {
   blok: SbBlokData & {
@@ -17,11 +17,8 @@ interface Props {
 }
 
 const { blok } = Astro.props
-console.info(blok)
-
-const content = renderRichText(blok.content)
-
 const blokDate = new Date(blok.date)
+const content = renderRichText(blok.content)
 ---
 
 <article {...storyblokEditable(blok)}>

site/src/storyblok/page.astro

@@ -1,7 +1,7 @@
 ---
-import type { SbBlokData } from '@storyblok/astro'
-import { storyblokEditable } from '@storyblok/astro'
-import StoryblokComponent from '@storyblok/astro/StoryblokComponent.astro'
+import type { SbBlokData } from "@storyblok/astro"
+import { storyblokEditable } from "@storyblok/astro"
+import StoryblokComponent from "@storyblok/astro/StoryblokComponent.astro"
 
 interface Props {
   blok: SbBlokData & {