Merge pull request #7 from nyaomaru/deno-study-5

study: fetch data and docker

.editorconfig

@@ -0,0 +1,15 @@
+# top-most EditorConfig file
+root = true
+
+# All files.
+[*]
+end_of_line = LF
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.{md,mdx}]
+indent_size = 2
+trim_trailing_whitespace = false

Dockerfile

@@ -0,0 +1,13 @@
+FROM denoland/deno:1.45.5
+
+ARG GIT_REVISION
+ENV DENO_DEPLOYMENT_ID=${GIT_REVISION}
+
+WORKDIR /app
+
+COPY . .
+RUN deno cache main.ts
+
+EXPOSE 8000
+
+CMD ["run", "-A", "main.ts"]

fresh.gen.ts

@@ -15,6 +15,7 @@ import * as $greet_name_ from "./routes/greet/[name].tsx";
 import * as $greet_middleware from "./routes/greet/_middleware.ts";
 import * as $index from "./routes/index.tsx";
 import * as $partials_about_id_ from "./routes/partials/about/[id].tsx";
+import * as $projects_id_ from "./routes/projects/[id].tsx";
 import * as $search from "./routes/search.tsx";
 import * as $subscribe from "./routes/subscribe.tsx";
 import * as $Countdown from "./islands/Countdown.tsx";
@@ -37,6 +38,7 @@ const manifest = {
     "./routes/greet/_middleware.ts": $greet_middleware,
     "./routes/index.tsx": $index,
     "./routes/partials/about/[id].tsx": $partials_about_id_,
+    "./routes/projects/[id].tsx": $projects_id_,
     "./routes/search.tsx": $search,
     "./routes/subscribe.tsx": $subscribe,
   },

routes/index.tsx

@@ -4,7 +4,7 @@ import Counter from "../islands/Counter.tsx";
 
 const nameList = ["Alice", "Bob", "Charlie", "David", "Eve"];
 
-export const handler: Handlers<any, { data: string }> = {
+export const handler: Handlers<unknown, { data: string }> = {
   GET(_req, ctx) {
     return ctx.render(ctx.state.data);
   },
@@ -35,6 +35,12 @@ export default function Home({ data }: PageProps<string>) {
         <Link text="Go Search Page" href="search" />
         <Link text="Go Countdown Page" href="countdown" />
       </div>
+      <div class="my-4">
+        <Link
+          text="Go Projects Page"
+          href={`projects/${Math.round(Math.random()) + 1}`}
+        />
+      </div>
 
       <p class="my-4">
         Server response data: <span id="data">{data}</span>

routes/projects/[id].tsx

@@ -0,0 +1,42 @@
+import { Handlers, PageProps } from "$fresh/server.ts";
+
+const projects = [{ id: 1, name: "Project 1", stars: 10 }, {
+  id: 2,
+  name: "Project 2",
+  stars: 20,
+}];
+
+interface Project {
+  name: string;
+  stars: number;
+  message?: string;
+}
+
+export const handler: Handlers<Project> = {
+  async GET(_req, ctx) {
+    const project = await projects.find((project) =>
+      project.id === Number(ctx.params.id)
+    );
+    if (!project) {
+      return ctx.renderNotFound({
+        name: "",
+        stars: 0,
+        message: "Project does not exist",
+      });
+    }
+    return ctx.render(project);
+  },
+};
+
+export default function ProjectPage(props: PageProps<Project>) {
+  if (props.data.message) {
+    return <h1 class="text-4xl font-bold">{props.data.message}</h1>;
+  }
+
+  return (
+    <div>
+      <h1 class="text-4xl font-bold">{props.data.name}</h1>
+      <p>{props.data.stars} stars</p>
+    </div>
+  );
+}