mirror of
https://github.com/versia-pub/frontend.git
synced 2025-12-06 08:28:20 +01:00
feat: 💄 UI changes, new collapsible sidebars
This commit is contained in:
Jesse Wierzbinski
parent
45eb8c6309
commit
d8c7558bcb
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -22,3 +22,4 @@ logs
|
|||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
config
|
||||
18
components/avatars/Centered.vue
Normal file
18
components/avatars/Centered.vue
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<div v-bind="$props" class="bg-dark-700 overflow-hidden flex items-center justify-center">
|
||||
<Skeleton :enabled="!url" class="!h-full !w-full">
|
||||
<img class="cursor-pointer bg-dark-700 ring-1 w-full h-full object-cover" :src="url" :alt="alt" />
|
||||
</Skeleton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { HTMLAttributes } from "vue";
|
||||
|
||||
interface Props extends /* @vue-ignore */ HTMLAttributes {
|
||||
url?: string;
|
||||
alt?: string;
|
||||
}
|
||||
|
||||
defineProps<Props>();
|
||||
</script>
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
leave-from="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
|
||||
<HeadlessDialogPanel
|
||||
class="relative transform overflow-hidden rounded-lg bg-dark-700 ring-1 ring-white/10 text-left shadow-xl transition-all sm:my-8 w-full max-w-xl">
|
||||
class="relative transform overflow-hidden rounded-lg bg-dark-700 ring-1 ring-dark-800 text-left shadow-xl transition-all sm:my-8 w-full max-w-xl">
|
||||
<Composer v-if="instance" :instance="instance" />
|
||||
</HeadlessDialogPanel>
|
||||
</HeadlessTransitionChild>
|
||||
|
|
|
|||
39
components/sidebars/collapsible-aside.vue
Normal file
39
components/sidebars/collapsible-aside.vue
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<template>
|
||||
<aside v-bind="$props" class="overflow-hidden">
|
||||
<div
|
||||
:class="['flex max-h-dvh overflow-hidden w-full duration-200', open ? enterClass : leaveClass, direction === 'left' ? 'flex-row' : 'flex-row-reverse']">
|
||||
<div class="bg-dark-900 ring-1 ring-white/10 h-full overflow-y-auto w-full">
|
||||
<slot />
|
||||
</div>
|
||||
<button @click="open = !open"
|
||||
class="h-full bg-dark-700/50 hover:bg-dark-400/50 hover:cursor-pointer duration-200 py-4 px-0.5 flex items-center justify-center w-4 shrink-0">
|
||||
<Icon name="tabler:chevron-right"
|
||||
:class="['text-gray-200 duration-200', direction === 'left' ? open ? 'rotate-180' : 'rotate-0' : open ? 'rotate-0' : 'rotate-180']"
|
||||
aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
// slides in and out from the left or right
|
||||
import type { HTMLAttributes } from "vue";
|
||||
|
||||
interface Props extends /* @vue-ignore */ HTMLAttributes {
|
||||
direction?: "left" | "right";
|
||||
initial?: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
direction: "left",
|
||||
initial: false,
|
||||
});
|
||||
|
||||
const leaveClass = computed(() =>
|
||||
props.direction === "left"
|
||||
? "-translate-x-[calc(100%-1rem)]"
|
||||
: "translate-x-[calc(100%-1rem)]",
|
||||
);
|
||||
const enterClass = "translate-x-0";
|
||||
const open = ref(props.initial);
|
||||
</script>
|
||||
|
|
@ -64,13 +64,15 @@
|
|||
</template>
|
||||
|
||||
<template #items>
|
||||
<HeadlessMenuItem v-for="timeline in visibleTimelines" :key="timeline.href" :href="timeline.href">
|
||||
<NuxtLink>
|
||||
<ButtonsDropdownElement :icon="timeline.icon" class="w-full">
|
||||
{{ timeline.name }}
|
||||
</ButtonsDropdownElement>
|
||||
</NuxtLink>
|
||||
</HeadlessMenuItem>
|
||||
<ClientOnly>
|
||||
<HeadlessMenuItem v-for="timeline in visibleTimelines" :key="timeline.href" :href="timeline.href">
|
||||
<NuxtLink>
|
||||
<ButtonsDropdownElement :icon="timeline.icon" class="w-full">
|
||||
{{ timeline.name }}
|
||||
</ButtonsDropdownElement>
|
||||
</NuxtLink>
|
||||
</HeadlessMenuItem>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</DropdownsAdaptiveDropdown>
|
||||
<NuxtLink href="/notifications" class="flex flex-col items-center justify-center p-2 rounded">
|
||||
|
|
@ -86,25 +88,27 @@
|
|||
</template>
|
||||
|
||||
<template #items>
|
||||
<HeadlessMenuItem v-if="tokenData">
|
||||
<ButtonsDropdownElement icon="tabler:logout" class="w-full"
|
||||
@click="signOut().finally(() => loadingAuth = false)" :loading="loadingAuth">
|
||||
Sign Out
|
||||
</ButtonsDropdownElement>
|
||||
</HeadlessMenuItem>
|
||||
<HeadlessMenuItem v-if="!tokenData">
|
||||
<ButtonsDropdownElement icon="tabler:login" class="w-full"
|
||||
@click="signIn().finally(() => loadingAuth = false)" :loading="loadingAuth">
|
||||
Sign In
|
||||
</ButtonsDropdownElement>
|
||||
</HeadlessMenuItem>
|
||||
<HeadlessMenuItem v-if="!tokenData">
|
||||
<NuxtLink href="/register">
|
||||
<ButtonsDropdownElement icon="tabler:certificate" class="w-full">
|
||||
Register
|
||||
<ClientOnly>
|
||||
<HeadlessMenuItem v-if="tokenData">
|
||||
<ButtonsDropdownElement icon="tabler:logout" class="w-full"
|
||||
@click="signOut().finally(() => loadingAuth = false)" :loading="loadingAuth">
|
||||
Sign Out
|
||||
</ButtonsDropdownElement>
|
||||
</NuxtLink>
|
||||
</HeadlessMenuItem>
|
||||
</HeadlessMenuItem>
|
||||
<HeadlessMenuItem v-if="!tokenData">
|
||||
<ButtonsDropdownElement icon="tabler:login" class="w-full"
|
||||
@click="signIn().finally(() => loadingAuth = false)" :loading="loadingAuth">
|
||||
Sign In
|
||||
</ButtonsDropdownElement>
|
||||
</HeadlessMenuItem>
|
||||
<HeadlessMenuItem v-if="!tokenData">
|
||||
<NuxtLink href="/register">
|
||||
<ButtonsDropdownElement icon="tabler:certificate" class="w-full">
|
||||
Register
|
||||
</ButtonsDropdownElement>
|
||||
</NuxtLink>
|
||||
</HeadlessMenuItem>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</DropdownsAdaptiveDropdown>
|
||||
<button @click="compose" v-if="tokenData"
|
||||
|
|
@ -133,6 +137,12 @@ const timelines = ref([
|
|||
name: "Local",
|
||||
icon: "tabler:home",
|
||||
},
|
||||
{
|
||||
href: "/notifications",
|
||||
name: "Notifications",
|
||||
icon: "tabler:bell",
|
||||
requiresAuth: true,
|
||||
},
|
||||
]);
|
||||
|
||||
const visibleTimelines = computed(() =>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
<template>
|
||||
<div v-if="small" class="flex flex-row">
|
||||
<Skeleton :enabled="!note" shape="rect" class="!h-6 w-6">
|
||||
<NuxtLink :href="accountUrl" class="shrink-0">
|
||||
<img class="h-6 w-6 rounded ring-1 ring-white/5 shrink-0" :src="note?.account.avatar"
|
||||
:alt="`${note?.account.acct}'s avatar`" />
|
||||
</NuxtLink>
|
||||
</Skeleton>
|
||||
<NuxtLink :href="accountUrl" class="shrink-0">
|
||||
<AvatarsCentered :url="note?.account.avatar" :alt="`${note?.account.acct}'s avatar`"
|
||||
class="h-6 w-6 rounded ring-1 ring-white/5" />
|
||||
</NuxtLink>
|
||||
<div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">
|
||||
<div class="flex flex-row text-sm items-center justify-between w-full">
|
||||
<NuxtLink :href="accountUrl" class="font-semibold text-gray-200 line-clamp-1 break-all">
|
||||
|
|
@ -23,12 +21,10 @@
|
|||
</div>
|
||||
</div>
|
||||
<div v-else class="flex flex-row">
|
||||
<Skeleton :enabled="!note" shape="rect" class="!h-12 w-12">
|
||||
<NuxtLink :href="accountUrl" class="shrink-0">
|
||||
<img class="h-12 w-12 rounded ring-1 ring-white/5" :src="note?.account.avatar"
|
||||
:alt="`${note?.account.acct}'s avatar`" />
|
||||
</NuxtLink>
|
||||
</Skeleton>
|
||||
<NuxtLink :href="accountUrl" class="shrink-0">
|
||||
<AvatarsCentered :url="note?.account.avatar" :alt="`${note?.account.acct}'s avatar`"
|
||||
class="h-12 w-12 rounded ring-1 ring-white/5" />
|
||||
</NuxtLink>
|
||||
<div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<NuxtLink :href="accountUrl" class="font-semibold text-gray-200 line-clamp-1 break-all">
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
</div>
|
||||
<Skeleton class="!h-10 w-full mt-6" :enabled="!props.note || !loaded" v-if="!small || !showInteractions">
|
||||
<div v-if="showInteractions"
|
||||
class="mt-6 flex flex-row items-stretch disabled:*:opacity-70 disabled:*:cursor-not-allowed relative justify-between text-sm h-10 hover:enabled:[&>button]:bg-dark-800 [&>button]:duration-200 [&>button]:rounded [&>button]:flex [&>button]:flex-1 [&>button]:flex-row [&>button]:items-center [&>button]:justify-center">
|
||||
class="mt-6 flex flex-row items-stretch disabled:*:opacity-70 *:max-w-28 disabled:*:cursor-not-allowed relative justify-around text-sm h-10 hover:enabled:[&>button]:bg-dark-800 [&>button]:duration-200 [&>button]:rounded [&>button]:flex [&>button]:flex-1 [&>button]:flex-row [&>button]:items-center [&>button]:justify-center">
|
||||
<button class="group" @click="note && useEvent('note:reply', note)" :disabled="!isSignedIn">
|
||||
<Icon name="tabler:arrow-back-up"
|
||||
class="h-5 w-5 text-gray-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />
|
||||
|
|
|
|||
|
|
@ -1,20 +1,12 @@
|
|||
<template>
|
||||
<ClientOnly>
|
||||
<div class="w-full rounded ring-1 ring-white/10 pb-10">
|
||||
<Skeleton :enabled="skeleton" class="!w-full !h-full !aspect-[8/3]">
|
||||
<div class="w-full aspect-[8/3] border-b border-white/10 bg-dark-700">
|
||||
<img v-if="account?.header" :src="account.header"
|
||||
class="object-cover w-full h-full" :alt="`${account.acct}'s header image'`" />
|
||||
</div>
|
||||
</Skeleton>
|
||||
<div class="w-full ring-1 ring-inset ring-white/5 pb-10">
|
||||
<AvatarsCentered :url="account?.header" :alt="`${account?.acct}'s header image'`"
|
||||
class="w-full aspect-[8/3] border-b border-white/10 bg-dark-700" />
|
||||
|
||||
<div class="flex items-start justify-between px-4 py-3">
|
||||
<div class="h-32 w-32 -mt-[4.5rem] z-10 bg-dark-700 rounded shrink-0 overflow-hidden">
|
||||
<Skeleton :enabled="skeleton" class="!h-full !w-full">
|
||||
<img class="cursor-pointer bg-dark-700 ring-1 ring-white/10"
|
||||
:src="account?.avatar" :alt="`${account?.acct}'s avatar'`" />
|
||||
</Skeleton>
|
||||
</div>
|
||||
<AvatarsCentered :url="account?.avatar" :alt="`${account?.acct}'s avatar'`"
|
||||
class="h-32 w-32 -mt-[4.5rem] z-10 shrink-0 rounded ring-2 ring-dark-800" />
|
||||
|
||||
<ClientOnly>
|
||||
<ButtonsSecondary v-if="account && account?.id === me?.id">Edit Profile
|
||||
|
|
|
|||
|
|
@ -1,25 +1,22 @@
|
|||
<template>
|
||||
<div class="from-dark-600 to-dark-900 bg-gradient-to-tl min-h-dvh">
|
||||
<SidebarsNavigation />
|
||||
<div class="relative md:pl-20 min-h-dvh flex flex-row justify-center lg:justify-between">
|
||||
<aside v-if="width > 1024"
|
||||
class="max-w-md max-h-dvh overflow-y-auto w-full bg-dark-900 ring-1 ring-white/10 hidden lg:flex flex-col">
|
||||
<ClientOnly>
|
||||
<div class="grow p-10 mb-10" v-if="!tokenData">
|
||||
<button type="button"
|
||||
class="relative block h-full w-full rounded-lg border-2 border-dashed border-dark-300 p-12 text-center">
|
||||
<Icon name="tabler:notification" class="mx-auto h-12 w-12 text-gray-400" />
|
||||
<span class="mt-3 block text-sm font-semibold text-gray-200 max-w-56 mx-auto">Notifications
|
||||
will
|
||||
appear here
|
||||
when you
|
||||
sign in</span>
|
||||
</button>
|
||||
</div>
|
||||
<TimelinesTimelineScroller v-else>
|
||||
<div class="relative md:pl-20 min-h-dvh flex flex-row justify-center xl:justify-between">
|
||||
<ClientOnly>
|
||||
<CollapsibleAside v-if="width > 1280" class="max-w-md max-h-dvh overflow-y-auto w-full xl:flex hidden">
|
||||
<SocialElementsInstancePresentation />
|
||||
</CollapsibleAside>
|
||||
</ClientOnly>
|
||||
<div class="w-full max-h-dvh max-w-2xl">
|
||||
<slot />
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<CollapsibleAside v-if="width > 1280 && tokenData" direction="right"
|
||||
class="max-w-md max-h-dvh overflow-y-auto w-full hidden xl:flex">
|
||||
<TimelinesTimelineScroller>
|
||||
<TimelinesNotifications />
|
||||
</TimelinesTimelineScroller>
|
||||
<div class="mt-auto prose prose-invert prose-sm flex flex-col gap-4 px-10 pb-10" v-if="!tokenData">
|
||||
<!-- <div class="mt-auto prose prose-invert prose-sm flex flex-col gap-4 px-10 pb-10" v-if="!tokenData">
|
||||
<div class="text-center">
|
||||
<strong
|
||||
class="bg-gradient-to-tr from-pink-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">Lysand
|
||||
|
|
@ -40,18 +37,12 @@
|
|||
Mobile Apps
|
||||
</ButtonsSecondary>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
</aside>
|
||||
<div class="w-full max-h-dvh">
|
||||
<slot />
|
||||
</div>
|
||||
<aside v-if="width > 1024"
|
||||
class="max-w-md max-h-dvh overflow-y-auto w-full bg-dark-900 ring-1 ring-white/10 lg:block hidden">
|
||||
<slot name="right">
|
||||
<SocialElementsInstancePresentation />
|
||||
</slot>
|
||||
</aside>
|
||||
</div> -->
|
||||
</CollapsibleAside>
|
||||
<div v-else-if="width > 1280" class="max-w-md w-full max-h-dvh hidden xl:flex">
|
||||
<!-- Padding only container -->
|
||||
</div>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
</div>
|
||||
<ComposerModal />
|
||||
|
|
@ -59,6 +50,7 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { convert } from "html-to-text";
|
||||
import CollapsibleAside from "~/components/sidebars/collapsible-aside.vue";
|
||||
|
||||
const tokenData = useTokenData();
|
||||
const client = useMegalodon(tokenData);
|
||||
|
|
@ -72,7 +64,6 @@ useServerSeoMeta({
|
|||
description: convert(description.value?.content ?? ""),
|
||||
ogSiteName: "Lysand",
|
||||
colorScheme: "dark",
|
||||
referrer: "no-referrer",
|
||||
});
|
||||
|
||||
const { n } = useMagicKeys();
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="from-dark-600 to-dark-900 bg-gradient-to-tl min-h-dvh">
|
||||
<div class="from-dark-600 to-dark-900 bg-gradient-to-tl min-h-dvh pb-20 md:pb-0">
|
||||
<SidebarsNavigation />
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
126
package.json
126
package.json
|
|
@ -1,65 +1,65 @@
|
|||
{
|
||||
"name": "lysand-fe",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"license": "AGPL-3.0",
|
||||
"author": {
|
||||
"email": "contact@cpluspatch.com",
|
||||
"name": "CPlusPatch",
|
||||
"url": "https://cpluspatch.com"
|
||||
},
|
||||
"maintainers": [
|
||||
{
|
||||
"email": "contact@cpluspatch.com",
|
||||
"name": "CPlusPatch",
|
||||
"url": "https://cpluspatch.com"
|
||||
}
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/lysand-org/lysand-fe.git"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "nuxt build",
|
||||
"dev": "nuxt dev",
|
||||
"generate": "nuxt generate",
|
||||
"preview": "nuxt preview",
|
||||
"postinstall": "nuxt prepare"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nuxt/fonts": "^0.7.0",
|
||||
"@tailwindcss/typography": "^0.5.12",
|
||||
"@vee-validate/nuxt": "^4.12.6",
|
||||
"@vee-validate/zod": "^4.12.6",
|
||||
"c12": "^1.10.0",
|
||||
"html-to-text": "^9.0.5",
|
||||
"megalodon": "^10.0.0",
|
||||
"mitt": "^3.0.1",
|
||||
"nuxt": "^3.11.2",
|
||||
"nuxt-headlessui": "^1.2.0",
|
||||
"nuxt-icon": "^0.6.10",
|
||||
"nuxt-security": "^2.0.0-beta.0",
|
||||
"nuxt-shiki": "^0.3.0",
|
||||
"shiki": "^1.3.0",
|
||||
"vue": "^3.4.21",
|
||||
"vue-router": "^4.3.0",
|
||||
"zod": "^3.23.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@biomejs/biome": "^1.6.4",
|
||||
"@nuxtjs/seo": "^2.0.0-rc.10",
|
||||
"@nuxtjs/tailwindcss": "^6.11.4",
|
||||
"@tailwindcss/forms": "^0.5.7",
|
||||
"@types/html-to-text": "^9.0.4",
|
||||
"@vue-email/nuxt": "^0.8.19"
|
||||
},
|
||||
"trustedDependencies": [
|
||||
"@biomejs/biome",
|
||||
"@fortawesome/fontawesome-common-types",
|
||||
"@fortawesome/free-regular-svg-icons",
|
||||
"@fortawesome/free-solid-svg-icons",
|
||||
"esbuild",
|
||||
"json-editor-vue",
|
||||
"vue-demi"
|
||||
]
|
||||
"name": "lysand-fe",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"license": "AGPL-3.0",
|
||||
"author": {
|
||||
"email": "contact@cpluspatch.com",
|
||||
"name": "CPlusPatch",
|
||||
"url": "https://cpluspatch.com"
|
||||
},
|
||||
"maintainers": [
|
||||
{
|
||||
"email": "contact@cpluspatch.com",
|
||||
"name": "CPlusPatch",
|
||||
"url": "https://cpluspatch.com"
|
||||
}
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/lysand-org/lysand-fe.git"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "nuxt build",
|
||||
"dev": "nuxt dev",
|
||||
"generate": "nuxt generate",
|
||||
"preview": "nuxt preview",
|
||||
"postinstall": "nuxt prepare"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nuxt/fonts": "^0.7.0",
|
||||
"@tailwindcss/typography": "^0.5.12",
|
||||
"@vee-validate/nuxt": "^4.12.6",
|
||||
"@vee-validate/zod": "^4.12.6",
|
||||
"c12": "^1.10.0",
|
||||
"html-to-text": "^9.0.5",
|
||||
"megalodon": "^10.0.0",
|
||||
"mitt": "^3.0.1",
|
||||
"nuxt": "^3.11.2",
|
||||
"nuxt-headlessui": "^1.2.0",
|
||||
"nuxt-icon": "^0.6.10",
|
||||
"nuxt-security": "^2.0.0-beta.0",
|
||||
"nuxt-shiki": "^0.3.0",
|
||||
"shiki": "^1.3.0",
|
||||
"vue": "^3.4.21",
|
||||
"vue-router": "^4.3.0",
|
||||
"zod": "^3.23.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@biomejs/biome": "^1.6.4",
|
||||
"@nuxtjs/seo": "^2.0.0-rc.10",
|
||||
"@nuxtjs/tailwindcss": "^6.11.4",
|
||||
"@tailwindcss/forms": "^0.5.7",
|
||||
"@types/html-to-text": "^9.0.4",
|
||||
"@vue-email/nuxt": "^0.8.19"
|
||||
},
|
||||
"trustedDependencies": [
|
||||
"@biomejs/biome",
|
||||
"@fortawesome/fontawesome-common-types",
|
||||
"@fortawesome/free-regular-svg-icons",
|
||||
"@fortawesome/free-solid-svg-icons",
|
||||
"esbuild",
|
||||
"json-editor-vue",
|
||||
"vue-demi"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,30 +1,19 @@
|
|||
<template>
|
||||
<NuxtLayout name="app">
|
||||
<div class="max-h-dvh overflow-y-scroll">
|
||||
<SocialElementsUsersAccount v-if="isMobile" :account="account ?? undefined" />
|
||||
<TimelinesTimelineScroller>
|
||||
<TimelinesAccount :id="accountId ?? undefined" :key="accountId ?? undefined" />
|
||||
</TimelinesTimelineScroller>
|
||||
</div>
|
||||
<template #right>
|
||||
<SocialElementsUsersAccount v-if="!isMobile" :account="account ?? undefined" />
|
||||
<div v-else>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
</NuxtLayout>
|
||||
<div class="max-h-dvh overflow-y-scroll w-full">
|
||||
<SocialElementsUsersAccount :account="account ?? undefined" />
|
||||
<TimelinesTimelineScroller>
|
||||
<TimelinesAccount :id="accountId" :key="accountId" />
|
||||
</TimelinesTimelineScroller>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Account } from "~/types/mastodon/account";
|
||||
|
||||
definePageMeta({
|
||||
layout: false,
|
||||
layout: "app",
|
||||
});
|
||||
|
||||
const { width } = useWindowSize();
|
||||
const isMobile = computed(() => width.value < 1024);
|
||||
|
||||
const route = useRoute();
|
||||
const client = useMegalodon(undefined, true);
|
||||
const username = (route.params.username as string).replace("@", "");
|
||||
|
|
@ -33,12 +22,22 @@ const accounts = useAccountSearch(client, username);
|
|||
const account = computed<Account | null>(
|
||||
() => accounts.value?.find((account) => account.acct === username) ?? null,
|
||||
);
|
||||
const accountId = computed(() => account.value?.id ?? null);
|
||||
const accountId = computed(() => account.value?.id ?? undefined);
|
||||
|
||||
useSeoMeta({
|
||||
title: account.value?.display_name,
|
||||
description: account.value?.note,
|
||||
ogImage: account.value?.avatar,
|
||||
profileUsername: account.value?.acct,
|
||||
useServerSeoMeta({
|
||||
title: computed(() =>
|
||||
account.value ? account.value.display_name : "Loading",
|
||||
),
|
||||
ogTitle: computed(() =>
|
||||
account.value ? account.value.display_name : "Loading",
|
||||
),
|
||||
ogImage: computed(() => (account.value ? account.value.avatar : undefined)),
|
||||
ogType: "profile",
|
||||
ogDescription: computed(() =>
|
||||
account.value ? account.value.note : undefined,
|
||||
),
|
||||
description: computed(() =>
|
||||
account.value ? account.value.note : undefined,
|
||||
),
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div class="flex min-h-screen relative flex-col justify-center py-12 lg:px-8">
|
||||
<div class="flex min-h-screen relative flex-col justify-center py-12 px-8">
|
||||
<img crossorigin="anonymous" src="https://cdn.lysand.org/logo-long-dark.webp" alt="Lysand logo"
|
||||
class="mx-auto h-24 hidden md:block" />
|
||||
<div v-if="validUrlParameters"
|
||||
class="mt-10 sm:mx-auto w-full sm:max-w-md px-10 py-10 rounded md:ring-1 md:ring-white/10">
|
||||
class="sm:mx-auto w-full sm:max-w-md px-10 py-10 rounded md:ring-1 md:ring-white/10">
|
||||
<div v-if="error" class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white mb-10">
|
||||
<h2 class="font-bold text-lg">An error occured</h2>
|
||||
<span class="text-sm">{{ error_description }}</span>
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
<ButtonsPrimary type="submit" class="w-full">Sign in</ButtonsPrimary>
|
||||
</VeeForm>
|
||||
</div>
|
||||
<div v-else class="mx-auto max-w-md mt-10">
|
||||
<div v-else class="mx-auto max-w-md">
|
||||
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Invalid access
|
||||
parameters
|
||||
</h1>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,7 @@
|
|||
<template>
|
||||
<ClientOnly>
|
||||
<div class="flex min-h-screen relative flex-col justify-center px-6 py-12 lg:px-8">
|
||||
<div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
|
||||
aria-hidden="true">
|
||||
<div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
|
||||
style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)" />
|
||||
</div>
|
||||
<div v-if="validUrlParameters" class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
|
||||
<div v-if="validUrlParameters" class="sm:mx-auto sm:w-full sm:max-w-sm">
|
||||
<form class="space-y-6" method="POST"
|
||||
:action="url.pathname.replace('/oauth/consent', '/oauth/authorize')">
|
||||
<input type="hidden" v-for="([key, value]) in url.searchParams" :key="key" :name="key"
|
||||
|
|
@ -68,7 +63,8 @@
|
|||
<li v-for="client of useConfig().RECOMMENDED_CLIENTS" :key="client.name" class="w-full">
|
||||
<a :href="client.link" target="_blank"
|
||||
class="rounded-sm ring-2 ring-white/10 px-4 py-2 w-full flex flex-row gap-3 items-center">
|
||||
<img crossorigin="anonymous" :src="client.icon" :alt="`${client.name}'s logo'`" class="h-10 w-10" />
|
||||
<img crossorigin="anonymous" :src="client.icon" :alt="`${client.name}'s logo'`"
|
||||
class="h-10 w-10" />
|
||||
<div class="flex flex-col justify-between items-start">
|
||||
<h2 class="font-bold text-gray-100">{{ client.name }}</h2>
|
||||
<span class="underline text-pink-700">{{ client.link }}</span>
|
||||
|
|
|
|||
Loading…
Reference in a new issue