Merge pull request #368 from AstarNetwork/feat/astar-blog

components/blog/ArticleCard.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- post.slug is the slug of the article -->
   <NuxtLink
-    :href="blog ? i18n + '/blog/' + post.slug : post.link"
+    :href="blog ? localePath(`/blog/${post.slug}`) : post.link"
     :target="!blog && post.link.includes('https') ? '_blank' : '_self'"
     class="rounded-md bg-white/50 group transition h-full shadow-lg flex items-center justify-center overflow-hidden before:absolute before:h-0 before:w-0 before:rounded-full before:duration-300 before:ease-out hover:before:h-[600px] hover:before:w-[600px] before:bg-slate-50 relative"
   >
@@ -42,10 +42,9 @@
 
 <script setup lang="ts">
 import { ArrowRightIcon } from '@heroicons/vue/24/outline'
-const { locale } = useI18n()
-const i18n = locale.value === 'ja' ? '/ja' : ''
+const localePath = useLocalePath()
 
-const props = defineProps({
+defineProps({
   post: {
     type: Object,
     default: null,

components/blog/index.ts

@@ -7,9 +7,10 @@ import plugin from 'markdown-it-named-headings'
 export async function getPosts(
   filters: string = '',
   pagination: string = 'page: 1, pageSize: 100',
+  customLocale?: string,
 ) {
   const { $i18n } = useNuxtApp()
-  const locale = $i18n.locale
+  const locale = customLocale ?? $i18n.locale.value
   const md = new MarkdownIt().use(plugin)
   const strapiUrl = 'https://community.astar.network'
 
@@ -18,7 +19,7 @@ export async function getPosts(
       posts(
           filters: { ${filters} }
           pagination: { ${pagination} }
-          locale: "${locale.value}"
+          locale: "${locale}"
           sort: "publishedAt:DESC"
       ) {
         data {

pages/blog/[slug].vue

@@ -128,68 +128,75 @@ if (!isNumeric(id)) {
 else {
   const fetchData = async () => {
     const filter = `id: { eq: "${id}" }`
-    const fetchedPosts = await getPosts(filter)
-
-    if (fetchedPosts && fetchedPosts.length > 0) {
-      post.value = fetchedPosts[0] as unknown as Post // Cast to Post
-      console.log(`tags|${post.value.tags}|${post.value.tags.length}|`)
-
-      if (post.value) {
-        const orConditions = post.value.tags
-          .map(tag => `{ tags: { containsi: "${tag}" } }`)
-          .join(', ')
-
-        const filters = `id: { ne: "${id}" } and: { or: [${orConditions}] }`
-        const pagination = 'limit: 6'
-        posts.value = (await getPosts(filters, pagination)) as unknown as Post[]
-
-        const seoTitle = `${post.value.title} | ${meta.siteName}`
-        const seoDescription = post.value.summary
-        const seoUrl = `${meta.url}${route.fullPath}`
-
-        let twitterId = socialUrl.twitter.global.id
-        if (locale.value === 'ja') {
-          twitterId = socialUrl.twitter.japan.id
-        }
-        else if (locale.value === 'ko') {
-          twitterId = socialUrl.twitter.korea.id
-        }
-
-        useServerSeoMeta({
-          title: () => seoTitle,
-          description: () => seoDescription,
-          author: () => 'Astar Network Team',
-          ogSiteName: () => 'Astar Network',
-          ogLocale: () => locale.value,
-          ogTitle: () => seoTitle,
-          ogDescription: () => seoDescription,
-          ogImage: () => post.value?.image,
-          ogImageUrl: () => post.value?.image,
-          ogType: () => 'article',
-          ogUrl: () => seoUrl,
-          twitterSite: () => twitterId,
-          twitterCard: () => 'summary_large_image',
-          twitterTitle: () => seoTitle,
-          twitterDescription: () => seoDescription,
-          twitterImage: () => post.value?.image,
-        })
-
-        useSchemaOrg([
-          defineArticle({
-            author: {
-              name: 'Astar Network Team',
-            },
-          }),
-        ])
-
-        definePageMeta({
-          layout: false,
-        })
-      }
+
+    const localedPosts = await getPosts(filter)
+
+    if (localedPosts && localedPosts.length > 0) {
+      post.value = localedPosts[0] as unknown as Post
     }
     else {
-      router.push('/blog')
+      const defaultPosts = await getPosts(filter, '', 'en')
+
+      if (defaultPosts && defaultPosts.length > 0) {
+        post.value = defaultPosts[0] as unknown as Post
+      }
+    }
+
+    if (!post.value) {
+      router.back()
+      return
     }
+
+    const orConditions = post.value.tags
+      .map(tag => `{ tags: { containsi: "${tag}" } }`)
+      .join(', ')
+
+    const filters = `id: { ne: "${id}" } and: { or: [${orConditions}] }`
+    const pagination = 'limit: 6'
+    posts.value = (await getPosts(filters, pagination)) as unknown as Post[]
+
+    const seoTitle = `${post.value.title} | ${meta.siteName}`
+    const seoDescription = post.value.summary
+    const seoUrl = `${meta.url}${route.fullPath}`
+
+    let twitterId = socialUrl.twitter.global.id
+    if (locale.value === 'ja') {
+      twitterId = socialUrl.twitter.japan.id
+    }
+    else if (locale.value === 'ko') {
+      twitterId = socialUrl.twitter.korea.id
+    }
+
+    useServerSeoMeta({
+      title: () => seoTitle,
+      description: () => seoDescription,
+      author: () => 'Astar Network Team',
+      ogSiteName: () => 'Astar Network',
+      ogLocale: () => locale.value,
+      ogTitle: () => seoTitle,
+      ogDescription: () => seoDescription,
+      ogImage: () => post.value?.image,
+      ogImageUrl: () => post.value?.image,
+      ogType: () => 'article',
+      ogUrl: () => seoUrl,
+      twitterSite: () => twitterId,
+      twitterCard: () => 'summary_large_image',
+      twitterTitle: () => seoTitle,
+      twitterDescription: () => seoDescription,
+      twitterImage: () => post.value?.image,
+    })
+
+    useSchemaOrg([
+      defineArticle({
+        author: {
+          name: 'Astar Network Team',
+        },
+      }),
+    ])
+
+    definePageMeta({
+      layout: false,
+    })
   }
 
   fetchData()

pages/blog/index.vue

@@ -27,10 +27,14 @@
 import { meta } from '@/data/meta'
 import { getPosts } from '@/components/blog'
 
-const posts = await getPosts()
+let posts = await getPosts()
 const route = useRoute()
 const { t } = useI18n()
 
+if (posts.length === 0) {
+  posts = await getPosts('', 'page: 1, pageSize: 100', 'en')
+}
+
 const seoTitle = `${t('blog.title')} | ${meta.siteName} - ${t('meta.tagline')}`
 const seoDescription = t('blog.description')
 const seoUrl = `${meta.url}${route.fullPath}`