HEEE

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

astro/src/pages/index.astro

@@ -1,91 +1,29 @@
 ---
-import Layout from '../layouts/Layout.astro';
-import Card from '../components/Card.astro';
-import type { Post } from '../types';
+import Layout from "../layouts/Layout.astro";
+import type { Post } from "../types";
 
-const posts: Post[] = (await(await fetch("http://payload:3001/api/posts")).json()).docs;
-posts.forEach(post=> console.log(post.title));
+const posts: Post[] = (
+  await (await fetch("http://payload:3001/api/posts")).json()
+).docs;
+posts.forEach((post) => console.log(post.title));
 ---
 
-<Layout title="Welcome to Astro.">
-	<main>
-		{posts.reverse().map(post => (
-			<article>
-				<h2>{post.title}</h2>
-				<p>{post.updatedAt}</p>
-			</article>
-		))}
-		<h1>Welcome to <span class="text-gradient">Astro</span></h1>
-		<p class="instructions">
-			To get started, open the directory <code>src/pages</code> in your project.<br />
-			<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
-		</p>
-		<ul role="list" class="link-card-grid">
-			<Card
-				href="https://docs.astro.build/"
-				title="Documentation"
-				body="Learn how Astro works and explore the official API docs."
-			/>
-			<Card
-				href="https://astro.build/integrations/"
-				title="Integrations"
-				body="Supercharge your project with new frameworks and libraries."
-			/>
-			<Card
-				href="https://astro.build/themes/"
-				title="Themes"
-				body="Explore a galaxy of community-built starter themes."
-			/>
-			<Card
-				href="https://astro.build/chat/"
-				title="Community"
-				body="Come say hi to our amazing Discord community. ❤️"
-			/>
-		</ul>
-	</main>
+<Layout title="Welcome to Astroad">
+  <main class="flex flex-col items-center py-10 gap-5">
+    <h1>This is Astroad</h1>
+    {
+      posts ? (
+        posts.reverse().map((post) => (
+          <a href={`/posts/${post.id}`}>
+            <article class="text-teal-950 bg-yellow-100 px-5 py-3 rounded-md shadow-md w-64 text-center">
+              <h2>{post.title}</h2>
+              <p>{new Date(post.updatedAt).toLocaleDateString("de-DE")}</p>
+            </article>
+          </a>
+        ))
+      ) : (
+        <p>No posts...</p>
+      )
+    }
+  </main>
 </Layout>
-
-<style>
-	main {
-		margin: auto;
-		padding: 1.5rem;
-		max-width: 60ch;
-	}
-	h1 {
-		font-size: 3rem;
-		font-weight: 800;
-		margin: 0;
-	}
-	.text-gradient {
-		background-image: var(--accent-gradient);
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-size: 400%;
-		background-position: 0%;
-	}
-	.instructions {
-		line-height: 1.6;
-		margin: 1rem 0;
-		border: 1px solid rgba(var(--accent), 25%);
-		background-color: white;
-		padding: 1rem;
-		border-radius: 0.4rem;
-	}
-	.instructions code {
-		font-size: 0.875em;
-		font-weight: bold;
-		background: rgba(var(--accent), 12%);
-		color: rgb(var(--accent));
-		border-radius: 4px;
-		padding: 0.3em 0.45em;
-	}
-	.instructions strong {
-		color: rgb(var(--accent));
-	}
-	.link-card-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
-		gap: 1rem;
-		padding: 0;
-	}
-</style>

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

@@ -0,0 +1,93 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import { Element } from "domhandler";
+import type { Post } from "../../types";
+import { Image } from "@astrojs/image/components";
+import {
+  slateToHtml,
+  payloadSlateToDomConfig,
+  SlateToDomConfig,
+} from "slate-serializers";
+export async function getStaticPaths() {
+  const paths = (
+    await (await fetch("http://payload:3001/api/posts")).json()
+  ).docs.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 test: SlateToDomConfig = {
+  ...payloadSlateToDomConfig,
+  elementTransforms: {
+    ...payloadSlateToDomConfig.elementTransforms,
+    upload: ({ node }) =>
+      new Element("img", {
+        src: node.value.filename,
+        width: `${node.value.width}`,
+        height: `${node.value.height}`,
+      }),
+  },
+};
+
+const html = slateToHtml(post.content!, test).replaceAll(
+  "<p></p>",
+  "<p>&nbsp;</p>"
+);
+
+const htmlImageArray: (
+  | string
+  | { src: string; width: number; height: number }
+)[] = [];
+let lastIndex = 0;
+while (true) {
+  const imgStartIndex = html.indexOf("<img", lastIndex);
+  if (imgStartIndex === -1) {
+    htmlImageArray.push(html.substring(lastIndex));
+    break;
+  }
+  const imgEndIndex = html.indexOf(">", imgStartIndex) + 1;
+  const imgTag = html.substring(imgStartIndex, imgEndIndex);
+  const remainingHtml = html.substring(lastIndex, imgStartIndex);
+  const imgObject = {
+    src: imgTag.match(/src="(.*?)"/)![1],
+    width: +imgTag.match(/width="(.*?)"/)![1],
+    height: +imgTag.match(/height="(.*?)"/)![1],
+  };
+  htmlImageArray.push(remainingHtml, imgObject);
+  lastIndex = imgEndIndex;
+}
+console.log(htmlImageArray);
+---
+
+<Layout title={post.title!}>
+  <h1>{id}</h1>
+  {
+    htmlImageArray.map((value) => {
+      if (typeof value === "string") {
+        return <div set:html={value} class="whitespace-pre-wrap" />;
+      } else {
+        return (
+          <Image
+            src={`http://payload:3001/media/${value.src}`}
+            width={value.width}
+            height={value.height}
+            format="webp"
+            alt="hallo"
+          />
+        );
+      }
+    })
+  }
+</Layout>
+<style>
+  p:empty {
+    display: block;
+    content: "\00a0";
+    margin: 0;
+    padding: 0;
+  }
+</style>