Join lines broken by newlines to a long line.

Join paragraph lines that are broken by newlines from a long paragraph to a
long line. If the current line is a part of a block area, like pre, code,
blockquote, skip it.

src/components/article/article_body/ArticleBody.astro

@@ -0,0 +1,37 @@
+---
+// get rendered ArticleBodyContent HTML
+const html = await Astro.slots.render("default");
+
+// If some lines are not started with ASCII character,
+// join them to their previous line.
+// This is important.
+// Because I add one newline character to wrap Chinese.
+const arr = html.split("\n");
+let articleHTMLFinal = arr[0];
+// Whether the current line belongs to the area where
+// the line break should be kept.
+let remainIntactArea = false;
+for (let i = 1; i < arr.length; i++) {
+  if (arr[i].match(/^(<pre|<code|<blockquote|<table)/) !== null) {
+    remainIntactArea = true;
+  } else {
+    remainIntactArea = false;
+  }
+  if (
+    // If the first character is not ascii character,
+    // or the final character of previous line is not character.
+    // AND
+    // Current line should not belong to area that remains intact.
+    (arr[i].charAt(0).match(/[ -~]/) === null ||
+      arr[i - 1].charAt(arr[i - 1].length - 1).match(/[ -~]/) === null) &&
+    !remainIntactArea
+  ) {
+    articleHTMLFinal += arr[i];
+  } else {
+    articleHTMLFinal += "\n";
+    articleHTMLFinal += arr[i];
+  }
+}
+---
+
+<Fragment set:html={articleHTMLFinal} />

src/components/article/article_body/ArticleBodyWrapper.astro

@@ -0,0 +1,18 @@
+---
+import type { CollectionKey } from "astro:content";
+import ArticleBody from "./ArticleBody.astro";
+import ArticleBodyContent from "./ArticleBodyContent.astro";
+
+interface Props {
+  articleSlug: string;
+  collectionName: CollectionKey;
+}
+const { articleSlug, collectionName } = Astro.props;
+---
+
+<ArticleBody>
+  <ArticleBodyContent
+    collectionName={collectionName}
+    articleSlug={articleSlug}
+  />
+</ArticleBody>

src/pages/404.astro

@@ -2,11 +2,11 @@
 import DefaultLayout from "../layouts/DefaultLayout.astro";
 import Nav from "../components/Nav.astro";
 import Footer from "../components/Footer.astro";
-import ArticleBody from "../components/article/ArticleBody.astro";
+import ArticleBodyWrapper from "../components/article/article_body/ArticleBodyWrapper.astro";
 ---
 
 <DefaultLayout title="404">
   <Nav />
-  <ArticleBody collectionName="site" articleSlug="404" />
+  <ArticleBodyWrapper collectionName="site" articleSlug="404" />
   <Footer />
 </DefaultLayout>

src/pages/article/blog/[...blog].astro

@@ -7,7 +7,7 @@ import type {
 } from "astro:content";
 import Footer from "../../../components/Footer.astro";
 import Nav from "../../../components/Nav.astro";
-import ArticleBody from "../../../components/article/ArticleBody.astro";
+import ArticleBodyWrapper from "../../../components/article/article_body/ArticleBodyWrapper.astro";
 import DefaultLayout from "../../../layouts/DefaultLayout.astro";
 
 export async function getStaticPaths() {
@@ -29,6 +29,6 @@ const articlePrettyName:string = entry.id.split("/").pop()!.replace(".md", "");
 
 <DefaultLayout title=`${articlePrettyName} - 李守中`>
   <Nav />
-  <ArticleBody collectionName="blog" articleSlug={entry.slug} />
+  <ArticleBodyWrapper collectionName="blog" articleSlug={entry.slug} />
   <Footer />
 </DefaultLayout>

src/pages/article/note/[...note].astro

@@ -7,7 +7,7 @@ import type {
 } from "astro:content";
 import Footer from "../../../components/Footer.astro";
 import Nav from "../../../components/Nav.astro";
-import ArticleBody from "../../../components/article/ArticleBody.astro";
+import ArticleBodyWrapper from "../../../components/article/article_body/ArticleBodyWrapper.astro";
 import DefaultLayout from "../../../layouts/DefaultLayout.astro";
 
 export async function getStaticPaths() {
@@ -29,6 +29,6 @@ const articlePrettyName:string = entry.id.split("/").pop()!.replace(".md", "");
 
 <DefaultLayout title=`${articlePrettyName} - 李守中`>
   <Nav />
-  <ArticleBody collectionName="note" articleSlug={entry.slug} />
+  <ArticleBodyWrapper collectionName="note" articleSlug={entry.slug} />
   <Footer />
 </DefaultLayout>

src/pages/article/translation/[...translation].astro

@@ -7,7 +7,7 @@ import type {
 } from "astro:content";
 import Footer from "../../../components/Footer.astro";
 import Nav from "../../../components/Nav.astro";
-import ArticleBody from "../../../components/article/ArticleBody.astro";
+import ArticleBodyWrapper from "../../../components/article/article_body/ArticleBodyWrapper.astro";
 import DefaultLayout from "../../../layouts/DefaultLayout.astro";
 
 export async function getStaticPaths() {
@@ -29,6 +29,6 @@ const articlePrettyName:string = entry.id.split("/").pop()!.replace(".md", "");
 
 <DefaultLayout title=`${articlePrettyName} - 李守中`>
   <Nav />
-  <ArticleBody collectionName="translation" articleSlug={entry.slug} />
+  <ArticleBodyWrapper collectionName="translation" articleSlug={entry.slug} />
   <Footer />
 </DefaultLayout>

src/pages/index.astro

@@ -2,11 +2,11 @@
 import DefaultLayout from "../layouts/DefaultLayout.astro";
 import Nav from "../components/Nav.astro";
 import Footer from "../components/Footer.astro";
-import ArticleBody from "../components/article/ArticleBody.astro";
+import ArticleBodyWrapper from "../components/article/article_body/ArticleBodyWrapper.astro";
 ---
 
 <DefaultLayout title="李守中">
   <Nav />
-  <ArticleBody collectionName="site" articleSlug="关于本站" />
+  <ArticleBodyWrapper collectionName="site" articleSlug="关于本站" />
   <Footer />
 </DefaultLayout>