components/TorNotice: parameterize; make table size dynamic

Signed-off-by: NotAShelf <raf@notashelf.dev>
Change-Id: I81d557f238afc3aa44dd3adb3acd769c6a6a6964

src/components/TorNotice.astro

@@ -1,12 +1,25 @@
 ---
+interface Props {
+  torUrl: string;
+}
 
+const { torUrl } = Astro.props;
+
+const headerText = "This site is accessible via Tor!";
+const maxLine = torUrl.length > headerText.length ? torUrl.length : headerText.length;
+
+// Account for padding and borders: +2 for borders, +2 for padding spaces
+const tableWidth = maxLine + 4;
+
+const borderTop = "+" + "-".repeat(tableWidth) + "+";
+const borderBottom = "+" + "-".repeat(tableWidth) + "+";
 ---
 
 <div class="section tor-notice">
   <pre>
-+----------------------------------------------------------------+
+{borderTop}
-|                This site is accessible via Tor!                |
+|{" ".repeat(Math.floor((tableWidth - headerText.length) / 2))}{headerText}{" ".repeat(Math.ceil((tableWidth - headerText.length) / 2))}|
-| <a href="http://frzndev32nhnla77oozhxhz5yzo4abldr6zbc4qkdh5hcyanizlxs2ad.onion/">frzndev32nhnla77oozhxhz5yzo4abldr6zbc4qkdh5hcyanizlxs2ad.onion</a> |
+|{" ".repeat(Math.floor((tableWidth - torUrl.length) / 2))}<a href={torUrl}>{torUrl}</a>{" ".repeat(Math.ceil((tableWidth - torUrl.length) / 2))}|
-+----------------------------------------------------------------+
+{borderBottom}
   </pre>
 </div>

src/pages/index.astro

@@ -69,7 +69,7 @@ const currentYear = new Date().getFullYear();
 
 <Layout title="frzn.dev" currentYear={currentYear}>
   <div>
-    <TorNotice />
+    <TorNotice torUrl="http://frzndev32nhnla77oozhxhz5yzo4abldr6zbc4qkdh5hcyanizlxs2ad.onion/" />
     <MemberList members={users} />
     <ServicesTable services={services} />
   </div>