refactor: ♻️ Rewrite code page

This commit is contained in:
Jesse Wierzbinski 2024-12-02 23:03:38 +01:00
parent 5b3e9ce8b3
commit 8d618d5e7f
No known key found for this signature in database
2 changed files with 20 additions and 61 deletions

View file

@ -1,41 +0,0 @@
<template>
<div class="px-4 py-20 prose prose-invert mx-auto max-w-md">
<h2>Where is the mobile app?</h2>
<p>Versia Server is compatible with the Mastodon API, meaning it can be used with any Mastodon-compatible
client. This
includes the official Mastodon app, as well as many third-party clients.</p>
<h2>Recommended Clients</h2>
<ul class="w-full flex flex-col gap-3 mt-4 not-prose">
<li v-for="client of useConfig().RECOMMENDED_CLIENTS" :key="client.name" class="w-full">
<a :href="client.link" target="_blank"
class="rounded-sm ring-2 ring-white/10 px-4 py-2 w-full flex flex-row gap-3 items-center">
<img crossorigin="anonymous" :src="client.icon" class="h-10 w-10" :alt="`${client.name}'s logo'`" />
<div class="flex flex-col justify-between items-start">
<h2 class="text-gray-100 font-semibold">{{ client.name }}</h2>
<span class="underline text-primary2-700">{{ client.link }}</span>
</div>
</a>
</li>
</ul>
<p>
Many other clients exist, but <strong class="font-bold">they have not been tested for
compatibility</strong>. Bug reports are nevertheless welcome.
</p>
<h2>Main Issues</h2>
<ul>
<li>File uploads are inconsistent and don't work a lot of the time</li>
</ul>
<p>
Found a problem? Report it on <a href="https://github.com/versia-pub/server/issues/new/choose"
target="_blank" class="underline text-primary2-700">the issue tracker</a>.
</p>
</div>
</template>
<script lang="ts" setup>
definePageMeta({
layout: "app",
});
</script>

View file

@ -1,28 +1,28 @@
<template> <template>
<div class="flex min-h-screen relative flex-col justify-center px-6 py-12 lg:px-8"> <div class="h-svh flex items-center justify-center px-4">
<Card class="w-full max-w-md">
<div class="mx-auto max-w-md mt-10"> <CardHeader>
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Here's your code <CardTitle>Here's your code</CardTitle>
</h1> <CardDescription>You have signed in successfully.<br />Paste the following code into your app:
<p class="mt-6 text-lg leading-8 text-gray-300">You have signed in successfully. Your code is </CardDescription>
</p> </CardHeader>
<div class="prose prose-invert select-all mt-6"> <CardContent class="grid">
<pre <code
class="overflow-x-hidden whitespace-normal break-all bg-dark-500 ring-1 ring-white/10"><code class="text-wrap max-w-full">{{ code }}</code></pre> class="rounded bg-muted px-4 py-2 border text-center w-full font-mono text-sm font-semibold select-all">{{ code }}</code>
</div> </CardContent>
<p class="mt-6 text-lg leading-8 text-gray-300">Paste this code into the application you are signing in </Card>
to.
</p>
<p class="mt-6 text-lg leading-8 text-gray-300">
Found a problem? Report it on <a href="https://github.com/versia-pub/server/issues/new/choose"
target="_blank" class="underline text-primary2-700">the issue tracker</a>.
</p>
</div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "~/components/ui/card";
const params = useUrlSearchParams(); const params = useUrlSearchParams();
const code = params.code; const code = params.code;