the actual commit

Author: ajtatey

package-lock.json

@@ -0,0 +1,16 @@
+{
+  "dinosaurs": [
+    {
+      "name": "Tyrannosaurus Rex",
+      "description": "A massive carnivorous dinosaur with powerful jaws and tiny arms."
+    },
+    {
+      "name": "Brachiosaurus",
+      "description": "A huge herbivorous dinosaur with a very long neck."
+    },
+    {
+      "name": "Velociraptor",
+      "description": "A small but fierce predator that hunted in packs."
+    }
+  ]
+}

src/data/dinosaurs.json

@@ -0,0 +1,31 @@
+import { component$ } from "@builder.io/qwik";
+import { Link, routeLoader$ } from "@builder.io/qwik-city";
+import type { Dino } from "~/types";
+import { loadDinoData } from "~/utils/loadData";
+
+export const useDinosaurDetails = routeLoader$(({ params }) => {
+  const dinosaurs = loadDinoData();
+  const dinosaur = dinosaurs.find(
+    (dino) => dino.name.toLowerCase() === params.name.toLowerCase()
+  );
+
+  if (!dinosaur) {
+    throw new Error("Dinosaur not found");
+  }
+
+  return dinosaur;
+});
+
+export default component$(() => {
+  const dinosaurSignal = useDinosaurDetails();
+
+  return (
+    <div class="container mx-auto p-4">
+      <h1 class="text-3xl font-bold mb-4">{dinosaurSignal.value.name}</h1>
+      <p class="mb-4">{dinosaurSignal.value.description}</p>
+      <Link href="/" class="text-blue-600 hover:underline">
+        Back to all dinosaurs
+      </Link>
+    </div>
+  );
+});

src/routes/[name]/index.tsx

@@ -0,0 +1,23 @@
+import { RequestHandler } from "@builder.io/qwik-city";
+import { loadDinoData } from "~/utils/loadData";
+
+export const onGet: RequestHandler = async ({ params, json }) => {
+  const { name } = params;
+  const dinosaurs = loadDinoData();
+
+  if (!name) {
+    json(400, { error: "No dinosaur name provided." });
+    return;
+  }
+
+  const dinosaur = dinosaurs.find(
+    (dino) => dino.name.toLowerCase() === name.toLowerCase()
+  );
+
+  if (!dinosaur) {
+    json(404, { error: "No dinosaur found." });
+    return;
+  }
+
+  json(200, dinosaur);
+};

src/routes/api/dinosaurs/[name]/index.ts

@@ -0,0 +1,7 @@
+import { RequestHandler } from "@builder.io/qwik-city";
+import { loadDinoData } from "~/utils/loadData";
+
+export const onGet: RequestHandler = async ({ json }) => {
+  const dinosaurs = loadDinoData();
+  json(200, dinosaurs);
+};

src/routes/api/dinosaurs/index.ts

@@ -1,25 +1,31 @@
 import { component$ } from "@builder.io/qwik";
-import type { DocumentHead } from "@builder.io/qwik-city";
+import { Link, routeLoader$ } from "@builder.io/qwik-city";
+import type { Dino } from "~/types";
+import { loadDinoData } from "~/utils/loadData";
+
+export const useDinosaurs = routeLoader$(() => {
+  return loadDinoData();
+});
 
 export default component$(() => {
+  const dinosaursSignal = useDinosaurs();
+
   return (
-    <>
-      <h1>Hi 👋</h1>
-      <div>
-        Can't wait to see what you build with qwik!
-        <br />
-        Happy coding.
-      </div>
-    </>
+    <div class="container mx-auto p-4">
+      <h1 class="text-3xl font-bold mb-4">Welcome to the Dinosaur app</h1>
+      <p class="mb-4">Click on a dinosaur below to learn more.</p>
+      <ul class="space-y-2">
+        {dinosaursSignal.value.map((dinosaur) => (
+          <li key={dinosaur.name}>
+            <Link
+              href={`/${dinosaur.name.toLowerCase()}`}
+              class="text-blue-600 hover:underline"
+            >
+              {dinosaur.name}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
   );
 });
-
-export const head: DocumentHead = {
-  title: "Welcome to Qwik",
-  meta: [
-    {
-      name: "description",
-      content: "Qwik site description",
-    },
-  ],
-};

src/routes/index.tsx

@@ -1,17 +1,11 @@
 import { component$, Slot } from "@builder.io/qwik";
-import type { RequestHandler } from "@builder.io/qwik-city";
-
-export const onGet: RequestHandler = async ({ cacheControl }) => {
-  // Control caching for this request for best performance and to reduce hosting costs:
-  // https://qwik.dev/docs/caching/
-  cacheControl({
-    // Always serve a cached response by default, up to a week stale
-    staleWhileRevalidate: 60 * 60 * 24 * 7,
-    // Max once every 5 seconds, revalidate on the server to get a fresh version of this page
-    maxAge: 5,
-  });
-};
 
 export default component$(() => {
-  return <Slot />;
+  return (
+    <>
+      <main>
+        <Slot />
+      </main>
+    </>
+  );
 });

src/routes/layout.tsx

@@ -0,0 +1,4 @@
+export type Dino = {
+  name: string;
+  description: string;
+};

src/types.tsx

@@ -0,0 +1,8 @@
+import fs from "node:fs";
+import path from "node:path";
+
+export function loadDinoData() {
+  const filePath = path.join(process.cwd(), "src", "data", "dinosaurs.json");
+  const fileContent = fs.readFileSync(filePath, "utf-8");
+  return JSON.parse(fileContent).dinosaurs;
+}