change seo for all pages

app/pages/collections.vue

@@ -21,13 +21,17 @@
 const TITLE = "Collections"
 const DESC = "Techit's personal-public collections"
 
-useHead({
+useSeoMeta({
   title: TITLE,
-  meta: [
-    { name: 'description', content: DESC },
-    { property: 'og:title', content: TITLE },
-    { property: 'og:description', content: DESC },
-    { property: 'og:type', content: 'website' }
-  ]
+  description: DESC,
+  ogTitle: TITLE + ' / ' + config.public.siteName,
+  ogDescription: DESC,
+  ogImage: post.value?.coverImage || undefined,
+  ogSiteName: config.public.siteName,
+  twitterCard: 'summary_large_image',
+  twitterTitle: TITLE + ' / ' + config.public.siteName,
+  twitterDescription: DESC,
+  twitterImage: post.value?.coverImage || undefined,
+  twitterSite: '@' + config.public.twitterUsername
 })
 </script>

app/pages/contact.vue

@@ -49,13 +49,17 @@
 const TITLE = "Contact"
 const DESC = "How to contact Techit"
 
-useHead({
+useSeoMeta({
   title: TITLE,
-  meta: [
-    { name: 'description', content: DESC },
-    { property: 'og:title', content: TITLE },
-    { property: 'og:description', content: DESC },
-    { property: 'og:type', content: 'website' }
-  ]
+  description: DESC,
+  ogTitle: TITLE + ' / ' + config.public.siteName,
+  ogDescription: DESC,
+  ogImage: post.value?.coverImage || undefined,
+  ogSiteName: config.public.siteName,
+  twitterCard: 'summary_large_image',
+  twitterTitle: TITLE + ' / ' + config.public.siteName,
+  twitterDescription: DESC,
+  twitterImage: post.value?.coverImage || undefined,
+  twitterSite: '@' + config.public.twitterUsername
 })
 </script>

app/pages/fonts.vue

@@ -49,13 +49,17 @@ const fontUrl = config.public?.fontUrl || 'https://fonts.thawiang.com/';
 const fontListFile = 'api/typefaces.json';
 const { fonts, error, pending } = useFontLists(fontUrl, fontListFile);
 
-useHead({
+useSeoMeta({
   title: TITLE,
-  meta: [
-    { name: 'description', content: DESC },
-    { property: 'og:title', content: TITLE },
-    { property: 'og:description', content: DESC },
-    { property: 'og:type', content: 'website' }
-  ]
+  description: DESC,
+  ogTitle: TITLE + ' / ' + config.public.siteName,
+  ogDescription: DESC,
+  ogImage: post.value?.coverImage || undefined,
+  ogSiteName: config.public.siteName,
+  twitterCard: 'summary_large_image',
+  twitterTitle: TITLE + ' / ' + config.public.siteName,
+  twitterDescription: DESC,
+  twitterImage: post.value?.coverImage || undefined,
+  twitterSite: '@' + config.public.twitterUsername
 })
 </script>

app/pages/index.vue

@@ -26,13 +26,13 @@
                 <p id="projects-paragraph-1">As I said above, I usually spend my free time learning more about software engineering. This includes server administration for <a class="link" href="https://dailitation.xyz">dailitation.xyz</a>. Over time, small and large projects have born and died.</p>
                 <p id="projects-paragraph-2">Let's go take a look of my projects collection!</p>
                 <div class="project-card-container">
-                    <a target="_blank" href="https://github.com/TechitWinner/warehouse" class="project-card">
+                    <!-- <a target="_blank" href="https://github.com/TechitWinner/warehouse" class="project-card">
                         <img src="https://files.thawia.ng/files/assets/warehouse.jpg">
                         <div class="project-card-content">
                             <h3>Warehouse</h3>
                             <p title="I planned it to be my API for personal website and other stuff; written in Rust and Axum.">I planned it to be my API for personal website and other stuff; written in Rust and Axum.</p>
                         </div>
-                   </a>
+                    </a> -->
                     <a target="_blank" href="https://github.com/TechitWinner/web" class="project-card">
                         <img src="https://files.thawia.ng/files/assets/web.png">
                         <div class="project-card-content">
@@ -59,13 +59,17 @@ const baseUrl = config.public.baseUrl
 const TITLE = "Home"
 const DESC = "Techit Thawiang is a 10th grader hobbyist developer, a math lover and a self-hoster who's exploring computer science."
 
-useHead({
+useSeoMeta({
   title: TITLE,
-  meta: [
-    { name: 'description', content: DESC },
-    { property: 'og:title', content: TITLE },
-    { property: 'og:description', content: DESC },
-    { property: 'og:type', content: 'website' }
-  ]
+  description: DESC,
+  ogTitle: TITLE + ' / ' + config.public.siteName,
+  ogDescription: DESC,
+  ogImage: post.value?.coverImage || undefined,
+  ogSiteName: config.public.siteName,
+  twitterCard: 'summary_large_image',
+  twitterTitle: TITLE + ' / ' + config.public.siteName,
+  twitterDescription: DESC,
+  twitterImage: post.value?.coverImage || undefined,
+  twitterSite: '@' + config.public.twitterUsername
 })
 </script>

app/pages/portal.vue

@@ -35,13 +35,17 @@ const TITLE = "Portal"
 const DESC = "Choose your way wisely."
 const baseUrl = config.public.baseUrl
 
-useHead({
+useSeoMeta({
   title: TITLE,
-  meta: [
-    { name: 'description', content: DESC },
-    { property: 'og:title', content: TITLE },
-    { property: 'og:description', content: DESC },
-    { property: 'og:type', content: 'website' }
-  ]
+  description: DESC,
+  ogTitle: TITLE + ' / ' + config.public.siteName,
+  ogDescription: DESC,
+  ogImage: post.value?.coverImage || undefined,
+  ogSiteName: config.public.siteName,
+  twitterCard: 'summary_large_image',
+  twitterTitle: TITLE + ' / ' + config.public.siteName,
+  twitterDescription: DESC,
+  twitterImage: post.value?.coverImage || undefined,
+  twitterSite: '@' + config.public.twitterUsername
 })
 </script>

app/pages/posts/[...slug].vue

@@ -37,16 +37,16 @@ useSeoMeta({
   title: post.value?.title,
   description: post.value?.description || 'Content from our blog',
   keywords: post.value?.tags?.join(', ') || 'blog, article, post',
-  ogTitle: post.value?.title + ' / thawia.ng',
+  ogTitle: post.value?.title + ' / ' + config.public.siteName,
   ogDescription: post.value?.description,
   ogType: 'article',
   ogUrl: ogUrl,
-  ogImage: post.value?.coverImage ? baseUrl + '/portal/f/assets/' + post.value?.coverImage : undefined,
+  ogImage: post.value?.coverImage || undefined,
   ogSiteName: config.public.siteName,
   twitterCard: 'summary_large_image',
-  twitterTitle: post.value?.title + ' / thawia.ng',
+  twitterTitle: post.value?.title + ' / ' + config.public.siteName,
   twitterDescription: post.value?.description,
-  twitterImage: post.value?.coverImage ? `${baseUrl}/portal/f/assets/${post.value?.coverImage}` : undefined,
+  twitterImage: post.value?.coverImage || undefined,
   twitterSite: '@' + config.public.twitterUsername
 })
 </script>

app/pages/posts/index.vue

@@ -17,13 +17,17 @@
 const TITLE = "Posts"
 const DESC = "Techit's posts and writings."
 
-useHead({
+useSeoMeta({
   title: TITLE,
-  meta: [
-    { name: 'description', content: DESC },
-    { property: 'og:title', content: TITLE },
-    { property: 'og:description', content: DESC },
-    { property: 'og:type', content: 'website' }
-  ]
+  description: DESC,
+  ogTitle: TITLE + ' / ' + config.public.siteName,
+  ogDescription: DESC,
+  ogImage: post.value?.coverImage || undefined,
+  ogSiteName: config.public.siteName,
+  twitterCard: 'summary_large_image',
+  twitterTitle: TITLE + ' / ' + config.public.siteName,
+  twitterDescription: DESC,
+  twitterImage: post.value?.coverImage || undefined,
+  twitterSite: '@' + config.public.twitterUsername
 })
 </script>

app/pages/terminal.vue

@@ -22,13 +22,17 @@ const TITLE = "Terminal"
 const DESC = "Terminal Emulator Simulator on thawia.ng by Techit Thawiang"
 const baseUrl = config.public.baseUrl
 
-useHead({
+useSeoMeta({
   title: TITLE,
-  meta: [
-    { name: 'description', content: DESC },
-    { property: 'og:title', content: TITLE },
-    { property: 'og:description', content: DESC },
-    { property: 'og:type', content: 'website' }
-  ]
+  description: DESC,
+  ogTitle: TITLE + ' / ' + config.public.siteName,
+  ogDescription: DESC,
+  ogImage: post.value?.coverImage || undefined,
+  ogSiteName: config.public.siteName,
+  twitterCard: 'summary_large_image',
+  twitterTitle: TITLE + ' / ' + config.public.siteName,
+  twitterDescription: DESC,
+  twitterImage: post.value?.coverImage || undefined,
+  twitterSite: '@' + config.public.twitterUsername
 })
 </script>