diff --git a/.prettierrc.json b/.prettierrc.json
index ffe4b1d..7b57a8a 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -3,6 +3,6 @@
"semi": true,
"useTabs": true,
"singleQuote": false,
- "printWidth": 100,
+ "printWidth": 120,
"trailingComma": "all"
}
diff --git a/index.html b/index.html
index dec5f90..ee44497 100644
--- a/index.html
+++ b/index.html
@@ -1,12 +1,12 @@
-
+
- Vite App
+ vulpine-fe
-
+
diff --git a/src/lib/api/entities/instance.ts b/src/lib/api/entities/instance.ts
new file mode 100644
index 0000000..b944d95
--- /dev/null
+++ b/src/lib/api/entities/instance.ts
@@ -0,0 +1,6 @@
+export default interface Instance {
+ /** The instance name */
+ title: string;
+ /** The instance favicon */
+ thumbnail?: string;
+}
diff --git a/src/main.ts b/src/main.ts
index f0bf8b1..93f686a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -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");
diff --git a/src/stores/counter.ts b/src/stores/counter.ts
deleted file mode 100644
index 00df41c..0000000
--- a/src/stores/counter.ts
+++ /dev/null
@@ -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 };
-});
diff --git a/src/stores/instance.ts b/src/stores/instance.ts
new file mode 100644
index 0000000..c035ec6
--- /dev/null
+++ b/src/stores/instance.ts
@@ -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("/api/v1/instance");
+ this.instance = resp;
+ },
+ },
+ getters: {
+ instanceName: (state) => state.instance?.title || "Akkoma",
+ },
+});
diff --git a/src/stores/title.ts b/src/stores/title.ts
new file mode 100644
index 0000000..e05e9b6
--- /dev/null
+++ b/src/stores/title.ts
@@ -0,0 +1,17 @@
+import { watch } from "vue";
+import { useInstanceStore } from "./instance";
+
+export default function watchTitle(
+ 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 },
+ );
+}
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index aa0fa0b..0efeacd 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,5 +1,15 @@
diff --git a/src/views/StatusView.vue b/src/views/StatusView.vue
index 2640747..600dc86 100644
--- a/src/views/StatusView.vue
+++ b/src/views/StatusView.vue
@@ -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);
+// 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 },
+// );