aidan/modules
1
0
Fork 0
Code Issues 1 Pull Requests Packages Activity

transition to tailwind v4.0.6, add gitea workflow

Browse Source
This commit is contained in:
Aidan 2025-02-15 20:33:45 -05:00
parent f66fb1b9a4
commit 278c2ac4f5
9 changed files with 71 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
.gitea/workflows/docker.yml Normal file
View File

@ -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

5
package.json
View File

@ -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"
}
}

22
src/css/styles.css
View File

@ -1,3 +1,19 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import 'tailwindcss';
/*
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);
}
}

2
src/views/pages/apps.ejs
View File

@ -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">

6
src/views/pages/home.ejs
View File

@ -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>

2
src/views/pages/modules.ejs
View File

@ -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">

14
src/views/templates/app.ejs
View File

@ -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>

14
src/views/templates/module.ejs
View File

@ -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>

11
tailwind.config.js
View File

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