build: Add explanations for which apps can be used, add link to registration page in sidebar

This commit is contained in:
Jesse Wierzbinski 2024-04-25 20:10:44 -10:00
parent a45c04258e
commit c29cae2955
No known key found for this signature in database
5 changed files with 98 additions and 37 deletions

View file

@ -21,13 +21,20 @@
<div class="flex flex-col gap-3 mt-auto">
<h3 class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
Account</h3>
<NuxtLink>
<ButtonsBase disabled
<NuxtLink href="/about/apps">
<ButtonsBase
class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 overflow-hidden h-12 w-full duration-200">
<Icon name="tabler:login" class="shrink-0 text-2xl" />
<span class="pr-28 line-clamp-1">Sign In</span>
</ButtonsBase>
</NuxtLink>
<NuxtLink href="/register">
<ButtonsBase
class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 overflow-hidden h-12 w-full duration-200">
<Icon name="tabler:certificate" class="shrink-0 text-2xl" />
<span class="pr-28 line-clamp-1">Register</span>
</ButtonsBase>
</NuxtLink>
</div>
</aside>
</template>

View file

@ -94,39 +94,53 @@ const props = defineProps<{
const skeleton = computed(() => !props.account);
const formattedJoin = computed(() => Intl.DateTimeFormat("en-US", {
month: "long",
year: "numeric",
}).format(new Date(props.account?.created_at ?? 0)));
const formattedJoin = computed(() =>
Intl.DateTimeFormat("en-US", {
month: "long",
year: "numeric",
}).format(new Date(props.account?.created_at ?? 0)),
);
const parsedNote = ref("");
const parsedFields: Ref<{
name: string;
value: string;
}[]> = ref([]);
const parsedFields: Ref<
{
name: string;
value: string;
}[]
> = ref([]);
watch(skeleton, async () => {
if (skeleton.value) return;
parsedNote.value = (await useParsedContent(
props.account?.note ?? "",
props.account?.emojis ?? [],
[],
)).value;
parsedFields.value = await Promise.all(
props.account?.fields.map(async (field) => ({
name: await (await useParsedContent(
field.name,
watch(
skeleton,
async () => {
if (skeleton.value) return;
parsedNote.value = (
await useParsedContent(
props.account?.note ?? "",
props.account?.emojis ?? [],
[]
)).value,
value: await (await useParsedContent(
field.value,
props.account?.emojis ?? [],
[]
)).value,
})) ?? [],
);
}, {
immediate: true,
});
[],
)
).value;
parsedFields.value = await Promise.all(
props.account?.fields.map(async (field) => ({
name: await (
await useParsedContent(
field.name,
props.account?.emojis ?? [],
[],
)
).value,
value: await (
await useParsedContent(
field.value,
props.account?.emojis ?? [],
[],
)
).value,
})) ?? [],
);
},
{
immediate: true,
},
);
</script>