mirror of
https://github.com/versia-pub/frontend.git
synced 2025-12-06 08:28:20 +01:00
feat: ♻️ Change code to build in static mode, add timelines, profiles and notes, new design
This commit is contained in:
Jesse Wierzbinski
parent
9edfd5ac2d
commit
acd50ece9b
|
|
@ -1,5 +1,4 @@
|
|||
FROM oven/bun:1.1.3 AS base
|
||||
# Temporarily switch back to the non-alpine version of Bun because of Bun's issues with musl
|
||||
FROM oven/bun:1.1.4-alpine AS base
|
||||
|
||||
# Install dependencies into temp directory
|
||||
# This will cache them and speed up future builds
|
||||
|
|
@ -18,6 +17,8 @@ FROM base as final
|
|||
|
||||
COPY --from=builder /app/.output/ /app
|
||||
|
||||
RUN bun add --global serve
|
||||
|
||||
LABEL org.opencontainers.image.authors "Gaspard Wierzbinski (https://cpluspatch.com)"
|
||||
LABEL org.opencontainers.image.source "https://github.com/lysand-org/lysand-fe"
|
||||
LABEL org.opencontainers.image.vendor "Lysand Org"
|
||||
|
|
@ -26,4 +27,4 @@ LABEL org.opencontainers.image.title "Lysand-FE"
|
|||
LABEL org.opencontainers.image.description "Frontend for the Lysand Project"
|
||||
|
||||
WORKDIR /app/server
|
||||
CMD ["bun", "index.mjs"]
|
||||
CMD ["bunx", "serve", "public"]
|
||||
15
app.vue
15
app.vue
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<NuxtPage>
|
||||
<slot />
|
||||
</NuxtPage>
|
||||
<NuxtLayout>
|
||||
<NuxtPage />
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
@ -10,4 +10,13 @@ useServerSeoMeta({
|
|||
return titleChunk ? `${titleChunk} · Lysand` : "Lysand";
|
||||
},
|
||||
});
|
||||
|
||||
// Use SSR-safe IDs for Headless UI
|
||||
provideHeadlessUseId(() => useId());
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: Inter, sans-serif;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,30 +1,20 @@
|
|||
<template>
|
||||
<div class="flex items-center justify-between">
|
||||
<label for="password" class="block text-sm font-medium leading-6 text-gray-900">{{ label }}</label>
|
||||
<label for="password" class="block text-sm font-medium leading-6 text-gray-50">{{ label }}</label>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<input v-bind="$attrs" @input="checkValid" :class="['block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6',
|
||||
(isInvalid || error) && 'invalid:!ring-red-600 invalid:ring-2']">
|
||||
<span v-if="isInvalid || error" class="mt-1 text-xs text-red-600">{{ error ? error : `${label} is invalid` }}</span>
|
||||
<input v-bind="$attrs" :class="['block disabled:opacity-70 disabled:hover:cursor-wait w-full bg-dark-500 rounded-md border-0 py-1.5 text-gray-50 shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-pink-600 sm:text-sm sm:leading-6',
|
||||
isInvalid && '!ring-red-600 ring-2']">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import type { InputHTMLAttributes } from 'vue';
|
||||
|
||||
const props = defineProps<{
|
||||
interface Props extends /* @vue-ignore */ InputHTMLAttributes {
|
||||
isInvalid?: boolean;
|
||||
label: string;
|
||||
error?: string;
|
||||
}>();
|
||||
}
|
||||
|
||||
const isInvalid = ref(false);
|
||||
|
||||
const checkValid = (e: Event) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
if (target.checkValidity()) {
|
||||
isInvalid.value = false;
|
||||
} else {
|
||||
isInvalid.value = true;
|
||||
}
|
||||
};
|
||||
defineProps<Props>();
|
||||
</script>
|
||||
16
components/buttons/base.vue
Normal file
16
components/buttons/base.vue
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<template>
|
||||
<button v-bind="$props" type="button"
|
||||
class="rounded-md duration-200 hover:shadow disabled:opacity-70 disabled:cursor-wait px-3 py-2 text-sm font-semibold text-white shadow-sm">
|
||||
<slot />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { ButtonHTMLAttributes } from "vue";
|
||||
|
||||
interface Props extends /* @vue-ignore */ ButtonHTMLAttributes { }
|
||||
|
||||
defineProps<Props>();
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
15
components/buttons/primary.vue
Normal file
15
components/buttons/primary.vue
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<template>
|
||||
<ButtonsBase class="bg-pink-500 hover:bg-pink-400">
|
||||
<slot />
|
||||
</ButtonsBase>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { ButtonHTMLAttributes } from "vue";
|
||||
|
||||
interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {}
|
||||
|
||||
defineProps<Props>();
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
15
components/buttons/secondary.vue
Normal file
15
components/buttons/secondary.vue
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<template>
|
||||
<ButtonsBase class="bg-white/10 hover:bg-white/20">
|
||||
<slot />
|
||||
</ButtonsBase>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { ButtonHTMLAttributes } from "vue";
|
||||
|
||||
interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {}
|
||||
|
||||
defineProps<Props>();
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
81
components/headers/navbar.vue
Normal file
81
components/headers/navbar.vue
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
<template>
|
||||
<header class="absolute inset-x-0 top-0 z-50">
|
||||
<div
|
||||
class="relative isolate warning-background flex items-center gap-x-6 overflow-hidden bg-dark-900 px-6 py-2.5 sm:px-3.5 sm:before:flex-1">
|
||||
<div class="flex flex-wrap justify-center gap-x-4 gap-y-2 w-full">
|
||||
<p class="text-sm text-gray-50 bg-dark-900 px-2 rounded py-1">
|
||||
<strong class="font-semibold">Warning!</strong> • This is a testing site used for
|
||||
development, not a finished page.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex items-center justify-between p-6 lg:px-8" aria-label="Global">
|
||||
<div class="flex lg:flex-1">
|
||||
<NuxtLink href="/" class="-m-1.5 p-1.5">
|
||||
<span class="sr-only">Lysand</span>
|
||||
<img class="h-8 w-auto" src="https://lysand.org/logo.png" alt="" />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="flex lg:hidden">
|
||||
<button type="button"
|
||||
class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-200"
|
||||
@click="mobileMenuOpen = true">
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<Icon name="tabler:menu-2" class="h-6 w-6" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden lg:flex lg:gap-x-12">
|
||||
<NuxtLink v-for="item in navigation" :key="item.name" :href="item.href"
|
||||
class="text-sm font-semibold leading-6 text-gray-50">{{ item.name }}</NuxtLink>
|
||||
</div>
|
||||
<div class="hidden lg:flex lg:flex-1 lg:justify-end">
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
<HeadlessDialog as="div" class="lg:hidden" @close="mobileMenuOpen = false" :open="mobileMenuOpen">
|
||||
<div class="fixed inset-0 z-50" />
|
||||
<HeadlessDialogPanel
|
||||
class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-dark-800 px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-50/10">
|
||||
<div class="flex items-center justify-between">
|
||||
<NuxtLink href="/" class="-m-1.5 p-1.5">
|
||||
<span class="sr-only">Lysand</span>
|
||||
<img class="h-8 w-auto" src="https://lysand.org/logo.png" alt="" />
|
||||
</NuxtLink>
|
||||
<button type="button" class="-m-2.5 rounded-md p-2.5 text-gray-200" @click="mobileMenuOpen = false">
|
||||
<span class="sr-only">Close menu</span>
|
||||
<Icon name="tabler:x" class="h-6 w-6" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-6 flow-root">
|
||||
<div class="-my-6 divide-y divide-gray-400/10">
|
||||
<div class="space-y-2 py-6">
|
||||
<NuxtLink v-for="item in navigation" :key="item.name" :href="item.href"
|
||||
class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-50 hover:bg-gray-900">
|
||||
{{
|
||||
item.name }}</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</HeadlessDialogPanel>
|
||||
</HeadlessDialog>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const navigation = [
|
||||
{ name: "About", href: "/" },
|
||||
{ name: "Roadmap", href: "/" },
|
||||
{ name: "Documentation", href: "/" },
|
||||
{ name: "Team", href: "/" },
|
||||
];
|
||||
|
||||
const mobileMenuOpen = ref(false);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.warning-background {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f9d63d' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
</style>
|
||||
44
components/skeleton/Skeleton.vue
Normal file
44
components/skeleton/Skeleton.vue
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<template>
|
||||
<div v-for="index of lines" :class="[
|
||||
'duration-200 animate-pulse bg-dark-100 [&:not(:first-child)]:mt-2',
|
||||
shape === 'circle' ? 'rounded-full' : 'rounded',
|
||||
['text', 'content'].includes(type) && 'h-[1em]',
|
||||
props.class
|
||||
]" v-if="enabled" :style="{
|
||||
width: getWidth(index, lines),
|
||||
}">
|
||||
</div>
|
||||
<slot v-else />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const props = withDefaults(defineProps<{
|
||||
enabled: boolean;
|
||||
shape?: "circle" | "rect";
|
||||
type?: "text" | "content";
|
||||
minWidth?: number;
|
||||
maxWidth?: number;
|
||||
widthUnit?: "px" | "%";
|
||||
class?: string;
|
||||
}>(), {
|
||||
shape: "rect",
|
||||
type: "text",
|
||||
widthUnit: "px",
|
||||
});
|
||||
|
||||
const isContent = computed(() => props.type === "content");
|
||||
const isText = computed(() => props.type === "text");
|
||||
const isWidthSpecified = computed(() => props.minWidth && props.maxWidth);
|
||||
const calculatedWidth = computed(() => Math.random() * ((props.maxWidth ?? 0) - (props.minWidth ?? 0)) + (props.minWidth ?? 0));
|
||||
|
||||
const getWidth = (index: number, lines: number) => {
|
||||
if (isWidthSpecified.value) {
|
||||
if (isContent.value)
|
||||
return index === lines ? `${calculatedWidth.value}${props.widthUnit}` : '100%';
|
||||
return `${calculatedWidth.value}${props.widthUnit}`;
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
|
||||
const lines = isContent.value ? Math.ceil(Math.random() * 5) : 1;
|
||||
</script>
|
||||
55
components/social-elements/notes/attachment.vue
Normal file
55
components/social-elements/notes/attachment.vue
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
<template>
|
||||
<div @click="lightbox = true"
|
||||
class="aspect-video w-full rounded ring-white/5 shadow overflow-hidden ring-1 hover:ring-2 duration-100">
|
||||
<img v-if="attachment.type === 'image'"
|
||||
class="object-cover w-full h-full rounded duration-150 hover:scale-[102%] ease-in-out" :src="attachment.url"
|
||||
:alt="attachment.description ?? ''" :title="attachment.description ?? ''" />
|
||||
<video v-else-if="attachment.type === 'video'" class="object-cover w-full h-full rounded" controls
|
||||
:alt="attachment.description ?? ''" :title="attachment.description ?? ''">
|
||||
<source :src="attachment.url" type="video/mp4" />
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<HeadlessTransitionRoot appear :show="lightbox" as="template">
|
||||
<HeadlessDialog @close="lightbox = false">
|
||||
<div class="fixed inset-0 overflow-y-auto bg-black/70">
|
||||
<div class="flex min-h-full items-center justify-center text-center">
|
||||
<HeadlessTransitionChild as="template" enter="duration-100 ease-out" enter-from="opacity-0 scale-95"
|
||||
enter-to="opacity-100 scale-100">
|
||||
<HeadlessDialogPanel
|
||||
class="w-screen h-screen flex justify-center items-center flex-col relative overflow-hidden p-10"
|
||||
@click="lightbox = false">
|
||||
<div class="w-full absolute inset-x-0 top-0 p-10 shrink text-gray-400 flex flex-row gap-3">
|
||||
<a @click.stop :href="attachment.url" target="_blank" download class="ml-auto">
|
||||
<Icon name="tabler:download" class="w-6 h-6" />
|
||||
<span class="sr-only">Close</span>
|
||||
</a>
|
||||
<button @click.stop="lightbox = false" class="">
|
||||
<Icon name="tabler:x" class="w-6 h-6" />
|
||||
<span class="sr-only">Close</span>
|
||||
</button>
|
||||
</div>
|
||||
<img @click.stop v-if="attachment.type === 'image'"
|
||||
class="rounded max-w-full min-w-[30%] max-h-[70%]" :src="attachment.url"
|
||||
:alt="attachment.description ?? ''" :title="attachment.description ?? ''" />
|
||||
<span @click.stop v-if="attachment.description"
|
||||
class="text-gray-300 rounded mt-6 -mb-20 px-4 py-2 max-w-xl ring-1 ring-white/5 bg-dark-900 max-h-40 overflow-y-auto">
|
||||
{{ attachment.description }}
|
||||
</span>
|
||||
</HeadlessDialogPanel>
|
||||
</HeadlessTransitionChild>
|
||||
</div>
|
||||
</div>
|
||||
</HeadlessDialog>
|
||||
</HeadlessTransitionRoot>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { Attachment } from '~/types/mastodon/attachment';
|
||||
|
||||
const lightbox = ref(false);
|
||||
|
||||
defineProps<{
|
||||
attachment: Attachment;
|
||||
}>();
|
||||
</script>
|
||||
16
components/social-elements/notes/mention.vue
Normal file
16
components/social-elements/notes/mention.vue
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<template>
|
||||
<span
|
||||
class="shrink break-all rounded bg-pink-700/30 text-pink-200 px-2 py-1 not-prose font-semibold cursor-pointer [&:not(:last-child)]:mr-1 duration-200 hover:bg-pink-600/30">
|
||||
<img class="h-[1em] w-[1em] rounded ring-1 ring-white/5 inline align-middle mb-1 mr-1" :src="account.avatar"
|
||||
alt="" />
|
||||
{{ account.display_name }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { Account } from '~/types/mastodon/account';
|
||||
|
||||
const props = defineProps<{
|
||||
account: Account;
|
||||
}>();
|
||||
</script>
|
||||
93
components/social-elements/notes/note.vue
Normal file
93
components/social-elements/notes/note.vue
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
<template>
|
||||
<div
|
||||
class="first:rounded-t last:rounded-b ring-1 ring-white/5 p-6 flex flex-col bg-dark-800 hover:bg-dark-700 duration-200">
|
||||
<div class="flex flex-row">
|
||||
<Skeleton :enabled="isLoading" shape="rect" class="!h-12 w-12">
|
||||
<NuxtLink :href="accountUrl">
|
||||
<img class="h-12 w-12 rounded ring-1 ring-white/5" :src="note?.account.avatar" alt="" />
|
||||
</NuxtLink>
|
||||
</Skeleton>
|
||||
<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">
|
||||
<Skeleton :enabled="isLoading" :min-width="90" :max-width="170" shape="rect">
|
||||
{{
|
||||
note?.account.display_name }}
|
||||
</Skeleton>
|
||||
</NuxtLink>
|
||||
<NuxtLink :href="noteUrl" class="text-gray-400 text-sm ml-2 line-clamp-1 break-all shrink-0">
|
||||
<Skeleton :enabled="isLoading" :min-width="50" :max-width="100" shape="rect">
|
||||
{{ timeAgo }}
|
||||
</Skeleton>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<span class="text-gray-400 text-sm line-clamp-1 break-all w-full">
|
||||
<Skeleton :enabled="isLoading" :min-width="130" :max-width="250" shape="rect">
|
||||
@{{
|
||||
note?.account.acct
|
||||
}}
|
||||
</Skeleton>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<NuxtLink :href="noteUrl" class="mt-6">
|
||||
<Skeleton :enabled="true" v-if="isLoading" :min-width="50" :max-width="100" width-unit="%" shape="rect"
|
||||
type="content">
|
||||
</Skeleton>
|
||||
<div v-else-if="content" class="prose prose-invert prose-a:no-underline" v-html="content">
|
||||
</div>
|
||||
<div v-if="attachments.length > 0" class="[&:not(:first-child)]:mt-6">
|
||||
<SocialElementsNotesAttachment v-for="attachment of attachments" :key="attachment.id"
|
||||
:attachment="attachment" />
|
||||
</div>
|
||||
</NuxtLink>
|
||||
<Skeleton class="!h-10 w-full mt-6" :enabled="true" v-if="isLoading"></Skeleton>
|
||||
<div v-else
|
||||
class="mt-6 flex flex-row items-stretch justify-between text-sm h-10 hover:[&>button]:bg-dark-800 [&>button]:duration-200 [&>button]:rounded [&>button]:flex [&>button]:flex-1 [&>button]:flex-row [&>button]:items-center [&>button]:justify-center">
|
||||
<button>
|
||||
<Icon name="tabler:arrow-back-up" class="h-5 w-5 text-gray-200" aria-hidden="true" />
|
||||
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note?.replies_count) }}</span>
|
||||
</button>
|
||||
<button>
|
||||
<Icon name="tabler:heart" class="h-5 w-5 text-gray-200" aria-hidden="true" />
|
||||
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note?.favourites_count) }}</span>
|
||||
</button>
|
||||
<button>
|
||||
<Icon name="tabler:repeat" class="h-5 w-5 text-gray-200" aria-hidden="true" />
|
||||
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note?.reblogs_count) }}</span>
|
||||
</button>
|
||||
<button>
|
||||
<Icon name="tabler:quote" class="h-5 w-5 text-gray-200" aria-hidden="true" />
|
||||
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(0) }}</span>
|
||||
</button>
|
||||
<button>
|
||||
<Icon name="tabler:dots" class="h-5 w-5 text-gray-200" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Skeleton from "~/components/skeleton/Skeleton.vue";
|
||||
import type { Status } from "~/types/mastodon/status";
|
||||
|
||||
const props = defineProps<{
|
||||
note?: Status;
|
||||
skeleton?: boolean;
|
||||
}>();
|
||||
|
||||
const isLoading = props.skeleton;
|
||||
const timeAgo = useTimeAgo(props.note?.created_at ?? 0);
|
||||
|
||||
const client = await useMegalodon();
|
||||
const mentions = await useResolveMentions(props.note?.mentions ?? [], client);
|
||||
const content = props.note ? await useParsedContent(props.note.content, props.note.emojis, mentions.value) : "";
|
||||
const numberFormat = (number = 0) => new Intl.NumberFormat(undefined, {
|
||||
notation: "compact",
|
||||
compactDisplay: "short",
|
||||
maximumFractionDigits: 1,
|
||||
}).format(number);
|
||||
const attachments = props.note?.media_attachments ?? [];
|
||||
const noteUrl = props.note && `/@${props.note.account.acct}/${props.note.id}`;
|
||||
const accountUrl = props.note && `/@${props.note.account.acct}`;
|
||||
</script>
|
||||
12
composables/Account.ts
Normal file
12
composables/Account.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import type { Mastodon } from "megalodon";
|
||||
|
||||
export const useAccount = async (
|
||||
client: Mastodon | null,
|
||||
accountId: string,
|
||||
) => {
|
||||
if (process.server || !client) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (await client.getAccount(accountId)).data;
|
||||
};
|
||||
13
composables/AccountSearch.ts
Normal file
13
composables/AccountSearch.ts
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import type { Mastodon } from "megalodon";
|
||||
|
||||
export const useAccountSearch = async (client: Mastodon | null, q: string) => {
|
||||
if (process.server || !client) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
await client.searchAccount(q, {
|
||||
resolve: true,
|
||||
})
|
||||
).data;
|
||||
};
|
||||
3
composables/BaseUrl.ts
Normal file
3
composables/BaseUrl.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export const useBaseUrl = () => {
|
||||
return ref(useRuntimeConfig().public.apiHost ?? useRequestURL().origin);
|
||||
};
|
||||
12
composables/Config.ts
Normal file
12
composables/Config.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
export const useConfig = () => {
|
||||
return {
|
||||
NOTES_PER_PAGE: 20,
|
||||
RECOMMENDED_CLIENTS: [
|
||||
{
|
||||
name: "Megalodon",
|
||||
icon: "https://sk22.github.io/megalodon/mastodon/src/main/res/mipmap-xhdpi/ic_launcher_round.png",
|
||||
link: "https://sk22.github.io/megalodon/",
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
9
composables/Instance.ts
Normal file
9
composables/Instance.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import type { Mastodon } from "megalodon";
|
||||
|
||||
export const useInstance = async (client: Mastodon | null) => {
|
||||
if (!client) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (await client.getInstance()).data;
|
||||
};
|
||||
13
composables/Megalodon.ts
Normal file
13
composables/Megalodon.ts
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import { Mastodon } from "megalodon";
|
||||
|
||||
export const useMegalodon = async () => {
|
||||
/* if (process.server) {
|
||||
return null;
|
||||
} */
|
||||
|
||||
const baseUrl = useBaseUrl().value;
|
||||
|
||||
const client = new Mastodon(baseUrl);
|
||||
|
||||
return client;
|
||||
};
|
||||
9
composables/Note.ts
Normal file
9
composables/Note.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import type { Mastodon } from "megalodon";
|
||||
|
||||
export const useNote = async (client: Mastodon | null, noteId: string) => {
|
||||
if (process.server || !client) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (await client.getStatus(noteId)).data;
|
||||
};
|
||||
12
composables/OAuthProviders.ts
Normal file
12
composables/OAuthProviders.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
export const useOAuthProviders = async () => {
|
||||
const providers = await fetch(
|
||||
new URL("/oauth/providers", useBaseUrl().value),
|
||||
).then((d) => d.json());
|
||||
return ref(
|
||||
providers as {
|
||||
name: string;
|
||||
icon: string;
|
||||
id: string;
|
||||
}[],
|
||||
);
|
||||
};
|
||||
59
composables/ParsedContent.ts
Normal file
59
composables/ParsedContent.ts
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
import type { Account } from "~/types/mastodon/account";
|
||||
import type { Emoji } from "~/types/mastodon/emoji";
|
||||
import MentionComponent from "../components/social-elements/notes/mention.vue";
|
||||
import { renderToString } from "vue/server-renderer";
|
||||
|
||||
/**
|
||||
* Takes in an HTML string, parses emojis and returns a reactive object with the parsed content.
|
||||
* @param content String of HTML content to parse
|
||||
* @param emojis Array of emojis to parse
|
||||
* @returns Reactive object with the parsed content
|
||||
*/
|
||||
export const useParsedContent = async (
|
||||
content: string,
|
||||
emojis: Emoji[],
|
||||
mentions: Account[],
|
||||
): Promise<Ref<string>> => {
|
||||
const contentHtml = document.createElement("div");
|
||||
contentHtml.innerHTML = content;
|
||||
|
||||
// Replace emoji shortcodes with images
|
||||
const paragraphs = contentHtml.querySelectorAll("p");
|
||||
|
||||
for (const paragraph of paragraphs) {
|
||||
paragraph.innerHTML = paragraph.innerHTML.replace(
|
||||
/:([a-z0-9_-]+):/g,
|
||||
(match, emoji) => {
|
||||
const emojiData = emojis.find((e) => e.shortcode === emoji);
|
||||
if (!emojiData) {
|
||||
return match;
|
||||
}
|
||||
const image = document.createElement("img");
|
||||
image.src = emojiData.url;
|
||||
image.alt = `:${emoji}:`;
|
||||
image.title = emojiData.shortcode;
|
||||
image.className =
|
||||
"h-6 align-text-bottom inline not-prose hover:scale-110 transition-transform duration-75 ease-in-out";
|
||||
return image.outerHTML;
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
// Replace links containing mentions with interactive mentions
|
||||
const links = contentHtml.querySelectorAll("a");
|
||||
|
||||
for (const link of links) {
|
||||
const mention = mentions.find((m) => link.textContent === `@${m.acct}`);
|
||||
if (!mention) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const renderedMention = h(MentionComponent);
|
||||
renderedMention.props = {
|
||||
account: mention,
|
||||
};
|
||||
|
||||
link.outerHTML = await renderToString(renderedMention);
|
||||
}
|
||||
return ref(contentHtml.innerHTML);
|
||||
};
|
||||
20
composables/ResolveMentions.ts
Normal file
20
composables/ResolveMentions.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import type { Mastodon } from "megalodon";
|
||||
import type { Account } from "~/types/mastodon/account";
|
||||
import type { Mention } from "~/types/mastodon/mention";
|
||||
|
||||
export const useResolveMentions = async (
|
||||
mentions: Mention[],
|
||||
client: Mastodon | null,
|
||||
): Promise<Ref<Account[]>> => {
|
||||
if (!client) {
|
||||
return ref([]);
|
||||
}
|
||||
return ref(
|
||||
await Promise.all(
|
||||
mentions.map(async (mention) => {
|
||||
const response = await client.getAccount(mention.id);
|
||||
return response.data;
|
||||
}),
|
||||
),
|
||||
);
|
||||
};
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
export const useConfig = async () => {
|
||||
let host =
|
||||
useRequestHeader("X-Forwarded-Host") ??
|
||||
useRuntimeConfig().public.apiHost;
|
||||
|
||||
if (!host?.includes("http")) {
|
||||
// On server, this will be some kind of localhost
|
||||
host = `http://${host}`;
|
||||
}
|
||||
|
||||
if (!host) {
|
||||
throw createError({
|
||||
statusCode: 500,
|
||||
statusMessage: "No X-Forwarded-Host header found",
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
http: {
|
||||
url: host,
|
||||
base_url: host,
|
||||
},
|
||||
}; /* await fetch(new URL("/api/_fe/config", host)).then((res) =>
|
||||
res.json(),
|
||||
); */
|
||||
};
|
||||
86
composables/usePublicTimeline.ts
Normal file
86
composables/usePublicTimeline.ts
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
import type { Mastodon } from "megalodon";
|
||||
import type { Status } from "~/types/mastodon/status";
|
||||
|
||||
export const usePublicTimeline = (
|
||||
client: Mastodon | null,
|
||||
options: MaybeRef<
|
||||
Partial<{
|
||||
only_media: boolean;
|
||||
max_id: string;
|
||||
since_id: string;
|
||||
min_id: string;
|
||||
limit: number;
|
||||
}>
|
||||
>,
|
||||
): {
|
||||
timeline: Ref<Status[]>;
|
||||
loadNext: () => Promise<void>;
|
||||
loadPrev: () => Promise<void>;
|
||||
} => {
|
||||
if (!client) {
|
||||
return {
|
||||
timeline: ref([]),
|
||||
loadNext: async () => {},
|
||||
loadPrev: async () => {},
|
||||
};
|
||||
}
|
||||
|
||||
const fetchedNotes = ref<Status[]>([]);
|
||||
const fetchedNoteIds = new Set<string>();
|
||||
let nextMaxId: string | undefined = undefined;
|
||||
let prevMinId: string | undefined = undefined;
|
||||
|
||||
const loadNext = async () => {
|
||||
const response = await client.getPublicTimeline({
|
||||
...ref(options).value,
|
||||
max_id: nextMaxId,
|
||||
limit: useConfig().NOTES_PER_PAGE,
|
||||
});
|
||||
|
||||
const newNotes = response.data.filter(
|
||||
(note) => !fetchedNoteIds.has(note.id),
|
||||
);
|
||||
if (newNotes.length > 0) {
|
||||
fetchedNotes.value = [...fetchedNotes.value, ...newNotes];
|
||||
nextMaxId = newNotes[newNotes.length - 1].id;
|
||||
for (const note of newNotes) {
|
||||
fetchedNoteIds.add(note.id);
|
||||
}
|
||||
} else {
|
||||
nextMaxId = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
const loadPrev = async () => {
|
||||
const response = await client.getPublicTimeline({
|
||||
...ref(options).value,
|
||||
min_id: prevMinId,
|
||||
limit: useConfig().NOTES_PER_PAGE,
|
||||
});
|
||||
|
||||
const newNotes = response.data.filter(
|
||||
(note) => !fetchedNoteIds.has(note.id),
|
||||
);
|
||||
if (newNotes.length > 0) {
|
||||
fetchedNotes.value = [...newNotes, ...fetchedNotes.value];
|
||||
prevMinId = newNotes[0].id;
|
||||
for (const note of newNotes) {
|
||||
fetchedNoteIds.add(note.id);
|
||||
}
|
||||
} else {
|
||||
prevMinId = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
watch(
|
||||
() => ref(options).value,
|
||||
async ({ max_id, min_id }) => {
|
||||
nextMaxId = max_id;
|
||||
prevMinId = min_id;
|
||||
await loadNext();
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
return { timeline: fetchedNotes, loadNext, loadPrev };
|
||||
};
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { EButton, ETailwind } from "vue-email";
|
||||
import tailwindConfig from "~/tailwind.config";
|
||||
|
||||
defineProps<{
|
||||
name: string;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ETailwind :config="tailwindConfig">
|
||||
<EButton href="https://example.com" class="bg-primary px-3 py-2 font-medium leading-4 text-white">
|
||||
Click me
|
||||
</EButton>
|
||||
</ETailwind>
|
||||
</template>
|
||||
9
layouts/default.vue
Normal file
9
layouts/default.vue
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<template>
|
||||
<div class="from-dark-600 to-dark-900 bg-gradient-to-tl min-h-dvh">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
</script>
|
||||
|
|
@ -4,7 +4,10 @@ export default defineNuxtConfig({
|
|||
"@nuxtjs/seo",
|
||||
"@nuxtjs/tailwindcss",
|
||||
"@vueuse/nuxt",
|
||||
"@vue-email/nuxt",
|
||||
"nuxt-headlessui",
|
||||
"@nuxt/fonts",
|
||||
"nuxt-icon",
|
||||
"@vee-validate/nuxt",
|
||||
],
|
||||
app: {
|
||||
head: {
|
||||
|
|
@ -19,7 +22,7 @@ export default defineNuxtConfig({
|
|||
},
|
||||
},
|
||||
nitro: {
|
||||
preset: "bun",
|
||||
preset: "static",
|
||||
minify: true,
|
||||
prerender: {
|
||||
failOnError: true,
|
||||
|
|
@ -35,6 +38,22 @@ export default defineNuxtConfig({
|
|||
define: {
|
||||
__VERSION__: JSON.stringify("0.4"),
|
||||
},
|
||||
server: {
|
||||
hmr: {
|
||||
clientPort: 3000,
|
||||
host: "localhost",
|
||||
protocol: "ws",
|
||||
},
|
||||
},
|
||||
},
|
||||
veeValidate: {
|
||||
autoImports: true,
|
||||
componentNames: {
|
||||
Form: "VeeForm",
|
||||
Field: "VeeField",
|
||||
FieldArray: "VeeFieldArray",
|
||||
ErrorMessage: "VeeErrorMessage",
|
||||
},
|
||||
},
|
||||
runtimeConfig: {
|
||||
public: {
|
||||
|
|
@ -42,7 +61,7 @@ export default defineNuxtConfig({
|
|||
titleSeparator: "·",
|
||||
siteName: "Lysand",
|
||||
trailingSlash: true,
|
||||
apiHost: "https://lysand.localhost",
|
||||
apiHost: "https://social.lysand.org",
|
||||
},
|
||||
},
|
||||
site: {
|
||||
|
|
|
|||
87
package.json
87
package.json
|
|
@ -1,33 +1,58 @@
|
|||
{
|
||||
"name": "nuxt-app",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "nuxt build",
|
||||
"dev": "nuxt dev",
|
||||
"generate": "nuxt generate",
|
||||
"preview": "nuxt preview",
|
||||
"postinstall": "nuxt prepare"
|
||||
},
|
||||
"dependencies": {
|
||||
"c12": "^1.10.0",
|
||||
"nuxt": "^3.11.2",
|
||||
"vue": "^3.4.21",
|
||||
"vue-router": "^4.3.0",
|
||||
"shiki": "^1.2.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@biomejs/biome": "^1.6.4",
|
||||
"@nuxtjs/seo": "^2.0.0-rc.10",
|
||||
"@nuxtjs/tailwindcss": "^6.11.4",
|
||||
"@tailwindcss/forms": "^0.5.7",
|
||||
"@vue-email/nuxt": "^0.8.19"
|
||||
},
|
||||
"trustedDependencies": [
|
||||
"@biomejs/biome",
|
||||
"@fortawesome/fontawesome-common-types",
|
||||
"@fortawesome/free-regular-svg-icons",
|
||||
"@fortawesome/free-solid-svg-icons",
|
||||
"json-editor-vue"
|
||||
]
|
||||
"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.6.1",
|
||||
"@tailwindcss/typography": "^0.5.12",
|
||||
"@vee-validate/nuxt": "^4.12.6",
|
||||
"@vee-validate/zod": "^4.12.6",
|
||||
"c12": "^1.10.0",
|
||||
"megalodon": "^10.0.0",
|
||||
"nuxt": "^3.11.2",
|
||||
"nuxt-headlessui": "^1.2.0",
|
||||
"nuxt-icon": "^0.6.10",
|
||||
"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",
|
||||
"@vue-email/nuxt": "^0.8.19"
|
||||
},
|
||||
"trustedDependencies": [
|
||||
"@biomejs/biome",
|
||||
"@fortawesome/fontawesome-common-types",
|
||||
"@fortawesome/free-regular-svg-icons",
|
||||
"@fortawesome/free-solid-svg-icons",
|
||||
"json-editor-vue"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,70 +1,17 @@
|
|||
<template>
|
||||
<div class="flex min-h-screen flex-col justify-center px-6 py-12 lg:px-8 relative">
|
||||
<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%)" />
|
||||
<ClientOnly>
|
||||
<div v-if="note" class="max-w-2xl mx-auto md:py-20 md:px-10">
|
||||
<SocialElementsNotesNote :note="note" />
|
||||
</div>
|
||||
<div class="code" v-html="code">
|
||||
</div>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getHighlighterCore } from "shiki/core";
|
||||
import getWasm from "shiki/wasm";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
const config = await useConfig();
|
||||
|
||||
if (!config) {
|
||||
throw new Error("Config not found");
|
||||
}
|
||||
|
||||
const route = useRoute();
|
||||
const client = await useMegalodon();
|
||||
const uuid = (route.params.uuid as string);
|
||||
|
||||
const data = await fetch(
|
||||
new URL(`/api/v1/statuses/${route.params.uuid}`, config.http.base_url),
|
||||
{
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
},
|
||||
},
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.catch(() => ({
|
||||
error: "Failed to fetch status (it probably doesn't exist)",
|
||||
}));
|
||||
|
||||
const highlighter = await getHighlighterCore({
|
||||
themes: [import("shiki/themes/rose-pine.mjs")],
|
||||
langs: [import("shiki/langs/json.mjs")],
|
||||
loadWasm: getWasm,
|
||||
});
|
||||
|
||||
const code = highlighter.codeToHtml(JSON.stringify(data, null, 4), {
|
||||
lang: "json",
|
||||
theme: "rose-pine",
|
||||
});
|
||||
const note = await useNote(client, uuid);
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
pre:has(code) {
|
||||
word-wrap: normal;
|
||||
background: transparent;
|
||||
-webkit-hyphens: none;
|
||||
hyphens: none;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
white-space: pre;
|
||||
word-break: normal;
|
||||
word-spacing: normal;
|
||||
overflow-x: auto;
|
||||
@apply ring-1 ring-white/10 mt-4 bg-white/5 px-4 py-3 rounded;
|
||||
}
|
||||
|
||||
pre code {
|
||||
@apply block p-0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,81 +1,66 @@
|
|||
<template>
|
||||
<div class="flex min-h-screen flex-col justify-center px-6 py-12 lg:px-8 relative">
|
||||
<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 id="code" v-html="code">
|
||||
<div class="flex min-h-screen flex-col justify-center py-12 lg:px-8 relative">
|
||||
<div v-if="account" class="mx-auto max-w-lg w-full rounded ring-1 ring-white/10 pb-10">
|
||||
<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" />
|
||||
</div>
|
||||
|
||||
<div class="flex items-start justify-between px-4 py-3">
|
||||
<img class="-mt-[4.5rem] h-32 w-32 cursor-pointer rounded ring-white/10 ring-1 bg-dark-700"
|
||||
:src="account.avatar" />
|
||||
<ButtonsSecondary>Edit Profile</ButtonsSecondary>
|
||||
</div>
|
||||
|
||||
<div class="mt-2 px-4">
|
||||
<h2
|
||||
class="text-xl font-bold text-gray-100 tracking-tight bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">
|
||||
{{ account.display_name }}
|
||||
<Icon v-if="account.locked" name="tabler:lock" class="w-5 h-5 mb-0.5 text-gray-400 cursor-pointer"
|
||||
title="This account manually approves its followers" />
|
||||
</h2>
|
||||
<span class="text-gray-400">@{{ account.acct }}</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 px-4">
|
||||
<div class="prose prose-invert" v-html="account.note"></div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 flex items-center space-x-4 px-4">
|
||||
<div class="flex items-center space-x-1">
|
||||
<Icon name="tabler:calendar" class="w-5 h-5 text-gray-400" />
|
||||
<span class="text-gray-400">Created {{ formattedJoin }}</span>
|
||||
</div>
|
||||
<div v-if="account.bot" class="flex items-center space-x-1">
|
||||
<Icon name="tabler:robot" class="w-5 h-5 text-gray-400" />
|
||||
<span class="text-gray-400">Bot</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 flex items-center space-x-4 px-4">
|
||||
<div class="cursor-pointer hover:underline space-x-1">
|
||||
<span class="font-bold text-gray-200">{{ account.following_count }}</span>
|
||||
<span class="text-gray-400">Following</span>
|
||||
</div>
|
||||
<div class="cursor-pointer hover:underline space-x-1">
|
||||
<span class="font-bold text-gray-200">{{ account.followers_count }}</span>
|
||||
<span class="text-gray-400">Followers</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getHighlighterCore } from "shiki/core";
|
||||
import getWasm from "shiki/wasm";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
const config = await useConfig();
|
||||
|
||||
if (!config) {
|
||||
throw new Error("Config not found");
|
||||
}
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
const client = await useMegalodon();
|
||||
const username = (route.params.username as string).replace("@", "");
|
||||
const id = await useAccountSearch(client, username);
|
||||
|
||||
const id = await fetch(new URL(`/api/v1/accounts/search?q=${username}`, config.http.base_url), {
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
},
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.catch(() => null);
|
||||
|
||||
let data = null;
|
||||
|
||||
if (id && id.length > 0) {
|
||||
data = await fetch(new URL(`/api/v1/accounts/${id[0].id}`, config.http.base_url), {
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
},
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.catch(() => ({
|
||||
error: "Failed to fetch user (it probably doesn't exist)",
|
||||
}));
|
||||
}
|
||||
|
||||
const highlighter = await getHighlighterCore({
|
||||
themes: [import("shiki/themes/rose-pine.mjs")],
|
||||
langs: [import("shiki/langs/json.mjs")],
|
||||
loadWasm: getWasm,
|
||||
});
|
||||
|
||||
const code = highlighter.codeToHtml(JSON.stringify(data, null, 4), {
|
||||
lang: "json",
|
||||
theme: "rose-pine",
|
||||
});
|
||||
const account = id ? await useAccount(client, id[0].id) : null;
|
||||
const formattedJoin = Intl.DateTimeFormat("en-US", {
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
}).format(new Date(account?.created_at ?? 0));
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
pre:has(code) {
|
||||
word-wrap: normal;
|
||||
background: transparent;
|
||||
-webkit-hyphens: none;
|
||||
hyphens: none;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
white-space: pre;
|
||||
word-break: normal;
|
||||
word-spacing: normal;
|
||||
overflow-x: auto;
|
||||
@apply ring-1 ring-white/10 mt-4 bg-white/5 px-4 py-3 rounded;
|
||||
}
|
||||
|
||||
pre code {
|
||||
@apply block p-0;
|
||||
}
|
||||
</style>
|
||||
106
pages/index.vue
106
pages/index.vue
|
|
@ -1,70 +1,62 @@
|
|||
<template>
|
||||
<div class="bg-white">
|
||||
<div class="relative isolate px-6 pt-14 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 class="mx-auto max-w-lg py-32 sm:py-48 lg:py-56">
|
||||
<div class="hidden sm:mb-8 sm:flex sm:justify-center">
|
||||
<div
|
||||
class="relative rounded px-3 py-1 text-sm leading-6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
|
||||
You are using <a href="#" class="font-semibold text-indigo-600">Lysand {{ version }}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">Welcome to Lysand</h1>
|
||||
<p class="mt-6 text-lg leading-8 text-gray-600">You can login to this server by pointing any
|
||||
Mastodon
|
||||
client at <strong class="font-bold">{{ config?.http.base_url }}</strong></p>
|
||||
<div class="mt-10 flex items-center justify-center gap-6 md:flex-row flex-col">
|
||||
<a href="https://github.com/lysand-org/lysand" target="_blank"
|
||||
class="rounded-md w-full bg-indigo-600 ring-indigo-600 ring-2 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Read
|
||||
the docs</a>
|
||||
<a href="https://lysand.org" target="_blank"
|
||||
class="rounded-md w-full ring-indigo-600 ring-2 bg-white px-3.5 py-2.5 text-sm font-semibold text-indigo-500 shadow-sm hover:bg-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">About
|
||||
the Lysand Protocol</a>
|
||||
</div>
|
||||
<div class="relative isolate px-6 pt-14 lg:px-8">
|
||||
|
||||
<p class="mt-6 text-lg leading-8 text-gray-600">Here are some recommended clients:</p>
|
||||
<ul class="w-full flex flex-col gap-3 mt-4">
|
||||
<li v-for="client of recommendedClients" :key="client.name" class="w-full">
|
||||
<a :href="client.link"
|
||||
class="rounded-sm ring-2 ring-black/10 px-4 py-2 w-full flex flex-row gap-3 items-center">
|
||||
<img :src="client.icon" :alt="client.name" class="h-10 w-10" />
|
||||
<div class="flex flex-col justify-between items-start">
|
||||
<h2 class="font-bold">{{ client.name }}</h2>
|
||||
<span class="underline text-purple-700">{{ client.link }}</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="mt-6 text-lg leading-8 text-gray-600">
|
||||
Many other clients exist, but <strong class="font-bold">they have not been tested for
|
||||
compatibility</strong>. Bug reports are nevertheless welcome.
|
||||
</p>
|
||||
|
||||
<p class="mt-6 text-lg leading-8 text-gray-600">
|
||||
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
|
||||
class="underline text-purple-700">the issue tracker</a>.
|
||||
</p>
|
||||
<div class="mx-auto max-w-md py-32 sm:py-48 lg:py-56">
|
||||
<div class="hidden sm:mb-8 sm:flex sm:justify-center">
|
||||
<div
|
||||
class="relative rounded px-3 py-1 text-sm leading-6 text-gray-300 ring-1 ring-white/10 hover:ring-white/20">
|
||||
You are using <span class="font-semibold text-pink-400">Lysand 0.5-dev</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
|
||||
aria-hidden="true">
|
||||
<div class="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] 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 class="text-center">
|
||||
<h1
|
||||
class="text-4xl font-bold tracking-tight bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text sm:text-5xl">
|
||||
Welcome to Lysand</h1>
|
||||
<p class="mt-6 text-lg leading-8 text-gray-300">You can login to this server by pointing any
|
||||
Mastodon
|
||||
client at <strong class="font-bold">{{ baseUrl }}</strong></p>
|
||||
<div class="mt-10 flex items-center justify-center gap-6 md:flex-row flex-col">
|
||||
<NuxtLink href="/public">
|
||||
<ButtonsPrimary>
|
||||
Public timeline
|
||||
</ButtonsPrimary>
|
||||
</NuxtLink>
|
||||
<a href="https://github.com/lysand-org/lysand" target="_blank">
|
||||
<ButtonsSecondary>
|
||||
Create your own instance
|
||||
</ButtonsSecondary>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<p class="mt-6 text-lg leading-8 text-gray-300">Here are some recommended clients:</p>
|
||||
<ul class="w-full mx-auto max-w-md flex flex-col gap-3 mt-4">
|
||||
<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 :src="client.icon" :alt="client.name" 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>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="mt-6 text-lg leading-8 text-gray-300">
|
||||
Many other clients exist, but <strong class="font-bold">they may have not been tested for
|
||||
compatibility</strong>. Bug reports are nevertheless welcome.
|
||||
</p>
|
||||
|
||||
<p class="mt-6 text-lg leading-8 text-gray-300">
|
||||
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
|
||||
target="_blank" class="underline text-pink-800">the issue tracker</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { recommendedClients } from "../constants";
|
||||
// @ts-ignore
|
||||
const version = __VERSION__;
|
||||
const config = await useConfig();
|
||||
const baseUrl = useBaseUrl()
|
||||
|
||||
useServerSeoMeta({
|
||||
title: "Welcome to Lysand!",
|
||||
|
|
|
|||
|
|
@ -1,88 +1,92 @@
|
|||
<template>
|
||||
<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">
|
||||
<form class="space-y-6" method="POST"
|
||||
:action="`/api/auth/login?redirect_uri=${redirect_uri}&response_type=${response_type}&client_id=${client_id}&scope=${scope}`">
|
||||
<div>
|
||||
<h1 class="font-bold text-2xl text-center tracking-tight">Login to your account</h1>
|
||||
</div>
|
||||
<div class="flex min-h-screen relative flex-col justify-center py-12 lg:px-8">
|
||||
<img src="https://camo.githubusercontent.com/353460d1fdb1667ec993159270dcece12c491fb38165460215a519ab93f4e554/68747470733a2f2f63646e2d7765622e63706c757370617463682e636f6d2f6c7973616e642e77656270"
|
||||
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 md:bg-dark-900 px-10 py-10 rounded md:ring-1 md:ring-white/10">
|
||||
<VeeForm class="space-y-6" method="POST" :validation-schema="schema"
|
||||
:action="`/api/auth/login?redirect_uri=${redirect_uri}&response_type=${response_type}&client_id=${client_id}&scope=${scope}`">
|
||||
|
||||
<div v-if="error && error !== 'undefined'"
|
||||
class="rounded bg-purple-100 ring-1 ring-purple-800 py-2 px-4">
|
||||
<h3 class="font-bold">An error occured:</h3>
|
||||
<p>{{ error }}</p>
|
||||
</div>
|
||||
<h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Login to your account</h1>
|
||||
|
||||
<div>
|
||||
<LoginInput label="Email" id="email" name="email" type="email" autocomplete="email" required />
|
||||
</div>
|
||||
<VeeField name="email" as="div" v-slot="{ errors, field }" validate-on-change>
|
||||
<LoginInput label="Email" placeholder="contact@cpluspatch.com" type="email" autocomplete="email"
|
||||
required :is-invalid="errors.length > 0" v-bind="field" />
|
||||
<VeeErrorMessage name="email" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
|
||||
{{ message }}
|
||||
</VeeErrorMessage>
|
||||
</VeeField>
|
||||
|
||||
<div>
|
||||
<LoginInput label="Password" id="password" name="password" type="password"
|
||||
autocomplete="current-password" required />
|
||||
</div>
|
||||
<VeeField name="password" as="div" v-slot="{ errors, field }" validate-on-change>
|
||||
<LoginInput label="Password" placeholder="Password here" type="password"
|
||||
autocomplete="current-password" required :is-invalid="errors.length > 0" v-bind="field" />
|
||||
<VeeErrorMessage name="password" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
|
||||
{{ message }}
|
||||
</VeeErrorMessage>
|
||||
</VeeField>
|
||||
|
||||
<div v-if="oauthProviders && oauthProviders.length > 0" class="w-full flex flex-col gap-3">
|
||||
<h2 class="text-sm text-gray-700">Or sign in with</h2>
|
||||
<div class="grid grid-cols-2 gap-4 w-full">
|
||||
<a v-for="provider of oauthProviders" :key="provider.id"
|
||||
:href="`/oauth/authorize-external?issuer=${provider.id}&redirect_uri=${redirect_uri}&response_type=${response_type}&clientId=${client_id}&scope=${scope}`"
|
||||
class="flex flex-row justify-center rounded ring-1 gap-2 p-2 ring-black/10 hover:shadow duration-200">
|
||||
<img :src="provider.icon" :alt="provider.name" class="w-6 h-6" />
|
||||
<div class="flex flex-col gap-0 justify-center">
|
||||
<h3 class="font-bold">{{ provider.name }}</h3>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="oauthProviders && oauthProviders.length > 0" class="w-full flex flex-col gap-3">
|
||||
<h2 class="text-sm text-gray-200">Or sign in with</h2>
|
||||
<div class="grid grid-cols-1 gap-4 w-full">
|
||||
<a v-for="provider of oauthProviders" :key="provider.id"
|
||||
:href="`/oauth/authorize-external?issuer=${provider.id}&redirect_uri=${redirect_uri}&response_type=${response_type}&clientId=${client_id}&scope=${scope}`">
|
||||
<ButtonsSecondary class="flex flex-row w-full items-center justify-center gap-3">
|
||||
<img :src="provider.icon" :alt="provider.name" class="w-6 h-6" />
|
||||
<div class="flex flex-col gap-0 justify-center">
|
||||
<h3 class="font-bold">{{ provider.name }}</h3>
|
||||
</div>
|
||||
</ButtonsSecondary>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button type="submit"
|
||||
class="flex w-full justify-center rounded-md bg-purple-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:shadow-lg duration-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Sign
|
||||
in</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div v-else class="mx-auto max-w-md">
|
||||
<h1 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-4xl">Invalid access
|
||||
parameters
|
||||
</h1>
|
||||
<p class="mt-6 text-lg leading-8 text-gray-600">This page should be accessed
|
||||
through a valid OAuth2 authorization request. Please use a <strong class="font-bold">Mastodon API</strong> client to access this page.
|
||||
</p>
|
||||
<p class="mt-6 text-lg leading-8 text-gray-600">Here are some recommended clients:</p>
|
||||
<ul class="w-full flex flex-col gap-3 mt-4">
|
||||
<li v-for="client of recommendedClients" :key="client.name" class="w-full">
|
||||
<a :href="client.link" class="rounded-sm ring-2 ring-black/10 px-4 py-2 w-full flex flex-row gap-3 items-center">
|
||||
<img :src="client.icon" :alt="client.name" class="h-10 w-10" />
|
||||
<div class="flex flex-col justify-between items-start">
|
||||
<h2 class="font-bold">{{ client.name }}</h2>
|
||||
<span class="underline text-purple-700">{{ client.link }}</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="mt-6 text-lg leading-8 text-gray-600">
|
||||
Many other clients exist, but <strong class="font-bold">they have not been tested for compatibility</strong>. Bug reports are nevertheless welcome.
|
||||
</p>
|
||||
<ButtonsPrimary type="submit" class="w-full">Sign in</ButtonsPrimary>
|
||||
</VeeForm>
|
||||
</div>
|
||||
<div v-else class="mx-auto max-w-md mt-10">
|
||||
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Invalid access
|
||||
parameters
|
||||
</h1>
|
||||
<p class="mt-6 text-lg leading-8 text-gray-300">This page should be accessed
|
||||
through a valid OAuth2 authorization request. Please use a <strong class="font-bold">Mastodon
|
||||
API</strong> client to access this page.
|
||||
</p>
|
||||
<p class="mt-6 text-lg leading-8 text-gray-300">Here are some recommended clients:</p>
|
||||
<ul class="w-full flex flex-col gap-3 mt-4">
|
||||
<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 :src="client.icon" :alt="client.name" 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>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="mt-6 text-lg leading-8 text-gray-300">
|
||||
Many other clients exist, but <strong class="font-bold">they have not been tested for
|
||||
compatibility</strong>. Bug reports are nevertheless welcome.
|
||||
</p>
|
||||
|
||||
<p class="mt-6 text-lg leading-8 text-gray-600">
|
||||
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose" class="underline text-purple-700">the issue tracker</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-6 text-lg leading-8 text-gray-300">
|
||||
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
|
||||
target="_blank" class="underline text-pink-700">the issue tracker</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import LoginInput from "../../components/LoginInput.vue";
|
||||
import { recommendedClients } from "../../constants";
|
||||
import { toTypedSchema } from '@vee-validate/zod';
|
||||
import { z } from 'zod';
|
||||
|
||||
const schema = toTypedSchema(z.object({
|
||||
email: z.string().email(),
|
||||
password: z.string().min(3),
|
||||
}));
|
||||
|
||||
const query = useRoute().query;
|
||||
|
||||
|
|
@ -91,24 +95,9 @@ const response_type = query.response_type;
|
|||
const client_id = query.client_id;
|
||||
const scope = query.scope;
|
||||
const error = decodeURIComponent(query.error as string);
|
||||
const error_description = decodeURIComponent(query.error_description as string);
|
||||
|
||||
const validUrlParameters = redirect_uri && response_type && client_id && scope;
|
||||
|
||||
const oauthProviders = ref<
|
||||
| {
|
||||
name: string;
|
||||
icon: string;
|
||||
id: string;
|
||||
}[]
|
||||
| null
|
||||
>(null);
|
||||
|
||||
const getOauthProviders = async () => {
|
||||
const response = await fetch("/oauth/providers");
|
||||
return await response.json();
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
oauthProviders.value = await getOauthProviders();
|
||||
});
|
||||
const oauthProviders = await useOAuthProviders()
|
||||
</script>
|
||||
|
|
@ -9,75 +9,77 @@
|
|||
<form class="space-y-6" method="POST" :action="url.pathname.replace('/oauth/redirect', '/oauth/authorize')">
|
||||
<input type="hidden" v-for="([key, value]) in url.searchParams" :key="key" :name="key" :value="value" />
|
||||
<div class="flex flex-col items-center gap-y-5">
|
||||
<h1 class="font-bold text-2xl text-center tracking-tight">Allow this application to access your
|
||||
<h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Allow this application to
|
||||
access your
|
||||
account?</h1>
|
||||
<div class="rounded-sm ring-2 ring-black/10 px-4 py-2 w-full">
|
||||
<h2 class="font-bold">{{ application }}</h2>
|
||||
<a :href="website" class="underline text-purple-700">{{ website }}</a>
|
||||
<div v-if="application" class="rounded-sm ring-2 ring-white/10 px-4 py-2 w-full">
|
||||
<h2 class="font-bold text-gray-200">{{ application }}</h2>
|
||||
<a v-if="website" :href="website" target="_blank" class="underline text-pink-700">{{ website
|
||||
}}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-gray-900 tracking-tight text-xl font-semibold">
|
||||
<h2 class="text-gray-50 tracking-tight text-xl font-semibold">
|
||||
This application will be able to:
|
||||
</h2>
|
||||
|
||||
<ul class="flex flex-col gap-y-1.5">
|
||||
<li v-for="text in getScopeText(scopes)" :key="text[1]" class="flex flex-row gap-1">
|
||||
<svg class="fill-purple-600 w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
|
||||
<svg class="fill-pink-600 w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
|
||||
viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z" />
|
||||
</svg>
|
||||
<h2 class="text-sm">
|
||||
<h2 class="text-sm text-gray-200">
|
||||
<strong class="font-bold">{{ text[0] }}</strong> {{ text[1] }}
|
||||
</h2>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="flex-col flex gap-y-1">
|
||||
<p class="text-sm text-gray-700">You are signing in to <b>{{ application }}</b> with your
|
||||
<p class="text-sm text-gray-200">You are signing in to <b>{{ application }}</b> with your
|
||||
account.</p>
|
||||
<p class="text-sm text-gray-700">This allows <b>{{ application }}</b> to perform the above account
|
||||
<p class="text-sm text-gray-200">This allows <b>{{ application }}</b> to perform the above account
|
||||
actions.</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-3">
|
||||
<button type="submit"
|
||||
class="flex w-full justify-center rounded-md bg-purple-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:shadow-lg duration-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Authorize</button>
|
||||
<a type="button" href="/"
|
||||
class="flex w-full justify-center rounded-md bg-gray-50 px-3 py-1.5 text-sm font-semibold leading-6 text-red-600 shadow-sm hover:shadow-lg duration-200 border-2 border-red-600">Cancel</a>
|
||||
<ButtonsPrimary type="submit">Authorize</ButtonsPrimary>
|
||||
<NuxtLink href="/" class="w-full">
|
||||
<ButtonsSecondary class="w-full">Cancel</ButtonsSecondary>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div v-else class="mx-auto max-w-md">
|
||||
<h1 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-4xl">Invalid access
|
||||
<div v-else class="mx-auto max-w-md mt-10">
|
||||
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Invalid access
|
||||
parameters
|
||||
</h1>
|
||||
<p class="mt-6 text-lg leading-8 text-gray-600">This page should be accessed
|
||||
<p class="mt-6 text-lg leading-8 text-gray-300">This page should be accessed
|
||||
through a valid OAuth2 authorization request. Please use a <strong class="font-bold">Mastodon
|
||||
API</strong> client to access this page.
|
||||
</p>
|
||||
<p class="mt-6 text-lg leading-8 text-gray-600">Here are some recommended clients:</p>
|
||||
<p class="mt-6 text-lg leading-8 text-gray-300">Here are some recommended clients:</p>
|
||||
<ul class="w-full flex flex-col gap-3 mt-4">
|
||||
<li v-for="client of recommendedClients" :key="client.name" class="w-full">
|
||||
<a :href="client.link"
|
||||
class="rounded-sm ring-2 ring-black/10 px-4 py-2 w-full flex flex-row gap-3 items-center">
|
||||
<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 :src="client.icon" :alt="client.name" class="h-10 w-10" />
|
||||
<div class="flex flex-col justify-between items-start">
|
||||
<h2 class="font-bold">{{ client.name }}</h2>
|
||||
<span class="underline text-purple-700">{{ client.link }}</span>
|
||||
<h2 class="font-bold text-gray-100">{{ client.name }}</h2>
|
||||
<span class="underline text-pink-700">{{ client.link }}</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="mt-6 text-lg leading-8 text-gray-600">
|
||||
<p class="mt-6 text-lg leading-8 text-gray-300">
|
||||
Many other clients exist, but <strong class="font-bold">they have not been tested for
|
||||
compatibility</strong>. Bug reports are nevertheless welcome.
|
||||
</p>
|
||||
|
||||
<p class="mt-6 text-lg leading-8 text-gray-600">
|
||||
<p class="mt-6 text-lg leading-8 text-gray-300">
|
||||
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
|
||||
class="underline text-purple-700">the issue tracker</a>.
|
||||
target="_blank" class="underline text-pink-700">the issue tracker</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -85,17 +87,15 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { useRoute } from "vue-router";
|
||||
import { recommendedClients } from "../../constants";
|
||||
|
||||
const url = useRequestURL();
|
||||
const query = useRoute().query;
|
||||
|
||||
const application = query.application;
|
||||
const website = decodeURIComponent(query.website as string);
|
||||
const application = "Soapbox"; //query.application;
|
||||
const website = query.website ? decodeURIComponent(query.website as string) : null;
|
||||
const redirect_uri = query.redirect_uri as string;
|
||||
const client_id = query.client_id;
|
||||
const scope = decodeURIComponent((query.scope as string) || "");
|
||||
const code = query.code;
|
||||
const scope = query.scope ? decodeURIComponent(query.scope as string) : "";
|
||||
|
||||
const validUrlParameters =
|
||||
application && website && redirect_uri && client_id && scope;
|
||||
43
pages/public.vue
Normal file
43
pages/public.vue
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<template>
|
||||
<ClientOnly>
|
||||
<div class="max-w-2xl mx-auto md:py-20 md:px-10">
|
||||
<SocialElementsNotesNote v-for="note of timeline" :key="note.id" :note="note" />
|
||||
<span ref="skeleton"></span>
|
||||
<SocialElementsNotesNote v-for="index of 5" v-if="!hasReachedEnd" :skeleton="true" />
|
||||
|
||||
<div v-if="hasReachedEnd"
|
||||
class="text-center flex flex-row justify-center items-center py-10 text-gray-400 gap-3">
|
||||
<Icon name="tabler:message-off" class="h-6 w-6" />
|
||||
<span>No more posts, you've seen them all</span>
|
||||
</div>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const client = await useMegalodon();
|
||||
|
||||
const isLoading = ref(true);
|
||||
|
||||
const timelineParameters = ref({});
|
||||
const hasReachedEnd = ref(false);
|
||||
const { timeline, loadNext, loadPrev } = usePublicTimeline(client, timelineParameters);
|
||||
const skeleton = ref<HTMLSpanElement | null>(null);
|
||||
|
||||
onMounted(() => {
|
||||
useIntersectionObserver(skeleton, async (entries) => {
|
||||
if (entries[0].isIntersecting && !hasReachedEnd.value && !isLoading.value) {
|
||||
isLoading.value = true;
|
||||
await loadNext();
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
watch(timeline, (newTimeline, oldTimeline) => {
|
||||
isLoading.value = false;
|
||||
// If less than NOTES_PER_PAGE statuses are returned, we have reached the end
|
||||
if (newTimeline.length - oldTimeline.length < useConfig().NOTES_PER_PAGE) {
|
||||
hasReachedEnd.value = true;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,100 +1,82 @@
|
|||
<template>
|
||||
<div class="flex min-h-screen flex-col justify-center px-6 py-12 lg:px-8 relative">
|
||||
<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="instanceInfo.registrations" class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
|
||||
<form ref="form" class="space-y-6" method="POST" action="" @submit.prevent="registerUser">
|
||||
<div>
|
||||
<h1 class="font-bold text-2xl text-center tracking-tight">Register for an account</h1>
|
||||
</div>
|
||||
<img src="https://camo.githubusercontent.com/353460d1fdb1667ec993159270dcece12c491fb38165460215a519ab93f4e554/68747470733a2f2f63646e2d7765622e63706c757370617463682e636f6d2f6c7973616e642e77656270"
|
||||
alt="Lysand logo" class="mx-auto h-24 hidden md:block" />
|
||||
<div v-if="instance && instance.registrations" class="mt-10 mx-auto w-full max-w-md">
|
||||
<div v-if="Object.keys(errors).length > 0"
|
||||
class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white mb-10">
|
||||
<h2 class="font-bold text-lg">Error</h2>
|
||||
<span class="text-sm">{{ errors.error }}</span>
|
||||
</div>
|
||||
<VeeForm class="space-y-6" @submit="register as any" :validation-schema="schema">
|
||||
<h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Register</h1>
|
||||
|
||||
<div>
|
||||
<LoginInput label="Email" id="email" name="email" type="email" autocomplete="email" required />
|
||||
</div>
|
||||
<VeeField name="email" as="div" v-slot="{ errors, field }" validate-on-change>
|
||||
<LoginInput label="Email" placeholder="contact@cpluspatch.com" type="email" autocomplete="email"
|
||||
required :is-invalid="errors.length > 0" v-bind="field" :disabled="isLoading" />
|
||||
<VeeErrorMessage name="email" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
|
||||
{{ message }}
|
||||
</VeeErrorMessage>
|
||||
</VeeField>
|
||||
|
||||
<div v-if="errors['email']" v-for="error of errors['email']"
|
||||
class="rounded bg-purple-100 ring-1 ring-purple-800 py-2 px-4">
|
||||
<h3 class="font-bold">An error occured:</h3>
|
||||
<p>{{ error.description }}</p>
|
||||
</div>
|
||||
<VeeField name="username" as="div" v-slot="{ errors, field }" validate-on-change>
|
||||
<LoginInput label="Username" placeholder="thespeedy" type="text" autocomplete="username" required
|
||||
:is-invalid="errors.length > 0" v-bind="field" :disabled="isLoading" />
|
||||
<VeeErrorMessage name="username" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
|
||||
{{ message }} (must only contain lowercase letters, numbers and underscores)
|
||||
</VeeErrorMessage>
|
||||
</VeeField>
|
||||
|
||||
<div>
|
||||
<LoginInput label="Username" id="username" name="username" type="text" autocomplete="username"
|
||||
required />
|
||||
</div>
|
||||
<VeeField name="password" as="div" v-slot="{ errors, field }" validate-on-change>
|
||||
<LoginInput label="Password" placeholder="hunter2" type="password" autocomplete="current-password"
|
||||
required :is-invalid="errors.length > 0" v-bind="field" :disabled="isLoading" />
|
||||
<VeeErrorMessage name="password" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
|
||||
{{ message }}
|
||||
</VeeErrorMessage>
|
||||
</VeeField>
|
||||
|
||||
<div v-if="errors['username']" v-for="error of errors['username']"
|
||||
class="rounded bg-purple-100 ring-1 ring-purple-800 py-2 px-4">
|
||||
<h3 class="font-bold">An error occured:</h3>
|
||||
<p>{{ error.description }}</p>
|
||||
</div>
|
||||
<VeeField name="password2" as="div" v-slot="{ errors, field }" validate-on-change>
|
||||
<LoginInput label="Confirm password" placeholder="hunter2" type="password"
|
||||
autocomplete="current-password" required :is-invalid="errors.length > 0" v-bind="field"
|
||||
:disabled="isLoading" />
|
||||
<VeeErrorMessage name="password2" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
|
||||
{{ message }}
|
||||
</VeeErrorMessage>
|
||||
</VeeField>
|
||||
|
||||
<div>
|
||||
<LoginInput label="Password" id="password" name="password" type="password" autocomplete="" required
|
||||
:spellcheck="false" :error="!passwordsMatch ? `Passwords dont match` : ``" :value="password1"
|
||||
@input="password1 = $event.target.value" />
|
||||
</div>
|
||||
|
||||
<div v-if="errors['password']" v-for="error of errors['password']"
|
||||
class="rounded bg-purple-100 ring-1 ring-purple-800 py-2 px-4">
|
||||
<h3 class="font-bold">An error occured:</h3>
|
||||
<p>{{ error.description }}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<LoginInput label="Confirm password" id="password2" name="password2" type="password" autocomplete=""
|
||||
required :spellcheck="false" :error="!passwordsMatch ? `Passwords dont match` : ``"
|
||||
:value="password2" @input="password2 = $event.target.value" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="comment" class="block text-sm font-medium leading-6 text-gray-900">Why do you want to
|
||||
<VeeField name="reason" as="div" v-slot="{ errors, field }" validate-on-change>
|
||||
<label for="reason" class="block text-sm font-medium leading-6 text-gray-50">Why do you want to
|
||||
join?</label>
|
||||
<div class="mt-2">
|
||||
<textarea rows="4" required :value="reason" @input="reason = ($event.target as any).value"
|
||||
name="comment" id="comment"
|
||||
class="block w-full rounded-md px-2 border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" />
|
||||
<textarea rows="4" required :is-invalid="errors.length > 0" name="reason" :disabled="isLoading"
|
||||
placeholder="Brief text (optional)"
|
||||
class="block w-full disabled:opacity-70 disabled:hover:cursor-wait bg-dark-500 rounded-md border-0 py-1.5 text-gray-50 shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-pink-600 sm:text-sm sm:leading-6" />
|
||||
</div>
|
||||
</div>
|
||||
<VeeErrorMessage name="reason" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
|
||||
{{ message }}
|
||||
</VeeErrorMessage>
|
||||
</VeeField>
|
||||
|
||||
<div v-if="errors['reason']" v-for="error of errors['reason']"
|
||||
class="rounded bg-purple-100 ring-1 ring-purple-800 py-2 px-4">
|
||||
<h3 class="font-bold">An error occured:</h3>
|
||||
<p>{{ error.description }}</p>
|
||||
</div>
|
||||
<VeeField name="tos" as="div" v-slot="{ errors, field }" validate-on-change>
|
||||
<input type="checkbox" :disabled="isLoading" name="tos"
|
||||
class="rounded disabled:hover:cursor-wait mr-1 align-middle mb-0.5 text-pink-700 !ring-0 !outline-none"
|
||||
required />
|
||||
<span class="text-sm text-gray-100">I agree to the terms and conditions of this server <a
|
||||
class="underline font-bold" target="_blank" :href="instance.uri">available here</a></span>
|
||||
<VeeErrorMessage name="tos" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
|
||||
{{ message }}
|
||||
</VeeErrorMessage>
|
||||
</VeeField>
|
||||
|
||||
<div class="">
|
||||
<input type="checkbox" :value="tosAccepted"
|
||||
@input="tosAccepted = Boolean(($event.target as any).value)"
|
||||
class="rounded mr-1 align-middle mb-0.5" /> <span class="text-sm">I agree to the
|
||||
terms and
|
||||
conditions
|
||||
of this
|
||||
server, available <a class="underline font-bold" target="_blank"
|
||||
:href="instanceInfo.tos_url">here</a></span>
|
||||
</div>
|
||||
|
||||
<div v-if="errors['agreement']" v-for="error of errors['agreement']"
|
||||
class="rounded bg-purple-100 ring-1 ring-purple-800 py-2 px-4">
|
||||
<h3 class="font-bold">An error occured:</h3>
|
||||
<p>{{ error.description }}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button type="submit" :disabled="!passwordsMatch || !tosAccepted"
|
||||
class="flex w-full justify-center disabled:opacity-50 disabled:hover:shadow-none rounded-md bg-purple-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:shadow-lg duration-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Sign
|
||||
in</button>
|
||||
</div>
|
||||
</form>
|
||||
<ButtonsPrimary type="submit" class="w-full" :disabled="isLoading">{{ isLoading ? "Registering..." :
|
||||
"Register" }}</ButtonsPrimary>
|
||||
</VeeForm>
|
||||
</div>
|
||||
<div v-else>
|
||||
<h1 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-4xl text-center">Registrations are
|
||||
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl text-center">Registrations are
|
||||
disabled
|
||||
</h1>
|
||||
<p class="mt-6 text-lg leading-8 text-gray-600 text-center">Ask this instance's admin to enable them in
|
||||
<p class="mt-6 text-lg leading-8 text-gray-200 text-center">Ask this instance's admin to enable them in
|
||||
config!
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -103,18 +85,30 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import LoginInput from "../../components/LoginInput.vue";
|
||||
import { toTypedSchema } from '@vee-validate/zod';
|
||||
import type { AxiosError } from "axios";
|
||||
import { z } from 'zod';
|
||||
|
||||
const config = await useConfig();
|
||||
const schema = toTypedSchema(z.object({
|
||||
email: z.string().email(),
|
||||
password: z.string().min(3),
|
||||
password2: z.string().min(3),
|
||||
username: z.string().min(3).regex(/^[a-z0-9_]+$/),
|
||||
reason: z.string().optional(),
|
||||
tos: z.string(),
|
||||
}).superRefine((data, ctx) => {
|
||||
if (data.password !== data.password2) {
|
||||
ctx.addIssue({
|
||||
path: [...ctx.path, 'password2'],
|
||||
code: "custom",
|
||||
message: 'Passwords do not match',
|
||||
});
|
||||
}
|
||||
return {};
|
||||
}));
|
||||
|
||||
if (!config) {
|
||||
throw new Error("Config not found");
|
||||
}
|
||||
|
||||
const instanceInfo = (await fetch(new URL("/api/v1/instance", config.http.base_url)).then(
|
||||
(data) => data.json(),
|
||||
)).catch((e: Error) => {
|
||||
console.error(e);
|
||||
});
|
||||
const client = await useMegalodon();
|
||||
const instance = await useInstance(client);
|
||||
|
||||
const errors = ref<{
|
||||
[key: string]: {
|
||||
|
|
@ -123,51 +117,26 @@ const errors = ref<{
|
|||
}[];
|
||||
}>({});
|
||||
|
||||
const password1 = ref<string>("");
|
||||
const password2 = ref<string>("");
|
||||
const tosAccepted = ref<boolean>(false);
|
||||
const reason = ref<string>("");
|
||||
const isLoading = ref(false);
|
||||
|
||||
const passwordsMatch = computed(() => password1.value === password2.value);
|
||||
|
||||
const registerUser = (e: Event) => {
|
||||
e.preventDefault();
|
||||
const formData = new FormData();
|
||||
|
||||
const target = e.target as unknown as Record<string, HTMLInputElement>;
|
||||
|
||||
formData.append("email", target.email.value);
|
||||
formData.append("password", target.password.value);
|
||||
formData.append("username", target.username.value);
|
||||
formData.append("reason", reason.value);
|
||||
formData.append("locale", "en");
|
||||
formData.append("agreement", "true");
|
||||
|
||||
fetch("/api/v1/accounts", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
})
|
||||
const register = (result: {
|
||||
username: string;
|
||||
email: string;
|
||||
password: string;
|
||||
reason: string;
|
||||
}) => {
|
||||
isLoading.value = true;
|
||||
client.registerAccount(result.username, result.email, result.password, true, "en", result.reason || "Empty reason")
|
||||
.then(async (res) => {
|
||||
if (res.status === 422) {
|
||||
errors.value = (
|
||||
(await res.json()) as Record<
|
||||
string,
|
||||
{
|
||||
[key: string]: {
|
||||
error: string;
|
||||
description: string;
|
||||
}[];
|
||||
}
|
||||
>
|
||||
).details;
|
||||
console.log(errors.value);
|
||||
} else {
|
||||
// @ts-ignore
|
||||
window.location.href = "/register/success";
|
||||
}
|
||||
navigateTo("/register/success");
|
||||
})
|
||||
.catch(async (err) => {
|
||||
const error = err as AxiosError;
|
||||
// @ts-ignore
|
||||
errors.value = error.response?.data || {};
|
||||
console.error(err);
|
||||
}).finally(() => {
|
||||
isLoading.value = false;
|
||||
});
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,13 +1,11 @@
|
|||
<template>
|
||||
<div class="flex min-h-screen flex-col justify-center px-6 py-12 lg:px-8 relative">
|
||||
<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>
|
||||
<h1 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-4xl text-center">Registration was a success!
|
||||
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl text-center">Registration was a
|
||||
success!
|
||||
</h1>
|
||||
<p class="mt-6 text-lg leading-8 text-gray-600 text-center"> You can now login to your account in any Mastodon
|
||||
<p class="mt-6 text-lg leading-8 text-gray-300 text-center"> You can now login to your account in any
|
||||
Mastodon
|
||||
client </p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,28 @@
|
|||
import forms from "@tailwindcss/forms";
|
||||
import typography from "@tailwindcss/typography";
|
||||
import type { Config } from "tailwindcss";
|
||||
|
||||
// Default are on https://tailwindcss.nuxtjs.org/tailwind/config#default-configuration
|
||||
export default (<Partial<Config>>{
|
||||
theme: {},
|
||||
plugins: [forms],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
dark: {
|
||||
50: "#4a4a4a",
|
||||
100: "#3c3c3c",
|
||||
200: "#323232",
|
||||
300: "#2d2d2d",
|
||||
400: "#222222",
|
||||
500: "#1f1f1f",
|
||||
600: "#1c1c1e",
|
||||
700: "#1b1b1b",
|
||||
800: "#181818",
|
||||
900: "#0f0f0f",
|
||||
950: "#080808",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [forms, typography],
|
||||
content: [],
|
||||
});
|
||||
|
|
|
|||
34
types/mastodon/account.ts
Normal file
34
types/mastodon/account.ts
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import type { Emoji } from "./emoji";
|
||||
import type { Field } from "./field";
|
||||
import type { Role } from "./role";
|
||||
import type { Source } from "./source";
|
||||
|
||||
export type Account = {
|
||||
id: string;
|
||||
username: string;
|
||||
acct: string;
|
||||
display_name: string;
|
||||
locked: boolean;
|
||||
discoverable?: boolean;
|
||||
group: boolean | null;
|
||||
noindex: boolean | null;
|
||||
suspended: boolean | null;
|
||||
limited: boolean | null;
|
||||
created_at: string;
|
||||
followers_count: number;
|
||||
following_count: number;
|
||||
statuses_count: number;
|
||||
note: string;
|
||||
url: string;
|
||||
avatar: string;
|
||||
avatar_static: string;
|
||||
header: string;
|
||||
header_static: string;
|
||||
emojis: Array<Emoji>;
|
||||
moved: Account | null;
|
||||
fields: Array<Field>;
|
||||
bot: boolean | null;
|
||||
source?: Source;
|
||||
role?: Role;
|
||||
mute_expires_at?: string;
|
||||
};
|
||||
6
types/mastodon/activity.ts
Normal file
6
types/mastodon/activity.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
export type Activity = {
|
||||
week: string;
|
||||
statuses: string;
|
||||
logins: string;
|
||||
registrations: string;
|
||||
};
|
||||
39
types/mastodon/announcement.ts
Normal file
39
types/mastodon/announcement.ts
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
import type { Emoji } from "./emoji";
|
||||
import type { StatusTag } from "./status";
|
||||
|
||||
export type Announcement = {
|
||||
id: string;
|
||||
content: string;
|
||||
starts_at: string | null;
|
||||
ends_at: string | null;
|
||||
published: boolean;
|
||||
all_day: boolean;
|
||||
published_at: string;
|
||||
updated_at: string | null;
|
||||
read: boolean | null;
|
||||
mentions: Array<AnnouncementAccount>;
|
||||
statuses: Array<AnnouncementStatus>;
|
||||
tags: Array<StatusTag>;
|
||||
emojis: Array<Emoji>;
|
||||
reactions: Array<AnnouncementReaction>;
|
||||
};
|
||||
|
||||
export type AnnouncementAccount = {
|
||||
id: string;
|
||||
username: string;
|
||||
url: string;
|
||||
acct: string;
|
||||
};
|
||||
|
||||
export type AnnouncementStatus = {
|
||||
id: string;
|
||||
url: string;
|
||||
};
|
||||
|
||||
export type AnnouncementReaction = {
|
||||
name: string;
|
||||
count: number;
|
||||
me: boolean | null;
|
||||
url: string | null;
|
||||
static_url: string | null;
|
||||
};
|
||||
5
types/mastodon/application.ts
Normal file
5
types/mastodon/application.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
export type Application = {
|
||||
name: string;
|
||||
website?: string | null;
|
||||
vapid_key?: string | null;
|
||||
};
|
||||
13
types/mastodon/async_attachment.ts
Normal file
13
types/mastodon/async_attachment.ts
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import type { Meta } from "./attachment";
|
||||
|
||||
export type AsyncAttachment = {
|
||||
id: string;
|
||||
type: "unknown" | "image" | "gifv" | "video" | "audio";
|
||||
url: string | null;
|
||||
remote_url: string | null;
|
||||
preview_url: string;
|
||||
text_url: string | null;
|
||||
meta: Meta | null;
|
||||
description: string | null;
|
||||
blurhash: string | null;
|
||||
};
|
||||
47
types/mastodon/attachment.ts
Normal file
47
types/mastodon/attachment.ts
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
export type Sub = {
|
||||
// For Image, Gifv, and Video
|
||||
width?: number;
|
||||
height?: number;
|
||||
size?: string;
|
||||
aspect?: number;
|
||||
|
||||
// For Gifv and Video
|
||||
frame_rate?: string;
|
||||
|
||||
// For Audio, Gifv, and Video
|
||||
duration?: number;
|
||||
bitrate?: number;
|
||||
};
|
||||
|
||||
export type Focus = {
|
||||
x: number;
|
||||
y: number;
|
||||
};
|
||||
|
||||
export type Meta = {
|
||||
original?: Sub;
|
||||
small?: Sub;
|
||||
focus?: Focus;
|
||||
length?: string;
|
||||
duration?: number;
|
||||
fps?: number;
|
||||
size?: string;
|
||||
width?: number;
|
||||
height?: number;
|
||||
aspect?: number;
|
||||
audio_encode?: string;
|
||||
audio_bitrate?: string;
|
||||
audio_channel?: string;
|
||||
};
|
||||
|
||||
export type Attachment = {
|
||||
id: string;
|
||||
type: "unknown" | "image" | "gifv" | "video" | "audio";
|
||||
url: string;
|
||||
remote_url: string | null;
|
||||
preview_url: string | null;
|
||||
text_url: string | null;
|
||||
meta: Meta | null;
|
||||
description: string | null;
|
||||
blurhash: string | null;
|
||||
};
|
||||
16
types/mastodon/card.ts
Normal file
16
types/mastodon/card.ts
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
export type Card = {
|
||||
url: string;
|
||||
title: string;
|
||||
description: string;
|
||||
type: "link" | "photo" | "video" | "rich";
|
||||
image: string | null;
|
||||
author_name: string | null;
|
||||
author_url: string | null;
|
||||
provider_name: string | null;
|
||||
provider_url: string | null;
|
||||
html: string | null;
|
||||
width: number | null;
|
||||
height: number | null;
|
||||
embed_url: string | null;
|
||||
blurhash: string | null;
|
||||
};
|
||||
6
types/mastodon/context.ts
Normal file
6
types/mastodon/context.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
import type { Status } from "./status";
|
||||
|
||||
export type Context = {
|
||||
ancestors: Array<Status>;
|
||||
descendants: Array<Status>;
|
||||
};
|
||||
9
types/mastodon/conversation.ts
Normal file
9
types/mastodon/conversation.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import type { Account } from "./account";
|
||||
import type { Status } from "./status";
|
||||
|
||||
export type Conversation = {
|
||||
id: string;
|
||||
accounts: Array<Account>;
|
||||
last_status: Status | null;
|
||||
unread: boolean;
|
||||
};
|
||||
7
types/mastodon/emoji.ts
Normal file
7
types/mastodon/emoji.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
export type Emoji = {
|
||||
shortcode: string;
|
||||
static_url: string;
|
||||
url: string;
|
||||
visible_in_picker: boolean;
|
||||
category?: string;
|
||||
};
|
||||
6
types/mastodon/featured_tag.ts
Normal file
6
types/mastodon/featured_tag.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
export type FeaturedTag = {
|
||||
id: string;
|
||||
name: string;
|
||||
statuses_count: number;
|
||||
last_status_at: string;
|
||||
};
|
||||
6
types/mastodon/field.ts
Normal file
6
types/mastodon/field.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
export type Field = {
|
||||
name: string;
|
||||
value: string;
|
||||
verified_at?: string | null;
|
||||
verified?: boolean | false;
|
||||
};
|
||||
10
types/mastodon/filter.ts
Normal file
10
types/mastodon/filter.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
export type Filter = {
|
||||
id: string;
|
||||
phrase: string;
|
||||
context: Array<FilterContext>;
|
||||
expires_at: string | null;
|
||||
irreversible: boolean;
|
||||
whole_word: boolean;
|
||||
};
|
||||
|
||||
export type FilterContext = string;
|
||||
25
types/mastodon/follow_request.ts
Normal file
25
types/mastodon/follow_request.ts
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import type { Emoji } from "./emoji";
|
||||
import type { Field } from "./field";
|
||||
|
||||
export type FollowRequest = {
|
||||
id: number;
|
||||
username: string;
|
||||
acct: string;
|
||||
display_name: string;
|
||||
locked: boolean;
|
||||
bot: boolean;
|
||||
discoverable?: boolean;
|
||||
group: boolean;
|
||||
created_at: string;
|
||||
note: string;
|
||||
url: string;
|
||||
avatar: string;
|
||||
avatar_static: string;
|
||||
header: string;
|
||||
header_static: string;
|
||||
followers_count: number;
|
||||
following_count: number;
|
||||
statuses_count: number;
|
||||
emojis: Array<Emoji>;
|
||||
fields: Array<Field>;
|
||||
};
|
||||
5
types/mastodon/history.ts
Normal file
5
types/mastodon/history.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
export type History = {
|
||||
day: string;
|
||||
uses: number;
|
||||
accounts: number;
|
||||
};
|
||||
7
types/mastodon/identity_proof.ts
Normal file
7
types/mastodon/identity_proof.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
export type IdentityProof = {
|
||||
provider: string;
|
||||
provider_username: string;
|
||||
updated_at: string;
|
||||
proof_url: string;
|
||||
profile_url: string;
|
||||
};
|
||||
38
types/mastodon/instance.ts
Normal file
38
types/mastodon/instance.ts
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
import type { Account } from "./account";
|
||||
import type { Stats } from "./stats";
|
||||
import type { URLs } from "./urls";
|
||||
|
||||
export type Instance = {
|
||||
uri: string;
|
||||
title: string;
|
||||
description: string;
|
||||
email: string;
|
||||
version: string;
|
||||
thumbnail: string | null;
|
||||
urls: URLs | null;
|
||||
stats: Stats;
|
||||
languages: Array<string>;
|
||||
registrations: boolean;
|
||||
approval_required: boolean;
|
||||
invites_enabled?: boolean;
|
||||
configuration: {
|
||||
statuses: {
|
||||
max_characters: number;
|
||||
max_media_attachments?: number;
|
||||
characters_reserved_per_url?: number;
|
||||
};
|
||||
polls?: {
|
||||
max_options: number;
|
||||
max_characters_per_option: number;
|
||||
min_expiration: number;
|
||||
max_expiration: number;
|
||||
};
|
||||
};
|
||||
contact_account?: Account;
|
||||
rules?: Array<InstanceRule>;
|
||||
};
|
||||
|
||||
export type InstanceRule = {
|
||||
id: string;
|
||||
text: string;
|
||||
};
|
||||
7
types/mastodon/list.ts
Normal file
7
types/mastodon/list.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
export type List = {
|
||||
id: string;
|
||||
title: string;
|
||||
replies_policy: RepliesPolicy | null;
|
||||
};
|
||||
|
||||
export type RepliesPolicy = "followed" | "list" | "none";
|
||||
13
types/mastodon/marker.ts
Normal file
13
types/mastodon/marker.ts
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
export type Marker = {
|
||||
home?: {
|
||||
last_read_id: string;
|
||||
version: number;
|
||||
updated_at: string;
|
||||
};
|
||||
notifications?: {
|
||||
last_read_id: string;
|
||||
version: number;
|
||||
updated_at: string;
|
||||
unread_count?: number;
|
||||
};
|
||||
};
|
||||
6
types/mastodon/mention.ts
Normal file
6
types/mastodon/mention.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
export type Mention = {
|
||||
id: string;
|
||||
username: string;
|
||||
url: string;
|
||||
acct: string;
|
||||
};
|
||||
15
types/mastodon/notification.ts
Normal file
15
types/mastodon/notification.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import type { Account } from "./account";
|
||||
import type { Reaction } from "./reaction";
|
||||
import type { Status } from "./status";
|
||||
|
||||
export type Notification = {
|
||||
account: Account | null;
|
||||
created_at: string;
|
||||
id: string;
|
||||
status?: Status;
|
||||
reaction?: Reaction;
|
||||
type: NotificationType;
|
||||
target?: Account;
|
||||
};
|
||||
|
||||
export type NotificationType = string;
|
||||
14
types/mastodon/poll.ts
Normal file
14
types/mastodon/poll.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
export type Poll = {
|
||||
id: string;
|
||||
expires_at: string | null;
|
||||
expired: boolean;
|
||||
multiple: boolean;
|
||||
votes_count: number;
|
||||
options: Array<PollOption>;
|
||||
voted: boolean;
|
||||
};
|
||||
|
||||
export type PollOption = {
|
||||
title: string;
|
||||
votes_count: number | null;
|
||||
};
|
||||
9
types/mastodon/preferences.ts
Normal file
9
types/mastodon/preferences.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import type { StatusVisibility } from "./status";
|
||||
|
||||
export type Preferences = {
|
||||
"posting:default:visibility": StatusVisibility;
|
||||
"posting:default:sensitive": boolean;
|
||||
"posting:default:language": string | null;
|
||||
"reading:expand:media": "default" | "show_all" | "hide_all";
|
||||
"reading:expand:spoilers": boolean;
|
||||
};
|
||||
14
types/mastodon/push_subscription.ts
Normal file
14
types/mastodon/push_subscription.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
export type Alerts = {
|
||||
follow: boolean;
|
||||
favourite: boolean;
|
||||
mention: boolean;
|
||||
reblog: boolean;
|
||||
poll: boolean;
|
||||
};
|
||||
|
||||
export type PushSubscription = {
|
||||
id: string;
|
||||
endpoint: string;
|
||||
server_key: string;
|
||||
alerts: Alerts;
|
||||
};
|
||||
11
types/mastodon/reaction.ts
Normal file
11
types/mastodon/reaction.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import type { Account } from "./account";
|
||||
|
||||
export type Reaction = {
|
||||
count: number;
|
||||
me: boolean;
|
||||
name: string;
|
||||
url?: string;
|
||||
static_url?: string;
|
||||
accounts?: Array<Account>;
|
||||
account_ids?: Array<string>;
|
||||
};
|
||||
15
types/mastodon/relationship.ts
Normal file
15
types/mastodon/relationship.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
export type Relationship = {
|
||||
id: string;
|
||||
following: boolean;
|
||||
followed_by: boolean;
|
||||
blocking: boolean;
|
||||
blocked_by: boolean;
|
||||
muting: boolean;
|
||||
muting_notifications: boolean;
|
||||
requested: boolean;
|
||||
domain_blocking: boolean;
|
||||
showing_reblogs: boolean;
|
||||
endorsed: boolean;
|
||||
notifying: boolean;
|
||||
note: string | null;
|
||||
};
|
||||
16
types/mastodon/report.ts
Normal file
16
types/mastodon/report.ts
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import type { Account } from "./account";
|
||||
|
||||
export type Report = {
|
||||
id: string;
|
||||
action_taken: boolean;
|
||||
action_taken_at: string | null;
|
||||
status_ids: Array<string> | null;
|
||||
rule_ids: Array<string> | null;
|
||||
// These parameters don't exist in Pleroma
|
||||
category: Category | null;
|
||||
comment: string | null;
|
||||
forwarded: boolean | null;
|
||||
target_account?: Account | null;
|
||||
};
|
||||
|
||||
export type Category = "spam" | "violation" | "other";
|
||||
9
types/mastodon/results.ts
Normal file
9
types/mastodon/results.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import type { Account } from "./account";
|
||||
import type { Status } from "./status";
|
||||
import type { Tag } from "./tag";
|
||||
|
||||
export type Results = {
|
||||
accounts: Array<Account>;
|
||||
statuses: Array<Status>;
|
||||
hashtags: Array<Tag>;
|
||||
};
|
||||
3
types/mastodon/role.ts
Normal file
3
types/mastodon/role.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export type Role = {
|
||||
name: string;
|
||||
};
|
||||
9
types/mastodon/scheduled_status.ts
Normal file
9
types/mastodon/scheduled_status.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import type { Attachment } from "./attachment";
|
||||
import type { StatusParams } from "./status_params";
|
||||
|
||||
export type ScheduledStatus = {
|
||||
id: string;
|
||||
scheduled_at: string;
|
||||
params: StatusParams;
|
||||
media_attachments: Array<Attachment> | null;
|
||||
};
|
||||
9
types/mastodon/source.ts
Normal file
9
types/mastodon/source.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import type { Field } from "./field";
|
||||
|
||||
export type Source = {
|
||||
privacy: string | null;
|
||||
sensitive: boolean | null;
|
||||
language: string | null;
|
||||
note: string;
|
||||
fields: Array<Field>;
|
||||
};
|
||||
5
types/mastodon/stats.ts
Normal file
5
types/mastodon/stats.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
export type Stats = {
|
||||
user_count: number;
|
||||
status_count: number;
|
||||
domain_count: number;
|
||||
};
|
||||
50
types/mastodon/status.ts
Normal file
50
types/mastodon/status.ts
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
import type { Account } from "./account";
|
||||
import type { Application } from "./application";
|
||||
import type { Attachment } from "./attachment";
|
||||
import type { Card } from "./card";
|
||||
import type { Emoji } from "./emoji";
|
||||
import type { Mention } from "./mention";
|
||||
import type { Poll } from "./poll";
|
||||
import type { Reaction } from "./reaction";
|
||||
|
||||
export type Status = {
|
||||
id: string;
|
||||
uri: string;
|
||||
url: string;
|
||||
account: Account;
|
||||
in_reply_to_id: string | null;
|
||||
in_reply_to_account_id: string | null;
|
||||
reblog: Status | null;
|
||||
content: string;
|
||||
plain_content: string | null;
|
||||
created_at: string;
|
||||
edited_at: string | null;
|
||||
emojis: Emoji[];
|
||||
replies_count: number;
|
||||
reblogs_count: number;
|
||||
favourites_count: number;
|
||||
reblogged: boolean | null;
|
||||
favourited: boolean | null;
|
||||
muted: boolean | null;
|
||||
sensitive: boolean;
|
||||
spoiler_text: string;
|
||||
visibility: StatusVisibility;
|
||||
media_attachments: Array<Attachment>;
|
||||
mentions: Array<Mention>;
|
||||
tags: Array<StatusTag>;
|
||||
card: Card | null;
|
||||
poll: Poll | null;
|
||||
application: Application | null;
|
||||
language: string | null;
|
||||
pinned: boolean | null;
|
||||
emoji_reactions: Array<Reaction>;
|
||||
quote: boolean;
|
||||
bookmarked: boolean;
|
||||
};
|
||||
|
||||
export type StatusTag = {
|
||||
name: string;
|
||||
url: string;
|
||||
};
|
||||
|
||||
export type StatusVisibility = "public" | "unlisted" | "private" | "direct";
|
||||
12
types/mastodon/status_params.ts
Normal file
12
types/mastodon/status_params.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import type { StatusVisibility } from "./status";
|
||||
|
||||
export type StatusParams = {
|
||||
text: string;
|
||||
in_reply_to_id: string | null;
|
||||
media_ids: Array<string> | null;
|
||||
sensitive: boolean | null;
|
||||
spoiler_text: string | null;
|
||||
visibility: StatusVisibility | null;
|
||||
scheduled_at: string | null;
|
||||
application_id: number | null;
|
||||
};
|
||||
5
types/mastodon/status_source.ts
Normal file
5
types/mastodon/status_source.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
export type StatusSource = {
|
||||
id: string;
|
||||
text: string;
|
||||
spoiler_text: string;
|
||||
};
|
||||
8
types/mastodon/tag.ts
Normal file
8
types/mastodon/tag.ts
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
import type { History } from "./history";
|
||||
|
||||
export type Tag = {
|
||||
name: string;
|
||||
url: string;
|
||||
history: Array<History>;
|
||||
following?: boolean;
|
||||
};
|
||||
6
types/mastodon/token.ts
Normal file
6
types/mastodon/token.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
export type Token = {
|
||||
access_token: string;
|
||||
token_type: string;
|
||||
scope: string;
|
||||
created_at: number;
|
||||
};
|
||||
3
types/mastodon/urls.ts
Normal file
3
types/mastodon/urls.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export type URLs = {
|
||||
streaming_api: string;
|
||||
};
|
||||
Loading…
Reference in a new issue