Skip to content

Commit

Permalink
wip: recode
Browse files Browse the repository at this point in the history
  • Loading branch information
Timeraa committed Jul 13, 2024
1 parent 3b2c35f commit 402c505
Show file tree
Hide file tree
Showing 25 changed files with 878 additions and 268 deletions.
9 changes: 6 additions & 3 deletions app.vue
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,19 @@ useHead({
],
});
const { t } = useI18n();
useSeoMeta({
title: "PreMiD",
ogTitle: "PreMiD",
description: "PreMiD is a simple, configurable utility that allows you to show what you're doing on the web in your Discord now playing status.",
ogDescription: "PreMiD is a simple, configurable utility that allows you to show what you're doing on the web in your Discord now playing status.",
description: t("page.home.description"),
ogDescription: t("page.home.description"),
ogImage: "https://cdn.rcd.gg/PreMiD.png",
twitterCard: "summary_large_image",
ogUrl: "https://premid.app",
twitterTitle: "PreMiD",
twitterDescription: "PreMiD is a simple, configurable utility that allows you to show what you're doing on the web in your Discord now playing status.",
twitterDescription: t("page.home.description"),
applicationName: "PreMiD",
twitterImage: "https://cdn.rcd.gg/PreMiD.png",
});
</script>
Expand Down
8 changes: 4 additions & 4 deletions components/BrowserCard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -59,20 +59,20 @@ onBeforeUnmount(() => {
<template>
<ClientOnly>
<VTooltip :disabled="!isWIP">
<div class="select-none flex gap-2 items-center cursor-pointer relative font-bold bg-gray transition-colors px5 border-rounded w-50 h-20" :class="[highlight ? 'bg-primary hover:bg-primary-highlight c-black' : '', isWIP ? 'bg-op-60 cursor-not-allowed' : 'hover:bg-primary']" @click="emit('click')">
<div class="select-none flex gap-2 items-center cursor-pointer relative font-bold bg-gray transition-colors px5 border-rounded w-50 h-20" :class="[highlight && !isWIP ? 'bg-primary hover:bg-primary-highlight c-black' : '', isWIP ? 'bg-op-60 cursor-not-allowed' : 'hover:bg-primary']" @click="!isWIP && emit('click')">
<FAIcon
class="mr-2 h-auto w-7"
:icon="currentIcon"
/>
<span>
{{ browser }}
</span>
<span v-if="isWIP" class="absolute text-white rounded-full py-1 top--2 right--2 bg-red-500 px-2">
WIP
<span v-if="isWIP" class="absolute text-white rounded-full py-1 top--2 right--2 bg-red-500 px-2 text-ellipsis max-w-25 max-h-7 overflow-hidden whitespace-nowrap">
{{ $t("component.browserCard.wip") }}
</span>
</div>
<template #popper>
{{ $t("page.downloads.browser.support.safari") }}
{{ $t("component.browserCard.support.safari") }}
</template>
</VTooltip>
</ClientOnly>
Expand Down
12 changes: 6 additions & 6 deletions components/DonationModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -46,26 +46,26 @@ defineExpose({
</button>
<div class="text-center">
<h1 class="font-extrabold text-2xl text-primary mb-4">
A Quick Favor...
{{ $t("component.donationModal.title") }}
</h1>
<p class="mb-4 text-lg text-gray-300">
We hope you're gonna love PreMiD! If it brings a smile to your face, why not spread some love back? Our team of volunteers put their hearts into making it awesome just for you!
{{ $t("component.donationModal.description") }}
</p>
<div class="flex items-center justify-center mb-6">
<div class="grid grid-cols-2">
<a href="https://www.patreon.com/Timeraa" target="_blank" class="flex items-center justify-center font-bold text-white rounded-full h12.5 bg-orange-500 py-2 px-4 m-2 hover:bg-orange-600 transition duration-300 inline-block">
<FAIcon icon="fa-brands fa-patreon" class="mr-2 h5" /> Support on Patreon
<FAIcon icon="fa-brands fa-patreon" class="mr-2 h5" /> {{ $t("component.donationModal.patreon", { name: "Patreon" }) }}
</a>
<a href="https://github.com/sponsors/PreMiD" target="_blank" class="h12.5 bg-black font-bold text-white rounded-full py-2 px-4 m-2 transition duration-300 inline-block flex items-center justify-center cursor-pointer hover:bg-op-80">
<FAIcon icon="fa-brands fa-github" class="mr-2 h5" /> Sponsor on GitHub
<FAIcon icon="fa-brands fa-github" class="mr-2 h5" /> {{ $t("component.donationModal.github", { name: "GitHub" }) }}
</a>
</div>
</div>
<p v-if="!showButton" class="text-gray-400">
Hold tight... loading the magic button...
{{ $t("component.donationModal.holdTight") }}
</p>
<button v-if="showButton" class="cursor-pointer text-white rounded-full py-2 transition duration-300 font-size-4 bg-primary hover:bg-primary-highlight outline-none b-solid b-transparent font-semibold px-6" @click="continueButton">
Continue
{{ $t("component.donationModal.continue") }}
</button>
</div>
</div>
Expand Down
19 changes: 8 additions & 11 deletions components/Footer.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<script lang="ts" setup>
const { t } = useI18n();
const localePath = useLocalePath();
const partners = [
{
Expand All @@ -14,7 +15,7 @@ const partners = [
},
];
const linkSections: { title: string; links: { href: string; icon?: string; label: string }[] }[] = [
const linkSections = computed<{ title: string; links: { href: string; icon?: string; label: string }[] }[]>(() => [
{
title: t("footer.followUs"),
links: [
Expand All @@ -40,7 +41,7 @@ const linkSections: { title: string; links: { href: string; icon?: string; label
links: [
{
label: t("footer.supportList.donate"),
href: "/donate",
href: localePath("/donate"),
},
{
label: t("footer.supportList.contribute"),
Expand All @@ -55,13 +56,9 @@ const linkSections: { title: string; links: { href: string; icon?: string; label
{
title: t("footer.more"),
links: [
{
label: t("footer.moreList.troubleshooting"),
href: "/troubleshooting",
},
{
label: t("footer.moreList.faq"),
href: "/downloads#faq",
href: localePath("/downloads#faq"),
},
{
label: t("footer.moreList.documentation"),
Expand All @@ -78,19 +75,19 @@ const linkSections: { title: string; links: { href: string; icon?: string; label
links: [
{
label: t("footer.legalList.privacyPolicy"),
href: "/privacy",
href: localePath("/privacy"),
},
{
label: t("footer.legalList.termsOfService"),
href: "/terms",
href: localePath("/terms"),
},
{
label: t("footer.legalList.cookiePolicy"),
href: "/cookie",
href: localePath("/cookie"),
},
],
},
];
]);
</script>

<template>
Expand Down
29 changes: 19 additions & 10 deletions components/Header.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,34 +2,42 @@
const { t } = useI18n();
const links = computed(() => [
{
href: "/store",
to: "/store",
icon: "fa-solid fa-cart-arrow-down",
name: t("header.links.store"),
},
{
href: "/downloads",
to: "/downloads",
icon: "fa-solid fa-download",
name: t("header.links.downloads"),
},
{
href: "/contributors",
to: "/contributors",
icon: "fa-solid fa-handshake-angle",
name: t("header.links.contributors"),
},
]);
const navOpen = ref(false);
const localePath = useLocalePath();
useHead({
htmlAttrs: {
class: () => navOpen.value ? "overflow-hidden" : "",
},
});
</script>

<template>
<div>
<PageBanner />
<!-- <PageBanner /> -->
<div
id="header"
class="flex items-center w-full select-none top-0 lg-md:relative lt-md:sticky z-1000 flex-justify-between p-3 bg-bg-primary"
>
<NuxtLink
to="/"
:to="localePath('/')"
class="color-primary font-discord font-size-8"
aria-label="Homepage"
>
Expand All @@ -40,8 +48,8 @@ const navOpen = ref(false);
<transition-group name="slide-fade" tag="div">
<NuxtLink
v-for="link in links"
:key="link.href"
:href="link.href"
:key="link.to"
:to="localePath(link.to)"
class="font-size-4.5 color-link-inactive decoration-none mx2 font-900 hover-color-primary"
active-class="active"
:aria-label="`Link to ${link.name}`"
Expand Down Expand Up @@ -76,7 +84,7 @@ const navOpen = ref(false);
<Transition>
<div
v-if="navOpen"
class="top-0 w-full fixed left-0 z-50 h-screen bg-black/50 p-5 backdrop-blur-sm transition-opacity"
class="top-0 w-full fixed left-0 z-50 h-screen bg-black/70 p-5 backdrop-blur-sm transition-opacity"
>
<div class="flex gap-2 flex-col">
<button
Expand All @@ -89,9 +97,10 @@ const navOpen = ref(false);

<NuxtLink
v-for="link in links"
:key="link.href"
:href="link.href"
:key="link.to"
:to="localePath(link.to)"
class="font-size-4.5 color-link-inactive decoration-none mx2 font-900 hover-color-primary"
@click="navOpen = false"
>
<span class="items-center block">
<span
Expand Down
11 changes: 6 additions & 5 deletions components/StoreCard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,9 @@ tinycolor(presence.metadata.color).getLuminance() > 0.95
};
const router = useRouter();
const localePath = useLocalePath();
function goToPresence() {
router.push(`/store/${presence.metadata.service}`);
router.push(localePath(`/store/${presence.metadata.service}`));
}
</script>

Expand Down Expand Up @@ -76,15 +77,15 @@ function goToPresence() {
class="gap-2 flex items-center justify-center h-10 cursor-pointer font-bold bg-primary hover:bg-primary-highlight rounded-full transition-colors text-white border-none w-40"
>
<FAIcon class="h5 w5" icon="fa-solid fa-plus" />
<p class="">
Add Presence
<p>
{{ $t("component.storeCard.addPresence") }}
</p>
</button>
<button
<!-- <button
class="rounded-full text-white h-10 border-none gap-2 flex items-center justify-center w-10 cursor-pointer transition-colors bg-red hover:bg-red-3"
>
<FAIcon class="h5 w5" icon="fa-solid fa-heart" />
</button>
</button> -->
</div>
</div>
</Transition>
Expand Down
6 changes: 4 additions & 2 deletions components/UserChip.vue
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,13 @@ const userColor = computed(() => {
return "#fff";
return data.value.credits?.[0]?.user?.roleColor ?? "#fff";
});
const localePath = useLocalePath();
</script>

<template>
<span v-bind="$attrs">
<NuxtLink :to="`/users/${id}`" class="flex items-center gap-2">
<NuxtLink :to="localePath(`/users/${id}`)" class="flex items-center gap-2">
<template v-if="status === 'success' && username">
<NuxtImg
class="rounded-full h-6 w-6"
Expand All @@ -43,7 +45,7 @@ const userColor = computed(() => {
</template>
<template v-else-if="status === 'pending'">
<p class="c-text">
Loading...
{{ $t("component.userChip.loading") }}
</p>
</template>
<template v-else>
Expand Down
25 changes: 13 additions & 12 deletions components/store/SearchBar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -10,23 +10,23 @@ const sortOrder = defineModel<string>("sortBy");
//* Nuxt apparently does not like using route query in defaults
searchTerm.value = route.query.search?.toString() || "";
selectedCategory.value = route.query.category?.toString() || "";
sortOrder.value = route.query.sortBy?.toString() || "Most Used";
sortOrder.value = route.query.sortBy?.toString() || t("component.searchBar.sort.mostUsed");
const categories = [
{ tag: "", text: t("page.store.categories.all"), icon: "fa-solid fa-tag" },
{ tag: "anime", text: t("page.store.categories.anime"), icon: "fa-solid fa-film" },
{ tag: "games", text: t("page.store.categories.games"), icon: "fa-solid fa-gamepad" },
{ tag: "music", text: t("page.store.categories.music"), icon: "fa-solid fa-music" },
{ tag: "other", text: t("page.store.categories.other"), icon: "fa-solid fa-link" },
{ tag: "socials", text: t("page.store.categories.socials"), icon: "fa-solid fa-lightbulb" },
{ tag: "videos", text: t("page.store.categories.videos"), icon: "fa-solid fa-video" },
{ tag: "", text: t("component.searchBar.categories.all"), icon: "fa-solid fa-tag" },
{ tag: "anime", text: t("component.searchBar.categories.anime"), icon: "fa-solid fa-film" },
{ tag: "games", text: t("component.searchBar.categories.games"), icon: "fa-solid fa-gamepad" },
{ tag: "music", text: t("component.searchBar.categories.music"), icon: "fa-solid fa-music" },
{ tag: "other", text: t("component.searchBar.categories.other"), icon: "fa-solid fa-link" },
{ tag: "socials", text: t("component.searchBar.categories.socials"), icon: "fa-solid fa-lightbulb" },
{ tag: "videos", text: t("component.searchBar.categories.videos"), icon: "fa-solid fa-video" },
];
const isDropdownOpen = ref(false);
const options = [
{ text: "Most Used", icon: "fa-solid fa-sort-amount-down" },
{ text: "Alphabetical", icon: "fa-solid fa-sort-alpha-down" },
{ text: "Liked First", icon: "fa-solid fa-heart" },
{ text: t("component.searchBar.sort.mostUsed"), icon: "fa-solid fa-sort-amount-down" },
{ text: t("component.searchBar.sort.alphabetical"), icon: "fa-solid fa-sort-alpha-down" },
{ text: t("component.searchBar.sort.likedFirst"), icon: "fa-solid fa-heart" },
];
const sortByDropdown = ref<HTMLDivElement>();
Expand Down Expand Up @@ -61,9 +61,10 @@ watch([searchTerm, selectedCategory, sortOrder], updateQuery);
<div class="flex items-center gap-2 h-10 relative rounded bg-gray-secondary">
<input
v-model.trim="searchTerm"
autofocus
type="text"
class="text-white bg-transparent p-2 w-full h-10 rounded b-none outline-none text-sm placeholder:font-bold pl-8"
:placeholder="$t('page.store.filter.search')"
:placeholder="$t('component.searchBar.search')"
>
<label class="absolute h-10 flex items-center left-2">
<FAIcon class="h-4 w-4 text-primary" icon="fa-solid fa-magnifying-glass" />
Expand Down
3 changes: 3 additions & 0 deletions composables/useExtension.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export const useExtension = () => {
return ref()
}
53 changes: 53 additions & 0 deletions error.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<script setup lang="ts">
import type { NuxtError } from "#app";
const { error } = defineProps<{
error: NuxtError;
}>();
const { t } = useI18n();
const localePath = useLocalePath();
const errorMessage = computed(() => {
switch (error.statusCode) {
case 404:
return t("error.404.message");
case 500:
return t("error.500.message");
default:
return t("error.default.message");
}
});
const errorTitle = computed(() => {
switch (error.statusCode) {
case 404:
return t("error.404.title");
case 500:
return t("error.500.title");
default:
return t("error.default.title");
}
});
</script>

<template>
<NuxtLayout>
<div class="flex justify-center items-center h-full">
<div class="max-w-screen-lg mx5">
<div class="text-center">
<h1 class="font-extrabold text-4xl">
{{ errorTitle }}
</h1>
<p class="text-lg mb-8">
{{ errorMessage }}
</p>
<NuxtLink :to="localePath('/')" class="b-none font-size-4 font-bold px-6 rounded-full shadow-lg transition-colors cursor-pointer bg-white text-black py-3 hover:bg-light-900">
{{ $t("error.default.button") }}
</NuxtLink>
</div>
</div>
</div>
</NuxtLayout>
</template>
3 changes: 3 additions & 0 deletions i18n.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default defineI18nConfig(() => ({
fallbackLocale: "en",
}));
Loading

0 comments on commit 402c505

Please sign in to comment.