From 5658441ab9b703c95a48e654d41e45cc3a55ffd3 Mon Sep 17 00:00:00 2001
From: Pinapelz <yukais@pinapelz.com>
Date: Fri, 28 Nov 2025 22:46:47 -0500
Subject: middleware: migrate to tailwindcss

---
 middleware/src/app/[gameName]/page.tsx | 203 ++++++---------------------------
 middleware/src/app/globals.css         |  73 +-----------
 2 files changed, 33 insertions(+), 243 deletions(-)

(limited to 'middleware/src')

diff --git a/middleware/src/app/[gameName]/page.tsx b/middleware/src/app/[gameName]/page.tsx
index f87edc1..ed5361a 100644
--- a/middleware/src/app/[gameName]/page.tsx
+++ b/middleware/src/app/[gameName]/page.tsx
@@ -91,7 +91,7 @@ export async function generateMetadata({
         const images = imagesResult.rows.map((img) => ({
           image: img.image_url,
           link: img.link_url,
-        }));
+      }));
         const dbPost = {
           news_id: row.news_id,
           date: row.date,
@@ -356,92 +356,36 @@ function NewsPostPage({
     : null;
 
   return (
-    <main
-      style={{
-        minHeight: "100vh",
-        color: "white",
-        fontFamily: "system-ui, -apple-system, sans-serif",
-      }}
-    >
-      <div style={{
-        width: '100%',
-        maxWidth: '600px',
-        margin: '0 auto',
-        padding: '10px',
-        paddingTop: '20px',
-        paddingBottom: '20px',
-        boxSizing: 'border-box'
-      }}>
-        <div style={{
-          backgroundColor: '#1e293b',
-          border: '1px solid #334155',
-          borderRadius: '8px',
-          boxShadow: '0 10px 20px -5px rgba(0, 0, 0, 0.3)',
-          overflow: 'hidden',
-          width: '100%',
-          boxSizing: 'border-box'
-        }}>
+    <main className="min-h-screen text-white font-sans bg-black">
+      <div className="w-full max-w-xl mx-auto px-3 sm:px-4 py-5 box-border">
+        <div className="w-full bg-slate-800 border border-slate-700 rounded-lg shadow-xl shadow-black/30 overflow-hidden box-border">
           {/* Post Header */}
-          <div style={{
-            padding: '12px',
-            borderBottom: '1px solid #475569'
-          }}>
-            <div style={{
-              fontSize: '13px',
-              opacity: 0.8,
-              marginBottom: '6px',
-              color: '#94a3b8'
-            }}>
+          <div className="p-3 border-b border-slate-600">
+            <div className="text-[13px] text-slate-400/80 mb-1.5">
               {date}
             </div>
             {newsPost.type && (
-              <div style={{
-                fontSize: '12px',
-                fontStyle: 'italic',
-                opacity: 0.8,
-                color: '#64748b',
-                backgroundColor: '#334155',
-                padding: '3px 6px',
-                borderRadius: '3px',
-                display: 'inline-block'
-              }}>
+              <div className="inline-block text-[12px] italic text-slate-400 bg-slate-700 px-1.5 py-0.5 rounded">
                 {newsPost.type}
               </div>
             )}
           </div>
 
           {/* Content */}
-          <div style={{
-            padding: '12px',
-            minHeight: '120px'
-          }}>
+          <div className="p-3 min-h-[120px]">
             {displayHeadline && (
-              <h2 style={{
-                fontWeight: '700',
-                fontSize: '16px',
-                marginBottom: '12px',
-                margin: '0 0 12px 0',
-                lineHeight: '1.3',
-                color: '#f1f5f9',
-                wordWrap: 'break-word',
-                overflowWrap: 'break-word'
-              }}>
+              <h2 className="font-bold text-base sm:text-lg mb-3 leading-snug text-slate-50 break-words">
                 {displayHeadline}
               </h2>
             )}
-            <div style={{
-              fontSize: '13px',
-              whiteSpace: 'pre-line',
-              marginBottom: '12px',
-              margin: '0 0 12px 0',
-              lineHeight: '1.5',
-              color: '#e2e8f0'
-            }}>
+
+            <div className="text-[13px] sm:text-sm whitespace-pre-line mb-3 leading-relaxed text-slate-200">
               {displayContent
                 .split(/(\[.*?\]\(.*?\)|https?:\/\/[^\s]+)/g)
                 .map((part, idx) => {
                   const linkMatch = part.match(/\[(.*?)\]\((.*?)\)/);
                   const urlMatch = part.match(/https?:\/\/[^\s]+/);
+
                   if (linkMatch) {
                     return (
                       <Link
@@ -449,17 +393,13 @@ function NewsPostPage({
                         href={linkMatch[2]}
                         target="_blank"
                         rel="noopener noreferrer"
-                        style={{
-                          color: "#60a5fa",
-                          textDecoration: "underline",
-                          textDecorationColor: "#3b82f6",
-                          fontWeight: "500",
-                        }}
+                        className="text-sky-400 underline decoration-blue-500 underline-offset-2 font-medium"
                       >
                         {linkMatch[1]}
                       </Link>
                     );
                   }
+
                   if (urlMatch) {
                     return (
                       <Link
@@ -467,94 +407,55 @@ function NewsPostPage({
                         href={urlMatch[0]}
                         target="_blank"
                         rel="noopener noreferrer"
-                        style={{
-                          color: "#60a5fa",
-                          textDecoration: "underline",
-                          textDecorationColor: "#3b82f6",
-                          fontWeight: "500",
-                        }}
+                        className="text-sky-400 underline decoration-blue-500 underline-offset-2 font-medium"
                       >
                         {urlMatch[0]}
                       </Link>
                     );
                   }
-                  return part;
+
+                  return (
+                    <span key={idx}>
+                      {part}
+                    </span>
+                  );
                 })}
             </div>
           </div>
 
           {/* AI Disclaimer */}
           {newsPost.is_ai_summary && (
-            <div
-              style={{
-                backgroundColor: "#475569",
-                padding: "10px 16px",
-                fontSize: "12px",
-                textAlign: "center",
-                color: "#cbd5e1",
-              }}
-            >
+            <div className="bg-slate-600 px-4 py-2.5 text-[12px] text-center text-slate-300">
               This content was generated using AI and may contain inaccuracies
             </div>
           )}
 
           {/* Machine Translation Disclaimer */}
           {(newsPost.en_headline || newsPost.en_content) && lang === "en" && (
-            <div
-              style={{
-                backgroundColor: "#475569",
-                padding: "10px 16px",
-                fontSize: "12px",
-                textAlign: "center",
-                color: "#cbd5e1",
-              }}
-            >
+            <div className="bg-slate-600 px-4 py-2.5 text-[12px] text-center text-slate-300">
               This is a machine translation and may contain errors
             </div>
           )}
 
           {/* Images */}
           {newsPost.images && newsPost.images.length > 0 && (
-            <div
-              style={{
-                width: "100%",
-                overflow: "hidden",
-              }}
-            >
+            <div className="w-full overflow-hidden">
               <img
                 src={newsPost.images[0].image}
                 alt="News visual"
-                style={{
-                  width: "100%",
-                  height: "auto",
-                  maxHeight: "400px",
-                  objectFit: "contain",
-                  display: "block",
-                }}
+                className="w-full h-auto max-h-[400px] object-contain block"
               />
             </div>
           )}
 
           {/* Read More Link */}
           {newsPost.url && (
-            <div
-              style={{
-                backgroundColor: "#475569",
-                padding: "12px 16px",
-                textAlign: "center",
-              }}
-            >
+            <div className="bg-slate-600 px-4 py-3 text-center">
               <Link
                 href={newsPost.url}
                 target="_blank"
                 rel="noopener noreferrer"
-                style={{
-                  fontSize: "15px",
-                  textDecoration: "underline",
-                  textDecorationColor: "#60a5fa",
-                  fontWeight: "600",
-                  color: "#60a5fa",
-                }}
+                className="text-[15px] font-semibold text-sky-400 underline decoration-sky-400 underline-offset-2"
               >
                 READ MORE
               </Link>
@@ -563,29 +464,11 @@ function NewsPostPage({
         </div>
 
         {/* About 573 UPDATES */}
-        <div style={{
-          textAlign: 'center',
-          marginTop: '24px',
-          marginBottom: '16px',
-          padding: '12px',
-          backgroundColor: '#334155',
-          borderRadius: '6px',
-          border: '1px solid #475569'
-        }}>
-          <h3 style={{
-            fontSize: '15px',
-            fontWeight: '600',
-            margin: '0 0 6px 0',
-            color: '#f1f5f9'
-          }}>
+        <div className="mt-6 mb-4 p-3 text-center bg-slate-700 rounded-md border border-slate-600">
+          <h3 className="text-[15px] font-semibold mb-1.5 text-slate-50">
             This is a perma-link hosted on 573 UPDATES
           </h3>
-          <p style={{
-            fontSize: '12px',
-            color: '#cbd5e1',
-            margin: 0,
-            lineHeight: '1.4'
-          }}>
+          <p className="text-[12px] text-slate-300 leading-tight">
             A news aggregator for some arcade (and some not-so arcade) games.
             Image data is loaded from external sources, and as such may not
             always be available.
@@ -593,32 +476,10 @@ function NewsPostPage({
         </div>
 
         {/* Navigation Buttons */}
-        <div style={{
-          textAlign: 'center',
-          marginTop: '12px',
-          display: 'flex',
-          flexDirection: 'column',
-          gap: '10px',
-          alignItems: 'center'
-        }}>
+        <div className="mt-3 flex flex-col items-center gap-2.5 text-center">
           <Link
             href="/"
-            style={{
-              display: 'block',
-              background: 'linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)',
-              color: 'white',
-              padding: '14px 20px',
-              borderRadius: '6px',
-              textDecoration: 'none',
-              fontSize: '14px',
-              fontWeight: '600',
-              boxShadow: '0 4px 12px rgba(59, 130, 246, 0.3)',
-              border: 'none',
-              transition: 'all 0.2s ease',
-              width: '100%',
-              maxWidth: '280px',
-              textAlign: 'center'
-            }}
+            className="block w-full max-w-xs bg-gradient-to-br from-blue-500 to-blue-700 text-white px-5 py-3.5 rounded-md text-sm font-semibold shadow-md shadow-blue-500/30 no-underline border-0 transition-all duration-200 text-center hover:brightness-110 active:translate-y-px"
           >
             Back to 573 UPDATES
           </Link>
diff --git a/middleware/src/app/globals.css b/middleware/src/app/globals.css
index ff7d975..a461c50 100644
--- a/middleware/src/app/globals.css
+++ b/middleware/src/app/globals.css
@@ -1,72 +1 @@
-:root {
-  --dark-bg: #000000;
-  --text-primary: #ffffff;
-  --text-secondary: #888888;
-  --accent: #666666;
-}
-
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-html,
-body {
-  height: 100%;
-  overflow: hidden;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-}
-
-body {
-  background: var(--dark-bg);
-  color: var(--text-primary);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Main container */
-.main {
-  width: 100%;
-  height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.content-wrapper {
-  text-align: center;
-}
-
-.title {
-  font-size: 3rem;
-  font-weight: 300;
-  letter-spacing: 0.5rem;
-  margin-bottom: 3rem;
-  color: var(--text-primary);
-}
-
-.redirect-link {
-  color: var(--text-secondary);
-  font-size: 2rem;
-  text-decoration: none;
-  transition: color 0.3s ease;
-  letter-spacing: 0.1rem;
-}
-
-.redirect-link:hover {
-  color: var(--text-primary);
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-  .title {
-    font-size: 2rem;
-    letter-spacing: 0.3rem;
-  }
-
-  .redirect-link {
-    font-size: 0.75rem;
-  }
-}
+@import "tailwindcss";
\ No newline at end of file
-- 
cgit v1.2.3