transition to tailwind v4.0.6, add gitea workflow

.gitea/workflows/docker.yml

@@ -0,0 +1,30 @@
+name: Build and Push Docker Image
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build_and_push:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v3
+
+      - name: Log in to Gitea Package Registry
+        run: echo "${{ secrets.PACKAGE_TOKEN }}" | docker login $SERVER_URL -u $USERNAME --password-stdin
+        env:
+          SERVER_URL: ${{ secrets.SERVER_URL }}
+          USERNAME: ${{ secrets.USERNAME }}
+          PACKAGE_TOKEN: ${{ secrets.PACKAGE_TOKEN }}
+
+      - name: Build Docker Image
+        run: docker build -t git.pontusmail.org/aidan/modules:latest .
+
+      - name: Push Docker Image
+        run: docker push git.pontusmail.org/aidan/modules:latest

package.json

@@ -15,15 +15,16 @@
   },
   "homepage": "https://github.com/ihatenodejs/modules#readme",
   "scripts": {
-    "build:css": "tailwindcss -i ./src/css/styles.css -o ./public/css/styles.css"
+    "build:css": "bunx @tailwindcss/cli -i ./src/css/styles.css -o ./public/css/styles.css"
   },
   "dependencies": {
+    "@tailwindcss/cli": "^4.0.6",
     "ejs": "^3.1.10",
     "express": "^4.21.2",
     "figlet": "^1.8.0",
     "helmet": "^8.0.0",
     "morgan": "^1.10.0",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.0",
     "validator": "^13.12.0"
   }
 }

src/css/styles.css

@@ -1,3 +1,19 @@
-@tailwind base;
+@import 'tailwindcss';
-@tailwind components;
+
-@tailwind utilities;
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}

src/views/pages/apps.ejs

@@ -42,7 +42,7 @@
         =====================================================================
         -->
       </nav>
-      <button id="menu-btn" class="md:hidden text-white focus:outline-none"><i class="fas fa-bars"></i></button>
+      <button id="menu-btn" class="md:hidden text-white focus:outline-hidden"><i class="fas fa-bars"></i></button>
     </div>
     <div id="mobile-menu" class="hidden md:hidden">
       <a href="/" class="flex px-4 py-2 text-white hover:bg-gray-700 items-center">

src/views/pages/home.ejs

@@ -42,7 +42,7 @@
         =====================================================================
         -->
       </nav>
-      <button id="menu-btn" class="md:hidden text-white focus:outline-none"><i class="fas fa-bars"></i></button>
+      <button id="menu-btn" class="md:hidden text-white focus:outline-hidden"><i class="fas fa-bars"></i></button>
     </div>
     <div id="mobile-menu" class="hidden md:hidden">
       <p class="flex px-4 py-2 text-gray-300 items-center">
@@ -67,13 +67,13 @@
   <div class="container mx-auto p-4">
     <h1 class="text-4xl font-bold text-white text-center my-20">What are you looking for?</h1>
     <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
-      <a href="/apps" class="bg-slate-800 bg-opacity-50 backdrop-blur-md rounded-lg shadow-md p-10 flex flex-col justify-between no-underline text-white hover:bg-opacity-70 transition duration-300">
+      <a href="/apps" class="bg-slate-800/50 backdrop-blur-md rounded-lg shadow-md p-10 flex flex-col justify-between no-underline text-white hover:bg-slate-800/70 transition duration-300">
         <div class="flex flex-col items-center">
           <i class="fa-brands fa-google-play text-9xl text-gray-300"></i>
           <h2 class="text-4xl font-bold text-gray-300 mt-12">Apps</h2>
         </div>
       </a>
-      <a href="/modules" class="bg-slate-800 bg-opacity-50 backdrop-blur-md rounded-lg shadow-md p-10 flex flex-col justify-between no-underline text-white hover:bg-opacity-70 transition duration-300">
+      <a href="/modules" class="bg-slate-800/50 backdrop-blur-md rounded-lg shadow-md p-10 flex flex-col justify-between no-underline text-white hover:bg-slate-800/70 transition duration-300">
         <div class="flex flex-col items-center">
           <i class="fas fa-puzzle-piece text-9xl text-gray-300"></i>
           <h2 class="text-4xl font-bold text-gray-300 mt-12">Modules</h2>

src/views/pages/modules.ejs

@@ -42,7 +42,7 @@
         =====================================================================
         -->
       </nav>
-      <button id="menu-btn" class="md:hidden text-white focus:outline-none"><i class="fas fa-bars"></i></button>
+      <button id="menu-btn" class="md:hidden text-white focus:outline-hidden"><i class="fas fa-bars"></i></button>
     </div>
     <div id="mobile-menu" class="hidden md:hidden">
       <a href="/" class="flex px-4 py-2 text-white hover:bg-gray-700 items-center">

src/views/templates/app.ejs

@@ -42,7 +42,7 @@
         =====================================================================
         -->
       </nav>
-      <button id="menu-btn" class="md:hidden text-white focus:outline-none"><i class="fas fa-bars"></i></button>
+      <button id="menu-btn" class="md:hidden text-white focus:outline-hidden"><i class="fas fa-bars"></i></button>
     </div>
     <div id="mobile-menu" class="hidden md:hidden">
       <a href="/" class="flex px-4 py-2 text-white hover:bg-gray-700 items-center">
@@ -66,7 +66,7 @@
   </header>
   <div class="container mx-auto p-4">
     <div class="grid grid-cols-1 md:grid-cols-6 gap-4 w-full">
-      <div class="p-4 col-span-6 md:col-span-2 flex flex-col items-center bg-white bg-opacity-10 backdrop-blur-md rounded-lg border border-white border-opacity-25 shadow-md">
+      <div class="p-4 col-span-6 md:col-span-2 flex flex-col items-center bg-white/10 backdrop-blur-md rounded-lg border border-white/25 shadow-md">
         <img src="<%= app.icon %>" alt="<%= app.name %> icon" class="w-32 h-32 mb-4 rounded-full">
         <h1 class="text-2xl font-bold text-white text-center mb-2"><%= app.name %></h1>
         <p class="text-center mb-4 flex flex-wrap justify-center">
@@ -83,7 +83,7 @@
         <form id="download-form" action="/download" method="get" class="w-full">
           <div class="relative inline-block text-left w-full">
             <label for="version" class="block text-white text-sm font-bold mb-2">Select Version:</label>
-            <select id="version" name="version" class="block appearance-none w-full bg-gray-700 border border-gray-600 text-white py-2 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-gray-600 focus:border-gray-500">
+            <select id="version" name="version" class="block appearance-none w-full bg-gray-700 border border-gray-600 text-white py-2 px-4 pr-8 rounded-sm leading-tight focus:outline-hidden focus:bg-gray-600 focus:border-gray-500">
               <% Object.keys(app.downloadLinks).forEach(function(version) { %>
                 <option value="<%= version %>"><%= version %></option>
               <% }); %>
@@ -91,14 +91,14 @@
           </div>
           <div class="relative inline-block text-left w-full mt-4">
             <label for="arch" class="block text-white text-sm font-bold mb-2">Select Architecture:</label>
-            <select id="arch" name="arch" class="block appearance-none w-full bg-gray-700 border border-gray-600 text-white py-2 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-gray-600 focus:border-gray-500">
+            <select id="arch" name="arch" class="block appearance-none w-full bg-gray-700 border border-gray-600 text-white py-2 px-4 pr-8 rounded-sm leading-tight focus:outline-hidden focus:bg-gray-600 focus:border-gray-500">
               <% Object.keys(app.downloadLinks[Object.keys(app.downloadLinks)[0]]).forEach(function(arch) { %>
                 <option value="<%= arch %>"><%= arch %></option>
               <% }); %>
             </select>
           </div>
           <div class="mt-4 w-full">
-            <button type="submit" class="inline-flex justify-center w-full rounded-full border border-gray-300 shadow-sm px-4 py-2 bg-slate-500 text-sm font-medium text-white hover:bg-slate-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500">
+            <button type="submit" class="inline-flex justify-center w-full rounded-full border border-gray-300 shadow-xs px-4 py-2 bg-slate-500 text-sm font-medium text-white hover:bg-slate-600 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-slate-500">
               <i class="fas fa-download mr-2"></i> Download
             </button>
           </div>
@@ -106,10 +106,10 @@
           <input type="hidden" name="type" value="app">
         </form>
       </div>
-      <div class="p-4 col-span-6 md:col-span-4 bg-white bg-opacity-10 backdrop-blur-md rounded-lg border border-white border-opacity-25 shadow-md">
+      <div class="p-4 col-span-6 md:col-span-4 bg-white/10 backdrop-blur-md rounded-lg border border-white/25 shadow-md">
         <p class="text-white"><%- app.description.replace(/\n/g, '<br>') %></p>
       </div>
-      <div class="p-4 col-span-6 md:col-span-4 md:col-start-3 bg-white bg-opacity-10 backdrop-blur-md rounded-lg border border-white border-opacity-25 shadow-md">
+      <div class="p-4 col-span-6 md:col-span-4 md:col-start-3 bg-white/10 backdrop-blur-md rounded-lg border border-white/25 shadow-md">
         <h2 class="text-xl font-bold text-white mb-4 flex items-center">
           <i class="fab fa-github mr-2"></i> GitHub Repository
         </h2>

src/views/templates/module.ejs

@@ -42,7 +42,7 @@
         =====================================================================
         -->
       </nav>
-      <button id="menu-btn" class="md:hidden text-white focus:outline-none"><i class="fas fa-bars"></i></button>
+      <button id="menu-btn" class="md:hidden text-white focus:outline-hidden"><i class="fas fa-bars"></i></button>
     </div>
     <div id="mobile-menu" class="hidden md:hidden">
       <a href="/" class="flex px-4 py-2 text-white hover:bg-gray-700 items-center">
@@ -66,7 +66,7 @@
   </header>
   <div class="container mx-auto p-4">
     <div class="grid grid-cols-1 md:grid-cols-6 gap-4 w-full">
-      <div class="p-4 col-span-6 md:col-span-2 flex flex-col items-center bg-white bg-opacity-10 backdrop-blur-md rounded-lg border border-white border-opacity-25 shadow-md">
+      <div class="p-4 col-span-6 md:col-span-2 flex flex-col items-center bg-white/10 backdrop-blur-md rounded-lg border border-white/25 shadow-md">
         <img src="<%= module.icon %>" alt="<%= module.name %> icon" class="w-32 h-32 mb-4 rounded-full">
         <h1 class="text-2xl font-bold text-white text-center mb-2"><%= module.name %></h1>
         <p class="text-center mb-4 flex flex-wrap justify-center">
@@ -89,7 +89,7 @@
         <form id="download-form" action="/download" method="get" class="w-full">
           <div class="relative inline-block text-left w-full">
             <label for="version" class="block text-white text-sm font-bold mb-2">Select Version:</label>
-            <select id="version" name="version" class="block appearance-none w-full bg-gray-700 border border-gray-600 text-white py-2 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-gray-600 focus:border-gray-500">
+            <select id="version" name="version" class="block appearance-none w-full bg-gray-700 border border-gray-600 text-white py-2 px-4 pr-8 rounded-sm leading-tight focus:outline-hidden focus:bg-gray-600 focus:border-gray-500">
               <% Object.keys(module.downloadLinks).forEach(function(version) { %>
                 <option value="<%= version %>"><%= version %></option>
               <% }); %>
@@ -97,14 +97,14 @@
           </div>
           <div class="relative inline-block text-left w-full mt-4">
             <label for="arch" class="block text-white text-sm font-bold mb-2">Select Architecture:</label>
-            <select id="arch" name="arch" class="block appearance-none w-full bg-gray-700 border border-gray-600 text-white py-2 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-gray-600 focus:border-gray-500">
+            <select id="arch" name="arch" class="block appearance-none w-full bg-gray-700 border border-gray-600 text-white py-2 px-4 pr-8 rounded-sm leading-tight focus:outline-hidden focus:bg-gray-600 focus:border-gray-500">
               <% Object.keys(module.downloadLinks[Object.keys(module.downloadLinks)[0]]).forEach(function(arch) { %>
                 <option value="<%= arch %>"><%= arch %></option>
               <% }); %>
             </select>
           </div>
           <div class="mt-4 w-full">
-            <button type="submit" class="inline-flex justify-center w-full rounded-full border border-gray-300 shadow-sm px-4 py-2 bg-slate-500 text-sm font-medium text-white hover:bg-slate-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500">
+            <button type="submit" class="inline-flex justify-center w-full rounded-full border border-gray-300 shadow-xs px-4 py-2 bg-slate-500 text-sm font-medium text-white hover:bg-slate-600 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-slate-500">
               <i class="fas fa-download mr-2"></i> Download
             </button>
           </div>
@@ -112,10 +112,10 @@
           <input type="hidden" name="type" value="module">
         </form>
       </div>
-      <div class="p-4 col-span-6 md:col-span-4 bg-white bg-opacity-10 backdrop-blur-md rounded-lg border border-white border-opacity-25 shadow-md">
+      <div class="p-4 col-span-6 md:col-span-4 bg-white/10 backdrop-blur-md rounded-lg border border-white/25 shadow-md">
         <p class="text-white"><%- module.description.replace(/\n/g, '<br>') %></p>
       </div>
-      <div class="p-4 col-span-6 md:col-span-4 md:col-start-3 bg-white bg-opacity-10 backdrop-blur-md rounded-lg border border-white border-opacity-25 shadow-md">
+      <div class="p-4 col-span-6 md:col-span-4 md:col-start-3 bg-white/10 backdrop-blur-md rounded-lg border border-white/25 shadow-md">
         <h2 class="text-xl font-bold text-white mb-4 flex items-center">
           <i class="fab fa-github mr-2"></i> GitHub Repository
         </h2>

tailwind.config.js

@@ -1,11 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    './src/views/**/*.ejs'
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};
-