Add TailwindCSS (#1252)

* Setup TailwindCSS

* Fully setup configuration

* Refactor some tailwind variables

apps/frontend/src/plugins/1.theme.js

@@ -1,27 +1,28 @@
+/* eslint-disable no-undef */
 export default defineNuxtPlugin(async (nuxtApp) => {
-  await useAuth()
-  await useUser()
-  const themeStore = useTheme()
-  const cosmetics = useCosmetics()
+  await useAuth();
+  await useUser();
+  const themeStore = useTheme();
+  const cosmetics = useCosmetics();
 
-  nuxtApp.hook('app:mounted', () => {
-    if (process.client && themeStore.value.preference === 'system') {
-      const colorSchemeQueryList = window.matchMedia('(prefers-color-scheme: light)')
+  nuxtApp.hook("app:mounted", () => {
+    if (process.client && themeStore.value.preference === "system") {
+      const colorSchemeQueryList = window.matchMedia("(prefers-color-scheme: light)");
 
       const setColorScheme = (e) => {
-        if (themeStore.value.preference === 'system') {
+        if (themeStore.value.preference === "system") {
           if (e.matches) {
-            updateTheme('light')
+            updateTheme("light");
           } else {
-            updateTheme(cosmetics.value.preferredDarkTheme ?? 'dark')
+            updateTheme(cosmetics.value.preferredDarkTheme ?? "dark");
           }
         }
-      }
+      };
 
-      setColorScheme(colorSchemeQueryList)
-      colorSchemeQueryList.addEventListener('change', setColorScheme)
+      setColorScheme(colorSchemeQueryList);
+      colorSchemeQueryList.addEventListener("change", setColorScheme);
     }
-  })
+  });
 
-  nuxtApp.provide('colorMode', themeStore.value)
-})
+  nuxtApp.provide("colorMode", themeStore.value);
+});

apps/frontend/src/plugins/dayjs.js

@@ -1,9 +1,10 @@
-import dayjs from 'dayjs'
+import dayjs from "dayjs";
 
+// eslint-disable-next-line no-undef
 export default defineNuxtPlugin(() => {
   return {
     provide: {
       dayjs,
     },
-  }
-})
+  };
+});

apps/frontend/src/plugins/scroll.client.js

@@ -1,7 +1,8 @@
+/* eslint-disable no-undef */
 export default defineNuxtPlugin(() => {
-  const nuxtApp = useNuxtApp()
+  const nuxtApp = useNuxtApp();
 
-  nuxtApp.hooks.hook('page:transition:finish', () => {
-    document.querySelector('[data-scroll]')?.scrollTo({ top: 0 })
-  })
-})
+  nuxtApp.hooks.hook("page:transition:finish", () => {
+    document.querySelector("[data-scroll]")?.scrollTo({ top: 0 });
+  });
+});

apps/frontend/src/plugins/shorthands.js

@@ -1,293 +1,294 @@
-import { getProjectTypeForUrlShorthand } from '~/helpers/projects.js'
+/* eslint-disable no-undef */
+import { getProjectTypeForUrlShorthand } from "~/helpers/projects.js";
 
 export default defineNuxtPlugin((nuxtApp) => {
-  const tagStore = useTags()
+  const tagStore = useTags();
 
-  nuxtApp.provide('formatNumber', formatNumber)
-  nuxtApp.provide('capitalizeString', capitalizeString)
-  nuxtApp.provide('formatMoney', formatMoney)
-  nuxtApp.provide('formatVersion', (versionsArray) => formatVersions(tagStore, versionsArray))
-  nuxtApp.provide('orElse', (first, otherwise) => first ?? otherwise)
-  nuxtApp.provide('external', () => {
-    const cosmeticsStore = useCosmetics().value
+  nuxtApp.provide("formatNumber", formatNumber);
+  nuxtApp.provide("capitalizeString", capitalizeString);
+  nuxtApp.provide("formatMoney", formatMoney);
+  nuxtApp.provide("formatVersion", (versionsArray) => formatVersions(tagStore, versionsArray));
+  nuxtApp.provide("orElse", (first, otherwise) => first ?? otherwise);
+  nuxtApp.provide("external", () => {
+    const cosmeticsStore = useCosmetics().value;
 
-    return cosmeticsStore.externalLinksNewTab ? '_blank' : ''
-  })
-  nuxtApp.provide('formatBytes', formatBytes)
-  nuxtApp.provide('formatWallet', formatWallet)
-  nuxtApp.provide('formatProjectType', formatProjectType)
-  nuxtApp.provide('formatCategory', formatCategory)
-  nuxtApp.provide('formatCategoryHeader', formatCategoryHeader)
-  nuxtApp.provide('formatProjectStatus', formatProjectStatus)
+    return cosmeticsStore.externalLinksNewTab ? "_blank" : "";
+  });
+  nuxtApp.provide("formatBytes", formatBytes);
+  nuxtApp.provide("formatWallet", formatWallet);
+  nuxtApp.provide("formatProjectType", formatProjectType);
+  nuxtApp.provide("formatCategory", formatCategory);
+  nuxtApp.provide("formatCategoryHeader", formatCategoryHeader);
+  nuxtApp.provide("formatProjectStatus", formatProjectStatus);
 
   /*
     Only use on the complete list of versions for a project, partial lists will generate
     the wrong version slugs
   */
-  nuxtApp.provide('computeVersions', (versions, members) => {
-    const visitedVersions = []
-    const returnVersions = []
+  nuxtApp.provide("computeVersions", (versions, members) => {
+    const visitedVersions = [];
+    const returnVersions = [];
 
-    const authorMembers = {}
+    const authorMembers = {};
 
     for (const version of versions.sort(
-      (a, b) => nuxtApp.$dayjs(a.date_published) - nuxtApp.$dayjs(b.date_published)
+      (a, b) => nuxtApp.$dayjs(a.date_published) - nuxtApp.$dayjs(b.date_published),
     )) {
       if (visitedVersions.includes(version.version_number)) {
-        visitedVersions.push(version.version_number)
-        version.displayUrlEnding = version.id
+        visitedVersions.push(version.version_number);
+        version.displayUrlEnding = version.id;
       } else {
-        visitedVersions.push(version.version_number)
-        version.displayUrlEnding = version.version_number
+        visitedVersions.push(version.version_number);
+        version.displayUrlEnding = version.version_number;
       }
-      version.primaryFile = version.files.find((file) => file.primary) ?? version.files[0]
+      version.primaryFile = version.files.find((file) => file.primary) ?? version.files[0];
 
       if (!version.primaryFile) {
         version.primaryFile = {
           hashes: {
-            sha1: '',
-            sha512: '',
+            sha1: "",
+            sha512: "",
           },
-          url: '#',
-          filename: 'unknown',
+          url: "#",
+          filename: "unknown",
           primary: false,
           size: 0,
           file_type: null,
-        }
+        };
       }
 
-      version.author = authorMembers[version.author_id]
+      version.author = authorMembers[version.author_id];
       if (!version.author) {
-        version.author = members.find((x) => x.user.id === version.author_id)
-        authorMembers[version.author_id] = version.author
+        version.author = members.find((x) => x.user.id === version.author_id);
+        authorMembers[version.author_id] = version.author;
       }
 
-      returnVersions.push(version)
+      returnVersions.push(version);
     }
 
     return returnVersions
       .reverse()
       .map((version, index) => {
-        const nextVersion = returnVersions[index + 1]
+        const nextVersion = returnVersions[index + 1];
         if (nextVersion && version.changelog && nextVersion.changelog === version.changelog) {
-          return { duplicate: true, ...version }
+          return { duplicate: true, ...version };
         } else {
-          return { duplicate: false, ...version }
+          return { duplicate: false, ...version };
         }
       })
-      .sort((a, b) => nuxtApp.$dayjs(b.date_published) - nuxtApp.$dayjs(a.date_published))
-  })
-  nuxtApp.provide('getProjectTypeForDisplay', (type, categories) => {
-    if (type === 'mod') {
+      .sort((a, b) => nuxtApp.$dayjs(b.date_published) - nuxtApp.$dayjs(a.date_published));
+  });
+  nuxtApp.provide("getProjectTypeForDisplay", (type, categories) => {
+    if (type === "mod") {
       const isPlugin = categories.some((category) => {
-        return tagStore.value.loaderData.allPluginLoaders.includes(category)
-      })
+        return tagStore.value.loaderData.allPluginLoaders.includes(category);
+      });
       const isMod = categories.some((category) => {
-        return tagStore.value.loaderData.modLoaders.includes(category)
-      })
+        return tagStore.value.loaderData.modLoaders.includes(category);
+      });
       const isDataPack = categories.some((category) => {
-        return tagStore.value.loaderData.dataPackLoaders.includes(category)
-      })
+        return tagStore.value.loaderData.dataPackLoaders.includes(category);
+      });
 
       if (isMod && isPlugin && isDataPack) {
-        return 'mod, plugin, and data pack'
+        return "mod, plugin, and data pack";
       } else if (isMod && isPlugin) {
-        return 'mod and plugin'
+        return "mod and plugin";
       } else if (isMod && isDataPack) {
-        return 'mod and data pack'
+        return "mod and data pack";
       } else if (isPlugin && isDataPack) {
-        return 'plugin and data pack'
+        return "plugin and data pack";
       } else if (isDataPack) {
-        return 'data pack'
+        return "data pack";
       } else if (isPlugin) {
-        return 'plugin'
+        return "plugin";
       }
     }
 
-    return type
-  })
-  nuxtApp.provide('getProjectTypeForUrl', (type, loaders, tags) =>
-    getProjectTypeForUrlShorthand(type, loaders, tags)
-  )
-  nuxtApp.provide('cycleValue', cycleValue)
-  nuxtApp.provide('sortedCategories', () => {
+    return type;
+  });
+  nuxtApp.provide("getProjectTypeForUrl", (type, loaders, tags) =>
+    getProjectTypeForUrlShorthand(type, loaders, tags),
+  );
+  nuxtApp.provide("cycleValue", cycleValue);
+  nuxtApp.provide("sortedCategories", () => {
     return tagStore.value.categories.slice().sort((a, b) => {
-      const headerCompare = a.header.localeCompare(b.header)
+      const headerCompare = a.header.localeCompare(b.header);
       if (headerCompare !== 0) {
-        return headerCompare
+        return headerCompare;
       }
-      if (a.header === 'resolutions' && b.header === 'resolutions') {
-        return a.name.replace(/\D/g, '') - b.name.replace(/\D/g, '')
-      } else if (a.header === 'performance impact' && b.header === 'performance impact') {
-        const x = ['potato', 'low', 'medium', 'high', 'screenshot']
+      if (a.header === "resolutions" && b.header === "resolutions") {
+        return a.name.replace(/\D/g, "") - b.name.replace(/\D/g, "");
+      } else if (a.header === "performance impact" && b.header === "performance impact") {
+        const x = ["potato", "low", "medium", "high", "screenshot"];
 
-        return x.indexOf(a.name) - x.indexOf(b.name)
+        return x.indexOf(a.name) - x.indexOf(b.name);
       }
-      return 0
-    })
-  })
-  nuxtApp.provide('notify', (notif) => addNotification(notif))
-})
+      return 0;
+    });
+  });
+  nuxtApp.provide("notify", (notif) => addNotification(notif));
+});
 export const formatNumber = (number, abbreviate = true) => {
-  const x = +number
+  const x = +number;
   if (x >= 1000000 && abbreviate) {
-    return (x / 1000000).toFixed(2).toString() + 'M'
+    return (x / 1000000).toFixed(2).toString() + "M";
   } else if (x >= 10000 && abbreviate) {
-    return (x / 1000).toFixed(1).toString() + 'k'
+    return (x / 1000).toFixed(1).toString() + "k";
   } else {
-    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
   }
-}
+};
 
 export const formatMoney = (number, abbreviate = false) => {
-  number = Math.floor(number * 100) / 100
-  const x = +number
+  number = Math.floor(number * 100) / 100;
+  const x = +number;
   if (x >= 1000000 && abbreviate) {
-    return '$' + (x / 1000000).toFixed(2).toString() + 'M'
+    return "$" + (x / 1000000).toFixed(2).toString() + "M";
   } else if (x >= 10000 && abbreviate) {
-    return '$' + (x / 1000).toFixed(2).toString() + 'k'
+    return "$" + (x / 1000).toFixed(2).toString() + "k";
   } else {
     return (
-      '$' +
+      "$" +
       x
         .toFixed(2)
         .toString()
-        .replace(/\B(?=(\d{3})+(?!\d))/g, ',')
-    )
+        .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+    );
   }
-}
+};
 
 export const formatBytes = (bytes, decimals = 2) => {
   if (bytes === 0) {
-    return '0 Bytes'
+    return "0 Bytes";
   }
 
-  const k = 1024
-  const dm = decimals < 0 ? 0 : decimals
-  const sizes = ['Bytes', 'KiB', 'MiB', 'GiB']
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["Bytes", "KiB", "MiB", "GiB"];
 
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
 
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
-}
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+};
 
 export const capitalizeString = (name) => {
-  return name ? name.charAt(0).toUpperCase() + name.slice(1) : name
-}
+  return name ? name.charAt(0).toUpperCase() + name.slice(1) : name;
+};
 
 export const formatWallet = (name) => {
-  if (name === 'paypal') {
-    return 'PayPal'
+  if (name === "paypal") {
+    return "PayPal";
   }
-  return capitalizeString(name)
-}
+  return capitalizeString(name);
+};
 
 export const formatProjectType = (name) => {
-  if (name === 'resourcepack') {
-    return 'Resource Pack'
-  } else if (name === 'datapack') {
-    return 'Data Pack'
+  if (name === "resourcepack") {
+    return "Resource Pack";
+  } else if (name === "datapack") {
+    return "Data Pack";
   }
 
-  return capitalizeString(name)
-}
+  return capitalizeString(name);
+};
 
 export const formatCategory = (name) => {
-  if (name === 'modloader') {
-    return "Risugami's ModLoader"
-  } else if (name === 'bungeecord') {
-    return 'BungeeCord'
-  } else if (name === 'liteloader') {
-    return 'LiteLoader'
-  } else if (name === 'neoforge') {
-    return 'NeoForge'
-  } else if (name === 'game-mechanics') {
-    return 'Game Mechanics'
-  } else if (name === 'worldgen') {
-    return 'World Generation'
-  } else if (name === 'core-shaders') {
-    return 'Core Shaders'
-  } else if (name === 'gui') {
-    return 'GUI'
-  } else if (name === '8x-') {
-    return '8x or lower'
-  } else if (name === '512x+') {
-    return '512x or higher'
-  } else if (name === 'kitchen-sink') {
-    return 'Kitchen Sink'
-  } else if (name === 'path-tracing') {
-    return 'Path Tracing'
-  } else if (name === 'pbr') {
-    return 'PBR'
-  } else if (name === 'datapack') {
-    return 'Data Pack'
-  } else if (name === 'colored-lighting') {
-    return 'Colored Lighting'
-  } else if (name === 'optifine') {
-    return 'OptiFine'
-  } else if (name === 'mrpack') {
-    return 'Modpack'
-  } else if (name === 'minecraft') {
-    return 'Resource Pack'
-  } else if (name === 'vanilla') {
-    return 'Vanilla Shader'
+  if (name === "modloader") {
+    return "Risugami's ModLoader";
+  } else if (name === "bungeecord") {
+    return "BungeeCord";
+  } else if (name === "liteloader") {
+    return "LiteLoader";
+  } else if (name === "neoforge") {
+    return "NeoForge";
+  } else if (name === "game-mechanics") {
+    return "Game Mechanics";
+  } else if (name === "worldgen") {
+    return "World Generation";
+  } else if (name === "core-shaders") {
+    return "Core Shaders";
+  } else if (name === "gui") {
+    return "GUI";
+  } else if (name === "8x-") {
+    return "8x or lower";
+  } else if (name === "512x+") {
+    return "512x or higher";
+  } else if (name === "kitchen-sink") {
+    return "Kitchen Sink";
+  } else if (name === "path-tracing") {
+    return "Path Tracing";
+  } else if (name === "pbr") {
+    return "PBR";
+  } else if (name === "datapack") {
+    return "Data Pack";
+  } else if (name === "colored-lighting") {
+    return "Colored Lighting";
+  } else if (name === "optifine") {
+    return "OptiFine";
+  } else if (name === "mrpack") {
+    return "Modpack";
+  } else if (name === "minecraft") {
+    return "Resource Pack";
+  } else if (name === "vanilla") {
+    return "Vanilla Shader";
   }
 
-  return capitalizeString(name)
-}
+  return capitalizeString(name);
+};
 
 export const formatCategoryHeader = (name) => {
-  return capitalizeString(name)
-}
+  return capitalizeString(name);
+};
 
 export const formatProjectStatus = (name) => {
-  if (name === 'approved') {
-    return 'Listed'
-  } else if (name === 'processing') {
-    return 'Under review'
+  if (name === "approved") {
+    return "Listed";
+  } else if (name === "processing") {
+    return "Under review";
   }
 
-  return capitalizeString(name)
-}
+  return capitalizeString(name);
+};
 
 export const formatVersions = (tag, versionArray) => {
-  const allVersions = tag.value.gameVersions.slice().reverse()
-  const allReleases = allVersions.filter((x) => x.version_type === 'release')
+  const allVersions = tag.value.gameVersions.slice().reverse();
+  const allReleases = allVersions.filter((x) => x.version_type === "release");
 
-  const intervals = []
-  let currentInterval = 0
+  const intervals = [];
+  let currentInterval = 0;
 
   for (let i = 0; i < versionArray.length; i++) {
-    const index = allVersions.findIndex((x) => x.version === versionArray[i])
-    const releaseIndex = allReleases.findIndex((x) => x.version === versionArray[i])
+    const index = allVersions.findIndex((x) => x.version === versionArray[i]);
+    const releaseIndex = allReleases.findIndex((x) => x.version === versionArray[i]);
 
     if (i === 0) {
-      intervals.push([[versionArray[i], index, releaseIndex]])
+      intervals.push([[versionArray[i], index, releaseIndex]]);
     } else {
-      const intervalBase = intervals[currentInterval]
+      const intervalBase = intervals[currentInterval];
 
       if (
         (index - intervalBase[intervalBase.length - 1][1] === 1 ||
           releaseIndex - intervalBase[intervalBase.length - 1][2] === 1) &&
-        (allVersions[intervalBase[0][1]].version_type === 'release' ||
-          allVersions[index].version_type !== 'release')
+        (allVersions[intervalBase[0][1]].version_type === "release" ||
+          allVersions[index].version_type !== "release")
       ) {
-        intervalBase[1] = [versionArray[i], index, releaseIndex]
+        intervalBase[1] = [versionArray[i], index, releaseIndex];
       } else {
-        currentInterval += 1
-        intervals[currentInterval] = [[versionArray[i], index, releaseIndex]]
+        currentInterval += 1;
+        intervals[currentInterval] = [[versionArray[i], index, releaseIndex]];
       }
     }
   }
 
-  const newIntervals = []
+  const newIntervals = [];
   for (let i = 0; i < intervals.length; i++) {
-    const interval = intervals[i]
+    const interval = intervals[i];
 
     if (interval.length === 2 && interval[0][2] !== -1 && interval[1][2] === -1) {
-      let lastSnapshot = null
+      let lastSnapshot = null;
       for (let j = interval[1][1]; j > interval[0][1]; j--) {
-        if (allVersions[j].version_type === 'release') {
+        if (allVersions[j].version_type === "release") {
           newIntervals.push([
             interval[0],
             [
@@ -295,38 +296,38 @@ export const formatVersions = (tag, versionArray) => {
               j,
               allReleases.findIndex((x) => x.version === allVersions[j].version),
             ],
-          ])
+          ]);
 
           if (lastSnapshot !== null && lastSnapshot !== j + 1) {
-            newIntervals.push([[allVersions[lastSnapshot].version, lastSnapshot, -1], interval[1]])
+            newIntervals.push([[allVersions[lastSnapshot].version, lastSnapshot, -1], interval[1]]);
           } else {
-            newIntervals.push([interval[1]])
+            newIntervals.push([interval[1]]);
           }
 
-          break
+          break;
         } else {
-          lastSnapshot = j
+          lastSnapshot = j;
         }
       }
     } else {
-      newIntervals.push(interval)
+      newIntervals.push(interval);
     }
   }
 
-  const output = []
+  const output = [];
 
   for (const interval of newIntervals) {
     if (interval.length === 2) {
-      output.push(`${interval[0][0]}–${interval[1][0]}`)
+      output.push(`${interval[0][0]}–${interval[1][0]}`);
     } else {
-      output.push(interval[0][0])
+      output.push(interval[0][0]);
     }
   }
 
-  return (output.length === 0 ? versionArray : output).join(', ')
-}
+  return (output.length === 0 ? versionArray : output).join(", ");
+};
 
 export const cycleValue = (value, values) => {
-  const index = values.indexOf(value) + 1
-  return values[index % values.length]
-}
+  const index = values.indexOf(value) + 1;
+  return values[index % values.length];
+};

apps/frontend/src/plugins/tooltip.js

@@ -1,6 +1,7 @@
-import FloatingVue from 'floating-vue'
-import 'floating-vue/dist/style.css'
+import FloatingVue from "floating-vue";
+import "floating-vue/dist/style.css";
 
+// eslint-disable-next-line no-undef
 export default defineNuxtPlugin(({ vueApp }) => {
-  vueApp.use(FloatingVue)
-})
+  vueApp.use(FloatingVue);
+});