welcome page
This commit is contained in:
Freeplay
parent
ac082353d6
commit
0723e304d8
2 changed files with 223 additions and 372 deletions
|
|
@ -71,7 +71,7 @@
|
||||||
ref="tabsEl"
|
ref="tabsEl"
|
||||||
v-if="hasTabs"
|
v-if="hasTabs"
|
||||||
class="tabs"
|
class="tabs"
|
||||||
:class="{ collapse: hasTabs && tabs.length > 3 }"
|
:class="{ collapse: hasTabs && tabs.length > 3 && !noTabCollapse }"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
v-for="tab in tabs"
|
v-for="tab in tabs"
|
||||||
|
|
@ -151,6 +151,7 @@ type Tab = {
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
tabs?: Tab[];
|
tabs?: Tab[];
|
||||||
tab?: string;
|
tab?: string;
|
||||||
|
noTabCollapse?: boolean;
|
||||||
actions?: {
|
actions?: {
|
||||||
text: string;
|
text: string;
|
||||||
icon: string;
|
icon: string;
|
||||||
|
|
|
||||||
|
|
@ -1,387 +1,237 @@
|
||||||
<template>
|
<template>
|
||||||
<div v-if="meta" class="rsqzvsbo">
|
<MkStickyContainer>
|
||||||
<div class="top">
|
<template #header
|
||||||
<MkFeaturedPhotos class="bg" />
|
><MkPageHeader
|
||||||
<XTimeline class="tl" />
|
v-model:tab="tab"
|
||||||
<div class="shape1"></div>
|
:actions="headerActions"
|
||||||
<div class="shape2"></div>
|
:tabs="headerTabs"
|
||||||
<img src="/client-assets/misskey.svg" class="misskey" />
|
:noTabCollapse="true"
|
||||||
<div class="emojis">
|
/></template>
|
||||||
<MkEmoji :normal="true" :no-style="true" emoji="⭐" />
|
<div class="lznhrdub">
|
||||||
<MkEmoji :normal="true" :no-style="true" emoji="❤️" />
|
<swiper
|
||||||
<MkEmoji :normal="true" :no-style="true" emoji="😆" />
|
:round-lengths="true"
|
||||||
<MkEmoji :normal="true" :no-style="true" emoji="🤔" />
|
:touch-angle="25"
|
||||||
<MkEmoji :normal="true" :no-style="true" emoji="😮" />
|
:threshold="10"
|
||||||
<MkEmoji :normal="true" :no-style="true" emoji="🎉" />
|
:centeredSlides="true"
|
||||||
<MkEmoji :normal="true" :no-style="true" emoji="💢" />
|
:space-between="20"
|
||||||
<MkEmoji :normal="true" :no-style="true" emoji="😥" />
|
:allow-touch-move="
|
||||||
<MkEmoji :normal="true" :no-style="true" emoji="😇" />
|
!(
|
||||||
<MkEmoji :normal="true" :no-style="true" emoji="🥴" />
|
deviceKind === 'desktop' &&
|
||||||
<MkEmoji :normal="true" :no-style="true" emoji="🍮" />
|
!defaultStore.state.swipeOnDesktop
|
||||||
</div>
|
)
|
||||||
<div class="main">
|
"
|
||||||
<img
|
@swiper="setSwiperRef"
|
||||||
:src="
|
@slide-change="onSlideChange"
|
||||||
$instance.iconUrl ||
|
>
|
||||||
$instance.faviconUrl ||
|
<swiper-slide v-slot="{ isActive }">
|
||||||
'/favicon.ico'
|
<MkSpacer :content-max="800" v-if="isActive">
|
||||||
"
|
<XNotes :pagination="paginationForLocal" />
|
||||||
alt=""
|
</MkSpacer>
|
||||||
class="icon"
|
</swiper-slide>
|
||||||
/>
|
<swiper-slide v-slot="{ isActive }">
|
||||||
<button class="_button _acrylic menu" @click="showMenu">
|
<MkSpacer :content-max="800" v-if="isActive">
|
||||||
<i class="ph-dots-three-outline ph-bold ph-lg"></i>
|
<XNotes :pagination="paginationForRemote" />
|
||||||
</button>
|
</MkSpacer>
|
||||||
<div class="fg">
|
</swiper-slide>
|
||||||
<h1>
|
<swiper-slide v-slot="{ isActive }">
|
||||||
<img
|
<MkSpacer :content-max="800" v-if="isActive">
|
||||||
class="logo"
|
<XChannelList
|
||||||
v-if="meta.logoImageUrl"
|
key="featured"
|
||||||
:src="meta.logoImageUrl"
|
:pagination="featuredPagination"
|
||||||
alt="logo"
|
|
||||||
/>
|
/>
|
||||||
<span v-else class="text">{{ instanceName }}</span>
|
</MkSpacer>
|
||||||
</h1>
|
</swiper-slide>
|
||||||
<div class="about">
|
<swiper-slide v-slot="{ isActive }">
|
||||||
<div
|
<MkSpacer :content-max="800" v-if="isActive">
|
||||||
class="desc"
|
<MkPagination
|
||||||
v-html="meta.description || i18n.ts.headlineMisskey"
|
v-slot="{ items }"
|
||||||
></div>
|
:pagination="featuredPagesPagination"
|
||||||
</div>
|
|
||||||
<div class="action">
|
|
||||||
<MkButton
|
|
||||||
inline
|
|
||||||
rounded
|
|
||||||
gradate
|
|
||||||
data-cy-signup
|
|
||||||
style="margin-right: 12px"
|
|
||||||
@click="signup()"
|
|
||||||
>{{ i18n.ts.signup }}</MkButton
|
|
||||||
>
|
>
|
||||||
<MkButton
|
<MkPagePreview
|
||||||
inline
|
v-for="page in items"
|
||||||
rounded
|
:key="page.id"
|
||||||
data-cy-signin
|
class="ckltabjg"
|
||||||
@click="signin()"
|
:page="page"
|
||||||
>{{ i18n.ts.login }}</MkButton
|
/>
|
||||||
>
|
</MkPagination>
|
||||||
<MkButton
|
</MkSpacer>
|
||||||
inline
|
</swiper-slide>
|
||||||
rounded
|
<swiper-slide v-slot="{ isActive }">
|
||||||
style="margin-left: 12px; margin-top: 12px"
|
<MkSpacer :content-max="1200" v-if="isActive">
|
||||||
onclick="window.location.href='/explore'"
|
<MkFolder class="_gap">
|
||||||
>Explore</MkButton
|
<template #header
|
||||||
>
|
><i class="ph-clock ph-bold ph-lg"></i>
|
||||||
</div>
|
{{ i18n.ts.recentPosts }}</template
|
||||||
</div>
|
>
|
||||||
</div>
|
<MkPagination
|
||||||
<div v-if="instances" class="federation">
|
v-slot="{ items }"
|
||||||
<MarqueeText :duration="40">
|
:pagination="recentPostsPagination"
|
||||||
<MkA
|
:disable-auto-load="true"
|
||||||
v-for="instance in instances"
|
>
|
||||||
:key="instance.id"
|
<div class="vfpdbgtk">
|
||||||
:class="$style.federationInstance"
|
<MkGalleryPostPreview
|
||||||
@click="signup()"
|
v-for="post in items"
|
||||||
>
|
:key="post.id"
|
||||||
<img
|
:post="post"
|
||||||
v-if="instance.iconUrl"
|
class="post"
|
||||||
class="icon"
|
/>
|
||||||
:src="instance.iconUrl"
|
</div>
|
||||||
alt=""
|
</MkPagination>
|
||||||
/>
|
</MkFolder>
|
||||||
<span class="name _monospace">{{ instance.host }}</span>
|
<MkFolder class="_gap">
|
||||||
</MkA>
|
<template #header
|
||||||
</MarqueeText>
|
><i class="ph-fire-simple ph-bold ph-lg"></i>
|
||||||
</div>
|
{{ i18n.ts.popularPosts }}</template
|
||||||
|
>
|
||||||
|
<MkPagination
|
||||||
|
v-slot="{ items }"
|
||||||
|
:pagination="popularPostsPagination"
|
||||||
|
:disable-auto-load="true"
|
||||||
|
>
|
||||||
|
<div class="vfpdbgtk">
|
||||||
|
<MkGalleryPostPreview
|
||||||
|
v-for="post in items"
|
||||||
|
:key="post.id"
|
||||||
|
:post="post"
|
||||||
|
class="post"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</MkPagination>
|
||||||
|
</MkFolder>
|
||||||
|
</MkSpacer>
|
||||||
|
</swiper-slide>
|
||||||
|
<swiper-slide v-slot="{ isActive }">
|
||||||
|
<XUsers v-if="isActive" />
|
||||||
|
</swiper-slide>
|
||||||
|
</swiper>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</MkStickyContainer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import {} from "vue";
|
import { computed, watch, onMounted } from "vue";
|
||||||
import { toUnicode } from "punycode/";
|
import { Virtual } from "swiper";
|
||||||
import XTimeline from "./welcome.timeline.vue";
|
import { Swiper, SwiperSlide } from "swiper/vue";
|
||||||
import MarqueeText from "@/components/MkMarquee.vue";
|
import XNotes from "@/components/MkNotes.vue";
|
||||||
import XSigninDialog from "@/components/MkSigninDialog.vue";
|
import XUsers from "./explore.users.vue";
|
||||||
import XSignupDialog from "@/components/MkSignupDialog.vue";
|
import XChannelList from "@/components/MkChannelList.vue";
|
||||||
import MkButton from "@/components/MkButton.vue";
|
import MkFolder from "@/components/MkFolder.vue";
|
||||||
import XNote from "@/components/MkNote.vue";
|
import MkPagination from "@/components/MkPagination.vue";
|
||||||
import MkFeaturedPhotos from "@/components/MkFeaturedPhotos.vue";
|
import MkGalleryPostPreview from "@/components/MkGalleryPostPreview.vue";
|
||||||
import { host, instanceName } from "@/config";
|
import { definePageMetadata } from "@/scripts/page-metadata";
|
||||||
import * as os from "@/os";
|
import { deviceKind } from "@/scripts/device-kind";
|
||||||
import number from "@/filters/number";
|
|
||||||
import { i18n } from "@/i18n";
|
import { i18n } from "@/i18n";
|
||||||
|
import { defaultStore } from "@/store";
|
||||||
|
import "swiper/scss";
|
||||||
|
import "swiper/scss/virtual";
|
||||||
|
|
||||||
let meta = $ref();
|
const tabs = [
|
||||||
let stats = $ref();
|
"local",
|
||||||
let tags = $ref();
|
"remote",
|
||||||
let onlineUsersCount = $ref();
|
"channels",
|
||||||
let instances = $ref();
|
"pages",
|
||||||
|
"galleries",
|
||||||
|
"users",
|
||||||
|
];
|
||||||
|
let tab = $ref(tabs[0]);
|
||||||
|
watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
|
||||||
|
|
||||||
os.api("meta", { detail: true }).then((_meta) => {
|
const headerActions = $computed(() => []);
|
||||||
meta = _meta;
|
|
||||||
|
const headerTabs = $computed(() => [
|
||||||
|
{
|
||||||
|
key: "local",
|
||||||
|
icon: "ph-lightning ph-bold ph-lg",
|
||||||
|
title: i18n.ts.featured,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "remote",
|
||||||
|
icon: "ph-planet ph-bold ph-lg",
|
||||||
|
title: i18n.ts.network,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "channels",
|
||||||
|
icon: "ph-television ph-bold ph-lg",
|
||||||
|
title: i18n.ts.channel,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "pages",
|
||||||
|
icon: "ph-file-text ph-bold ph-lg",
|
||||||
|
title: i18n.ts.pages,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "galleries",
|
||||||
|
icon: "ph-image-square ph-bold ph-lg",
|
||||||
|
title: i18n.ts.gallery,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "users",
|
||||||
|
icon: "ph-users ph-bold ph-lg",
|
||||||
|
title: i18n.ts.users,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
definePageMetadata(
|
||||||
|
computed(() => ({
|
||||||
|
title: i18n.ts.explore,
|
||||||
|
icon: "ph-compass ph-bold ph-lg",
|
||||||
|
}))
|
||||||
|
);
|
||||||
|
|
||||||
|
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));
|
||||||
});
|
});
|
||||||
|
|
||||||
os.api("stats").then((_stats) => {
|
|
||||||
stats = _stats;
|
|
||||||
});
|
|
||||||
|
|
||||||
os.api("get-online-users-count").then((res) => {
|
const paginationForLocal = {
|
||||||
onlineUsersCount = res.count;
|
endpoint: "notes/featured" as const,
|
||||||
});
|
limit: 10,
|
||||||
|
origin: "local",
|
||||||
|
offsetMode: true,
|
||||||
|
params: {
|
||||||
|
days: 14,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
os.api("hashtags/list", {
|
const paginationForRemote = {
|
||||||
sort: "+mentionedLocalUsers",
|
endpoint: "notes/featured" as const,
|
||||||
limit: 8,
|
|
||||||
}).then((_tags) => {
|
|
||||||
tags = _tags;
|
|
||||||
});
|
|
||||||
|
|
||||||
os.api("federation/instances", {
|
|
||||||
sort: "+pubSub",
|
|
||||||
limit: 20,
|
limit: 20,
|
||||||
}).then((_instances) => {
|
offsetMode: true,
|
||||||
instances = _instances;
|
params: {
|
||||||
});
|
origin: "remote",
|
||||||
|
days: 7,
|
||||||
function signin() {
|
},
|
||||||
os.popup(
|
};
|
||||||
XSigninDialog,
|
const featuredPagination = {
|
||||||
{
|
endpoint: "channels/featured" as const,
|
||||||
autoSet: true,
|
limit: 10,
|
||||||
},
|
noPaging: false,
|
||||||
{},
|
};
|
||||||
"closed"
|
const featuredPagesPagination = {
|
||||||
);
|
endpoint: "pages/featured" as const,
|
||||||
}
|
limit: 10,
|
||||||
|
};
|
||||||
function signup() {
|
const recentPostsPagination = {
|
||||||
os.popup(
|
endpoint: "gallery/posts" as const,
|
||||||
XSignupDialog,
|
limit: 6,
|
||||||
{
|
};
|
||||||
autoSet: true,
|
const popularPostsPagination = {
|
||||||
},
|
endpoint: "gallery/featured" as const,
|
||||||
{},
|
limit: 5,
|
||||||
"closed"
|
};
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function showMenu(ev) {
|
|
||||||
os.popupMenu(
|
|
||||||
[
|
|
||||||
{
|
|
||||||
text: i18n.ts.instanceInfo,
|
|
||||||
icon: "ph-info ph-bold ph-lg",
|
|
||||||
action: () => {
|
|
||||||
os.pageWindow("/about");
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: i18n.ts.aboutMisskey,
|
|
||||||
icon: "ph-info ph-bold ph-lg",
|
|
||||||
action: () => {
|
|
||||||
os.pageWindow("/about-calckey");
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
ev.currentTarget ?? ev.target
|
|
||||||
);
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.rsqzvsbo {
|
|
||||||
> .top {
|
|
||||||
display: flex;
|
|
||||||
text-align: center;
|
|
||||||
min-height: 100vh;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 16px;
|
|
||||||
|
|
||||||
> .bg {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
width: 80%; // 100%からshapeの幅を引いている
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .tl {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
right: 64px;
|
|
||||||
margin: auto;
|
|
||||||
width: 500px;
|
|
||||||
height: calc(100% - 128px);
|
|
||||||
overflow: hidden;
|
|
||||||
-webkit-mask-image: linear-gradient(
|
|
||||||
0deg,
|
|
||||||
rgba(0, 0, 0, 0) 0%,
|
|
||||||
rgba(0, 0, 0, 1) 128px,
|
|
||||||
rgba(0, 0, 0, 1) calc(100% - 128px),
|
|
||||||
rgba(0, 0, 0, 0) 100%
|
|
||||||
);
|
|
||||||
mask-image: linear-gradient(
|
|
||||||
0deg,
|
|
||||||
rgba(0, 0, 0, 0) 0%,
|
|
||||||
rgba(0, 0, 0, 1) 128px,
|
|
||||||
rgba(0, 0, 0, 1) calc(100% - 128px),
|
|
||||||
rgba(0, 0, 0, 0) 100%
|
|
||||||
);
|
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> .shape1 {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: var(--accent);
|
|
||||||
clip-path: polygon(0% 0%, 45% 0%, 20% 100%, 0% 100%);
|
|
||||||
}
|
|
||||||
> .shape2 {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: var(--accent);
|
|
||||||
clip-path: polygon(0% 0%, 25% 0%, 35% 100%, 0% 100%);
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .misskey {
|
|
||||||
position: absolute;
|
|
||||||
top: 42px;
|
|
||||||
left: 42px;
|
|
||||||
width: 140px;
|
|
||||||
|
|
||||||
@media (max-width: 450px) {
|
|
||||||
width: 130px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> .emojis {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 32px;
|
|
||||||
left: 115px;
|
|
||||||
transform: scale(1.5);
|
|
||||||
|
|
||||||
> * {
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> .main {
|
|
||||||
position: relative;
|
|
||||||
width: min(480px, 100%);
|
|
||||||
margin: auto auto auto 128px;
|
|
||||||
background: var(--panel);
|
|
||||||
border-radius: var(--radius);
|
|
||||||
box-shadow: 0 12px 32px rgb(0 0 0 / 25%);
|
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .icon {
|
|
||||||
width: 85px;
|
|
||||||
margin-top: -47px;
|
|
||||||
border-radius: 100%;
|
|
||||||
vertical-align: bottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .menu {
|
|
||||||
position: absolute;
|
|
||||||
top: 16px;
|
|
||||||
right: 16px;
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 18px;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .fg {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
|
|
||||||
> h1 {
|
|
||||||
display: block;
|
|
||||||
margin: 0;
|
|
||||||
padding: 16px 32px 24px 32px;
|
|
||||||
font-size: 1.4em;
|
|
||||||
|
|
||||||
> .logo {
|
|
||||||
vertical-align: bottom;
|
|
||||||
max-height: 120px;
|
|
||||||
max-width: min(100%, 300px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> .about {
|
|
||||||
padding: 0 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .action {
|
|
||||||
padding: 32px;
|
|
||||||
padding-top: 22px;
|
|
||||||
|
|
||||||
> * {
|
|
||||||
line-height: 28px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> .federation {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 16px;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
margin: auto;
|
|
||||||
background: var(--acrylicPanel);
|
|
||||||
-webkit-backdrop-filter: var(--blur, blur(15px));
|
|
||||||
backdrop-filter: var(--blur, blur(15px));
|
|
||||||
border-radius: 999px;
|
|
||||||
overflow: clip;
|
|
||||||
width: 35%;
|
|
||||||
left: 50%;
|
|
||||||
padding: 8px 0;
|
|
||||||
|
|
||||||
@media (max-width: 900px) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<style lang="scss" module>
|
|
||||||
.federationInstance {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
vertical-align: bottom;
|
|
||||||
padding: 6px 12px 6px 6px;
|
|
||||||
margin: 0 10px 0 0;
|
|
||||||
background: var(--panel);
|
|
||||||
border-radius: 999px;
|
|
||||||
|
|
||||||
> :global(.icon) {
|
|
||||||
display: inline-block;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
margin-right: 5px;
|
|
||||||
border-radius: 999px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue