garbage-heap/vulpine-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

screaming

Browse source
This commit is contained in:
sam 2023-12-20 17:13:48 +01:00
parent a06dd22da4
commit 91f3f71d8d
Signed by: sam
GPG key ID: B4EF20DDE721CAA1
9 changed files with 86 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.prettierrc.json
View file

@ -3,6 +3,6 @@
"semi": true, "semi": true,
"useTabs": true, "useTabs": true,
"singleQuote": false, "singleQuote": false,
"printWidth": 100, "printWidth": 120,
"trailingComma": "all" "trailingComma": "all"
} }

6
index.html
View file

@ -1,12 +1,12 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en" class="dark">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title> <title>vulpine-fe</title>
</head> </head>
<body> <body class="bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-200">
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>

6
src/lib/api/entities/instance.ts Normal file
View file

@ -0,0 +1,6 @@
export default interface Instance {
/** The instance name */
title: string;
/** The instance favicon */
thumbnail?: string;
}

3
src/main.ts
View file

@ -6,6 +6,7 @@ import { i18n } from "./i18n";
import App from "./App.vue"; import App from "./App.vue";
import router from "./router"; import router from "./router";
import { useInstanceStore } from "./stores/instance";
const app = createApp(App); const app = createApp(App);
@ -13,4 +14,6 @@ app.use(createPinia());
app.use(router); app.use(router);
app.use(i18n); app.use(i18n);
useInstanceStore().fetchInstance();
app.mount("#app"); app.mount("#app");

12
src/stores/counter.ts
View file

@ -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
View 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
View 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 },
);
}

10
src/views/HomeView.vue
View file

@ -1,5 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import { watch } from "vue";
import { FwbDropdown, FwbListGroup, FwbListGroupItem } from "flowbite-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> </script>
<template> <template>

28
src/views/StatusView.vue
View file

@ -7,7 +7,10 @@ import apiFetch from "@/lib/api-fetch";
import { FwbSpinner } from "flowbite-vue"; import { FwbSpinner } from "flowbite-vue";
import VulStatus from "@/components/status/VulStatus.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 router = useRouter();
const route = useRoute(); const route = useRoute();
const username = ref(route.params.username); 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>); const { data, error } = useSWRV(() => `/api/v1/statuses/${statusId.value}`, apiFetch<Activity>);
// update username/status ID whenever we navigate to another page
watch( watch(
() => [route.params.username, route.params.statusId], () => [route.params.username, route.params.statusId],
([newUsername, newId]) => { ([newUsername, newId]) => {
@ -23,6 +27,7 @@ watch(
}, },
); );
// always have the correct username in the URL
watch( watch(
() => ({ activity: data.value, username: route.params.username }), () => ({ activity: data.value, username: route.params.username }),
({ activity, 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> </script>
<template> <template>