Add first view

Lets use Nunjucks to render something to the user. For now we just want to list all the names of the repos.
dxw · Sep 5, 2024 · 778572b · 778572b
1 parent 8c1958b
commit 778572b
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 1 deletion.
diff --git a/index.js b/index.js
@@ -1,5 +1,11 @@
 import { createServer } from "http";
 import { Octokit } from "@octokit/rest";
+import nunjucks from "nunjucks";
+
+nunjucks.configure({
+  autoescape: true,
+  watch: true,
+});
 
 const ACCESS_TOKEN = process.env.GITHUB_PERSONAL_ACCESS_TOKEN;
 
@@ -10,7 +16,11 @@ const octokit = new Octokit({
 const httpServer = createServer(async (_, response) => {
   const repos = await getRepos({ org: "dxw" });
 
-  return response.end(JSON.stringify(repos));
+  const template = nunjucks.render("index.njk", {
+    repos,
+  });
+
+  return response.end(template);
 });
 
 const getRepos = async ({ org }) => {

diff --git a/index.njk b/index.njk
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Towtruck</title>
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="styles/styles.css" />
+  </head>
+  <body>
+    <h1>Towtruck</h1>
+
+    <table>
+      <caption>
+        dxw's repos
+      </caption>
+      <thead>
+        <tr>
+          <th scope="col">Name</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for repo in repos %}
+        <tr>
+          <td>{{ repo.name }}</td>
+        </tr>
+        {% else %}
+        <tr>
+          <td>No repos found</td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </body>
+</html>