mirror of
https://github.com/versia-pub/server.git
synced 2026-03-13 13:59:16 +01:00
Add interface to view post and user JSON data
This commit is contained in:
Jesse Wierzbinski
parent
342a8011f1
commit
db37510370
21 changed files with 248 additions and 122 deletions
65
pages/pages/[username]/[uuid].vue
Normal file
65
pages/pages/[username]/[uuid].vue
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
<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 class="code" v-html="code">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRoute } from "vue-router";
|
||||
import { getHighlighterCore } from "shiki/core";
|
||||
import getWasm from "shiki/wasm";
|
||||
|
||||
const location = window.location;
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
const data = await fetch(
|
||||
new URL(`/api/v1/statuses/${route.params.uuid}`, location.origin),
|
||||
{
|
||||
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",
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.code 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;
|
||||
--at-apply: "ring-1 ring-white/10 mt-4 bg-white/5 px-4 py-3 rounded";
|
||||
}
|
||||
|
||||
.code pre code {
|
||||
--at-apply: "block p-0";
|
||||
}
|
||||
</style>
|
||||
82
pages/pages/[username]/index.vue
Normal file
82
pages/pages/[username]/index.vue
Normal file
|
|
@ -0,0 +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 class="code" v-html="code">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRoute } from "vue-router";
|
||||
import { getHighlighterCore } from "shiki/core";
|
||||
import getWasm from "shiki/wasm";
|
||||
|
||||
const location = window.location;
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
const username = (route.params.username as string).replace("@", "");
|
||||
|
||||
const id = await fetch(
|
||||
new URL(`/api/v1/accounts/search?q=${username}`, location.origin),
|
||||
{
|
||||
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}`, location.origin),
|
||||
{
|
||||
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",
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.code 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;
|
||||
--at-apply: "ring-1 ring-white/10 mt-4 bg-white/5 px-4 py-3 rounded";
|
||||
}
|
||||
|
||||
.code pre code {
|
||||
--at-apply: "block p-0";
|
||||
}
|
||||
</style>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
</div>
|
||||
<div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
|
||||
<form class="space-y-6" method="POST"
|
||||
:action="`/auth/login?redirect_uri=${redirect_uri}&response_type=${response_type}&client_id=${client_id}&scope=${scope}`">
|
||||
: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>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
</div>
|
||||
<div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
|
||||
<form class="space-y-6" method="POST"
|
||||
:action="`/auth/redirect?redirect_uri=${encodeURIComponent(redirect_uri)}&client_id=${client_id}&code=${code}`">
|
||||
:action="`/api/auth/redirect?redirect_uri=${encodeURIComponent(redirect_uri)}&client_id=${client_id}&code=${code}`">
|
||||
<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
|
||||
account?</h1>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ import authorizeVue from "./pages/oauth/authorize.vue";
|
|||
import redirectVue from "./pages/oauth/redirect.vue";
|
||||
import registerIndexVue from "./pages/register/index.vue";
|
||||
import successVue from "./pages/register/success.vue";
|
||||
import statusVue from "./pages/[username]/[uuid].vue";
|
||||
import userVue from "./pages/[username]/index.vue";
|
||||
|
||||
export default [
|
||||
{ path: "/", component: indexVue },
|
||||
|
|
@ -11,4 +13,6 @@ export default [
|
|||
{ path: "/oauth/redirect", component: redirectVue },
|
||||
{ path: "/register", component: registerIndexVue },
|
||||
{ path: "/register/success", component: successVue },
|
||||
{ path: "/:username/:uuid", component: statusVue },
|
||||
{ path: "/:username", component: userVue },
|
||||
] as RouteRecordRaw[];
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue