HS

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

astro/src/components/RichText.astro

@@ -9,7 +9,7 @@ const contentArray = getContentArray(content);
   {
     contentArray.map((value) => {
       if (typeof value === "string") {
-        return <div set:html={value} />;
+        return <article set:html={value} />;
       } else {
         return (
           <Image

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>
+  )
+}

astro/src/utils/helpers.ts

@@ -1,8 +1,4 @@
-import {
-  payloadSlateToDomConfig,
-  SlateToDomConfig,
-  slateToHtml,
-} from "slate-serializers";
+import { payloadSlateToDomConfig, slateToHtml } from "slate-serializers";
 import { Element } from "domhandler";
 
 export const getContentArray = (content: any) => {

astro/src/utils/payload.ts

@@ -0,0 +1,7 @@
+import type { Post } from "../types";
+
+export const getPosts = async () =>
+  (await (await fetch("http://payload:3001/api/posts")).json()).docs as Post[];
+
+export const getPost = async (id: string) =>
+  (await (await fetch(`http://payload:3001/api/posts/${id}`)).json()) as Post;

payload/src/collections/Posts.ts

@@ -23,6 +23,8 @@ const Posts: CollectionConfig = {
       name: "content",
       type: "richText",
       admin: {
+        elements: ["h2", "h3", "h4", "link", "ol", "ul", "upload"],
+        leaves: ["bold", "italic", "underline"],
         upload: {
           collections: {
             media: {