refactor: change the writeup header

src/pages/writeups/[ctf]/[year]/[category]/[name].astro

@@ -26,6 +26,15 @@ type Props = WriteUp;
 
 const writeup = Astro.props;
 const { Content } = await writeup.render();
+
+const items = {
+  author: writeup.data.author,
+  category: writeup.category,
+  points: writeup.data.points,
+  solves: writeup.data.solves,
+};
+
+let maxWidth = Math.max(...Object.keys(items).map((key) => key.length));
 ---
 
 <PageLayout title={writeup.data.title} description={writeup.data.description}>
@@ -54,27 +63,21 @@ const { Content } = await writeup.render();
       </div>
 
       <section class="animate">
-        <!-- create table with Points, Solves, points: X \nsolves: X -->
-        <table class="table-auto">
-          <tbody>
-            <tr>
-              <td class="font-semibold">Category</td>
-              <td>{writeup.category}</td>
-            </tr>
-            <tr>
-              <td class="font-semibold">Points</td>
-              <td>{writeup.data.points}</td>
-            </tr>
-            <tr>
-              <td class="font-semibold">Solves</td>
-              <td>{writeup.data.solves}</td>
-            </tr>
-            <tr>
-              <td class="font-semibold">Author</td>
-              <td>{writeup.data.author}</td>
-            </tr>
-          </tbody>
-        </table>
+        <div class="flex flex-col text-left">
+          {
+            Object.entries(items).map(([key, value]) => {
+              const padding = "&nbsp;".repeat(maxWidth - key.length);
+              return (
+                <div class="inline">
+                  <span>{key}</span>
+                  <span set:html={padding} />
+                  {" -> "}
+                  <span class="font-semibold">{value}</span>
+                </div>
+              );
+            })
+          }
+        </div>
       </section>
 
       <article class="animate">