paulmataruso/ConvertX
1
0
Fork 0
mirror of https://github.com/C4illin/ConvertX.git synced 2025-10-24 16:43:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: add eslint-plugin-readable-tailwind

Browse Source
This commit is contained in:
C4illin
2024-10-05 01:01:00 +02:00
parent a6b8bcecae
commit 5fb8c3575b
5 changed files with 126 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

20
eslint.config.js
View File

@@ -1,11 +1,11 @@
import { fixupPluginRules } from "@eslint/compat"; import { fixupPluginRules } from "@eslint/compat";
import eslint from '@eslint/js'; import eslint from "@eslint/js";
import deprecationPlugin from "eslint-plugin-deprecation"; import deprecationPlugin from "eslint-plugin-deprecation";
import eslintPluginReadableTailwind from "eslint-plugin-readable-tailwind";
import simpleImportSortPlugin from "eslint-plugin-simple-import-sort"; import simpleImportSortPlugin from "eslint-plugin-simple-import-sort";
import tailwind from "eslint-plugin-tailwindcss"; import tailwind from "eslint-plugin-tailwindcss";
import globals from "globals"; import globals from "globals";
import tseslint from 'typescript-eslint'; import tseslint from "typescript-eslint";
export default tseslint.config( export default tseslint.config(
eslint.configs.recommended, eslint.configs.recommended,
@@ -15,6 +15,7 @@ export default tseslint.config(
plugins: { plugins: {
deprecation: fixupPluginRules(deprecationPlugin), deprecation: fixupPluginRules(deprecationPlugin),
"simple-import-sort": simpleImportSortPlugin, "simple-import-sort": simpleImportSortPlugin,
"readable-tailwind": eslintPluginReadableTailwind,
}, },
ignores: ["**/node_modules/**"], ignores: ["**/node_modules/**"],
languageOptions: { languageOptions: {
@@ -30,8 +31,17 @@ export default tseslint.config(
...globals.browser, ...globals.browser,
}, },
}, },
files: ["**/*.{js,mjs,cjs,tsx}"], files: ["**/*.{js,mjs,cjs,tsx,ts}"],
rules: { rules: {
...eslintPluginReadableTailwind.configs.warning.rules,
"tailwindcss/classnames-order": "off",
"readable-tailwind/multiline": [
"warn",
{
group: "newLine",
printWidth: 100,
},
],
"tailwindcss/no-custom-classname": [ "tailwindcss/no-custom-classname": [
"warn", "warn",
{ {
@@ -46,4 +56,4 @@ export default tseslint.config(
], ],
}, },
}, },
); );

1
package.json
View File

@@ -43,6 +43,7 @@
"eslint-plugin-deprecation": "^3.0.0", "eslint-plugin-deprecation": "^3.0.0",
"eslint-plugin-isaacscript": "^4.0.0", "eslint-plugin-isaacscript": "^4.0.0",
"eslint-plugin-prettier": "^5.2.1", "eslint-plugin-prettier": "^5.2.1",
"eslint-plugin-readable-tailwind": "^1.8.1",
"eslint-plugin-simple-import-sort": "^12.1.1", "eslint-plugin-simple-import-sort": "^12.1.1",
"eslint-plugin-tailwindcss": "^3.17.4", "eslint-plugin-tailwindcss": "^3.17.4",
"globals": "^15.9.0", "globals": "^15.9.0",

22
src/components/header.tsx
View File

@@ -5,17 +5,23 @@ export const Header = ({
let rightNav: JSX.Element; let rightNav: JSX.Element;
if (loggedIn) { if (loggedIn) {
rightNav = ( rightNav = (
<ul class="flex gap-4 "> <ul class="flex gap-4">
<li> <li>
<a <a
class="text-accent-600 transition-all hover:text-accent-500 hover:underline" class={`
text-accent-600 transition-all
hover:text-accent-500 hover:underline
`}
href="/history"> href="/history">
History History
</a> </a>
</li> </li>
<li> <li>
<a <a
class="text-accent-600 transition-all hover:text-accent-500 hover:underline" class={`
text-accent-600 transition-all
hover:text-accent-500 hover:underline
`}
href="/logoff"> href="/logoff">
Logout Logout
</a> </a>
@@ -27,7 +33,10 @@ export const Header = ({
<ul class="flex gap-4"> <ul class="flex gap-4">
<li> <li>
<a <a
class="text-accent-600 transition-all hover:text-accent-500 hover:underline" class={`
text-accent-600 transition-all
hover:text-accent-500 hover:underline
`}
href="/login"> href="/login">
Login Login
</a> </a>
@@ -35,7 +44,10 @@ export const Header = ({
{accountRegistration ? ( {accountRegistration ? (
<li> <li>
<a <a
class="text-accent-600 transition-all hover:text-accent-500 hover:underline" class={`
text-accent-600 transition-all
hover:text-accent-500 hover:underline
`}
href="/register"> href="/register">
Register Register
</a> </a>

112
src/index.tsx
View File

@@ -174,7 +174,10 @@ const app = new Elysia({
<footer class="p-4"> <footer class="p-4">
Report any issues on{" "} Report any issues on{" "}
<a <a
class="text-accent-500 underline hover:text-accent-400" class={`
text-accent-500 underline
hover:text-accent-400
`}
href="https://github.com/C4illin/ConvertX" href="https://github.com/C4illin/ConvertX"
> >
GitHub GitHub
@@ -530,12 +533,21 @@ const app = new Elysia({
<div class="mb-4 max-h-[50vh] overflow-y-auto scrollbar-thin"> <div class="mb-4 max-h-[50vh] overflow-y-auto scrollbar-thin">
<table <table
id="file-list" id="file-list"
class="w-full table-auto rounded bg-neutral-900 [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800" class={`
w-full table-auto rounded bg-neutral-900
[&_td]:p-4
[&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800
`}
/> />
</div> </div>
<div <div
id="dropzone" id="dropzone"
class="relative flex h-48 w-full items-center justify-center rounded border border-dashed border-neutral-700 transition-all hover:border-neutral-600 [&.dragover]:border-4 [&.dragover]:border-neutral-500" class={`
relative flex h-48 w-full items-center justify-center rounded border border-dashed
border-neutral-700 transition-all
[&.dragover]:border-4 [&.dragover]:border-neutral-500
hover:border-neutral-600
`}
> >
<span> <span>
<b>Choose a file</b> or drag it here <b>Choose a file</b> or drag it here
@@ -563,11 +575,17 @@ const app = new Elysia({
class="w-full rounded bg-neutral-800 p-4" class="w-full rounded bg-neutral-800 p-4"
/> />
<div class="select_container relative"> <div class="select_container relative">
<article class="convert_to_popup absolute z-[2] m-0 hidden h-[30vh] max-h-[50vh] w-full flex-col overflow-y-auto overflow-x-hidden rounded bg-neutral-800 sm:h-[30vh]"> <article class={`
convert_to_popup absolute z-[2] m-0 hidden h-[30vh] max-h-[50vh] w-full flex-col
overflow-y-auto overflow-x-hidden rounded bg-neutral-800
sm:h-[30vh]
`}>
{Object.entries(getAllTargets()).map( {Object.entries(getAllTargets()).map(
([converter, targets]) => ( ([converter, targets]) => (
<article <article
class="convert_to_group flex w-full flex-col border-b border-neutral-700 p-4" class={`
convert_to_group flex w-full flex-col border-b border-neutral-700 p-4
`}
data-converter={converter} data-converter={converter}
> >
<header class="mb-2 w-full text-xl font-bold" safe> <header class="mb-2 w-full text-xl font-bold" safe>
@@ -578,7 +596,10 @@ const app = new Elysia({
<button <button
// https://stackoverflow.com/questions/121499/when-a-blur-event-occurs-how-can-i-find-out-which-element-focus-went-to#comment82388679_33325953 // https://stackoverflow.com/questions/121499/when-a-blur-event-occurs-how-can-i-find-out-which-element-focus-went-to#comment82388679_33325953
tabindex={0} tabindex={0}
class="target rounded bg-neutral-700 p-1 text-base hover:bg-neutral-600" class={`
target rounded bg-neutral-700 p-1 text-base
hover:bg-neutral-600
`}
data-value={`${target},${converter}`} data-value={`${target},${converter}`}
data-target={target} data-target={target}
data-converter={converter} data-converter={converter}
@@ -631,7 +652,11 @@ const app = new Elysia({
({ body }) => { ({ body }) => {
return ( return (
<> <>
<article class="convert_to_popup absolute z-[2] m-0 hidden h-[50vh] max-h-[50vh] w-full flex-col overflow-y-auto overflow-x-hidden rounded bg-neutral-800 sm:h-[30vh]"> <article class={`
convert_to_popup absolute z-[2] m-0 hidden h-[50vh] max-h-[50vh] w-full flex-col
overflow-y-auto overflow-x-hidden rounded bg-neutral-800
sm:h-[30vh]
`}>
{Object.entries(getPossibleTargets(body.fileType)).map( {Object.entries(getPossibleTargets(body.fileType)).map(
([converter, targets]) => ( ([converter, targets]) => (
<article <article
@@ -646,7 +671,10 @@ const app = new Elysia({
<button <button
// https://stackoverflow.com/questions/121499/when-a-blur-event-occurs-how-can-i-find-out-which-element-focus-went-to#comment82388679_33325953 // https://stackoverflow.com/questions/121499/when-a-blur-event-occurs-how-can-i-find-out-which-element-focus-went-to#comment82388679_33325953
tabindex={0} tabindex={0}
class="target rounded bg-neutral-700 p-1 text-base hover:bg-neutral-600" class={`
target rounded bg-neutral-700 p-1 text-base
hover:bg-neutral-600
`}
data-value={`${target},${converter}`} data-value={`${target},${converter}`}
data-target={target} data-target={target}
data-converter={converter} data-converter={converter}
@@ -895,7 +923,11 @@ const app = new Elysia({
<main class="w-full px-4"> <main class="w-full px-4">
<article class="article"> <article class="article">
<h1 class="mb-4 text-xl">Results</h1> <h1 class="mb-4 text-xl">Results</h1>
<table class="w-full table-auto rounded bg-neutral-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800"> <table class={`
w-full table-auto rounded bg-neutral-900 text-left
[&_td]:p-4
[&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800
`}>
<thead> <thead>
<tr> <tr>
<th class="px-4 py-2">Time</th> <th class="px-4 py-2">Time</th>
@@ -914,7 +946,10 @@ const app = new Elysia({
<td safe>{job.status}</td> <td safe>{job.status}</td>
<td> <td>
<a <a
class="text-accent-500 underline hover:text-accent-400" class={`
text-accent-500 underline
hover:text-accent-400
`}
href={`/results/${job.id}`} href={`/results/${job.id}`}
> >
View View
@@ -992,9 +1027,20 @@ const app = new Elysia({
<progress <progress
max={job.num_files} max={job.num_files}
value={files.length} value={files.length}
class="mb-4 inline-block h-2 w-full appearance-none overflow-hidden rounded-full border-0 bg-neutral-700 bg-none text-accent-500 accent-accent-500 [&::-moz-progress-bar]:bg-neutral-700 [&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:[background:none] [&[value]::-webkit-progress-value]:bg-accent-500 [&[value]::-webkit-progress-value]:transition-[inline-size]" class={`
mb-4 inline-block h-2 w-full appearance-none overflow-hidden rounded-full
border-0 bg-neutral-700 bg-none text-accent-500 accent-accent-500
[&::-moz-progress-bar]:bg-neutral-700 [&::-webkit-progress-value]:rounded-full
[&::-webkit-progress-value]:[background:none]
[&[value]::-webkit-progress-value]:bg-accent-500
[&[value]::-webkit-progress-value]:transition-[inline-size]
`}
/> />
<table class="w-full table-auto rounded bg-neutral-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800"> <table class={`
w-full table-auto rounded bg-neutral-900 text-left
[&_td]:p-4
[&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800
`}>
<thead> <thead>
<tr> <tr>
<th class="px-4 py-2">Converted File Name</th> <th class="px-4 py-2">Converted File Name</th>
@@ -1010,7 +1056,10 @@ const app = new Elysia({
<td safe>{file.status}</td> <td safe>{file.status}</td>
<td> <td>
<a <a
class="text-accent-500 underline hover:text-accent-400" class={`
text-accent-500 underline
hover:text-accent-400
`}
href={`/download/${outputPath}${file.output_file_name}`} href={`/download/${outputPath}${file.output_file_name}`}
> >
View View
@@ -1018,7 +1067,10 @@ const app = new Elysia({
</td> </td>
<td> <td>
<a <a
class="text-accent-500 underline hover:text-accent-400" class={`
text-accent-500 underline
hover:text-accent-400
`}
href={`/download/${outputPath}${file.output_file_name}`} href={`/download/${outputPath}${file.output_file_name}`}
download={file.output_file_name} download={file.output_file_name}
> >
@@ -1095,9 +1147,20 @@ const app = new Elysia({
<progress <progress
max={job.num_files} max={job.num_files}
value={files.length} value={files.length}
class="mb-4 inline-block h-2 w-full appearance-none overflow-hidden rounded-full border-0 bg-neutral-700 bg-none text-accent-500 accent-accent-500 [&::-moz-progress-bar]:bg-neutral-700 [&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:[background:none] [&[value]::-webkit-progress-value]:bg-accent-500 [&[value]::-webkit-progress-value]:transition-[inline-size]" class={`
mb-4 inline-block h-2 w-full appearance-none overflow-hidden rounded-full border-0
bg-neutral-700 bg-none text-accent-500 accent-accent-500
[&::-moz-progress-bar]:bg-neutral-700 [&::-webkit-progress-value]:rounded-full
[&::-webkit-progress-value]:[background:none]
[&[value]::-webkit-progress-value]:bg-accent-500
[&[value]::-webkit-progress-value]:transition-[inline-size]
`}
/> />
<table class="w-full table-auto rounded bg-neutral-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800"> <table class={`
w-full table-auto rounded bg-neutral-900 text-left
[&_td]:p-4
[&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800
`}>
<thead> <thead>
<tr> <tr>
<th class="px-4 py-2">Converted File Name</th> <th class="px-4 py-2">Converted File Name</th>
@@ -1113,7 +1176,10 @@ const app = new Elysia({
<td safe>{file.status}</td> <td safe>{file.status}</td>
<td> <td>
<a <a
class="text-accent-500 underline hover:text-accent-400" class={`
text-accent-500 underline
hover:text-accent-400
`}
href={`/download/${outputPath}${file.output_file_name}`} href={`/download/${outputPath}${file.output_file_name}`}
> >
View View
@@ -1121,7 +1187,10 @@ const app = new Elysia({
</td> </td>
<td> <td>
<a <a
class="text-accent-500 underline hover:text-accent-400" class={`
text-accent-500 underline
hover:text-accent-400
`}
href={`/download/${outputPath}${file.output_file_name}`} href={`/download/${outputPath}${file.output_file_name}`}
download={file.output_file_name} download={file.output_file_name}
> >
@@ -1181,7 +1250,12 @@ const app = new Elysia({
<main class="w-full px-4"> <main class="w-full px-4">
<article class="article"> <article class="article">
<h1 class="mb-4 text-xl">Converters</h1> <h1 class="mb-4 text-xl">Converters</h1>
<table class="w-full table-auto rounded bg-neutral-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800 [&_ul]:list-inside [&_ul]:list-disc"> <table class={`
w-full table-auto rounded bg-neutral-900 text-left
[&_td]:p-4
[&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800
[&_ul]:list-inside [&_ul]:list-disc
`}>
<thead> <thead>
<tr> <tr>
<th class="mx-4 my-2">Converter</th> <th class="mx-4 my-2">Converter</th>