fix(blog post skeleton loader): remove function to force blog post content to load on origin static content serving serverless application that leads to 404 error code as a response in return for inable to corretly address the blog post page route location with slug function to match page location of spa applications & rmeove default pre-load blog post skeleton that causes nuxt fails to generate corresponded directory output for each route of blog post dir with an index produced within & re-lint and refactored all project root sources to align with appropriate codebase prettiter and eslint rules to improvise code readabilitiies

config/head.ts

@@ -6,7 +6,7 @@ const description =
     'Former full time INTP & current INTJ  & part time ISTP whom is caffein overdosed hyperboosted by Monster meanwhile an egoistic capitalist that overthinks ;)'
 
 const Head: NuxtOptionsHead = {
-    title: 'toshiki.dev',
+    title: 'Toshiki\'s Homepage',
     meta: [
         { charset: 'utf-8' },
         { name: 'viewport', content: 'width=device-width, initial-scale=1' },
@@ -34,7 +34,7 @@ const Head: NuxtOptionsHead = {
         {
             hid: 'twitter:title',
             name: 'twitter:title',
-            content: 'andatoshiki'
+            content: 'Toshiki\'s Homepage'
         },
         {
             hid: 'twitter:description',
@@ -92,7 +92,8 @@ const Head: NuxtOptionsHead = {
         },
         {
             rel: 'stylesheet',
-            href: 'https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css' },
+            href: 'https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css'
+        },
         // mastodon profile website verification indicator a tag
         {
             rel: 'me',

src/pages/blog/_slug.vue

@@ -52,7 +52,7 @@ export default Vue.extend({
 
         const tags = getTags?.join(', ') || title
         const href = `https://toshiki.dev${this.$route?.path}`
-        const image = `https://toshiki.dev/og-images/${post.slug}.png`
+        const image = `/og-images/${post.slug}.png`
 
         return {
             bodyAttrs: {
@@ -71,7 +71,7 @@ export default Vue.extend({
                     description,
                     image,
                     keywords: `${tags}, toshiki, andatoshiki, blog, Anda Toshiki, homepage, portfolio, website, personal, personal website, real life, programming, coding`,
-                    url: href,
+                    url: href
                 },
                 [
                     {
@@ -97,31 +97,6 @@ export default Vue.extend({
                     {
                         name: 'twitter:data2',
                         content: `${this.getReadingTime} minutes`
-                    },
-                    {
-                        name: 'twitter:image',
-                        content: image
-                    },
-                    // open graph
-                    {
-                        name: 'og:type',
-                        content: 'article'
-                    },
-                    {
-                        name: 'og:site_name',
-                        content: `toshiki.dev/${this.$route?.path}`
-                    },
-                    {
-                        name: 'og:description',
-                        content: description
-                    },
-                    {
-                        name: 'og:image',
-                        content: image
-                    },
-                    {
-                        name: 'og:url',
-                        content: href
                     }
                 ]
             )
@@ -234,7 +209,6 @@ export default Vue.extend({
 
             <!-- <Waline /> -->
 
-
             <div class="mt-16 space-y-10">
                 <div v-if="getRelatedPosts.length > 0" class="space-y-2">
                     <h3 class="text-sm dark:text-white/30 text-black/50">Similar Posts</h3>

src/pages/blog/index.vue

@@ -16,7 +16,6 @@ export default Vue.extend({
             posts: [] as (Post[] & FetchReturn) | (Post[] & FetchReturn)[]
         }
     },
-    fetchOnServer: false,
     async fetch() {
         const posts = await this.$content('blog').sortBy('createdAt', 'desc').without(['body']).fetch<Post[]>()
 
@@ -24,7 +23,8 @@ export default Vue.extend({
     },
     head() {
         const title = "Toshiki's Blog"
-        const description = 'Real life stories anecdotes & developmental journeys for embarking your inspirations.'
+        const description =
+            "Real life stories anecdotes & developmental journeys for embarking your inspirations."
 
         return {
             title: 'Blog',
@@ -77,9 +77,7 @@ export default Vue.extend({
 </script>
 
 <template>
-    <LoadersBlog v-if="$fetchState.pending || $fetchState.error !== null" />
-
-    <div v-else class="mt-12 space-y-10">
+    <div class="pt-12 space-y-10 margin">
         <section v-for="[year, posts] in getYearGroupedPosts" :key="year" class="space-y-4">
             <h1 class="text-3xl font-bold text-black/90 dark:text-white/90">
                 {{ year }}