add astro posts page

README.md

@@ -14,6 +14,8 @@ A repository to showcase different ways to fetch data in React.
 ## Static Site Generation (SSG)
 
 - [2-1-nextjs-ssg](./apps/2-ssg/2-1-nextjs-ssg) - `pnpm dev2-1`
+- [2-2-astro-ssg](./apps/2-ssg/2-2-astro-ssg) - `pnpm dev2-2`
+- [2-3-astro-react-ssg](./apps/2-ssg/2-3-astro-react-ssg) - `pnpm dev2-3`
 
 ## Server-Side Rendering (SSR)
 

apps/2-ssg/2-2-astro-ssg/package.json

@@ -3,9 +3,9 @@
   "type": "module",
   "version": "0.0.1",
   "scripts": {
-    "dev": "astro dev -p 3332",
+    "dev": "astro dev --port 3332",
     "build": "astro build",
-    "preview": "astro preview",
+    "preview": "astro preview --port 3332",
     "astro": "astro"
   },
   "dependencies": {

apps/2-ssg/2-2-astro-ssg/src/layouts/Layout.astro

@@ -50,7 +50,7 @@ import "./src/styles/global.css";
       </nav>
 
       <!-- Main Content -->
-      <main class="flex-1 p-4">
+      <main class="flex-1 p-4 max-w-[1400px] mx-auto">
         <slot />
       </main>
     </div>

apps/2-ssg/2-2-astro-ssg/src/pages/posts/[id].astro

@@ -0,0 +1,75 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import { type IComment, type IPost, type IUser } from "../../api-types";
+
+export async function getStaticPaths() {
+  const response = await fetch(`http://localhost:3300/posts`);
+  const posts = (await response.json()) as IPost[];
+
+  return posts.map((post) => ({
+    params: { id: post.id.toString() },
+  }));
+}
+
+const { id } = Astro.params;
+
+let post: IPost;
+let comments: IComment[];
+let user: IUser;
+
+try {
+  const [postResponse, commentsResponse] = await Promise.all([
+    fetch(`http://localhost:3300/posts/${id}`),
+    fetch(`http://localhost:3300/posts/${id}/comments`),
+  ]);
+
+  [post, comments] = (await Promise.all([
+    postResponse.json(),
+    commentsResponse.json(),
+  ])) as [IPost, IComment[]];
+
+  const userResponse = await fetch(
+    `http://localhost:3300/users/${post.userId}`
+  );
+  user = (await userResponse.json()) as IUser;
+} catch (error) {
+  console.error(error);
+  return Astro.redirect("/error");
+}
+---
+
+<Layout title={`Post ${id}`}>
+  <div class="space-y-6">
+    <div>
+      <h1 class="text-3xl font-bold mb-2">Post: {post.id}</h1>
+      <h2 class="text-2xl font-bold mb-2">{post.title}</h2>
+      <h3 class="text-xl font-bold mb-4">
+        By: <a
+          href={`/users/${user.id}`}
+          class="text-blue-600 hover:text-blue-800 no-underline">{user.name}</a
+        >
+      </h3>
+      <p class="my-6 text-gray-700">
+        {post.body}. {post.body}. {post.body}. {post.body}. {post.body}.
+      </p>
+    </div>
+
+    <div class="flex justify-between items-center">
+      <h3 class="text-xl font-bold">Comments on this Post</h3>
+    </div>
+
+    <div class="space-y-6">
+      {
+        comments.map((comment) => (
+          <div class="p-4 rounded-lg border border-gray-200 shadow-sm">
+            <h4 class="text-lg font-bold mb-1">{comment.name}</h4>
+            <h5 class="text-md font-medium text-gray-600 mb-2">
+              {comment.email}
+            </h5>
+            <p class="text-gray-700">{comment.body}</p>
+          </div>
+        ))
+      }
+    </div>
+  </div>
+</Layout>

apps/3-ssr/3-1-nextjs-ssr/tsconfig.json

@@ -1,6 +1,10 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -13,9 +17,18 @@
     "jsx": "preserve",
     "incremental": true,
     "paths": {
-      "@/*": ["./src/*"]
-    }
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "target": "ES2017"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

package.json

@@ -9,6 +9,8 @@
     "dev1-3": "turbo dev --filter 1-3-vite-reactquery",
     "dev1-4": "turbo dev --filter 1-4-vite-reactquery-refactor",
     "dev2-1": "turbo dev --filter 2-1-nextjs-ssg",
+    "dev2-2": "turbo dev --filter 2-2-astro-ssg",
+    "dev2-3": "turbo dev --filter 2-3-astro-react-ssg",
     "dev3-1": "turbo dev --filter 3-1-nextjs-ssr",
     "dev3-2": "turbo dev --filter 3-2-remix-ssr",
     "dev3-3": "turbo dev --filter 3-3-sveltekit-ssr",