fix tag on explore

This commit is contained in:
ThatOneCalculator 2023-04-19 21:00:01 -07:00
parent c6f0047aed
commit f584c460e3
No known key found for this signature in database
GPG Key ID: 8703CACD01000000
4 changed files with 74 additions and 25 deletions

View File

@ -367,11 +367,7 @@ export default defineComponent({
MkA, MkA,
{ {
key: Math.random(), key: Math.random(),
to: this.isNote to: `/tags/${encodeURIComponent(token.props.hashtag)}`,
? `/tags/${encodeURIComponent(token.props.hashtag)}`
: `/explore/tags/${encodeURIComponent(
token.props.hashtag,
)}`,
style: "color:var(--hashtag);", style: "color:var(--hashtag);",
}, },
`#${token.props.hashtag}`, `#${token.props.hashtag}`,

View File

@ -80,14 +80,14 @@
<MkA <MkA
v-for="tag in tagsLocal" v-for="tag in tagsLocal"
:key="'local:' + tag.tag" :key="'local:' + tag.tag"
:to="`/explore/tags/${tag.tag}`" :to="`/tags/${tag.tag}`"
class="local" class="local"
>{{ tag.tag }}</MkA >{{ tag.tag }}</MkA
> >
<MkA <MkA
v-for="tag in tagsRemote" v-for="tag in tagsRemote"
:key="'remote:' + tag.tag" :key="'remote:' + tag.tag"
:to="`/explore/tags/${tag.tag}`" :to="`/tags/${tag.tag}`"
>{{ tag.tag }}</MkA >{{ tag.tag }}</MkA
> >
</div> </div>

View File

@ -39,7 +39,6 @@ import { Virtual } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue"; import { Swiper, SwiperSlide } from "swiper/vue";
import XFeatured from "./explore.featured.vue"; import XFeatured from "./explore.featured.vue";
import XUsers from "./explore.users.vue"; import XUsers from "./explore.users.vue";
import type MkFolder from "@/components/MkFolder.vue";
import { definePageMetadata } from "@/scripts/page-metadata"; import { definePageMetadata } from "@/scripts/page-metadata";
import { deviceKind } from "@/scripts/device-kind"; import { deviceKind } from "@/scripts/device-kind";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
@ -47,23 +46,10 @@ import { defaultStore } from "@/store";
import "swiper/scss"; import "swiper/scss";
import "swiper/scss/virtual"; import "swiper/scss/virtual";
const props = defineProps<{
tag?: string;
}>();
const tabs = ["featured", "users"]; const tabs = ["featured", "users"];
let tab = $ref(tabs[0]); let tab = $ref(tabs[0]);
watch($$(tab), () => syncSlide(tabs.indexOf(tab))); watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
let tagsEl = $ref<InstanceType<typeof MkFolder>>();
watch(
() => props.tag,
() => {
if (tagsEl) tagsEl.toggleContent(props.tag == null);
}
);
const headerActions = $computed(() => []); const headerActions = $computed(() => []);
const headerTabs = $computed(() => [ const headerTabs = $computed(() => [

View File

@ -1,24 +1,58 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header <template #header
><MkPageHeader :actions="headerActions" :tabs="headerTabs" ><MkPageHeader
v-model:tab="tab"
:actions="headerActions"
:tabs="headerTabs"
:display-back-button="true"
/></template> /></template>
<MkSpacer :content-max="800"> <MkSpacer :content-max="800">
<XNotes class="_content" :pagination="pagination" /> <swiper
:modules="[Virtual]"
:space-between="20"
:virtual="true"
:allow-touch-move="
!(
deviceKind === 'desktop' &&
!defaultStore.state.swipeOnDesktop
)
"
@swiper="setSwiperRef"
@slide-change="onSlideChange"
>
<swiper-slide>
<XNotes ref="notes" :pagination="notesPagination" />
</swiper-slide>
<swiper-slide>
<XUserList
ref="users"
class="_gap"
:pagination="usersPagination"
/>
</swiper-slide>
</swiper>
</MkSpacer> </MkSpacer>
</MkStickyContainer> </MkStickyContainer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from "vue"; import { computed, watch, onMounted } from "vue";
import { Virtual } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import XNotes from "@/components/MkNotes.vue"; import XNotes from "@/components/MkNotes.vue";
import XUserList from "@/components/MkUserList.vue";
import { i18n } from "@/i18n";
import { definePageMetadata } from "@/scripts/page-metadata"; import { definePageMetadata } from "@/scripts/page-metadata";
import { defaultStore } from "@/store";
import "swiper/scss";
import "swiper/scss/virtual";
const props = defineProps<{ const props = defineProps<{
tag: string; tag: string;
}>(); }>();
const pagination = { const notesPagination = {
endpoint: "notes/search-by-tag" as const, endpoint: "notes/search-by-tag" as const,
limit: 10, limit: 10,
params: computed(() => ({ params: computed(() => ({
@ -26,10 +60,43 @@ const pagination = {
})), })),
}; };
const usersPagination = {
endpoint: "users/search" as const,
limit: 10,
params: computed(() => ({
query: `#${props.tag}`,
origin: "combined",
})),
};
const tabs = ["notes", "users"];
let tab = $ref(tabs[0]);
watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
const headerActions = $computed(() => []); const headerActions = $computed(() => []);
const headerTabs = $computed(() => []); const headerTabs = $computed(() => []);
let swiperRef = null;
function setSwiperRef(swiper) {
swiperRef = swiper;
syncSlide(tabs.indexOf(tab));
}
function onSlideChange() {
tab = tabs[swiperRef.activeIndex];
}
function syncSlide(index) {
swiperRef.slideTo(index);
}
onMounted(() => {
syncSlide(tabs.indexOf(swiperRef.activeIndex));
});
definePageMetadata( definePageMetadata(
computed(() => ({ computed(() => ({
title: props.tag, title: props.tag,