Merge pull request #1487

src/app/blog/[blogId]/MoreBlogs.tsx

@@ -0,0 +1,52 @@
+import { Pagination } from "swiper/modules"
+import { Swiper, SwiperSlide } from "swiper/react"
+
+import { Box, Stack, Typography } from "@mui/material"
+
+import ArticleCard from "@/components/ArticleCard"
+
+const MoreBlogs = props => {
+  const { blogs, title, ...restProps } = props
+
+  return (
+    <Box {...restProps}>
+      <Typography
+        variant="h1"
+        sx={{
+          textAlign: "center",
+          mt: ["3rem", "5rem"],
+          mb: ["2rem", "3rem"],
+        }}
+      >
+        {title}
+      </Typography>
+
+      <Swiper
+        slidesPerView={1}
+        spaceBetween={0}
+        centeredSlides
+        pagination={{
+          clickable: true,
+        }}
+        modules={[Pagination]}
+        className="!pb-[16px] !sm:pb-[28px]"
+      >
+        {props.blogs.map(blog => (
+          <SwiperSlide key={blog.title}>
+            <Stack
+              direction="row"
+              sx={{
+                justifyContent: ["center", "center", "space-between"],
+              }}
+              className="wrapper"
+            >
+              <ArticleCard blog={blog} />
+            </Stack>
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    </Box>
+  )
+}
+
+export default MoreBlogs

src/app/blog/[blogId]/actions.ts

@@ -0,0 +1,17 @@
+"use server"
+
+import { fetchBlogDetailURL } from "@/apis/blog"
+
+export const fetchBlogContent = async (blogId: string) => {
+  const response = await fetch(fetchBlogDetailURL(blogId))
+
+  if (response.ok) {
+    const blogContent = await response.text()
+    if (!blogContent) {
+      throw new Error("Not found")
+    }
+    return blogContent
+  } else {
+    throw new Error("Failed to fetch blog content")
+  }
+}

src/app/blog/[blogId]/detail.tsx

@@ -9,18 +9,18 @@ import rehypeRaw from "rehype-raw"
 import remarkGfm from "remark-gfm"
 import remarkMath from "remark-math"
 
-import { Box, Typography } from "@mui/material"
+import { Box } from "@mui/material"
 import { styled } from "@mui/system"
 
-import { fetchBlogDetailURL } from "@/apis/blog"
 import blogSource from "@/assets/blog/main.data.json"
 import LoadingPage from "@/components/LoadingPage"
 import { LANGUAGE_MAP } from "@/constants"
 import useCheckViewport from "@/hooks/useCheckViewport"
 import useUserLanguage from "@/hooks/useUserLanguage"
 import { filterBlogsByLanguage } from "@/utils"
 
-import Articles from "./articles"
+import MoreBlogs from "./MoreBlogs"
+import { fetchBlogContent } from "./actions"
 import TOC from "./components/tableOfContents"
 
 const BlogContainer = styled(Box)(
@@ -61,36 +61,37 @@ const BlogDetail = props => {
   const blogsWithLang = useMemo(() => filterBlogsByLanguage(blogSource, language), [blogSource, language])
 
   useEffect(() => {
-    const regex = /([^_]*?)_lang_[^_]+/g
-    const blogIdMatch = blogId?.match(regex)
-
-    const blogItemWithLang = blogSource.find(item => item.id === `${blogId}_lang_${language}`)
-
-    if ((!blogIdMatch && language === "en") || (blogIdMatch && language !== "en") || (!blogIdMatch && language !== "en" && !blogItemWithLang)) {
-      let anchors = [...document.querySelectorAll("a")]
-      anchors.map(anchor => {
-        if (anchor.href.includes("/Content/")) {
-          anchor.setAttribute("target", "")
+    async function fetchCurrentBlog() {
+      const regex = /([^_]*?)_lang_[^_]+/g
+      const blogIdMatch = blogId?.match(regex)
+
+      const blogItemWithLang = blogSource.find(item => item.id === `${blogId}_lang_${language}`)
+
+      if ((!blogIdMatch && language === "en") || (blogIdMatch && language !== "en") || (!blogIdMatch && language !== "en" && !blogItemWithLang)) {
+        let anchors = [...document.querySelectorAll("a")]
+        anchors.map(anchor => {
+          if (anchor.href.includes("/Content/")) {
+            anchor.setAttribute("target", "")
+          }
+          return anchor
+        })
+        try {
+          setLoading(true)
+          const text = await fetchBlogContent(blogId)
+          setBlogContent(text)
+        } catch (_error) {
+          router.push("/404")
+        } finally {
+          setLoading(false)
         }
-        return anchor
-      })
-      try {
-        setLoading(true)
-        fetch(fetchBlogDetailURL(blogId))
-          .then(response => response.text())
-          .then(text => {
-            setLoading(false)
-            setBlogContent(text)
-          })
-      } catch (_error) {
-        router.push("/404")
+      } else if (blogIdMatch && language === "en") {
+        const nextBlogId = blogId.replace(regex, "$1")
+        router.push(`/blog/${nextBlogId}`)
+      } else if (blogItemWithLang) {
+        router.push(`/blog/${blogId}_lang_${language}`)
       }
-    } else if (blogIdMatch && language === "en") {
-      const nextBlogId = blogId.replace(regex, "$1")
-      router.push(`/blog/${nextBlogId}`)
-    } else if (blogItemWithLang) {
-      router.push(`/blog/${blogId}_lang_${language}`)
     }
+    fetchCurrentBlog()
   }, [blogId, language])
 
   useEffect(() => {
@@ -119,21 +120,8 @@ const BlogDetail = props => {
               className="markdown-body"
             />
           </BlogContainer>
-          {isPortrait ? (
-            <Box sx={{ paddingBottom: "10rem" }}>
-              <Typography
-                variant="h1"
-                sx={{
-                  textAlign: "center",
-                  mt: ["3rem", "5rem"],
-                  mb: ["2rem", "3rem"],
-                }}
-              >
-                {LANGUAGE_MAP[language].more_articles}
-              </Typography>
-              <Articles blogs={moreBlog} />
-            </Box>
-          ) : null}
+
+          {!!isPortrait && <MoreBlogs sx={{ pb: "10rem" }} blogs={moreBlog} title={LANGUAGE_MAP[language].more_articles}></MoreBlogs>}
         </Box>
       )}
     </Box>