Use Tailwind for basic styling

[Tailwind](https://tailwindcss.com/) is a CSS framework designed to provide a collection of composable classes that can be combined to style elements in a visually coherent way. Typically, Tailwind is used a `devDependency` and built to ensure a minimal amount of CSS is used. However, in the spirit of being as straightforward to maintain as possible, instead this just includes the Tailwind CDN script in the `index.njk` template. The visual changes include: - Making the 'Towtruck' title prominent in a header bar - A card-style interface showing the table of repositories for each GitHub installation - A basic table layout with alternating row colours for easier visual identification.
dxw · Sep 9, 2024 · c1cae09 · c1cae09
1 parent eb127da
commit c1cae09
Showing 1 changed file with 41 additions and 25 deletions.
diff --git a/index.njk b/index.njk
@@ -6,31 +6,47 @@
     <title>Towtruck</title>
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="stylesheet" href="styles/styles.css" />
+    <script src="https://cdn.tailwindcss.com"></script>
   </head>
-  <body>
-    <h1>Towtruck</h1>
-    <table>
-      <caption>
-        {{ name }}'s repos
-      </caption>
-      <thead>
-        <tr>
-          <th scope="col">Name</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for repo in installation.repos %}
-        <tr>
-          <td>{{ repo.name }}</td>
-        </tr>
-        {% else %}
-        <tr>
-          <td>No repos found</td>
-        </tr>
-        {% endfor %}
-      </tbody>
-    </table>
-    {% endfor %}
+  <body class="bg-stone-100 text-stone-800">
+    <header class="bg-white">
+      <nav class="w-full flex p-6 border-b-4 border-stone-200">
+        <h1 class="text-3xl">Towtruck</h1>
+      </nav>
+    </header>
+
+    <div class="container mx-auto flex flex-col mt-6 space-y-6">
+      <div class="bg-stone-50 overflow-hidden rounded-lg border-b-4 border-stone-200 space-y-4">
+        <h2 class="bg-white border-b-2 border-stone-100 text-xl font-bold p-4">{{ name }}</h2>
+        <p class="mx-4">
+          {% if repos.length === 1 %}
+          There is <span class="font-bold">1</span> repository
+          {% else %} 
+          There are <span class="font-bold">{{ repos.length }}</span> repositories
+          {% endif %}
+          that Towtruck is tracking for <span class="font-bold">{{ name }}</span>.
+        </p>
+        <div class="mx-4">
+          <table class="table-auto w-full mb-4 border-y border-stone-200">
+            <thead class="bg-white border-b border-stone-200 text-left">
+              <tr class="space-x-2">
+                <th class="py-2 pl-2 last:pr-2" scope="col">Name</th>
+              </tr>
+            </thead>
+            <tbody>
+              {% for repo in repos %}
+              <tr class="even:bg-white">
+                <td class="py-2 pl-2 last:pr-2">{{ repo.name }}</td>
+              </tr>
+              {% else %}
+              <tr>
+                <td class="py-2 px-2 text-center text-stone-400 font-light italic">No repositories found.</td>
+              </tr>
+              {% endfor %}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
   </body>
 </html>