From 7d07e639c84e7efea46972d6ce333deaf66ad636 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Sat, 11 May 2024 20:13:35 -1000
Subject: [PATCH] perf: :zap: Slight performance changes

---
 app.vue         | 32 ++++++++++++++++++++++++++------
 layouts/app.vue | 12 ------------
 nuxt.config.ts  |  4 ++++
 3 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/app.vue b/app.vue
index 8dd3d91..621283b 100644
--- a/app.vue
+++ b/app.vue
@@ -5,12 +5,7 @@
 </template>
 
 <script setup lang="ts">
-useServerSeoMeta({
-    titleTemplate: (titleChunk) => {
-        return titleChunk ? `${titleChunk} · Lysand` : "Lysand";
-    },
-});
-
+import { convert } from "html-to-text";
 // Use SSR-safe IDs for Headless UI
 provideHeadlessUseId(() => useId());
 
@@ -18,8 +13,33 @@ const code = useRequestURL().searchParams.get("code");
 const appData = useAppData();
 const tokenData = useTokenData();
 const client = useMegalodon(tokenData);
+const instance = useInstance(client);
+const description = useExtendedDescription(client);
 const me = useMe();
 
+useSeoMeta({
+    titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} · Lysand` : "Lysand";
+    },
+    title: computed(() => instance.value?.title ?? ""),
+    ogImage: computed(() => instance.value?.banner),
+    twitterTitle: computed(() => instance.value?.title ?? ""),
+    twitterDescription: computed(() =>
+        convert(description.value?.content ?? ""),
+    ),
+    twitterImage: computed(() => instance.value?.banner),
+    description: computed(() => convert(description.value?.content ?? "")),
+    ogDescription: computed(() => convert(description.value?.content ?? "")),
+    ogSiteName: "Lysand",
+    colorScheme: "dark",
+});
+
+useHead({
+    htmlAttrs: {
+        lang: "en",
+    },
+});
+
 if (code) {
     if (appData.value) {
         client.value
diff --git a/layouts/app.vue b/layouts/app.vue
index 034bef9..c1e9af8 100644
--- a/layouts/app.vue
+++ b/layouts/app.vue
@@ -41,24 +41,12 @@
 </template>
 
 <script setup lang="ts">
-import { convert } from "html-to-text";
 import CollapsibleAside from "~/components/sidebars/collapsible-aside.vue";
 import { OverlayScrollbarsComponent } from "#imports";
 
 const tokenData = useTokenData();
-const client = useMegalodon(tokenData);
-const instance = useInstance(client);
-const description = useExtendedDescription(client);
 const { width } = useWindowSize();
 
-useServerSeoMeta({
-    title: instance.value?.title,
-    ogImage: instance.value?.banner,
-    description: convert(description.value?.content ?? ""),
-    ogSiteName: "Lysand",
-    colorScheme: "dark",
-});
-
 const { n } = useMagicKeys();
 
 watchEffect(async () => {
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 93b76c4..8465208 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -112,5 +112,9 @@ export default defineNuxtConfig({
     },
     devtools: {
         enabled: true,
+
+        timeline: {
+            enabled: true,
+        },
     },
 });