HS

Signed-off-by: Max Schmidt <max.schmidt@outlook.de>

astro/src/pages/index.astro

@@ -1,11 +1,8 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import type { Post } from "../types";
+import { getPosts } from "../utils/payload";
 
-const posts: Post[] = (
-  await (await fetch("http://payload:3001/api/posts")).json()
-).docs;
-posts.forEach((post) => console.log(post.title));
+const posts = await getPosts();
 ---
 
 <Layout title="Welcome to Astroad">

astro/src/pages/posts/[id].astro

@@ -1,26 +1,31 @@
 ---
 import Layout from "../../layouts/Layout.astro";
-import type { Post } from "../../types";
-
 import RichText from "../../components/RichText.astro";
+import type { Post } from "../../types";
+import { getPost, getPosts } from "../../utils/payload";
+
 export async function getStaticPaths() {
-  const paths = (
-    await (await fetch("http://payload:3001/api/posts")).json()
-  ).docs.map((post: Post) => ({
+  const posts = await getPosts();
+  const paths = posts.map((post: Post) => ({
     params: { id: post.id },
   }));
   return paths;
 }
+
 const { id } = Astro.params;
-const post = (await (
-  await fetch(`http://payload:3001/api/posts/${id}`)
-).json()) as Post;
+const post = id && (await getPost(id));
 ---
 
-<Layout title={post.title!}>
-  <div class="max-w-3xl mx-auto space-y-3 my-3">
-    <a href="/">BACK</a>
-    <h1>{post.title}</h1>
-    {post.content && <RichText content={post.content} />}
-  </div>
-</Layout>
+{
+  post ? (
+    <Layout title={post.title!}>
+      <div class="max-w-3xl mx-auto space-y-3 my-3">
+        <a href="/">BACK</a>
+        <h1>{post.title}</h1>
+        {post.content && <RichText content={post.content} />}
+      </div>
+    </Layout>
+  ) : (
+    <div>404</div>
+  )
+}