1
0

Add TailwindCSS (#1252)

* Setup TailwindCSS

* Fully setup configuration

* Refactor some tailwind variables
This commit is contained in:
Evan Song
2024-07-06 20:57:32 -07:00
committed by GitHub
parent 0f2ddb452c
commit abec2e48d4
176 changed files with 7905 additions and 7433 deletions

View File

@@ -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);
});

View File

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

View File

@@ -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 });
});
});

View File

@@ -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];
};

View File

@@ -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);
});