Properly integrate Ghost API as followed by Astro documentation

src/env.d.ts

@@ -1,2 +1,5 @@
 /// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
+interface ImportMetaEnv {
+    readonly CONTENT_API_KEY: string;
+}

src/library/ghost.ts

@@ -0,0 +1,7 @@
+import GhostContentAPI from '@tryghost/content-api'
+
+export const ghostClient = new GhostContentAPI({
+    url: 'https://blog.ghost.sudovanilla.org',
+    key: import.meta.env.CONTENT_API_KEY,
+    version: 'v5.0',
+})

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

@@ -2,34 +2,60 @@
 // Layout
 import Default from "@layouts/Default.astro";
 
-// Components
-import Hero from "@components/Hero.astro";
-import Heading from "@components/Heading.astro";
-import Posts from "@components/blog/posts.astro";
-import LargeCard from "@components/Feature.astro";
-import {Zorn} from "@minpluto/zorn"
+// Fetch Post (Ghost)
+import { ghostClient } from "@library/ghost";
+
+export async function getStaticPaths() {
+  const posts = await ghostClient.posts
+    .browse({
+      limit: "all",
+    })
+    .catch((err) => {
+      console.error(err);
+    });
+
+  return posts.map((post) => {
+    return {
+      params: {
+        slug: post.slug,
+      },
+      props: {
+        post: post,
+      },
+    };
+  });
+}
+
+const { post } = Astro.props;
+export const prerender = true;
 
 // Icons
 import { Calendar } from "@iconoir/vue";
 
 const Id = Astro.url.href.split("?postid=").pop();
-const GhostPostFetch = 'https://blog.ghost.sudovanilla.org/ghost/api/content/posts/' + Id + '/?key=bef2ed15d9e38f7703be9412b3'
+const GhostPostFetch =
+  "https://blog.ghost.sudovanilla.org/ghost/api/content/posts/" +
+  Id +
+  "/?key=bef2ed15d9e38f7703be9412b3";
 const GhostPostResponse = await fetch(GhostPostFetch);
 const GhostPost = await GhostPostResponse.json();
 ---
 
-
 <Default MobileTitle="Blog" NoSubHeader>
   <slot slot="body">
     <div class="blog-post">
-      <img width="100%" class="blog-banner" src={GhostPost.posts[0].custom_excerpt} />
-      <h1>{GhostPost.posts[0].title}</h1>
+      <img
+        width="100%"
+        class="blog-banner"
+        src={post.custom_excerpt}
+      />
+      <h1>{post.title}</h1>
       <p id="date">
         <Calendar />
-        {new Date(GhostPost.posts[0].published_at).toLocaleDateString()}
+        {new Date(post.published_at).toLocaleDateString()}
       </p>
       <div class="blog-post-content">
-        <Fragment set:html={GhostPost.posts[0].html}/>
+        <Fragment set:html={post.html} />
       </div>
     </div>
   </slot>

src/pages/blog/index.astro

@@ -3,11 +3,7 @@
 import Default from "@layouts/Default.astro";
 
 // Components
-import Hero from "@components/Hero.astro";
-import Heading from "@components/Heading.astro";
 import Posts from "@components/blog/posts.astro";
-import LargeCard from "@components/Feature.astro";
-import {Zorn} from "@minpluto/zorn"
 
 // List Posts
 const GhostFetch = 'https://blog.ghost.sudovanilla.org/ghost/api/content/posts/?key=bef2ed15d9e38f7703be9412b3'
@@ -20,18 +16,7 @@ import { BookmarkBook, ReportColumns } from "@iconoir/vue";
 
 <Default MobileTitle="SudoVanilla" NoSubHeader>
   <Fragment slot="body">
-    <div class="posts">
-      {Ghost.posts.map((post) =>
-        <a href={'/blog/' + post.slug + '?postid=' + post.id} class="card-post">
-          <img id="bg" src={post.custom_excerpt.image} />
-          <img src={post.custom_excerpt} />
-          <div class="card-post-content">
-          <p><strong>{post.title}</strong></p>
-          <p id="date">{new Date(post.published_at).toLocaleDateString()}</p>
-          </div>
-        </a>
-      )}
-    </div>
+    <Posts/>
   </Fragment>
 </Default>
 

src/pages/index.astro

@@ -7,12 +7,6 @@ import Hero from "@components/Hero.astro";
 import Heading from "@components/Heading.astro";
 import Posts from "@components/blog/posts.astro";
 import LargeCard from "@components/Feature.astro";
-import {Zorn} from "@minpluto/zorn"
-
-// List Posts
-const GhostFetch = 'https://blog.ghost.sudovanilla.org/ghost/api/content/posts/?key=bef2ed15d9e38f7703be9412b3'
-const GhostResponse = await fetch(GhostFetch);
-const Ghost = await GhostResponse.json();
 
 // Icons
 import { BookmarkBook, ReportColumns } from "@iconoir/vue";
@@ -32,18 +26,7 @@ import { BookmarkBook, ReportColumns } from "@iconoir/vue";
         <BookmarkBook width={32} height={32} />
       </slot>
     </Heading>
-    <div class="posts">
-      {Ghost.posts.map((post) =>
-        <a href={'/blog/' + post.slug + '?postid=' + post.id} class="card-post">
-          <img id="bg" src={post.custom_excerpt.image} />
-          <img src={post.custom_excerpt} />
-          <div class="card-post-content">
-          <p><strong>{post.title}</strong></p>
-          <p id="date">{new Date(post.published_at).toLocaleDateString()}</p>
-          </div>
-        </a>
-      )}
-    </div>
+    <Posts/>
     <Heading Title="Projects" Description="What I've Made">
       <slot slot="icon">
         <ReportColumns width={32} height={32} />

tsconfig.json

@@ -5,6 +5,9 @@
       "@components/*": [
         "src/components/*"
       ],
+      "@library/*": [
+        "src/library/*"
+      ],
       "@layouts/*": [
         "src/layouts/*"
       ],