screaming
This commit is contained in:
parent
a06dd22da4
commit
91f3f71d8d
GPG key ID:
B4EF20DDE721CAA1
9 changed files with 86 additions and 16 deletions
|
|
@ -3,6 +3,6 @@
|
|||
"semi": true,
|
||||
"useTabs": true,
|
||||
"singleQuote": false,
|
||||
"printWidth": 100,
|
||||
"printWidth": 120,
|
||||
"trailingComma": "all"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
<title>vulpine-fe</title>
|
||||
</head>
|
||||
<body>
|
||||
<body class="bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-200">
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
|
|
|
|||
6
src/lib/api/entities/instance.ts
Normal file
6
src/lib/api/entities/instance.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
export default interface Instance {
|
||||
/** The instance name */
|
||||
title: string;
|
||||
/** The instance favicon */
|
||||
thumbnail?: string;
|
||||
}
|
||||
|
|
@ -6,6 +6,7 @@ import { i18n } from "./i18n";
|
|||
|
||||
import App from "./App.vue";
|
||||
import router from "./router";
|
||||
import { useInstanceStore } from "./stores/instance";
|
||||
|
||||
const app = createApp(App);
|
||||
|
||||
|
|
@ -13,4 +14,6 @@ app.use(createPinia());
|
|||
app.use(router);
|
||||
app.use(i18n);
|
||||
|
||||
useInstanceStore().fetchInstance();
|
||||
|
||||
app.mount("#app");
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
import { ref, computed } from "vue";
|
||||
import { defineStore } from "pinia";
|
||||
|
||||
export const useCounterStore = defineStore("counter", () => {
|
||||
const count = ref(0);
|
||||
const doubleCount = computed(() => count.value * 2);
|
||||
function increment() {
|
||||
count.value++;
|
||||
}
|
||||
|
||||
return { count, doubleCount, increment };
|
||||
});
|
||||
18
src/stores/instance.ts
Normal file
18
src/stores/instance.ts
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import apiFetch from "@/lib/api-fetch";
|
||||
import type Instance from "@/lib/api/entities/instance";
|
||||
import { defineStore } from "pinia";
|
||||
|
||||
export const useInstanceStore = defineStore("instance", {
|
||||
state: () => ({
|
||||
instance: undefined as Instance | undefined,
|
||||
}),
|
||||
actions: {
|
||||
async fetchInstance() {
|
||||
const resp = await apiFetch<Instance>("/api/v1/instance");
|
||||
this.instance = resp;
|
||||
},
|
||||
},
|
||||
getters: {
|
||||
instanceName: (state) => state.instance?.title || "Akkoma",
|
||||
},
|
||||
});
|
||||
17
src/stores/title.ts
Normal file
17
src/stores/title.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import { watch } from "vue";
|
||||
import { useInstanceStore } from "./instance";
|
||||
|
||||
export default function watchTitle<T extends object | undefined>(
|
||||
callback: (obj: T | undefined) => string | undefined,
|
||||
obj: T | undefined = undefined,
|
||||
) {
|
||||
const instanceStore = useInstanceStore();
|
||||
watch(
|
||||
() => ({ obj, instanceName: instanceStore.instanceName }),
|
||||
({ obj, instanceName }) => {
|
||||
const text = callback(obj);
|
||||
document.title = text ? `${text} - ${instanceName}` : instanceName;
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
}
|
||||
|
|
@ -1,5 +1,15 @@
|
|||
<script setup lang="ts">
|
||||
import { watch } from "vue";
|
||||
import { FwbDropdown, FwbListGroup, FwbListGroupItem } from "flowbite-vue";
|
||||
import { useInstanceStore } from "@/stores/instance";
|
||||
|
||||
const instanceStore = useInstanceStore();
|
||||
|
||||
watch(
|
||||
() => instanceStore.instanceName,
|
||||
(name) => document.title = `Home - ${name}`,
|
||||
{ immediate: true },
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,10 @@ import apiFetch from "@/lib/api-fetch";
|
|||
|
||||
import { FwbSpinner } from "flowbite-vue";
|
||||
import VulStatus from "@/components/status/VulStatus.vue";
|
||||
import { useInstanceStore } from "@/stores/instance";
|
||||
import watchTitle from "@/stores/title";
|
||||
|
||||
const instanceStore = useInstanceStore();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const username = ref(route.params.username);
|
||||
|
|
@ -15,6 +18,7 @@ const statusId = ref(route.params.statusId);
|
|||
|
||||
const { data, error } = useSWRV(() => `/api/v1/statuses/${statusId.value}`, apiFetch<Activity>);
|
||||
|
||||
// update username/status ID whenever we navigate to another page
|
||||
watch(
|
||||
() => [route.params.username, route.params.statusId],
|
||||
([newUsername, newId]) => {
|
||||
|
|
@ -23,6 +27,7 @@ watch(
|
|||
},
|
||||
);
|
||||
|
||||
// always have the correct username in the URL
|
||||
watch(
|
||||
() => ({ activity: data.value, username: route.params.username }),
|
||||
({ activity, username }) => {
|
||||
|
|
@ -34,6 +39,29 @@ watch(
|
|||
}
|
||||
},
|
||||
);
|
||||
|
||||
watchTitle((activity) => {
|
||||
if (!activity) return "Status";
|
||||
const user = activity.account.display_name;
|
||||
let text = activity.spoiler_text || activity.content || "N/A";
|
||||
return `${user}: "${text.length > 29 ? text.slice(0, 30) + "…" : text}"`;
|
||||
}, data.value);
|
||||
|
||||
// update page title based on the post's content
|
||||
// watch(
|
||||
// () => ({ activity: data.value, instanceName: instanceStore.instanceName }),
|
||||
// ({ activity, instanceName }) => {
|
||||
// if (!activity) {
|
||||
// document.title = `Status - ${instanceName}`;
|
||||
// return;
|
||||
// }
|
||||
|
||||
// const user = activity.account.display_name;
|
||||
// let text = activity.spoiler_text || activity.content || "N/A";
|
||||
// document.title = `${user}: "${text.length > 29 ? text.slice(0, 30) + "…" : text}" - ${instanceName}`;
|
||||
// },
|
||||
// { immediate: true },
|
||||
// );
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
Loading…
Reference in a new issue