Reorganize pages/components

astro/src/components/astro/posts.astro

@@ -0,0 +1,25 @@
+---
+// const { posts } = Astro.props;
+import { getPosts } from "@/utils/payload";
+const posts = await getPosts();
+
+---
+
+      {
+        posts.length > 0 ? (
+          posts.map((post) => (
+            <a href={`/posts/${post.id}/`}>
+              <article class="text-gray bg-gray-light px-5 py-3 rounded-md shadow-md w-64 text-center hover:-translate-y-1 transition-transform">
+                <h3 class="font-bold text-lg" transition:name=`title-${post.id}`>{post.title}</h3>
+                {post.publishedDate && (
+                  <p>
+                    {new Date(post.publishedDate).toLocaleDateString("de-DE")}
+                  </p>
+                )}
+              </article>
+            </a>
+          ))
+        ) : (
+          <p>Add Posts in Payloadcms</p>
+        )
+      }

astro/src/pages/index.astro

@@ -1,46 +1,12 @@
 ---
-import BaseLayout from "@/layouts/BaseLayout.astro";
-//import { getPosts } from "@/utils/payload";
-//const posts = await getPosts();
-
 import '../styles/global.css'
+import BaseLayout from "@/layouts/BaseLayout.astro";
+import { App } from "@/components/App"
 ---
-
-<BaseLayout title="Astroad">
+<BaseLayout title="Kios">
   <main class="" >
-    <h1 class="font-bold text-5xl">Astroad</h1>
-    <p class="mt-3 text-lg">
-      Astroad is a pre-configured setup for Astro and Payloadcms that makes it
-      easy to get started with building your website. With Astroad, you'll have
-      a complete development environment that you can run locally using Docker.
-      This makes it easy to test and develop your website before deploying it to
-      a production environment.
-      <br />
-       When you're ready to deploy the website on your own server, Astrotus
-      comes with a production environment that requires the use of Traefik as a
-      reverse proxy. This setup provides a secure and scalable production
-      environment for your website.
-    </p>
-    <h2 class="mt-6 font-bold text-2xl">Posts</h2>
-    <div class="flex gap-4 mt-3 flex-wrap">
-      <!-- {
-        posts.length > 0 ? (
-          posts.map((post) => (
-            <a href={`/posts/${post.id}/`}>
-              <article class="text-gray bg-gray-light px-5 py-3 rounded-md shadow-md w-64 text-center hover:-translate-y-1 transition-transform">
-                <h3 class="font-bold text-lg" transition:name=`title-${post.id}`>{post.title}</h3>
-                {post.publishedDate && (
-                  <p>
-                    {new Date(post.publishedDate).toLocaleDateString("de-DE")}
-                  </p>
-                )}
-              </article>
-            </a>
-          ))
-        ) : (
-          <p>Add Posts in Payloadcms</p>
-        )
-      } -->
-    </div>
-  </main>
+  <App
+    client:only="react" 
+  />
+</main>
 </BaseLayout>

astro/src/types.ts

@@ -8,7 +8,6 @@
 
 export interface Config {
   collections: {
-    posts: Post;
     users: User;
     media: Media;
     couriers: Courier;
@@ -19,18 +18,6 @@ export interface Config {
   };
   globals: {};
 }
-export interface Post {
-  id: string;
-  title?: string;
-  hallo?: string;
-  publishedDate?: string;
-  content?: {
-    [k: string]: unknown;
-  }[];
-  status?: 'draft' | 'published';
-  updatedAt: string;
-  createdAt: string;
-}
 export interface User {
   id: string;
   name: string;

payload/src/payload.config.ts

@@ -25,7 +25,7 @@ export default buildConfig({
     }),
   },
   collections: [
-    Posts,
+    // Posts,
     Users,
     Media,
     Couriers,