Allow reference tab by name in URL directly, Fix Dead Links

This commit is contained in:
Crimekillz 2024-06-30 01:06:27 +02:00
parent 2ef8ae4e46
commit 9f5a433963
5 changed files with 12 additions and 22 deletions

View File

@ -225,7 +225,7 @@
<MkA <MkA
v-if="notification.type === 'achievementEarned'" v-if="notification.type === 'achievementEarned'"
class="text" class="text"
:to="'/my/achievements'"> :to="'/my/space/achievements'">
{{ i18n.ts._achievements._types['_' + notification.achievement].title }} {{ i18n.ts._achievements._types['_' + notification.achievement].title }}
</MkA> </MkA>
<span <span

View File

@ -71,6 +71,10 @@
import "swiper/scss"; import "swiper/scss";
import "swiper/scss/virtual"; import "swiper/scss/virtual";
const props = defineProps<{
tab?: string;
}>();
definePageMetadata({ definePageMetadata({
title: i18n.ts.space, title: i18n.ts.space,
icon: 'ph-rocket-launch ph-bold ph-lg', icon: 'ph-rocket-launch ph-bold ph-lg',
@ -84,6 +88,7 @@
const tabs = ["achievements", "reels", "journal"]; const tabs = ["achievements", "reels", "journal"];
let tab = $ref(tabs[0]); let tab = $ref(tabs[0]);
watch($$(tab), () => syncSlide(tabs.indexOf(tab))); watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
const MOBILE_THRESHOLD = 500; const MOBILE_THRESHOLD = 500;
@ -124,6 +129,7 @@
function onSlideChange() { function onSlideChange() {
tab = tabs[swiperRef.activeIndex]; tab = tabs[swiperRef.activeIndex];
window.history.pushState(null, null, '/my/space/' + tab);
} }
function syncSlide(index) { function syncSlide(index) {
@ -131,7 +137,7 @@
} }
onMounted(() => { onMounted(() => {
syncSlide(tabs.indexOf(swiperRef.activeIndex)); syncSlide(tabs.indexOf(props.tab ?? swiperRef.activeIndex));
}); });
onActivated(() => { onActivated(() => {

View File

@ -341,7 +341,7 @@ export const routes = [
component: page(() => import("./pages/discover.vue")), component: page(() => import("./pages/discover.vue")),
}, },
{ {
path: "/discover", path: "/discover/:tab?",
component: page(() => import("./pages/discover.vue")), component: page(() => import("./pages/discover.vue")),
}, },
{ {
@ -582,7 +582,7 @@ export const routes = [
loginRequired: true, loginRequired: true,
}, },
{ {
path: "/my/snippets", path: "/my/snippets/:tab?",
component: page(() => import("./pages/my-snippets/index.vue")), component: page(() => import("./pages/my-snippets/index.vue")),
loginRequired: true, loginRequired: true,
}, },
@ -643,12 +643,12 @@ export const routes = [
loginRequired: true, loginRequired: true,
}, },
{ {
path: "/my/space", path: "/my/space/:tab?",
component: page(() => import("./pages/my-space/index.vue")), component: page(() => import("./pages/my-space/index.vue")),
loginRequired: true, loginRequired: true,
}, },
{ {
path: "/news", path: "/news/:tab?",
component: page(() => import("./pages/news.vue")), component: page(() => import("./pages/news.vue")),
loginRequired: true, loginRequired: true,
}, },

View File

@ -45,14 +45,6 @@
><i class="ph-lightning ph-bold ph-lg icon"></i ><i class="ph-lightning ph-bold ph-lg icon"></i
>{{ i18n.ts.discover }}</MkA >{{ i18n.ts.discover }}</MkA
> >
<MkA to="/pages" class="link" active-class="active"
><i class="ph-file-text ph-bold ph-lg icon"></i
>{{ i18n.ts.pages }}</MkA
>
<MkA to="/gallery" class="link" active-class="active"
><i class="ph-image-square ph-bold ph-lg icon"></i
>{{ i18n.ts.gallery }}</MkA
>
<MkA to="/settings" class="link" active-class="active"> <MkA to="/settings" class="link" active-class="active">
<i class="ph-gear-six ph-bold ph-lg icon"></i <i class="ph-gear-six ph-bold ph-lg icon"></i
><span>{{ i18n.ts.settings }}</span> ><span>{{ i18n.ts.settings }}</span>

View File

@ -18,14 +18,6 @@
><i class="ph-lightning ph-bold ph-lg icon"></i ><i class="ph-lightning ph-bold ph-lg icon"></i
>{{ i18n.ts.discover }}</MkA >{{ i18n.ts.discover }}</MkA
> >
<MkA to="/pages" class="link" active-class="active"
><i class="ph-file-text ph-bold ph-lg icon"></i
>{{ i18n.ts.pages }}</MkA
>
<MkA to="/gallery" class="link" active-class="active"
><i class="ph-image-square ph-bold ph-lg icon"></i
>{{ i18n.ts.gallery }}</MkA
>
<div v-if="info" class="page active link"> <div v-if="info" class="page active link">
<div class="title"> <div class="title">
<i v-if="info.icon" class="icon" :class="info.icon"></i> <i v-if="info.icon" class="icon" :class="info.icon"></i>